/* App card styles extracted from the trial app (css/app.css + tokens.css);
   selectors scoped under #events. Generated by extract-cards.mjs - do not hand-edit. */
#events .cards {
  color-scheme: light;

  /* ---- Color ---- */
  --c-bg: #ffffff;
  --c-ink: #222222;          /* primary text / headings, 15.9:1 */
  --c-ink-2: #555555;        /* body copy as on the LP (rgb 85,85,85), 7.5:1 — lightest text color allowed */
  --c-surface: #f4f4f4;      /* neutral fill for grouped content */
  --c-surface-2: #e9e9e9;    /* pressed / hover fill */
  --c-line: #e2e2e2;         /* hairline dividers */
  --c-line-2: #c9c9c9;       /* control borders */
  --c-brand: #e73b88;        /* key color (unified): indicators, active states, CTA fills, brand text */
  --c-brand-ink: #e73b88;    /* same key color; white on it is 3.9:1, so CTA labels stay 16px+ bold */
  --c-brand-hover: #d02c76;  /* pressed / hover on the key color */
  --c-brand-tint: #fdebf3;   /* selected chip / booked fill, tint of the key color */
  --c-ok: #0e7a55;           /* 受付中 */
  --c-warn: #e73b88;         /* 残りわずか = the key color (old red-brown #a8420f retired) */
  --c-danger: #e73b88;       /* destructive / error = the key color (old red #b42335 retired) */
  --c-white: #ffffff;
  --c-scrim: rgba(0, 0, 0, .56);
  --c-photo-scrim: rgba(0, 0, 0, .45);
  /* Legacy avatar fills (avatars now use a photo or a grey silhouette) */
  --c-av-0: #e73b88;
  --c-av-1: #d02c76;
  --c-av-2: #2d6a8a;
  --c-av-3: #4f6b2a;
  --c-av-4: #8a5a24;
  --c-av-5: #5f4a8b;
  --c-av-6: #3d3d3d;

  /* ---- Type (LP stack) ---- */
  --f-sans: "Inter", sans-serif;
  --w-body: 600;   /* LP body */
  --w-bold: 700;   /* LP emphasis, hero CTA, prices */
  --w-xbold: 700;  /* LP header CTA, HOW IT WORKS copy (LP 800; capped at 700 on request) */
  --w-black: 700;  /* headings (LP H1–H3 900; capped at 700 on request) */

  --t-xs: .75rem;     /* 12 labels */
  --t-sm: .8125rem;   /* 13 meta */
  --t-md: .9375rem;   /* 15 secondary body */
  --t-base: 1rem;     /* 16 body */
  --t-lg: 1.125rem;   /* 18 card title */
  --t-xl: 1.375rem;   /* 22 section title */
  --t-2xl: 1.75rem;   /* 28 page title */
  --lh-tight: 1.3;
  --lh-body: 1.7;

  /* ---- Space (4px grid) ---- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
  --gutter: 20px;

  /* ---- Radius ---- */
  --r-xs: 6px;    /* draft/placeholder labels */
  --r-sm: 8px;    /* inputs, small thumbnails */
  --r-md: 12px;   /* cards, photos */
  --r-lg: 16px;   /* sheets, hero photo */
  --r-pill: 999px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --d-fast: 140ms; --d-med: 240ms; --d-slow: 380ms;

  /* ---- Touch ---- */
  --tap: 48px;
}
#events .icon { width: 1.25em; height: 1.25em; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#events .mock-pill .icon { width: 14px; height: 14px; }
#events .bell .icon { width: 24px; height: 24px; }
#events .notice-list__ic .icon { width: 20px; height: 20px; }
#events .btn .icon { width: 20px; height: 20px; }
#events .icon-btn {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none;
  border: 0; background: var(--c-bg); color: var(--c-ink); cursor: pointer;
}
#events .icon-btn:active { transform: scale(.94); }
#events .icon-btn--glass, #events .icon-btn--photo { background: var(--c-photo-scrim); color: var(--c-white); }
#events .icon-btn .icon { width: 22px; height: 22px; }
#events .icon-btn.is-on { color: var(--c-brand); background: var(--c-bg); }
#events .icon-btn.is-on .icon { fill: currentColor; }
#events .icon-btn { position: relative; }
#events .icon-btn.is-pop .icon { animation: heartPop .6s cubic-bezier(.2, .9, .3, 1.4) both; }
#events .icon-btn.is-pop::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--c-brand); pointer-events: none;
  animation: heartRing .55s ease-out both;
}
#events .icon-btn.is-unpop .icon { animation: heartOut .25s ease-out both; }
#events .chip .icon { width: 16px; height: 16px; }
#events .pref-btn .icon { width: 16px; height: 16px; }
#events .cards { display: grid; gap: var(--s-8); padding-block: var(--s-10) 0; }
#events .ev-card { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: var(--s-3); cursor: pointer; animation: rise var(--d-slow) var(--ease-out) both; border-radius: var(--r-md); }
#events .ev-card__ph { position: relative; width: 100%; aspect-ratio: 4 / 3; max-width: 100%; border-radius: var(--r-md); background: var(--c-surface); }
#events .ev-card__ph img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
#events .ev-card__ph .status { position: absolute; left: var(--s-3); top: var(--s-3); }
#events .ev-card__ph .icon-btn { position: absolute; right: var(--s-3); top: var(--s-3); width: 40px; height: 40px; }
#events .ev-card__body { display: grid; gap: 6px; }
#events .ev-card__title { font-size: 1.25rem; line-height: 1.4;  overflow-wrap: anywhere;}
#events .ev-card:hover .ev-card__title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
#events .sash {
  position: absolute; z-index: 2; top: 0; left: 0; width: 92px; height: 92px; pointer-events: none;
  clip-path: polygon(0 0, 100% 0, 0 100%); border-top-left-radius: var(--r-md);
}
#events .sash > span {
  position: absolute; top: 19px; left: -22px; width: 100px;
  transform: rotate(-45deg); text-align: center; white-space: nowrap;
  color: var(--c-white); font-size: 12px; font-weight: var(--w-black); letter-spacing: .04em; line-height: 1.2;
}
#events .sash--new { background: var(--c-av-2); }
#events .sash--new > span { letter-spacing: .14em; }
#events .sash--few { background: var(--c-warn); }
#events .sash--few > span { top: 13px; left: -24px; line-height: 1.15; }
#events .sash--full { background: var(--c-ink); }
#events .ev-card__when { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--t-sm); font-weight: var(--w-bold); color: var(--c-ink); }
#events .ev-card__when li { display: inline-flex; align-items: center; gap: 5px; }
#events .ev-card__when .icon { width: 16px; height: 16px; color: var(--c-ink-2); }
#events .ev-card__people { display: flex; justify-content: flex-start; margin-top: 6px; }
#events .av {
  display: inline-grid; place-items: center; flex: none; padding: 0; border-radius: 50%;
  border: 2px solid var(--c-bg); color: var(--c-white); font-weight: var(--w-black); line-height: 1; cursor: pointer;
  transition: transform var(--d-fast) var(--ease-out);
}
#events button.av:hover { transform: translateY(-2px); }
#events .av--sm { width: 32px; height: 32px; font-size: 13px; }
#events .av, #events .avatar { overflow: hidden; }
#events .av img, #events .avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
#events .avatar.av--photo, #events .avatar.av--none { padding: 0; }
#events .av--more { background: var(--c-surface); color: var(--c-ink); font-weight: var(--w-xbold); }
#events .av--sm.av--more { font-size: 12px; }
#events .av-stack { display: flex; align-items: center; flex: none; }
#events .av-stack > * + * { margin-left: -8px; }
#events .av-stack { padding-bottom: 6px; }
#events .fav-count {
  position: absolute; z-index: 2; right: var(--s-3); bottom: var(--s-3);
  display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px;
  border-radius: var(--r-pill); background: var(--c-photo-scrim); color: var(--c-white);
  font-size: var(--t-sm); font-weight: var(--w-bold); font-variant-numeric: tabular-nums; pointer-events: none;
}
#events .fav-count .icon { width: 15px; height: 15px; }
#events .fav-count.is-on .icon { color: var(--c-brand); fill: currentColor; }
#events .fav-count.is-bump b { display: inline-block; animation: countBump .4s cubic-bezier(.2, .9, .3, 1.4); }
@media (min-width: 1024px) {
#events .gallery .fav-count { right: auto; left: calc(var(--s-3) + 72px); }
}
#events .people__row .btn .icon { width: 16px; height: 16px; }
#events .people-list .av { cursor: inherit; }
#events .people-list .icon { width: 18px; height: 18px; }
#events .empty .icon { width: 32px; height: 32px; color: var(--c-ink); }
#events .safety-tile__ic .icon { width: 20px; height: 20px; }
@media (max-width: 1023px) {
#events .gallery .gallery__dots, #events .gallery .gallery__count, #events .gallery .fav-count { bottom: calc(24px + var(--s-3)); }
}
#events .facts dt .icon { width: 18px; height: 18px; color: var(--c-ink); align-self: center; }
#events .about__more .icon { width: 18px; height: 18px; }
#events .info-banner__ic .icon { width: 20px; height: 20px; }
#events .info-banner > .icon { width: 18px; height: 18px; }
#events .faq summary .icon { width: 20px; height: 20px; transition: transform var(--d-med) var(--ease-out); }
#events .faq details[open] summary .icon { transform: rotate(180deg); }
#events .sheet__top .icon-btn { background: var(--c-surface); width: 40px; height: 40px; }
#events .sheet__top .icon-btn:hover { background: var(--c-surface-2); }
#events .sheet__lead--ok .icon { width: 18px; height: 18px; stroke-width: 2.6; }
#events .auth__glyph .icon { width: 16px; height: 16px; }
#events .err .icon { width: 16px; height: 16px; }
#events .confirm-list .icon { width: 20px; height: 20px; color: var(--c-ink); margin-top: 2px; stroke-width: 2.4; }
#events .resume-note .icon { width: 16px; height: 16px; }
#events .done-hero__badge .icon { width: 32px; height: 32px; stroke-width: 3; }
#events .info-rows .ic .icon { width: 18px; height: 18px; }
#events .back-link .icon { width: 18px; height: 18px; }
#events .my-card__body p .icon { width: 14px; height: 14px; color: var(--c-ink); }
#events .fav-row .icon-btn { background: var(--c-surface); }
#events .fav-row .icon-btn:not(.is-on) { color: var(--c-ink); }
#events .tabbar button .icon { width: 24px; height: 24px; }
#events .tabbar button[aria-current="page"] .icon { stroke-width: 2.6; color: var(--c-brand-ink); }
#events .toast .icon { width: 18px; height: 18px; }
#events .jump b .icon { width: 16px; height: 16px; }
#events .jump .icon { width: 18px; height: 18px; }
#events .ev-card--sk .ev-card__body { gap: 10px; margin-top: 4px; }
@media (min-width: 768px) {
#events .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8) var(--s-6); }
}
@media (min-width: 1024px) {
#events .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
#events .ev-card__ph .icon-btn { width: 44px; height: 44px; }
#events .ev-card__people .av--sm { width: 44px; height: 44px; font-size: 16px; }
#events .ev-card__people .av-stack > * + * { margin-left: -10px; }
#events .sheet__top .icon-btn { width: 44px; height: 44px; }
}
@media (max-width: 767px) {
#events .ev-card__people .av-stack { gap: 4px; }
#events .ev-card__people .av-stack > * + * { margin-left: 0; }
}

@keyframes heartPop { 0% { transform: scale(1); } 15% { transform: scale(.55); } 45% { transform: scale(1.4); } 70% { transform: scale(.9); } 100% { transform: scale(1); } }

@keyframes heartRing { 0% { transform: scale(.5); opacity: 1; } 100% { transform: scale(1.7); opacity: 0; } }

@keyframes heartOut { 0% { transform: scale(1); } 40% { transform: scale(.75); } 100% { transform: scale(1); } }

@keyframes countBump { 0% { transform: translateY(0); } 40% { transform: translateY(-4px) scale(1.15); } 100% { transform: none; } }



@keyframes rise { from { opacity: .001; transform: translateY(10px); } to { opacity: 1; transform: none; } }