.usual-page { max-width: 1040px; }
.usual-hero { margin-bottom: 38px; }
.usual-hero-icon { flex: 0 0 76px; width: 76px; height: 76px; padding: 13px; border-radius: 50%; fill: none; stroke: var(--accent); stroke-linecap: round; stroke-width: 3; background: #f1eaff; box-shadow: 7px 7px 0 #d9c8f5; }
.usual-form { grid-template-columns: 1.4fr .8fr; gap: 22px; }
.usual-form textarea { width: 100%; min-height: 116px; padding: 15px 17px; resize: vertical; border: 1px solid #d8d9e1; border-radius: 9px; color: var(--text); background: #fff; outline: none; font: inherit; font-weight: 500; }
.usual-form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(120,55,230,.12); }
.usual-content-field { grid-column: 1 / 2; }
.usual-memo-field { grid-column: 2 / 3; }
.usual-url-field { grid-column: 1 / -1; }
.usual-image-field { grid-column: 1 / -1; }
.usual-image-drop-zone { min-height: 138px; display: grid; place-content: center; gap: 4px; padding: 16px; border: 1.5px dashed #bca4ef; border-radius: 9px; background: #fff; text-align: center; cursor: pointer; }
.usual-image-drop-zone:hover, .usual-image-field.is-dragging .usual-image-drop-zone { border-color: var(--accent); background: #fbf9ff; }
.usual-image-drop-zone input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
.usual-image-drop-zone small { color: var(--muted); font-weight: 500; }
.usual-image-selection { grid-column: 1 / -1; }
.usual-form-action { align-items: flex-start; }
.usual-cancel-button { min-height: 48px; padding: 0 18px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: #fff; cursor: pointer; font-weight: 800; }
.usual-category-tabs { display: flex; gap: 9px; margin-bottom: 16px; padding: 2px 2px 8px; overflow-x: auto; }
.usual-category-tab { flex: 0 0 auto; min-height: 40px; padding: 0 15px; border: 1px solid var(--line); border-radius: 999px; color: #55525d; background: #fff; cursor: pointer; font-weight: 800; }
.usual-category-tab[aria-selected="true"] { color: var(--accent); border-color: transparent; background: linear-gradient(110deg, #e8e0ff, #f7e8ff); }
.usual-feedback { min-height: 1.4rem; margin: 0 0 10px; color: #278852; font-weight: 800; }
.usual-feedback.is-error { color: var(--danger); }
.usual-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.usual-list:empty { display: none; }
.usual-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); grid-template-areas: "image body" "actions actions"; gap: 16px; min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 13px; background: #fff; box-shadow: 4px 4px 0 #eee7ff; }
.usual-card-image { grid-area: image; width: 112px; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border-radius: 10px; color: var(--accent); background: linear-gradient(145deg, #f1eaff, #faf7ff); font-size: 1.8rem; font-weight: 900; }
.usual-card-image img { width: 100%; height: 100%; object-fit: cover; }
.usual-card-body { grid-area: body; min-width: 0; }
.usual-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.usual-card h3 { margin: 0; overflow-wrap: anywhere; font-size: 1.08rem; }
.usual-category-badge { flex: 0 0 auto; padding: 4px 8px; border-radius: 999px; color: var(--accent); background: #f2ebff; font-size: .74rem; font-weight: 900; }
.usual-card-content { margin: 10px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-weight: 700; }
.usual-card-memo { margin: 8px 0 0; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; font-size: .86rem; }
.usual-card-link { display: inline-block; margin-top: 9px; color: var(--accent); font-size: .84rem; font-weight: 900; text-decoration: none; }
.usual-card-link:hover { text-decoration: underline; }
.usual-card-actions { grid-area: actions; display: flex; align-items: center; gap: 8px; padding-top: 3px; }
.usual-shopping-button, .usual-edit-button { min-height: 38px; padding: 0 12px; border: 1px solid #bfa9ee; border-radius: 8px; color: var(--accent); background: #fff; cursor: pointer; font-size: .78rem; font-weight: 900; }
.usual-edit-button { margin-left: auto; color: #55525d; border-color: var(--line); }
.usual-delete-button { display: grid; place-items: center; width: 36px; height: 36px; min-height: 36px; padding: 0; border: 1px solid #ff9da3; border-radius: 50%; color: var(--danger); background: #fff; cursor: pointer; }
.usual-delete-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }

@media (max-width: 760px) {
  .usual-form { grid-template-columns: 1fr; }
  .usual-content-field, .usual-memo-field, .usual-url-field, .usual-image-field { grid-column: auto; }
  .usual-list { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .usual-hero-icon { flex-basis: 62px; width: 62px; height: 62px; padding: 11px; box-shadow: 5px 5px 0 #d9c8f5; }
  .usual-form-action .primary-button { width: 100%; }
  .usual-card { grid-template-columns: 82px minmax(0, 1fr); gap: 12px; padding: 15px; }
  .usual-card-image { width: 82px; }
  .usual-card-heading { display: grid; justify-content: start; }
  .usual-card-actions { flex-wrap: wrap; }
  .usual-shopping-button { flex: 1 1 auto; }
}