/* 画面共通の見た目。機能を追加しても同じクラスでレイアウトを再利用できる。 */
:root {
  --ink:#273b37;
  --muted:#526b64;
  --green:#226957;
  --pale:#edf5ee;
  --border:#c8d8cc;
  --cream:#f7f8f2;
  --red:#9c2f33}

* {
  box-sizing:border-box}
body {
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font:16px/1.7 "Yu Gothic",Meiryo,sans-serif}
a {
  color:var(--green);
  text-underline-offset:4px}
h1 {
  font-size:2rem;
  margin:8px 0 16px}
h2 {
  font-size:1.2rem}
h3 {
  font-size:1.05rem}
small,.eyebrow {
  color:var(--muted)}
.eyebrow {
  letter-spacing:.14em;
  font-size:.75rem;
  font-weight:700}
.topbar {
  padding:18px 30px;
  background:#fff;
  border-bottom:1px solid var(--border);
  display:flex;
  gap:25px;
  align-items:center}
.topbar .user {
  margin-left:auto}
.brand {
  font-size:1.6rem;
  font-weight:800;
  text-decoration:none}
.layout {
  display:grid;
  grid-template-columns:230px minmax(0,1fr);
  max-width:1500px;
  margin:auto}
aside {
  padding:24px 18px}
aside nav {
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-top:15px}
aside nav a {
  padding:8px 12px;
  text-decoration:none;
  border-radius:8px}
aside nav a:hover,aside nav a[aria-current=page] {
  background:#dbeade}
/* 下部タブバーはスマホ・タブレットだけで使う（下の@mediaで表示する）。 */
.tabbar {
  display:none}
main {
  padding:30px;
  min-width:0;
  min-height:80vh}
.card {
  background:#fff;
  border:1px solid var(--border);
  border-radius:15px;
  padding:24px;
  margin:16px 0}
.grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:18px}
.grid .card {
  margin:0}
.narrow {
  max-width:560px;
  margin:30px auto}
.form-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px}
.wide {
  grid-column:1/-1}
label {
  display:block;
  font-weight:600;
  margin-bottom:12px}
input,textarea,select {
  display:block;
  width:100%;
  padding:10px 12px;
  margin-top:5px;
  border:1px solid #92aaa0;
  border-radius:7px;
  background:white;
  color:var(--ink);
  font:inherit}
textarea {
  min-height:80px;
  resize:vertical}
input[type=checkbox] {
  display:inline-block;
  width:18px;
  height:18px;
  margin-right:8px}
.check {
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-right:18px;
  font-weight:400}
fieldset {
  border:1px solid var(--border);
  border-radius:8px;
  margin-bottom:20px;
  padding:16px}
button,.button {
  display:inline-block;
  border:0;
  border-radius:8px;
  padding:10px 17px;
  font:inherit;
  font-weight:700;
  background:var(--green);
  color:white;
  cursor:pointer;
  text-decoration:none}
button:disabled {
  opacity:.6;
  cursor:default}
button.secondary {
  background:var(--pale);
  color:var(--green)}
button.danger {
  background:#fff0f0;
  color:var(--red);
  margin-top:10px}
button:hover,.button:hover {
  filter:brightness(.95)}
:focus-visible {
  outline:3px solid #b77b12;
  outline-offset:3px}
.notice,.error {
  padding:14px 20px;
  border-radius:8px;
  background:#e3f1e8;
  border-left:4px solid var(--green)}
.error {
  background:#fff0ed;
  border-color:var(--red)}
.badge {
  display:inline-block;
  font-size:.8rem;
  border-radius:20px;
  padding:3px 12px;
  background:var(--pale);
  color:var(--green)}
.chips,.actions {
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:20px}
.inline,.list-row {
  display:flex;
  align-items:end;
  gap:12px;
  flex-wrap:wrap}
.inline label {
  margin:0;
  flex:1;
  min-width:140px}
.list-row {
  align-items:center;
  border-bottom:1px solid var(--border);
  padding:15px 0}
.grow {
  flex:1}
.list-row form {
  margin:0}
.pre {
  white-space:pre-wrap;
  overflow-wrap:anywhere}
.price {
  font-size:2rem;
  font-weight:800}
.price small {
  font-size:.9rem}
.selected-card {
  border:2px solid var(--green)}
.week {
  display:grid;
  grid-template-columns:repeat(7,minmax(110px,1fr));
  overflow-x:auto;
  gap:6px}
.day {
  background:#fff;
  border:1px solid var(--border);
  border-radius:8px;
  padding:10px}
.day h3 {
  font-size:.75rem}
.day p {
  font-size:.85rem}
.photo {
  width:100%;
  height:220px;
  object-fit:cover;
  border-radius:8px}
.photo-placeholder {
  height:160px;
  display:grid;
  place-items:center;
  background:var(--pale);
  font-size:4rem;
  color:var(--green)}
.photos {
  grid-template-columns:repeat(3,minmax(0,1fr))}
.stamp {
  text-align:center}
.emoji {
  font-size:4rem}
.stamp-image {
  width:150px;
  height:150px;
  object-fit:contain}
.pet-panel {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
  align-items:center}
.pet-room {
  min-height:270px;
  background:linear-gradient(#dceee4 70%,#b7cbb3 70%);
  border-radius:12px;
  position:relative;
  overflow:hidden}
/*
  ペット（SVG）。--pet-x は部屋の左端からの位置（app.jsが毎フレーム書き換える）。
  向きは --pet-dir（右向き 1、左向き -1）で左右反転する。
*/
.pet-walker {
  --pet-x:0px;
  --pet-dir:1;
  position:absolute;
  left:0;
  bottom:14px;
  width:var(--pet-size);
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
  transform:translateX(var(--pet-x)) scaleX(var(--pet-dir));
  transform-origin:center bottom;
  transition:width .6s ease}
.pet-walker:focus-visible {
  outline-offset:0}
.pet-svg {
  display:block;
  width:100%;
  height:auto;
  overflow:visible}
/* 段階ごとの大きさ（部屋の中での幅） */
.pet-walker.baby {
  --pet-size:96px}
.pet-walker.child {
  --pet-size:136px}
.pet-walker.adult {
  --pet-size:176px}
/* 毛の色（種類ごと） */
.DOG {
  --fur:#c98b4f;
  --fur-dark:#9b6233;
  --fur-light:#f1d9b8}
.CAT {
  --fur:#9aa1aa;
  --fur-dark:#6f7680;
  --fur-light:#e7e9ec}
.RABBIT {
  --fur:#f4f0ea;
  --fur-dark:#ddd4c8;
  --fur-light:#ffffff}
.pet-svg .fur {
  fill:var(--fur)}
.pet-svg .stroke-fur {
  stroke:var(--fur);
  fill:none}
.pet-svg .fur-dark {
  fill:var(--fur-dark)}
.pet-svg .fur-light {
  fill:var(--fur-light)}
.pet-svg .ear-inner {
  fill:#f3b6bd}
.pet-svg .eye {
  fill:#2b2b2b}
.pet-svg .eye-shine {
  fill:#fff}
.pet-svg .nose {
  fill:#3a2a26}
.pet-svg .mouth {
  stroke:#3a2a26}
.pet-svg .cheek {
  fill:#f19aa5;
  opacity:.45}
.pet-svg .pet-shadow {
  fill:rgba(0,0,0,.12)}
.pet-svg .collar {
  fill:#c8414d;
  display:none}
/* SVGの部品を、それぞれの中心を基準に拡大・回転できるようにする。 */
.pet-svg g,.pet-svg .leg,.pet-svg .ear,.pet-svg .eye,.pet-svg .eye-shine {
  transform-box:fill-box;
  transform-origin:center}
/*
  ---- 成長による姿の変化 ----
  赤ちゃん：頭が大きく、足は短い。目が大きく、ほっぺが赤い。
  子ども：頭と体の比率が大人に近づく。
  大人：足と耳が長く、首輪を付ける。
*/
.baby .pet-head {
  transform:translate(-6px,8px) scale(1.28);
  transform-origin:30% 90%}
.baby .leg {
  transform:scaleY(.55);
  transform-origin:center top}
.baby .eye,.baby .eye-shine {
  transform:scale(1.3)}
.baby .cheek {
  opacity:.8}
.baby .ear {
  transform:scale(.8)}
.child .pet-head {
  transform:translate(-2px,3px) scale(1.12);
  transform-origin:30% 90%}
.child .leg {
  transform:scaleY(.8);
  transform-origin:center top}
.adult .leg {
  transform:scaleY(1.1);
  transform-origin:center top}
.adult .ear {
  transform:scale(1.12)}
.adult .collar {
  display:block}
/* ---- 動き ---- */
/* まばたき（数秒に1回） */
.pet-eyes {
  animation:pet-blink 4.5s infinite}
@keyframes pet-blink {
  0%,92%,100% {
    transform:scaleY(1)}
  95% {
    transform:scaleY(.1)}
}
/* しっぽを振る */
.pet-tail {
  transform-origin:90% 90%;
  animation:pet-wag 1.2s ease-in-out infinite}
@keyframes pet-wag {
  0%,100% {
    transform:rotate(-8deg)}
  50% {
    transform:rotate(10deg)}
}
/* 歩いている時：体が上下に弾み、足を交互に動かす */
.pet-walker.walking .pet-bob {
  animation:pet-bob .45s ease-in-out infinite}
.pet-walker.walking .leg-front {
  animation:pet-step .45s ease-in-out infinite}
.pet-walker.walking .leg-back {
  animation:pet-step .45s ease-in-out infinite reverse}
@keyframes pet-bob {
  0%,100% {
    transform:translateY(0)}
  50% {
    transform:translateY(-3px)}
}
@keyframes pet-step {
  0%,100% {
    transform:rotate(-14deg)}
  50% {
    transform:rotate(14deg)}
}
/* 休んでいる時は、ゆっくり呼吸する */
.pet-walker:not(.walking) .pet-bob {
  animation:pet-breathe 2.4s ease-in-out infinite}
@keyframes pet-breathe {
  0%,100% {
    transform:scaleY(1)}
  50% {
    transform:scaleY(1.03)}
}
/* タップした時のジャンプ */
.pet-walker.jump .pet-svg {
  animation:pet-jump .6s ease-out}
@keyframes pet-jump {
  0%,100% {
    transform:translateY(0)}
  40% {
    transform:translateY(-28%) rotate(-6deg)}
}
/* おなかがすいている時：色がくすみ、目を細める */
.pet-walker.hungry .pet-svg {
  filter:saturate(.55)}
.pet-walker.hungry .eye {
  transform:scaleY(.45)}
.pet-walker.hungry .pet-tail {
  animation-duration:3s}
/* タップで出るハート */
.pet-heart {
  position:absolute;
  font-size:1.6rem;
  pointer-events:none;
  animation:pet-heart 1s ease-out forwards}
@keyframes pet-heart {
  from {
    opacity:1;
    transform:translate(-50%,0) scale(.6)}
  to {
    opacity:0;
    transform:translate(-50%,-60px) scale(1.2)}
}
/* 「動きを減らす」設定の端末では、アニメーションを止める */
@media(prefers-reduced-motion:reduce) {
  .pet-eyes,.pet-tail,.pet-bob,.leg,.pet-svg,.pet-heart {
    animation:none !important}
}
.room-item {
  position:absolute;
  font-size:2.2rem;
  z-index:1}
.room-item small {
  display:block;
  font-size:.65rem;
  background:#ffffffdd}
.CLOTHES {
  top:12px;
  left:15px}
.FURNITURE {
  right:15px;
  bottom:15px}
.BACKGROUND {
  right:20px;
  top:10px}
progress {
  display:block;
  width:100%;
  height:20px;
  accent-color:var(--green)}
footer {
  text-align:center;
  padding:25px;
  color:var(--muted);
  font-size:.8rem}
form+form {
  margin-top:8px}


.drawing {
  border:1px solid var(--border);
  border-radius:8px;
  padding:12px 16px}
.drawing canvas {
  display:block;
  width:100%;
  max-width:300px;
  aspect-ratio:1;
  background:white;
  border:1px dashed #92aaa0;
  border-radius:8px;
  touch-action:none;
  cursor:crosshair}
.drawing-tools {
  display:flex;
  flex-wrap:wrap;
  align-items:end;
  gap:8px 16px;
  margin-top:12px}
.drawing-tools label {
  margin-bottom:0}
.drawing-tools input[type=color] {
  width:48px;
  height:40px;
  padding:2px}
.hint {
  color:var(--muted);
  font-size:.9rem}
video.photo {
  object-fit:contain;
  background:#000}
.album-card {
  display:block;
  color:inherit;
  text-decoration:none}
.album-card h2 {
  margin:10px 0 4px}
.album-actions {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:end}
.album-actions button.danger {
  margin-top:0}
.pick {
  position:relative;
  font-weight:400;
  border:2px solid var(--border);
  border-radius:8px;
  padding:8px;
  cursor:pointer}
.pick:has(input:checked) {
  border-color:var(--green);
  background:var(--pale)}
.pick input[type=checkbox] {
  position:absolute;
  top:14px;
  left:14px;
  width:22px;
  height:22px;
  margin:0;
  z-index:1}
.pick span {
  position:absolute;
  top:14px;
  right:14px;
  background:rgba(0,0,0,.6);
  color:white;
  font-size:.8rem;
  padding:2px 8px;
  border-radius:999px}
.picker .photo {
  height:140px}
/* デコ：写真の幅に対する割合で配置する。どの画面でも同じ4:3の枠に入れ、位置がずれないようにする。 */
.decorated {
  position:relative;
  aspect-ratio:4/3;
  container-type:inline-size;
  overflow:hidden;
  border-radius:8px;
  background:#000}
.decorated > .photo {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:0}
.deco-layer {
  position:absolute;
  inset:0;
  pointer-events:none}
.deco {
  position:absolute;
  left:calc(var(--x) * 100%);
  top:calc(var(--y) * 100%);
  transform:translate(-50%,-50%) rotate(var(--r));
  white-space:nowrap;
  line-height:1.15;
  user-select:none}
.deco-text {
  font-size:calc(var(--s) * 100cqw);
  font-weight:800;
  color:var(--c);
  text-shadow:0 0 .1em rgba(0,0,0,.75),0 0 .03em #000}
.deco-emoji {
  font-size:calc(var(--s) * 100cqw)}
.deco-pill {
  font-size:calc(var(--s) * 60cqw);
  font-weight:700;
  background:white;
  color:var(--ink);
  border-radius:999px;
  padding:.2em .6em;
  box-shadow:0 2px 6px rgba(0,0,0,.3)}
.deco-stamp {
  width:calc(var(--s) * 200cqw);
  height:auto}
.cover-badge {
  position:absolute;
  top:8px;
  left:8px;
  background:var(--green);
  color:white;
  font-size:.8rem;
  font-weight:700;
  padding:2px 10px;
  border-radius:999px}
.album-cover .decorated {
  max-width:480px}
.deco-editor {
  width:min(640px,calc(100vw - 32px));
  max-height:calc(100vh - 32px);
  border:0;
  border-radius:12px;
  padding:16px}
.deco-editor::backdrop {
  background:rgba(0,0,0,.5)}
.deco-stage .deco-layer {
  pointer-events:auto}
.deco-stage .deco {
  cursor:grab;
  touch-action:none}
.deco-stage .deco.selected {
  outline:2px dashed #ffd84d;
  outline-offset:4px}
.deco-tools {
  margin:12px 0}
.deco-row {
  display:flex;
  flex-wrap:wrap;
  gap:8px 12px;
  align-items:end;
  margin-bottom:10px}
.deco-row label {
  margin-bottom:0}
.deco-row input[type=color] {
  width:48px;
  height:40px;
  padding:2px}
fieldset.deco-row {
  border:1px solid var(--border);
  border-radius:8px;
  padding:8px 12px}
fieldset.deco-row:disabled {
  opacity:.5}
.deco-palette {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:10px}
.deco-palette button {
  padding:6px 10px;
  font-size:1.2rem;
  line-height:1}
.deco-palette button img {
  width:40px;
  height:40px;
  object-fit:contain}
.offline {
  text-align:center}
/* PWAとして起動した時、iPhoneの画面上部・下部の切り欠きに内容が隠れないようにする。 */
@media (display-mode: standalone) and (min-width:1025px) {
  body {
    padding-top:env(safe-area-inset-top);
    padding-bottom:env(safe-area-inset-bottom)}
}
.drawing-tools .mode {
  display:flex;
  align-items:center;
  gap:6px;
  font-weight:600}
.drawing-tools .mode input {
  width:auto;
  margin:0}
.file-button {
  margin-bottom:0;
  font-weight:700}
fieldset.drawing-selected {
  border:1px solid var(--border);
  border-radius:8px;
  padding:6px 12px}
fieldset.drawing-selected:disabled {
  opacity:.5}
.drawing-selected button.danger {
  margin-top:0}

/* 画面幅ごとの調整は、上の通常のルールより後に書く（CSSは後に書いたものが優先されるため）。 */
/*
  ---- スマホ・タブレット（幅1024px以下） ----
  左のメニューをやめて、下部タブバー＋下から出るメニューシートにする。本文を画面いっぱいに使う。
  env(safe-area-inset-○○)は、iPhoneの画面の切り欠きやホームバーの分の余白。
*/
@media(max-width:1024px) {
  body {
    padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .topbar {
    position:sticky;
    top:0;
    z-index:20;
    padding:10px 16px;
    padding-top:calc(10px + env(safe-area-inset-top));
    gap:12px}
  .brand {
    font-size:1.35rem}
  .topbar .user {
    font-size:.85rem;
    color:var(--muted)}
  .layout {
    display:block}
  main {
    padding:16px 20px}
  .tabbar {
    display:flex;
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:50;
    background:#fff;
    border-top:1px solid var(--border);
    padding-bottom:env(safe-area-inset-bottom)}
  .tabbar a,.tabbar button {
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    min-height:58px;
    padding:6px 2px;
    border:0;
    border-radius:0;
    background:none;
    color:var(--muted);
    font-size:.72rem;
    font-weight:700;
    line-height:1.2;
    text-decoration:none}
  .tabbar svg {
    width:24px;
    height:24px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round}
  .tabbar [aria-current=page],.tabbar [aria-expanded=true] {
    color:var(--green)}
  .tabbar [aria-current=page] svg {
    stroke-width:2.4}
  /* メニューシート。ふだんは画面の下に隠し、body.menu-openの時に引き上げる。 */
  aside {
    position:fixed;
    left:0;
    right:0;
    bottom:calc(58px + env(safe-area-inset-bottom));
    z-index:40;
    max-height:70vh;
    overflow-y:auto;
    padding:8px 16px 16px;
    background:#fff;
    border-radius:16px 16px 0 0;
    box-shadow:0 -6px 24px rgba(0,0,0,.18);
    transform:translateY(110%);
    visibility:hidden;
    transition:transform .2s ease,visibility .2s}
  body.menu-open aside {
    transform:none;
    visibility:visible}
  body.menu-open::after {
    content:"";
    position:fixed;
    inset:0;
    z-index:30;
    background:rgba(0,0,0,.35)}
  aside summary {
    display:none}
  aside nav {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
    gap:6px;
    margin-top:8px}
  aside nav a {
    display:flex;
    align-items:center;
    min-height:48px;
    padding:10px 14px;
    background:var(--cream)}
  .drawing canvas {
    max-width:min(100%,480px)}
}

/* ---- スマホ（幅640px以下） ---- */
@media(max-width:640px) {
  .tagline {
    display:none}
  main {
    padding:12px 12px 20px}
  h1 {
    font-size:1.45rem;
    margin:4px 0 12px}
  .card {
    padding:16px;
    border-radius:12px;
    margin:12px 0}
  .grid {
    gap:12px}
  .form-grid,.pet-panel {
    grid-template-columns:1fr}
  /* フォームの最後のボタン（送信）は横いっぱいにして押しやすくする。 */
  .form-grid > div:last-child > button {
    width:100%}
  /* 写真は2列のタイル。投稿の一覧（feed）とアルバムの中身は1列で大きく見せる。 */
  .photos {
    grid-template-columns:repeat(2,minmax(0,1fr))}
  .photos .photo {
    height:150px}
  .feed,.album-items {
    grid-template-columns:1fr}
  .feed .photo {
    height:auto;
    max-height:70vh;
    object-fit:contain;
    background:#000}
  .photos .decorated .photo {
    height:100%}
  .picker .photo {
    height:110px}
  /* 週間カレンダーは横に7列並べず、1日ずつ縦に並べる。 */
  .week {
    grid-template-columns:1fr;
    overflow:visible}
  .price {
    font-size:1.6rem}
  .list-row {
    gap:8px}
  /* デコ編集は画面いっぱいに開く。 */
  .deco-editor {
    width:100vw;
    max-width:100vw;
    height:100dvh;
    max-height:100dvh;
    margin:0;
    border-radius:0;
    padding:12px 12px calc(12px + env(safe-area-inset-bottom))}
  .album-cover .decorated {
    max-width:none}
}

/* 指で操作する端末（スマホ・タブレット）は、押す場所を44px以上にする（指の太さに合わせた目安）。 */
@media(pointer:coarse) {
  button,.button,select,input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]) {
    min-height:44px}
  input[type=checkbox] {
    width:22px;
    height:22px}
}