* {
  box-sizing: border-box;
}

:root {
  --jewel-star-color: #8ccfe2;
  --jewel-star-glow: rgba(95, 184, 213, 0.52);
}

/* MVP公開中は将来のゲーム要素をDOMに残したまま表示しません。 */
.mvp-hidden {
  display: none !important;
}

body {
  margin: 0;
  color: #171d2b;
  background: #f3f4f7;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

img[data-event-image] {
  color: transparent;
  background-color: #f4eee7;
}

img[data-event-image].is-image-unavailable {
  background-image:
    radial-gradient(circle at 50% 42%, rgba(232, 91, 31, 0.2) 0 12%, transparent 12.5%),
    linear-gradient(145deg, #fff5e8, #f1e6d8);
  background-position: center;
  background-size: cover;
  font-size: 0;
}

.app-toast {
  position: fixed;
  top: 22px;
  right: 24px;
  z-index: 4700;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: min(390px, calc(100vw - 32px));
  min-height: 78px;
  padding: 13px 18px 13px 14px;
  overflow: hidden;
  color: #32251c;
  background:
    radial-gradient(circle at 100% 0, rgba(255, 179, 91, 0.2), transparent 42%),
    linear-gradient(145deg, #fffdf8, #fff6e9);
  border: 1px solid #f2bd83;
  border-radius: 20px;
  box-shadow: 0 18px 44px rgba(91, 45, 16, 0.2), 0 2px 8px rgba(91, 45, 16, 0.08);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-12px) scale(0.98);
  transition: opacity 200ms ease, transform 220ms cubic-bezier(.2, .8, .25, 1);
}

.app-toast::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 5px;
  background: #e84a0c;
  content: "";
}

.app-toast::after {
  position: absolute;
  right: -5px;
  bottom: -29px;
  color: rgba(215, 67, 7, 0.055);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 82px;
  font-weight: 900;
  line-height: 1;
  content: "祭";
  transform: rotate(-8deg);
}

.app-toast-icon {
  position: relative;
  z-index: 1;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, #ff671c, #dd3500);
  border: 2px solid rgba(255, 255, 255, 0.82);
  border-radius: 50%;
  box-shadow: 0 5px 12px rgba(209, 57, 0, 0.24);
  font-size: 20px;
  font-weight: 950;
  line-height: 1;
}

.app-toast-copy {
  position: relative;
  z-index: 1;
  display: grid;
  min-width: 0;
  gap: 1px;
}

.app-toast-copy small {
  color: #d74708;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.12em;
}

.app-toast-copy strong {
  color: #30251e;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.5;
}

.app-toast.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.app-toast.is-reward {
  background:
    radial-gradient(circle at 100% 0, rgba(244, 188, 57, 0.26), transparent 44%),
    linear-gradient(145deg, #fffef7, #fff3cd);
  border-color: #e9bc4d;
}

.app-toast.is-reward::before,
.app-toast.is-reward .app-toast-icon {
  background: linear-gradient(145deg, #f8c84e, #d88b05);
}

.app-toast.is-reward .app-toast-copy small {
  color: #ae6900;
}

.app-toast.is-warning::before,
.app-toast.is-warning .app-toast-icon {
  background: linear-gradient(145deg, #ff9b39, #e45a08);
}

.app-toast.is-error {
  background:
    radial-gradient(circle at 100% 0, rgba(201, 45, 32, 0.14), transparent 44%),
    linear-gradient(145deg, #fffdfb, #fff0ec);
  border-color: #e9a397;
}

.app-toast.is-error::before,
.app-toast.is-error .app-toast-icon {
  background: linear-gradient(145deg, #e95b46, #bd251c);
}

.app-toast.is-error .app-toast-copy small {
  color: #b82c22;
}

/* PC版は左メニュー・中央コンテンツ・右パネルの3カラムで使います。 */
.app-shell {
  display: grid;
  grid-template-columns: 280px minmax(660px, 1fr) 360px;
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
  overflow-y: auto;
  padding: 26px 18px;
  background: #ffffff;
  border-right: 1px solid #e8ebf1;
}

.logo {
  margin: 0 0 34px 10px;
  color: #fb4b08;
  font-size: 28px;
  line-height: 1;
  font-weight: bold;
}

.mini-profile,
.level-card,
.post-panel,
.report-card,
.event-card,
.badge-card,
.recommend-card,
.stats-grid div,
.stat-card-button {
  border: 1px solid #e9edf3;
  box-shadow: 0 2px 8px rgba(28, 36, 52, 0.06);
}

.mini-profile {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 7px 12px;
  margin: 0 8px 38px;
  padding: 14px 16px;
  color: inherit;
  background: #f8f9fb;
  font: inherit;
  text-align: left;
  border-radius: 20px;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.mini-profile:hover {
  background: #fffdf9;
  border-color: #f4bd8e;
  box-shadow: 0 8px 20px rgba(166, 71, 18, 0.12);
  transform: translateY(-1px);
}

.mini-profile:focus-visible {
  outline: 3px solid rgba(255, 106, 31, 0.28);
  outline-offset: 3px;
}

.mini-profile > img {
  grid-column: 1;
  grid-row: 1;
}

.mini-profile > div {
  display: contents;
}

.mini-profile #authDisplayName {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
}

.mini-profile-status-row {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
}

.mini-profile #authStatusText {
  line-height: 1.35;
}

.mini-profile.is-logged-in #authStatusText {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 27px;
  padding: 3px 8px 3px 6px;
  color: #58851e;
  background: #eff9dc;
  border: 1px solid #cbe99b;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.mini-profile-ready-status {
  display: none;
}

.mini-profile.is-logged-in .mini-profile-ready-status {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 3px 8px;
  color: #d34a0b;
  background: #fff0df;
  border: 1px solid #ffc58f;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.35;
  white-space: nowrap;
}

.account-switch-menu {
  display: grid;
  gap: 14px;
}

.account-switch-intro {
  display: grid;
  gap: 5px;
  padding: 4px 2px 10px;
}

.account-switch-intro strong {
  color: #2d3442;
  font-size: 18px;
}

.account-switch-intro p {
  margin: 0;
  color: #7e8797;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.65;
}

.account-switch-actions {
  display: grid;
  gap: 10px;
}

.account-switch-actions button {
  min-height: 52px;
  padding: 0 18px;
  border-radius: 15px;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.account-switch-actions .is-switch {
  color: #ffffff;
  background: linear-gradient(135deg, #ff6b19, #ee4305);
  border: 1px solid #e94708;
  box-shadow: 0 8px 18px rgba(225, 69, 7, 0.2);
}

.account-switch-actions .is-logout {
  color: #a64b2d;
  background: #fff8f2;
  border: 1px solid #efc8b3;
}

.account-switch-actions .is-cancel {
  min-height: 44px;
  color: #697386;
  background: transparent;
  border: 0;
}

.account-switch-actions button:disabled {
  cursor: wait;
  opacity: 0.62;
}

@media (hover: hover) {
  .account-switch-actions .is-switch:not(:disabled):hover {
    background: linear-gradient(135deg, #ff7a25, #f24b08);
    box-shadow: 0 12px 24px rgba(225, 69, 7, 0.3);
    transform: translateY(-2px);
  }

  .account-switch-actions .is-logout:not(:disabled):hover {
    color: #ffffff;
    background: #b84b28;
    border-color: #b84b28;
    box-shadow: 0 9px 18px rgba(155, 60, 30, 0.2);
    transform: translateY(-1px);
  }

  .account-switch-actions .is-cancel:not(:disabled):hover {
    color: #303847;
    background: #f2f4f7;
  }
}

.account-switch-actions button:not(:disabled):active {
  box-shadow: none;
  transform: translateY(1px) scale(0.99);
}

.account-switch-actions button:focus-visible {
  outline: 3px solid rgba(255, 100, 24, 0.28);
  outline-offset: 3px;
}

.mini-profile.is-logged-in #authStatusText::before {
  display: grid;
  width: 17px;
  height: 17px;
  place-items: center;
  color: #ffffff;
  background: #91c93e;
  border-radius: 50%;
  font-size: 11px;
  line-height: 1;
  content: "✓";
}

.hidden {
  display: none !important;
}

.auth-card {
  display: grid;
  gap: 12px;
  margin: 0 8px 28px;
  padding: 14px;
  background: #ffffff;
  border: 1px solid #e9edf3;
  border-radius: 16px;
}

.auth-card p {
  margin: 0;
  overflow-wrap: anywhere;
  color: #5c6677;
  font-size: 12px;
  font-weight: 800;
}

.auth-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.auth-primary-button,
.auth-secondary-button,
.auth-submit-button,
.google-login-button,
.line-login-button {
  min-height: 44px;
  border: 0;
  border-radius: 14px;
  font-weight: 900;
}

.auth-primary-button,
.auth-submit-button {
  color: #ffffff;
  background: #ff4b00;
}

.auth-submit-button:disabled,
.google-login-button:disabled,
.line-login-button:disabled {
  cursor: progress;
  opacity: 0.62;
}

.auth-secondary-button {
  color: #303847;
  background: #f3f4f7;
}

.requires-login {
  opacity: 0.72;
}

.mini-profile img,
.profile-row img,
.hero-avatar {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 50%;
}

.mini-profile strong,
.profile-row h2 {
  display: block;
  font-size: 16px;
}

.mini-profile > div,
.profile-row > div,
.discover-author-info > div,
.social-user-row > div {
  min-width: 0;
}

.mini-profile strong,
.profile-row h2,
.discover-author-info strong,
.social-user-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-profile span,
.profile-row p,
.event-date,
.report-time,
.stat-label {
  color: #7e8797;
  font-size: 13px;
  font-weight: 700;
}

.side-nav {
  display: grid;
  gap: 14px;
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 16px 18px;
  color: #505b6d;
  background: transparent;
  border: 0;
  border-radius: 16px;
  font-size: 20px;
  font-weight: 800;
  text-align: left;
}

.nav-item.active {
  color: #fb4b08;
  background: #fff4e7;
}

.nav-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  font-size: 24px;
}

.sidebar-bottom {
  display: grid;
  gap: 14px;
}

.sidebar-support-links {
  display: grid;
  justify-items: start;
  gap: 7px;
  padding: 2px 8px 0;
  color: #7d8797;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.5;
}

.sidebar-support-links > span {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
}

.sidebar-support-links a {
  color: inherit;
  text-decoration-color: #c8ced7;
  text-underline-offset: 3px;
}

.sidebar-support-links a:hover { color: #4d5869; }

.official-link,
.primary-side-button,
.big-post-button,
.post-options button,
.section-heading button,
.follow-button,
.detail-button {
  border: 0;
  font-weight: 900;
}

.official-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  color: #2168f5;
  background: #eaf3ff;
  border: 1px solid #cfe2ff;
  border-radius: 16px;
  text-align: left;
}

.official-link[hidden] {
  display: none;
}

.primary-side-button,
.big-post-button {
  min-height: 58px;
  border-radius: 16px;
  font-size: 18px;
}

.primary-side-button.large-register-button {
  min-height: 120px;
  font-size: 25px;
  background: linear-gradient(135deg, #ff3d00, #ff5d0b 58%, #ed3c00);
  box-shadow: 0 7px 0 #bb3308, 0 14px 28px rgba(216, 55, 0, 0.24);
  cursor: pointer;
  transition: background 180ms ease, box-shadow 180ms ease, filter 180ms ease, transform 180ms ease;
}

@media (hover: hover) {
  .primary-side-button.large-register-button:hover {
    background: linear-gradient(135deg, #ff5310, #ff791a 55%, #fa4705);
    box-shadow: 0 10px 0 #ae2d06, 0 20px 36px rgba(225, 61, 0, 0.32);
    filter: saturate(1.06);
    transform: translateY(-3px);
  }
}

.primary-side-button.large-register-button:active {
  background: linear-gradient(135deg, #e63900, #ef4805);
  box-shadow: 0 2px 0 #9f2905, 0 6px 13px rgba(180, 43, 0, 0.2), inset 0 4px 8px rgba(104, 25, 0, 0.2);
  transform: translateY(5px) scale(0.99);
}

.primary-side-button.large-register-button:focus-visible {
  outline: 4px solid rgba(255, 124, 39, 0.34);
  outline-offset: 4px;
}

.primary-side-button,
.big-post-button,
.follow-button {
  color: #ffffff;
  background: #ff4b00;
  box-shadow: 0 8px 18px rgba(255, 75, 0, 0.22);
}

.follow-button {
  transition: color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

@media (hover: hover) {
  .follow-button:not(.is-disabled):hover {
    background: #df3d00;
    box-shadow: 0 11px 24px rgba(223, 61, 0, 0.27);
    transform: translateY(-2px);
  }
  .follow-button.is-active:hover {
    color: #d93f05;
    background: #ffe7d8;
  }
}

.follow-button:not(.is-disabled):active {
  box-shadow: inset 0 3px 7px rgba(105, 27, 0, 0.23);
  transform: translateY(1px) scale(0.98);
}

.main-content {
  position: relative;
  padding: 0 28px 60px;
  background-color: #fff0dc;
  background-image:
    radial-gradient(circle at 18px 18px, rgba(207, 61, 0, 0.055) 1.4px, transparent 1.7px),
    linear-gradient(45deg, transparent 48.5%, rgba(225, 72, 0, 0.028) 49%, rgba(225, 72, 0, 0.028) 51%, transparent 51.5%),
    linear-gradient(-45deg, transparent 48.5%, rgba(225, 72, 0, 0.028) 49%, rgba(225, 72, 0, 0.028) 51%, transparent 51.5%);
  background-position: 0 0, 0 0, 36px 0;
  background-size: 36px 36px, 72px 72px, 72px 72px;
}

.app-notification-button {
  position: absolute;
  top: 26px;
  right: 24px;
  z-index: 70;
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  padding: 0;
  color: #5a3425;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(236, 177, 133, 0.82);
  border-radius: 50%;
  box-shadow: 0 10px 26px rgba(82, 37, 13, 0.16);
  cursor: pointer;
  backdrop-filter: blur(12px);
  transition: color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

body[data-active-page="mypage"] .app-notification-button {
  top: 22px;
  right: 52px;
}

body[data-active-page="mypage"] .settings-button {
  top: 88px;
  right: 22px;
}

.nav-item.has-unread-notifications::before {
  position: absolute;
  top: 50%;
  right: 18px;
  width: 10px;
  height: 10px;
  background: #e53935;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 3px 8px rgba(190, 31, 28, 0.32);
  content: "";
  transform: translateY(-50%);
}

.app-notification-button svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.app-notification-button:hover,
.app-notification-button:focus-visible {
  color: #df4104;
  background: #fff8ef;
  box-shadow: 0 12px 30px rgba(193, 65, 10, 0.22);
  transform: translateY(-2px);
}

.app-notification-button:focus-visible {
  outline: 3px solid rgba(255, 89, 20, 0.28);
  outline-offset: 3px;
}

.app-notification-button.has-unread svg {
  color: #ee4707;
  fill: #fff0e6;
}

.notification-unread-count {
  position: absolute;
  top: -5px;
  right: -7px;
  display: grid;
  min-width: 23px;
  height: 23px;
  place-items: center;
  padding: 0 6px;
  box-sizing: border-box;
  color: #fff;
  background: #e53935;
  border: 3px solid #fff;
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(190, 31, 28, 0.3);
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
}

.page-view {
  display: none;
}

.page-view.active {
  display: block;
}

.hero {
  position: relative;
  display: flex;
  justify-content: space-between;
  min-height: 390px;
  margin: 0 -28px;
  padding: 38px 48px 102px;
  overflow: hidden;
  color: #ffffff;
  background:
    radial-gradient(circle at 82% 10%, rgba(255, 228, 158, 0.35), transparent 25%),
    radial-gradient(circle at 12% 88%, rgba(129, 17, 0, 0.22), transparent 33%),
    linear-gradient(145deg, #d93600 0%, #ff4b00 52%, #ff7618 100%);
  isolation: isolate;
}

.hero::before {
  position: absolute;
  top: -245px;
  right: -165px;
  z-index: -1;
  width: 520px;
  height: 520px;
  border: 2px solid rgba(255, 255, 255, 0.13);
  border-radius: 50%;
  box-shadow:
    0 0 0 58px rgba(255, 255, 255, 0.06),
    0 0 0 118px rgba(255, 255, 255, 0.035);
  content: "";
  pointer-events: none;
}

.hero::after {
  position: absolute;
  right: 32px;
  bottom: -58px;
  z-index: -1;
  color: rgba(255, 255, 255, 0.065);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 280px;
  font-weight: 900;
  line-height: 1;
  content: "祭";
  transform: rotate(-8deg);
  pointer-events: none;
}

.hero-text p,
.hero-text h1 {
  margin: 0;
}

.hero-platform-label {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 13px;
  color: #fff5dc;
  background: rgba(116, 27, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.06em;
  backdrop-filter: blur(5px);
}

.hero-text h1 {
  position: relative;
  display: inline-block;
  margin-top: 10px;
  font-family: "Kaiti SC", STKaiti, "Hannotate SC", "HanziPen SC", "Yuji Syuku", "HGS行書体", "HGP行書体", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
  font-size: clamp(50px, 5vw, 72px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.11em;
  text-shadow: 0 7px 20px rgba(91, 19, 0, 0.36), 2px 2px 0 rgba(120, 24, 0, 0.18);
  transform: rotate(-1.5deg);
  isolation: isolate;
}

.hero-text h1::after {
  position: absolute;
  right: 5%;
  bottom: -10px;
  left: -2%;
  z-index: -1;
  height: 9px;
  background: linear-gradient(90deg, rgba(255, 227, 132, 0.18), #ffe08b 12%, #ffd35d 72%, rgba(255, 224, 123, 0.08));
  clip-path: polygon(0 38%, 8% 20%, 22% 36%, 43% 8%, 67% 28%, 88% 12%, 100% 48%, 88% 72%, 62% 58%, 38% 90%, 16% 66%, 0 78%);
  content: "";
  filter: drop-shadow(0 3px 5px rgba(105, 24, 0, 0.18));
}

.hero-mission-copy {
  max-width: 720px;
  margin-top: 18px !important;
  color: rgba(255, 255, 255, 0.96);
  font-size: clamp(17px, 1.65vw, 22px);
  font-weight: 800;
  line-height: 1.65;
}

.hero-mission-copy strong {
  display: block;
  color: #fff0a8;
}

.hero-welcome {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 7px;
  width: fit-content;
  max-width: 720px;
  margin-top: 22px;
  padding: 10px 14px;
  background: rgba(112, 24, 0, 0.19);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
}

.hero-welcome small { font-size: 12px; font-weight: 800; }
.hero-welcome > strong { font-size: 16px; }
.hero-auth-copy { width: 100%; color: rgba(255, 255, 255, 0.86); font-size: 12px; font-style: normal; font-weight: 800; line-height: 1.55; }

.hero-auth-actions {
  display: flex;
  gap: 8px;
  width: 100%;
  margin-top: 7px;
}

.hero-auth-actions button {
  min-height: 38px;
  padding: 0 15px;
  color: #6e2607;
  background: #fff7e9;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 999px;
  font: inherit;
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.hero-auth-actions button:first-child {
  color: #c53300;
  background: #fff;
  box-shadow: 0 7px 18px rgba(96, 22, 0, .2);
}

.hero-auth-actions button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(96, 22, 0, .22);
}

.hero-avatar {
  border: 4px solid rgba(255, 255, 255, 0.72);
}

.hero-avatar-button {
  flex: 0 0 auto;
  align-self: flex-start;
  padding: 4px;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}

.hero-avatar-button .hero-avatar {
  display: block;
}

.hero-avatar-button:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

.hero-avatar-button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* 投稿導線を目立たせるため、オレンジのヒーローに少し重ねています。 */
.post-panel {
  position: relative;
  z-index: 1;
  margin: -58px auto 26px;
  padding: 28px;
  max-width: 760px;
  background: #ffffff;
  border-radius: 26px;
}

.big-post-button {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 88px;
  overflow: hidden;
  background: linear-gradient(125deg, #ff3d00, #ff6817 52%, #f04400);
  border-radius: 20px;
  font-size: 25px;
  box-shadow: 0 9px 0 #bd3508, 0 18px 34px rgba(215, 54, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: background 190ms ease, box-shadow 190ms ease, filter 190ms ease, transform 190ms ease;
}

.big-post-button::before {
  position: absolute;
  inset: -45% auto -45% -28%;
  z-index: -1;
  width: 24%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent);
  content: "";
  pointer-events: none;
  transform: skewX(-18deg) translateX(-180%);
  transition: transform 480ms ease;
}

@media (hover: hover) {
  .big-post-button:hover {
    background: linear-gradient(125deg, #ff5310, #ff851f 50%, #ff4b00);
    box-shadow: 0 13px 0 #b83208, 0 25px 46px rgba(229, 65, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.34);
    filter: saturate(1.08);
    transform: translateY(-4px) scale(1.008);
  }
  .big-post-button:hover::before { transform: skewX(-18deg) translateX(650%); }
}

.big-post-button:active {
  background: linear-gradient(125deg, #e53a00, #f24c08);
  box-shadow: 0 2px 0 #a92d07, 0 7px 15px rgba(188, 47, 0, 0.22), inset 0 5px 10px rgba(105, 24, 0, 0.2);
  transform: translateY(6px) scale(0.992);
}

.big-post-button:focus-visible {
  outline: 4px solid rgba(255, 135, 45, 0.34);
  outline-offset: 5px;
}

.post-options {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 18px;
}

.post-options button {
  min-height: 92px;
  color: #fb4b08;
  background: #fff0d8;
  border-radius: 16px;
}

.post-options button:last-child {
  color: #226dff;
  background: #eaf3ff;
}

.post-options span {
  display: block;
  margin-bottom: 6px;
  font-size: 26px;
}

.about-intro-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  max-width: 900px;
  margin: 0 auto 34px;
  padding: 20px 24px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #f3d5b9;
  border-radius: 22px;
  box-shadow: 0 8px 24px rgba(100, 50, 15, 0.08);
}

.about-intro-icon {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  background: #fff1dc;
  border-radius: 17px;
  font-size: 28px;
}

.about-intro-copy span {
  color: #d9470b;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
}

.about-intro-copy h2 {
  margin: 2px 0 5px;
  color: #1c2434;
  font-size: 21px;
}

.about-intro-copy p {
  margin: 0;
  color: #657083;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.7;
}

.about-intro-card > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  color: #fff;
  background: #ff4b00;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

.about-intro-card > a:hover {
  background: #df4104;
}

.about-intro-card > a:focus-visible {
  outline: 3px solid rgba(255, 75, 0, 0.3);
  outline-offset: 3px;
}

.section-heading h2 {
  margin: 0;
  font-size: 24px;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 18px;
  color: #a0a8b6;
  background: #f8f9fb;
  border: 1px solid #dfe3ea;
  border-radius: 16px;
}

.search-box input {
  width: 100%;
  border: 0;
  outline: 0;
  color: #303847;
  background: transparent;
  font-size: 17px;
  font-weight: 700;
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 18px;
}

.section-heading button {
  color: #fb4b08;
  background: #fff4e7;
  border-radius: 999px;
  padding: 9px 14px;
}

.home-nearby-heading {
  align-items: flex-end;
}

.home-nearby-heading > div:first-child {
  display: grid;
  gap: 6px;
}

.home-nearby-heading p {
  margin: 0;
  color: #7e8797;
  font-size: 13px;
  font-weight: 800;
}

.section-heading-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.home-nearby-heading [data-action="home-nearby"] {
  color: #2168f5;
  background: #eaf3ff;
}

.home-nearby-heading button:disabled {
  cursor: wait;
  opacity: 0.65;
}

/* 最新レポは左から新しい順に並べ、この欄の中だけ横へ送れるようにします。 */
.report-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 1fr);
  gap: 18px;
  width: 100%;
  padding: 2px 2px 14px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-padding-inline: 2px;
  scroll-snap-type: inline mandatory;
  scrollbar-color: #cbd2dc transparent;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.report-grid::-webkit-scrollbar {
  height: 7px;
}

.report-grid::-webkit-scrollbar-thumb {
  background: #cbd2dc;
  border-radius: 999px;
}

.report-grid::-webkit-scrollbar-track {
  background: transparent;
}

.report-card {
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  padding: 0;
  color: inherit;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: box-shadow 160ms ease, transform 160ms ease;
}

.report-card:hover {
  box-shadow: 0 10px 26px rgba(28, 36, 52, 0.1);
  transform: translateY(-2px);
}

.report-card:focus-visible {
  outline: 3px solid rgba(33, 104, 245, 0.32);
  outline-offset: 3px;
}

.report-card:disabled {
  color: inherit;
  cursor: default;
}

.report-card:disabled:hover {
  box-shadow: none;
  transform: none;
}

.report-card,
.event-card,
.level-card,
.badge-card,
.recommend-card {
  overflow: hidden;
  background: #ffffff;
  border-radius: 24px;
}

.report-card > .report-card-image {
  width: 100%;
  height: 190px;
  object-fit: cover;
}

.report-body,
.event-body {
  padding: 18px 20px 20px;
}

.report-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 150px;
}

.report-author-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
}

.report-card .report-author-avatar {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  object-fit: cover;
  border: 1px solid #dfe5ee;
  border-radius: 50%;
}

.report-author-copy,
.report-author-name,
.report-posted-date {
  display: block;
}

.report-author-name {
  color: #303847;
  font-size: 13px;
  font-weight: 900;
}

.report-posted-date {
  margin-top: 2px;
  color: #8a93a3;
  font-size: 11px;
  font-weight: 800;
}

.event-card h3,
.recommend-item h3 {
  margin: 0 0 8px;
  font-size: 18px;
}

.event-card .event-card-title {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 10px 0 9px;
  min-height: 58px;
  padding: 11px 15px;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 12%, rgba(255, 184, 45, .34), transparent 30%),
    linear-gradient(135deg, #fff9ed, #ffedcf 60%, #fff5df);
  border: 1px solid #ffc590;
  border-left: 5px solid #ff4b00;
  border-radius: 14px;
  box-shadow: 0 7px 18px rgba(184, 66, 10, .12), inset 0 1px 0 rgba(255, 255, 255, .9);
  line-height: 1.4;
}

.event-card-title-label {
  flex: 0 0 auto;
  padding: 5px 8px;
  color: #fff;
  background: linear-gradient(135deg, #ff4b00, #f06a21);
  border-radius: 8px;
  box-shadow: 0 3px 8px rgba(255, 75, 0, .2);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;
}

.event-card-title-text {
  min-width: 0;
  color: #1b2434;
  font-size: 21px;
  font-weight: 950;
  overflow-wrap: anywhere;
  letter-spacing: .01em;
  text-shadow: 0 1px 0 #fff, 0 2px 8px rgba(112, 67, 20, .08);
}

.event-card-date-block {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin: 12px 0;
  padding: 11px 12px;
  background: linear-gradient(135deg, #fff7ef, #fffaf6);
  border: 1px solid #ffd8bf;
  border-radius: 15px;
}

.event-card-date-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  background: #fff;
  border: 1px solid #ffd8bf;
  border-radius: 12px;
  font-size: 18px;
  box-shadow: 0 4px 10px rgba(184, 66, 10, 0.08);
}

.event-card-date-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.event-card-date-details {
  display: grid;
  min-width: 0;
  gap: 8px;
}

.event-card-date-subrow {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.event-card-date-copy strong {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow-wrap: anywhere;
  color: #252e3d;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.35;
}

.event-card-date-value {
  min-width: 0;
  white-space: nowrap;
}

.event-card-date-more {
  flex: 0 0 auto;
  padding: 2px 7px;
  color: #c84612;
  background: linear-gradient(135deg, #fff0e5, #ffe0cd);
  border: 1px solid #ffc4a2;
  border-radius: 999px;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0;
  white-space: nowrap;
  box-shadow: 0 3px 8px rgba(196, 70, 18, .08);
}

.event-card-date-more::before {
  margin-right: 2px;
  content: "＋";
}

.event-card-date-time {
  padding: 6px 9px;
  color: #d83e00;
  background: #fff;
  border: 1px solid #ffc9ae;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.event-card-date-field-label {
  flex: 0 0 auto;
  color: #a34a20;
  font-size: .72em;
  font-weight: 900;
  white-space: nowrap;
}

.event-card-date-time .event-card-date-field-label {
  margin-right: 3px;
}

.event-card-date-block.is-unset {
  filter: grayscale(0.65);
  opacity: 0.78;
}

@media (min-width: 1025px) {
  .event-card .event-card-date-block {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    width: 100%;
    max-width: 100%;
    gap: 9px;
    margin: 9px 0 4px;
    padding: 8px 10px;
    border-radius: 13px;
  }

  .event-card .event-card-date-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 16px;
  }

  .event-card .event-card-date-copy {
    min-width: 0;
  }

  .event-card .event-card-date-details {
    display: grid;
    align-items: start;
    gap: 6px;
  }

  .event-card .event-card-date-subrow {
    justify-content: flex-start;
    gap: 9px;
  }

  .event-card .event-card-date-copy strong {
    font-size: 14px;
    white-space: normal;
  }

  .event-card .event-card-date-value {
    white-space: normal;
  }

  .event-card .event-card-date-time {
    padding: 5px 8px;
    border-radius: 9px;
    font-size: 12px;
  }
}

.report-title {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: calc(1.55em * 2);
  margin-bottom: 22px;
  color: #1c2434;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.55;
  text-align: center;
}

.report-title > span {
  display: -webkit-box;
  width: 100%;
  overflow: hidden;
  text-align: center;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.home-distance-label {
  display: inline-flex;
  width: fit-content;
  margin: 9px 0 0;
  padding: 6px 10px;
  color: #2168f5;
  background: #eaf3ff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.events-section {
  margin-top: 40px;
}

.event-list {
  display: grid;
  gap: 16px;
}

.event-card {
  display: grid;
  grid-template-columns: 172px 1fr auto;
  gap: 18px;
  align-items: center;
  min-height: 226px;
  padding: 18px;
}

.event-card > .event-card-image {
  width: 172px;
  height: 128px;
  object-fit: cover;
  border-radius: 16px;
}

.event-author-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.event-author-row-mobile {
  display: none;
}

.event-card-like-mobile {
  display: none;
}

.event-author-profile {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

button.event-author-profile {
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

button.event-author-profile:hover .event-author-avatar,
button.event-author-profile:focus-visible .event-author-avatar {
  border-color: #ff8b4b;
  box-shadow: 0 0 0 3px rgba(255, 75, 0, 0.12);
}

button.event-author-profile:focus-visible {
  outline: none;
}

.event-author-avatar {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  object-fit: cover;
  border: 1px solid #e1e6ef;
  border-radius: 50%;
}

.event-author-row strong,
.event-author-row span {
  display: block;
}

.event-author-row strong {
  color: #303847;
  font-size: 13px;
  line-height: 1.35;
}

.event-author-row .event-author-name-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 0;
}

.event-author-row .event-official-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  margin-top: 0;
  padding: 2px 7px;
  color: #0758c7;
  background: #eaf3ff;
  border: 1px solid #bfd8ff;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.event-author-row span {
  margin-top: 2px;
  color: #8a93a3;
  font-size: 11px;
  font-weight: 800;
}

.event-author-row .follow-button {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
}

.event-card-actions {
  display: grid;
  gap: 10px;
  justify-items: stretch;
}

.event-card-actions .like-button {
  min-width: 110px;
}

.owner-action-button {
  min-height: 42px;
  padding: 0 18px;
  color: #303847;
  background: #f5f7fa;
  border: 1px solid #dfe4ec;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 900;
}

.owner-action-button.danger {
  color: #d92d20;
  background: #fff4f2;
  border-color: #ffd5cf;
}

.event-more-actions { position:relative;display:flex;justify-content:flex-end; }
.event-more-button {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: #697386;
  background: #f5f7fa;
  border: 1px solid #e0e5ed;
  border-radius: 50%;
  font-size: 0;
  line-height: 0;
  appearance: none;
  -webkit-appearance: none;
}
.event-more-button .event-more-dots {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  line-height: 0;
  transform: none;
}
.event-more-button .event-more-dots i {
  display: block;
  flex: 0 0 5px;
  width: 5px;
  height: 5px;
  background: currentColor;
  border-radius: 50%;
}
.event-more-button:hover,.event-more-button[aria-expanded="true"] { color:#e64208;background:#fff2e9;border-color:#ffc9ad; }
.event-more-menu { position:absolute;z-index:40;top:calc(100% + 7px);right:0;display:grid;min-width:148px;padding:6px;background:#fff;border:1px solid #e1e6ef;border-radius:13px;box-shadow:0 18px 42px rgba(28,36,52,.2); }
.event-more-menu button { min-height:40px;padding:9px 12px;color:#303847;background:transparent;border:0;border-radius:9px;text-align:left;font:inherit;font-size:13px;font-weight:900;white-space:nowrap; }
.event-more-menu button:hover { background:#f5f7fa; }
.event-more-menu button.danger { color:#d92d20; }
.event-card-actions>.event-more-actions { justify-self:center; }
.event-detail-author-actions .event-more-actions { flex:0 0 auto; }

.mypage-posts-section {
  margin-top: 20px;
}

.mypage-posts-section .section-heading > div {
  display: grid;
  gap: 2px;
}

.mypage-posts-section .section-heading p {
  margin: 0;
  color: #8a93a3;
  font-size: 12px;
  font-weight: 800;
}

.mypage-post-list {
  display: grid;
  border-top: 1px solid #edf0f4;
}

.mypage-post-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0;
  border-bottom: 1px solid #edf0f4;
}

.mypage-post-main {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 14px 10px 14px 0;
  color: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 14px;
}

.mypage-post-main:hover {
  background: #fafbfc;
}

.mypage-post-main img {
  width: 76px;
  height: 58px;
  object-fit: cover;
  background: #eef1f5;
  border-radius: 12px;
}

.mypage-post-copy,
.mypage-post-title-line {
  min-width: 0;
}

.mypage-post-copy {
  display: grid;
  gap: 4px;
}

.mypage-post-title-line {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mypage-post-title-line > strong {
  overflow: hidden;
  color: #303847;
  font-size: 15px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mypage-post-status {
  flex: 0 0 auto;
  padding: 3px 8px;
  color: #2168f5;
  background: #eaf3ff;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
}

.mypage-post-status.is-active {
  color: #277408;
  background: #eaf8df;
}

.mypage-post-status.is-ended {
  color: #7e8797;
  background: #eef1f5;
}

.mypage-post-meta,
.mypage-post-likes {
  color: #7e8797;
  font-size: 12px;
  font-weight: 800;
}

.mypage-post-likes {
  color: #e44848;
}

.mypage-post-actions {
  position: relative;
  padding-left: 8px;
}

.mypage-post-menu-button {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  color: #687386;
  background: #f5f7fa;
  border: 0;
  border-radius: 50%;
  appearance: none;
  line-height: 0;
}

.mypage-post-menu-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  height: 100%;
  line-height: 0;
}

.mypage-post-menu-dots i {
  display: block;
  flex: 0 0 4px;
  width: 4px;
  height: 4px;
  background: currentColor;
  border-radius: 50%;
}

.mypage-post-menu-button:hover,
.mypage-post-menu-button[aria-expanded="true"] {
  color: #fb4b08;
  background: #fff4e7;
}

.mypage-post-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  display: grid;
  min-width: 120px;
  padding: 6px;
  background: #ffffff;
  border: 1px solid #e1e6ef;
  border-radius: 12px;
  box-shadow: 0 16px 36px rgba(28, 36, 52, 0.16);
}

.mypage-post-menu button {
  padding: 9px 12px;
  color: #303847;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 900;
}

.mypage-post-menu button:hover {
  background: #f5f7fa;
}

.mypage-post-menu button.danger {
  color: #d92d20;
}

.mypage-posts-more {
  display: block;
  min-width: 180px;
  min-height: 44px;
  margin: 18px auto 0;
  color: #fb4b08;
  background: #fff4e7;
  border: 0;
  border-radius: 999px;
  font-weight: 900;
}

.mypage-posts-more:disabled {
  cursor: wait;
  opacity: 0.65;
}

.mypage-posts-status {
  min-height: 20px;
  margin: 8px 0 0;
  color: #8a93a3;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.mypage-posts-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 110px;
  color: #7e8797;
  font-weight: 800;
}

.mypage-posts-loading span {
  width: 18px;
  height: 18px;
  border: 3px solid #e1e6ef;
  border-top-color: #fb4b08;
  border-radius: 50%;
  animation: feed-loading-spin 0.75s linear infinite;
}

.empty-posts {
  padding: 28px;
  color: #687386;
  background: #f8fafc;
  border: 1px solid #edf0f4;
  border-radius: 18px;
}

.empty-posts strong {
  display: block;
  margin-bottom: 6px;
  color: #303847;
  font-size: 18px;
}

.empty-posts p {
  margin: 0;
  font-weight: 800;
}

.area-tag,
.type-tag {
  display: inline-flex;
  margin-right: 10px;
  padding: 6px 10px;
  color: #fb4b08;
  background: #fff4e7;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.type-tag {
  color: #2168f5;
  background: #eaf3ff;
}

.event-card-status {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  color: #2168f5;
  background: #eaf3ff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  vertical-align: middle;
}

.event-card-status.is-active {
  color: #277408;
  background: #eaf8df;
}

.event-card-status.is-ended {
  color: #7e8797;
  background: #eef1f5;
}

.detail-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 110px;
  padding: 13px 18px;
  color: #303847;
  background: #f8f9fb;
  border: 1px solid #dfe3ea;
  border-radius: 14px;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 5px 0 #d9dee7, 0 10px 20px rgba(42, 52, 70, 0.1);
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.detail-button strong {
  font-family: inherit;
  font-size: inherit;
  font-weight: 950;
  line-height: 1.25;
  letter-spacing: 0.02em;
}

@media (hover: hover) {
  .detail-button:hover {
    color: #ffffff;
    background: linear-gradient(135deg, #ff6816, #ed3d08);
    border-color: #df3905;
    box-shadow: 0 2px 0 #b92f08, 0 6px 14px rgba(225, 61, 8, 0.2), inset 0 2px 4px rgba(125, 29, 0, 0.13);
    transform: translateY(3px) scale(0.99);
  }
}

.detail-button:active {
  color: #ffffff;
  background: linear-gradient(135deg, #eb4308, #d83205);
  border-color: #c33106;
  box-shadow: 0 0 0 #b92f08, inset 0 4px 8px rgba(104, 24, 0, 0.22);
  transform: translateY(5px) scale(0.985);
}

.detail-button:focus-visible {
  outline: 3px solid rgba(251, 75, 8, 0.28);
  outline-offset: 4px;
}

.right-panel {
  display: grid;
  align-content: start;
  gap: 18px;
  padding: 28px 22px 60px;
  background: #ffffff;
  border-left: 1px solid #e8ebf1;
}

.level-card,
.badge-card,
.recommend-card {
  padding: 20px;
}

.profile-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.profile-row h2,
.profile-row p {
  margin: 0;
}

.level-meta {
  display: flex;
  justify-content: space-between;
  margin: 20px 0 8px;
  font-weight: 900;
}

.level-meta strong {
  color: #ffffff;
  background: #ff4b00;
  border-radius: 999px;
  padding: 4px 12px;
}

.level-meta span {
  color: #98a1b0;
}

.exp-bar {
  height: 13px;
  overflow: hidden;
  background: #eef1f5;
  border-radius: 999px;
}

.exp-bar span {
  display: block;
  width: 95%;
  height: 100%;
  background: #ff4b00;
  border-radius: inherit;
  transition: width .9s cubic-bezier(.22,.8,.3,1);
}

.side-point-balance { display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:9px;margin:14px 0 0;padding:11px 12px 11px 9px;color:#687386;background:linear-gradient(135deg,#fffaf2,#fff4e6);border:1px solid #ffdbb9;border-radius:15px;font-weight:800; }
.side-point-balance img { width:38px;height:38px;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(196,59,0,.2)); }
.side-point-balance span { min-width:0;font-size:.78rem;line-height:1.25; }
.side-point-balance strong { color:#ff4b00;font-size:1.05rem;white-space:nowrap; }
.daily-card { padding:20px; }
.daily-list { display:grid;gap:9px;margin-top:14px; }
.daily-item { display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding:12px 14px;background:#f8fafc;border:1px solid #e8edf3;border-radius:13px; }
.daily-item.is-done { background:#fff6ed;border-color:#ffc69f; }
.daily-item.is-claimable { box-shadow:0 4px 14px rgba(255,75,0,.08); }
.daily-item-copy { display:grid;gap:3px; }
.daily-item-copy small { color:#7a8495;font-size:.72rem;font-weight:700; }
.daily-item span { color:#647084;font-size:.86rem;white-space:nowrap; }
.daily-item-reward { display:flex;align-items:center;justify-content:flex-end;gap:10px; }
.daily-item-reward button { min-height:38px;padding:8px 14px;border:0;border-radius:999px;background:#ff4b00;color:#fff;font:inherit;font-size:.76rem;font-weight:900;cursor:pointer;box-shadow:0 6px 14px rgba(255,75,0,.2);white-space:nowrap; }
.daily-item-reward button:disabled { background:#fff;border:1px solid #efc8ae;color:#9a6a4b;box-shadow:none;cursor:default; }
.daily-complete-reward { display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:12px;padding:13px 16px;border:1px solid #ffd2b6;border-radius:14px;background:linear-gradient(135deg,#fff7ef,#fff0e3);color:#c43b00; }
.daily-complete-reward>strong { white-space:nowrap; }
.daily-complete-reward-values { display:flex;align-items:center;justify-content:flex-end;gap:14px;font-weight:900;flex-wrap:wrap; }
.daily-complete-reward-values>button { min-height:40px;padding:8px 14px;border:0;border-radius:999px;background:#d9dde4;color:#70798a;font:inherit;font-size:.78rem;font-weight:900;cursor:not-allowed;white-space:nowrap; }
.daily-complete-reward-values>button.is-claimable { background:#ff4b00;color:#fff;cursor:pointer;box-shadow:0 7px 16px rgba(255,75,0,.22); }
.daily-complete-reward-values>button.is-claimed { background:#fff;border:1px solid #efc8ae;color:#9a6a4b; }
.matsumari-point-reward { display:flex;align-items:center;gap:7px;padding:5px 10px 5px 6px;border:1px solid rgba(255,155,47,.45);border-radius:999px;background:#fff;box-shadow:0 4px 12px rgba(196,59,0,.08); }
.matsumari-point-reward>img { width:32px;height:32px;object-fit:contain;filter:drop-shadow(0 3px 4px rgba(196,59,0,.18)); }
.matsumari-point-reward>span { display:grid;gap:0;text-align:left;line-height:1; }
.matsumari-point-reward b { font-size:1rem;
  color:brown;
 }
.matsumari-point-reward small { margin-top:3px;color:#8b5b3d;font-size:.62rem;font-weight:800;white-space:nowrap; }
.gacha-card {
  isolation: isolate;
  overflow: hidden;
  padding: 30px;
  color: #fff8df;
  background:
    radial-gradient(circle at 88% 14%, rgba(255, 217, 121, .2), transparent 26%),
    linear-gradient(135deg, #6f140d 0%, #a62912 48%, #73120d 100%);
  border: 1px solid #d68b40;
  box-shadow: 0 16px 36px rgba(95, 25, 9, .2), inset 0 0 0 5px rgba(255, 230, 166, .07);
}
.gacha-card::before,
.gacha-card::after {
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(255, 224, 151, .18);
  border-radius: 50%;
  content: "";
}
.gacha-card::before { top:-96px;right:-62px;width:250px;height:250px;box-shadow:0 0 0 20px rgba(255,224,151,.035),0 0 0 42px rgba(255,224,151,.025); }
.gacha-card::after { bottom:-90px;left:-58px;width:190px;height:190px;box-shadow:0 0 0 16px rgba(255,224,151,.03); }
.gacha-heading { display:flex;align-items:center;gap:18px; }
.gacha-heading-mark { display:grid;flex:0 0 70px;width:70px;height:70px;place-items:center;color:#762017;background:linear-gradient(145deg,#fff4c7,#d9a73b);border:2px solid #ffe6a1;border-radius:50%;font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:31px;font-weight:900;box-shadow:0 8px 20px rgba(40,5,0,.28),inset 0 0 0 5px rgba(121,47,12,.13); }
.gacha-kicker { display:block;margin-bottom:3px;color:#f4cd76;font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:.72rem;font-weight:800;letter-spacing:.16em; }
.gacha-heading h2 { margin:0;color:#fff9e8;font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:1.55rem;letter-spacing:.08em;text-shadow:0 2px 8px rgba(32,4,0,.28); }
.gacha-heading p { margin:5px 0 0;color:#f4d9bf;font-size:.82rem;font-weight:750; }
.gacha-actions { display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:12px;margin:24px 0 12px; }
.gacha-actions button { position:relative;display:flex;align-items:center;justify-content:center;gap:11px;min-height:72px;padding:10px 17px;border-radius:16px;font:inherit;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease; }
.gacha-actions button:not(:disabled):hover { transform:translateY(2px);filter:saturate(1.08); }
.gacha-actions button:focus-visible { outline:3px solid #ffe094;outline-offset:3px; }
.gacha-actions button img { width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 4px 5px rgba(73,20,0,.28)); }
.gacha-actions button span { display:grid;gap:2px;text-align:left; }
.gacha-actions button small { color:inherit;font-size:.68rem;font-weight:800;letter-spacing:.04em; }
.gacha-actions button strong { font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:1.02rem;letter-spacing:.08em; }
.gacha-draw-button { overflow:hidden;color:#641409;background:linear-gradient(145deg,#fff9dd 0%,#f7d47c 48%,#dca742 100%);border:1px solid #fff1b9;box-shadow:0 9px 22px rgba(45,7,0,.27),inset 0 1px rgba(255,255,255,.75); }
.gacha-draw-button b { position:absolute;right:15px;display:grid;width:32px;height:32px;place-items:center;color:#ffe9a4;background:#8d1e11;border-radius:50%;font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:.9rem;box-shadow:0 3px 8px rgba(67,10,0,.25); }
.gacha-draw-button span { padding-right:34px; }
.gacha-ad-button { color:#ffe8c2;background:rgba(50,7,4,.28);border:1px solid rgba(255,225,159,.42);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04); }
.gacha-actions button:disabled { color:rgba(255,238,207,.58);background:rgba(45,15,12,.28);border-color:rgba(255,226,173,.18);box-shadow:none;cursor:not-allowed; }
.gacha-status { display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:11px;border-top:1px solid rgba(255,230,177,.2); }
.gacha-status p { margin:0;color:#ffe5b1;font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:.8rem;font-weight:800;white-space:nowrap; }
.gacha-status small { color:#dfbaa3;font-size:.68rem;font-weight:700;text-align:right; }
.gacha-point-guide { margin-top:13px;border:1px solid rgba(255,230,177,.24);border-radius:15px;background:rgba(44,7,4,.2); }
.gacha-point-guide summary { display:grid;grid-template-columns:34px minmax(0,1fr) auto auto;align-items:center;gap:9px;min-height:55px;padding:9px 13px;cursor:pointer;list-style:none; }
.gacha-point-guide summary::-webkit-details-marker { display:none; }
.gacha-point-guide summary::after { margin-left:1px;color:#f4cd76;content:"＋";font-size:1rem;font-weight:900; }
.gacha-point-guide[open] summary::after { content:"−"; }
.gacha-point-guide summary img { width:32px;height:32px;object-fit:contain;filter:drop-shadow(0 3px 5px rgba(23,3,0,.3)); }
.gacha-point-guide summary strong { color:#fff1c9;font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:.86rem;letter-spacing:.03em; }
.gacha-point-guide summary span { color:#e5b988;font-size:.68rem;font-weight:800;white-space:nowrap; }
.gacha-point-guide[open] summary { border-bottom:1px solid rgba(255,230,177,.18); }
.gacha-point-guide-body { display:grid;gap:12px;padding:14px; }
.gacha-point-guide-body>p { margin:0;color:#f2d9c0;font-size:.76rem;font-weight:750;line-height:1.65; }
.gacha-point-guide-body ul { display:grid;gap:7px;margin:0;padding:0;list-style:none; }
.gacha-point-guide-body li { display:grid;grid-template-columns:minmax(112px,.7fr) minmax(0,1.3fr);gap:9px;padding:9px 10px;border-radius:10px;background:rgba(255,249,226,.08); }
.gacha-point-guide-body li strong { color:#ffe29a;font-size:.72rem; }
.gacha-point-guide-body li span { color:#e6c6ae;font-size:.7rem;font-weight:700;line-height:1.5; }
.gacha-point-guide-body button { min-height:44px;padding:10px 15px;color:#68170c;background:linear-gradient(145deg,#fff7d1,#e7b84f);border:1px solid #ffe7a4;border-radius:12px;font:inherit;font-size:.78rem;font-weight:950;cursor:pointer;box-shadow:0 7px 16px rgba(38,5,0,.2); }
.gacha-point-guide-body button:hover { filter:brightness(1.05);transform:translateY(-1px); }
.gacha-point-guide-body button:focus-visible { outline:3px solid #ffe094;outline-offset:3px; }

.gacha-result { position:fixed;inset:0;z-index:3200;display:grid;place-items:center;padding:20px;background:rgba(12,15,22,.72);backdrop-filter:blur(7px); }
.gacha-result-panel { position:relative;isolation:isolate;width:min(100%,430px);overflow:hidden;padding:26px 28px 24px;border:2px solid var(--gacha-accent,#9a6a43);border-radius:28px;background:linear-gradient(155deg,#fff 0%,var(--gacha-soft,#f7eadc) 100%);color:#202735;text-align:center;box-shadow:0 28px 90px rgba(0,0,0,.42);animation:gachaResultIn .48s cubic-bezier(.2,.85,.25,1.2) both; }
.gacha-result-glow { position:absolute;z-index:-1;inset:-35% -25% auto;height:75%;background:radial-gradient(circle,var(--gacha-glow,rgba(154,106,67,.32)),transparent 68%);animation:gachaGlow 2.2s ease-in-out infinite alternate; }
.gacha-result-kicker { margin:0 0 5px;color:#697386;font-size:.82rem;font-weight:900;letter-spacing:.14em; }
.gacha-result-rarity { display:inline-flex;align-items:center;justify-content:center;min-width:78px;padding:6px 15px;border:1px solid var(--gacha-accent);border-radius:999px;background:var(--gacha-accent);color:var(--gacha-label,#fff);font-size:1.05rem;letter-spacing:.1em;box-shadow:0 7px 18px var(--gacha-glow); }
.gacha-result-image-wrap { width:210px;height:210px;margin:18px auto 12px;padding:8px;border-radius:50%;background:rgba(255,255,255,.78);box-shadow:0 14px 35px var(--gacha-glow); }
.gacha-result-image { display:block;width:100%;height:100%;object-fit:contain;animation:gachaBadgeReveal .68s .12s cubic-bezier(.2,.8,.2,1.15) both; }
.gacha-result h3 { margin:4px 0 8px;font-size:1.55rem; }
.gacha-result-status { width:max-content;margin:0 auto;padding:7px 16px;border-radius:999px;background:#fff;color:#394252;font-weight:900;box-shadow:0 5px 16px rgba(24,34,50,.12); }
.gacha-result-status.is-new { background:#ff4b00;color:#fff;letter-spacing:.08em;animation:gachaNewPulse 1.2s .55s ease-in-out infinite; }
.gacha-result-quantity { margin:9px 0 0;color:#687386;font-size:.85rem;font-weight:800; }
.gacha-result-balance { margin:15px 0 0;color:#687386;font-size:.78rem;font-weight:800; }
.gacha-result-close { width:100%;min-height:48px;margin-top:18px;border:0;border-radius:14px;background:#202735;color:#fff;font:inherit;font-weight:900;cursor:pointer; }
.gacha-result-close:focus-visible { outline:3px solid var(--gacha-accent);outline-offset:3px; }
.gacha-result.rarity-wood { --gacha-accent:#8a5a32;--gacha-soft:#f4e3cf;--gacha-glow:rgba(138,90,50,.3); }
.gacha-result.rarity-bronze { --gacha-accent:#b75f27;--gacha-soft:#ffe1c8;--gacha-glow:rgba(183,95,39,.36); }
.gacha-result.rarity-silver { --gacha-accent:#8795a8;--gacha-soft:#e8edf5;--gacha-glow:rgba(128,151,184,.46); }
.gacha-result.rarity-gold { --gacha-accent:#e9aa00;--gacha-soft:#fff3bd;--gacha-glow:rgba(255,193,24,.58);--gacha-label:#513600; }
.gacha-result.rarity-black-gold { --gacha-accent:#e1b832;--gacha-soft:#171717;--gacha-glow:rgba(225,184,50,.62);--gacha-label:#17120a; }
.gacha-result.rarity-black-gold .gacha-result-panel { color:#fff;background:radial-gradient(circle at 50% 20%,#423714,#111 58%,#050505);box-shadow:0 0 55px rgba(225,184,50,.35),0 28px 90px rgba(0,0,0,.6); }
.gacha-result.rarity-black-gold .gacha-result-kicker,.gacha-result.rarity-black-gold .gacha-result-balance,.gacha-result.rarity-black-gold .gacha-result-quantity { color:#e9d894; }
.gacha-result.rarity-jewel { --gacha-accent:#fff;--gacha-soft:#bdefff;--gacha-glow:rgba(125,225,255,.72);--gacha-label:#7348cc; }
.gacha-result.rarity-jewel .gacha-result-panel { border-color:#fff;background:linear-gradient(140deg,#f8ffff,#d8f5ff 35%,#eedfff 68%,#ffd9ee);box-shadow:0 0 45px rgba(112,221,255,.7),0 0 90px rgba(208,119,255,.4),0 28px 90px rgba(0,0,0,.42); }
.gacha-result.rarity-jewel .gacha-result-panel::before { content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.85) 45%,transparent 65%);transform:translateX(-120%);animation:gachaJewelShine 1.8s .4s ease-in-out infinite; }
@keyframes gachaResultIn { from{opacity:0;transform:translateY(22px) scale(.88)}to{opacity:1;transform:none} }
@keyframes gachaBadgeReveal { from{opacity:0;transform:rotate(-10deg) scale(.5)}to{opacity:1;transform:none} }
@keyframes gachaGlow { to{transform:scale(1.14);opacity:.72} }
@keyframes gachaNewPulse { 50%{transform:scale(1.08);box-shadow:0 0 24px rgba(255,75,0,.45)} }
@keyframes gachaJewelShine { 45%,100%{transform:translateX(120%)} }

@media (max-width: 560px) {
  .daily-item-reward { width:100%;justify-content:space-between; }
  .daily-item-reward button { min-height:42px; }
  .daily-complete-reward { align-items:flex-start;flex-direction:column; }
  .daily-complete-reward-values { width:100%;justify-content:space-between; }
  .gacha-card { padding:24px 18px; }
  .gacha-heading { align-items:flex-start;gap:13px; }
  .gacha-heading-mark { flex-basis:58px;width:58px;height:58px;font-size:26px; }
  .gacha-heading h2 { font-size:1.3rem; }
  .gacha-heading p { font-size:.75rem; }
  .gacha-actions { grid-template-columns:1fr;margin-top:20px; }
  .gacha-actions button { min-height:66px; }
  .gacha-status { align-items:flex-start;flex-direction:column;gap:5px; }
  .gacha-status small { text-align:left; }
  .gacha-point-guide summary { padding-right:11px; }
  .gacha-point-guide summary span { font-size:.64rem; }
  .gacha-point-guide-body li { grid-template-columns:1fr;gap:3px; }
  .gacha-result-panel { padding:22px 20px 20px;border-radius:24px; }
  .gacha-result-image-wrap { width:180px;height:180px; }
}
@media (prefers-reduced-motion: reduce) {
  .gacha-result-panel,.gacha-result-image,.gacha-result-glow,.gacha-result-status.is-new,.gacha-result.rarity-jewel .gacha-result-panel::before { animation:none; }
}
.reward-celebration { position:fixed;inset:0;z-index:3000;display:grid;place-items:center;padding:20px;pointer-events:none;background:rgba(20,15,8,.18);animation:rewardBackdrop 2.4s forwards; }
.reward-celebration>div { padding:28px 34px;border-radius:24px;background:#fff;color:#303847;text-align:center;box-shadow:0 22px 70px rgba(39,25,12,.25);animation:rewardPop 2.4s forwards; }
.reward-celebration strong { display:block;color:#ff4b00;font-size:1.7rem;margin-bottom:8px; }
.reward-celebration-detail { display:block;font-size:1.15rem;font-weight:900; }
.reward-celebration-points { display:flex;align-items:center;justify-content:center;gap:7px;width:max-content;margin:13px auto 0;padding:7px 13px 7px 7px;border:1px solid #ffd2b6;border-radius:999px;background:#fff7ef;color:#c43b00;box-shadow:0 5px 16px rgba(196,59,0,.12); }
.reward-celebration-points img { width:38px;height:38px;object-fit:contain;filter:drop-shadow(0 3px 5px rgba(196,59,0,.2)); }
.reward-celebration-points b { font-size:1.1rem; }
.reward-celebration small { display:block;margin-top:9px;color:#687386;font-size:.9rem;font-weight:800; }
.reward-celebration-points small { margin:0;color:#8b5b3d;font-size:.72rem; }
.reward-celebration.is-persistent { pointer-events:auto;background:rgba(20,15,8,.5);animation:none; }
.reward-celebration.is-persistent>div { width:min(100%,420px);padding:32px;animation:rewardModalIn .24s ease-out both; }
.reward-celebration-close { width:100%;min-height:46px;margin-top:24px;border:0;border-radius:13px;background:#ff4b00;color:#fff;font:inherit;font-weight:900;cursor:pointer; }
.reward-celebration-close:hover { background:#e94300; }
.reward-celebration-close:focus-visible { outline:3px solid rgba(255,75,0,.3);outline-offset:3px; }
@keyframes rewardPop { 0%{transform:scale(.7);opacity:0}15%,80%{transform:scale(1);opacity:1}100%{transform:scale(1.05);opacity:0} }
@keyframes rewardBackdrop { 0%,90%{opacity:1}100%{opacity:0} }
@keyframes rewardModalIn { from{transform:translateY(12px) scale(.96);opacity:0}to{transform:none;opacity:1} }

/* Collectible badge collection and profile showcase */
.showcase-badge-slot { min-width:0;padding:7px 4px;border:0;background:transparent;color:#f5df9f;font:inherit;cursor:pointer;border-radius:14px;transition:background .18s ease,transform .18s ease; }
.showcase-badge-slot:hover { background:rgba(255,255,255,.07);transform:translateY(-2px); }
.showcase-badge-slot:focus-visible { outline:2px solid #f3c95d;outline-offset:2px; }
.showcase-badge-slot .showcase-badge-image { display:grid;width:66px;height:66px;padding:0;overflow:hidden;border:2px solid #a88b43;background:#0d0d0d;box-shadow:0 7px 18px rgba(0,0,0,.45); }
.showcase-badge-slot .showcase-badge-image img { width:100%;height:100%;object-fit:contain; }
.showcase-badge-slot.is-empty span { border-style:dashed;background:radial-gradient(circle,#37332a,#171717 68%);color:#d9bd6c;font-size:31px; }
.showcase-badge-slot small { color:#d1bd7d; }
.showcase-badge-slot.rarity-jewel small {
  color:var(--jewel-star-color);
  text-shadow:0 0 9px rgba(95,184,213,.46);
}

.badge-collection-summary { display:grid;grid-template-columns:auto minmax(100px,1fr) auto;gap:14px;align-items:center;padding:17px 19px;border:1px solid #ffd0ae;border-radius:18px;background:linear-gradient(135deg,#fff8ef,#fff0dc); }
.badge-collection-summary div:first-child { display:grid; }
.badge-collection-summary small { color:#95603f;font-weight:800; }
.badge-collection-summary strong { color:#212837;font-size:1.25rem; }
.badge-collection-summary>b { color:#d64300;font-size:1.05rem; }
.badge-collection-progress { height:10px;overflow:hidden;border-radius:999px;background:#eadfd3; }
.badge-collection-progress span { display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ff4b00,#f6b323); }
.badge-collection-filters { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0 16px; }
.badge-collection-filters label { display:grid;gap:5px;color:#687386;font-size:.74rem;font-weight:900; }
.badge-collection-filters select { width:100%;min-height:42px;padding:0 34px 0 12px;border:1px solid #dfe4ec;border-radius:12px;background:#fff;color:#252d3c;font:inherit;font-size:.84rem;font-weight:800; }
.badge-collection-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px; }
.badge-collection-item { position:relative;display:grid;min-width:0;gap:4px;place-items:center;padding:14px 8px 12px;border:1px solid #e2e6ed;border-radius:17px;background:#fff;color:#252d3c;font:inherit;text-align:center;cursor:pointer;box-shadow:0 7px 18px rgba(30,39,56,.06);transition:transform .18s ease,box-shadow .18s ease; }
.badge-collection-item:hover:not(:disabled) { transform:translateY(-3px);box-shadow:0 12px 26px rgba(30,39,56,.12); }
.badge-collection-item:focus-visible { outline:3px solid rgba(255,75,0,.3);outline-offset:2px; }
.badge-collection-item:disabled { opacity:.48;cursor:not-allowed; }
.badge-collection-image { display:grid;place-items:center;width:86px;height:86px;margin-bottom:4px;overflow:hidden;border-radius:50%;background:#111;box-shadow:0 8px 18px rgba(24,28,37,.18); }
.badge-collection-image img { width:100%;height:100%;object-fit:contain; }
.badge-collection-image i { color:#686e79;font-size:2rem;font-style:normal;font-weight:900; }
.badge-collection-item strong { max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.86rem; }
.badge-collection-item small { color:#a16a19;font-size:.68rem;font-weight:900;letter-spacing:.02em; }
.badge-collection-item em { color:#747e8f;font-size:.67rem;font-style:normal;font-weight:800; }
.badge-collection-item.is-locked { background:linear-gradient(145deg,#eceef2,#d9dde3);filter:grayscale(1); }
.badge-collection-item.is-locked .badge-collection-image { opacity:.66;box-shadow:inset 0 0 0 1px #69717d; }
.badge-new-mark { position:absolute;z-index:2;top:7px;right:7px;padding:4px 7px;border-radius:999px;background:#ff4b00;color:#fff;font-size:.62rem;font-weight:1000;letter-spacing:.08em;box-shadow:0 4px 10px rgba(255,75,0,.3); }

.badge-collection-detail { position:relative;display:grid;place-items:center;text-align:center;padding:5px 12px 10px; }
.badge-detail-art { display:grid;place-items:center;width:min(72vw,280px);height:min(72vw,280px);margin:4px auto 10px;overflow:hidden;border-radius:50%;background:#121212;box-shadow:0 18px 45px rgba(25,29,37,.25); }
.badge-detail-art img { width:100%;height:100%;object-fit:contain; }
.badge-detail-art i { color:#6c7482;font-size:4rem;font-style:normal;font-weight:900; }
.badge-detail-stars { margin:0;color:#d59600;font-size:1.2rem;letter-spacing:.1em; }
.badge-collection-detail h3 { margin:4px 0;font-size:1.7rem; }
.badge-collection-detail>strong { color:#9b5e23; }
.badge-collection-detail>p:not(.badge-detail-stars) { margin:8px 0;color:#596477;font-weight:800; }
.badge-collection-detail>small { color:#8790a0;font-weight:800; }
.badge-detail-actions { display:grid;width:min(100%,440px);gap:9px;margin-top:20px; }
.badge-detail-actions button { min-height:46px;border:1px solid #dce2ea;border-radius:13px;background:#f6f8fb;color:#303847;font:inherit;font-weight:900;cursor:pointer; }
.badge-detail-actions button.is-primary { border-color:#ff4b00;background:#ff4b00;color:#fff;box-shadow:0 8px 18px rgba(255,75,0,.22); }
.badge-detail-actions button:disabled { border-color:#e8d5c9;background:#fff5ee;color:#a36a49;box-shadow:none;cursor:default; }
.badge-upgrade-panel { display:grid;gap:8px;padding:16px 17px;color:#f5e7bb;background:radial-gradient(circle at 100% 0,rgba(221,177,62,.18),transparent 43%),linear-gradient(145deg,#201c15,#0f0f0e);border:1px solid #9d813b;border-radius:16px;text-align:left;box-shadow:inset 0 1px rgba(255,255,255,.05),0 9px 22px rgba(20,15,7,.18); }
.badge-upgrade-kicker { color:#d9b84e;font-size:.65rem;font-weight:950;letter-spacing:.14em; }
.badge-upgrade-route { display:flex;align-items:center;gap:9px; }
.badge-upgrade-route>span { color:#bcb39d;font-size:.8rem;font-weight:900; }
.badge-upgrade-route>b { color:#c49b31; }
.badge-upgrade-route>strong { color:#fff0b4;font-size:1rem; }
.badge-upgrade-panel>p { margin:0!important;color:#d9ccb0!important;font-size:.78rem;font-weight:850!important; }
.badge-upgrade-requirement { color:#e5a798!important;font-size:.72rem;font-weight:900; }
.badge-upgrade-requirement.is-complete { color:#f5d46c!important; }
.badge-detail-actions .badge-upgrade-button { min-height:48px;margin-top:2px;color:#3b2a05;background:linear-gradient(135deg,#ffe68a,#d8a91f);border:1px solid #ffeaa2;box-shadow:0 7px 18px rgba(218,174,44,.2); }
.badge-detail-actions .badge-upgrade-button:not(:disabled):hover { filter:brightness(1.08);transform:translateY(-1px); }
.badge-detail-actions .badge-upgrade-button:disabled { color:#8d846d;background:#2c2923;border-color:#504b3d;box-shadow:none; }
.badge-upgrade-panel.is-ready { border-color:#e3bd48;box-shadow:0 0 0 2px rgba(227,189,72,.1),0 10px 27px rgba(80,57,5,.24),inset 0 1px rgba(255,255,255,.07); }
.badge-upgrade-panel.is-unavailable { gap:4px;color:#c9c1ad;background:linear-gradient(145deg,#24231f,#171715);border-color:#5c584c; }
.badge-upgrade-panel.is-unavailable>strong { color:#e4dcc7; }
.badge-upgrade-panel.is-unavailable>small:last-child { color:#989181;font-size:.7rem;font-weight:800; }
.badge-upgrade-confirmation { position:fixed;inset:0;z-index:4800;display:grid;place-items:center;padding:20px;background:rgba(10,9,7,.78);backdrop-filter:blur(8px);animation:badgeUpgradeBackdropIn .2s ease-out both; }
.badge-upgrade-confirmation.is-closing { opacity:0;transition:opacity .18s ease; }
.badge-upgrade-confirmation>section { width:min(100%,440px);max-height:calc(100dvh - 40px);padding:28px;overflow-y:auto;color:#29271f;background:radial-gradient(circle at 50% 0,rgba(255,213,91,.23),transparent 34%),linear-gradient(155deg,#fffdf7,#fff4da);border:1px solid #dab658;border-radius:26px;text-align:center;box-shadow:0 28px 85px rgba(0,0,0,.5),inset 0 1px #fff;animation:badgeUpgradePanelIn .25s cubic-bezier(.2,.8,.25,1) both; }
.badge-upgrade-confirmation-mark { display:grid;width:64px;height:64px;margin:0 auto 8px;place-items:center;color:#f6df96;background:radial-gradient(circle,#41361b,#12110e 72%);border:2px solid #c9a33d;border-radius:50%;font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:27px;font-weight:900;box-shadow:0 8px 20px rgba(90,65,12,.25); }
.badge-upgrade-confirmation>section>small { color:#a66b09;font-size:.7rem;font-weight:950;letter-spacing:.14em; }
.badge-upgrade-confirmation h2 { margin:8px 0 18px;font-size:1.25rem;line-height:1.55; }
.badge-upgrade-confirmation-summary { display:grid;gap:9px;padding:15px;color:#e8dcc1;background:#171612;border:1px solid #7e6932;border-radius:17px; }
.badge-upgrade-confirmation-summary>div { display:grid;gap:2px; }
.badge-upgrade-confirmation-summary small { color:#ba9d51;font-size:.65rem;font-weight:950;letter-spacing:.1em; }
.badge-upgrade-confirmation-summary strong { color:#fff2bf;font-size:.9rem; }
.badge-upgrade-confirmation-summary span { color:#c9bea6;font-size:.76rem;font-weight:850; }
.badge-upgrade-confirmation-summary>b { color:#d8b345;line-height:1; }
.badge-upgrade-confirmation-summary .is-reward { padding-top:8px;border-top:1px solid rgba(220,184,80,.25); }
.badge-upgrade-confirmation-actions { display:grid;gap:9px;margin-top:18px; }
.badge-upgrade-confirmation-actions button { min-height:48px;color:#4b4b49;background:#f2f1ed;border:1px solid #dedbd2;border-radius:13px;font:inherit;font-weight:900; }
.badge-upgrade-confirmation-actions button.is-primary { color:#302405;background:linear-gradient(135deg,#ffe787,#dcae28);border-color:#d4aa32;box-shadow:0 8px 18px rgba(142,101,8,.2); }
.badge-upgrade-result-message { margin:11px 0 0;color:var(--gacha-accent);font-weight:950; }
@keyframes badgeUpgradeBackdropIn { from{opacity:0}to{opacity:1} }
@keyframes badgeUpgradePanelIn { from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none} }
.badge-picker-guide { margin:0 0 14px;color:#667184;font-weight:800; }
.showcase-replacement-list { display:grid;gap:10px; }
.showcase-replacement-list button { display:grid;grid-template-columns:35px 58px minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 14px;border:1px solid #e1e5ec;border-radius:15px;background:#fff;color:#27303e;font:inherit;text-align:left;cursor:pointer; }
.showcase-replacement-list button>span { display:grid;width:30px;height:30px;place-items:center;border-radius:50%;background:#ffede1;color:#d64300;font-weight:900; }
.showcase-replacement-list img { width:54px;height:54px;object-fit:contain;border-radius:50%;background:#111; }
.showcase-replacement-list em { color:#ff4b00;font-size:.72rem;font-style:normal;font-weight:900; }

/* Point-gacha confirmation and user-controlled prayer stage */
.gacha-prelude { position:fixed;inset:0;z-index:3190;display:grid;place-items:center;padding:20px;overflow:hidden;background:radial-gradient(circle at 50% 38%,rgba(255,88,20,.24),transparent 38%),rgba(14,9,8,.84);backdrop-filter:blur(8px);animation:gachaPreludeIn .24s ease-out both; }
.gacha-prelude.is-closing { opacity:0;transition:opacity .18s ease; }
.gacha-prelude-confirmation,.gacha-prelude-prayer { grid-area:1/1;width:min(100%,470px);max-height:calc(100dvh - 40px);overflow-x:hidden;overflow-y:auto;padding:30px;border:1px solid #efc27b;border-radius:27px;background:linear-gradient(155deg,#fffdf7,#fff1dc);color:#242b38;text-align:center;box-shadow:0 28px 90px rgba(0,0,0,.48);transition:opacity .22s ease,transform .22s ease;overscroll-behavior:contain; }
.gacha-prelude-mark { display:grid;width:68px;height:68px;margin:0 auto 8px;place-items:center;border-radius:50%;background:#fff1db;font-size:38px;box-shadow:0 8px 22px rgba(161,67,20,.14); }
.gacha-prelude-confirmation>p:first-of-type,.gacha-prelude-prayer-kicker { margin:0;color:#ad4a17;font-size:.76rem;font-weight:950;letter-spacing:.14em; }
.gacha-prelude h2 { margin:8px 0 18px;font-size:clamp(1.35rem,5vw,1.8rem);line-height:1.45; }
.gacha-prelude-balance { display:flex;align-items:center;justify-content:center;gap:10px;width:max-content;max-width:100%;margin:0 auto;padding:9px 16px 9px 10px;border:1px solid #f0d3a7;border-radius:999px;background:#fff; }
.gacha-prelude-balance img { width:42px;height:42px;object-fit:contain; }
.gacha-prelude-balance span { display:grid;text-align:left; }
.gacha-prelude-balance small { color:#817362;font-size:.69rem;font-weight:800; }
.gacha-prelude-balance strong { font-size:1.05rem; }
.gacha-prelude-note { margin:17px auto 0;color:#697386;font-size:.82rem;font-weight:750;line-height:1.7; }
.gacha-prelude-actions { display:grid;grid-template-columns:1fr 1.5fr;gap:9px;margin-top:22px; }
.gacha-prelude-actions button { min-height:48px;border:1px solid #dce1e8;border-radius:14px;background:#f4f6f9;color:#3f4857;font:inherit;font-weight:900;cursor:pointer; }
.gacha-prelude-actions button.is-primary { border-color:#ff4b00;background:#ff4b00;color:#fff;box-shadow:0 9px 20px rgba(255,75,0,.24); }
.gacha-prelude-prayer { position:relative;visibility:hidden;opacity:0;pointer-events:none;transform:translateY(24px) scale(.94);color:#fff;border-color:rgba(224,181,85,.7);background:radial-gradient(circle at 50% 35%,#6c2614,#23100c 54%,#0e0908); }
.gacha-prelude.is-praying .gacha-prelude-confirmation { visibility:hidden;opacity:0;pointer-events:none;transform:translateY(-20px) scale(.95); }
.gacha-prelude.is-praying .gacha-prelude-prayer { visibility:visible;opacity:1;pointer-events:auto;transform:none; }
.gacha-prelude-torii { margin:-10px 0 -8px;color:#ef5a26;font-size:64px;filter:drop-shadow(0 0 18px rgba(239,90,38,.4)); }
.gacha-prelude-prayer h2 { margin-bottom:8px;color:#fff4d3; }
.gacha-prelude-prayer>p:not(.gacha-prelude-prayer-kicker) { margin:0;color:#e6d5c7;font-size:.84rem;font-weight:750;line-height:1.7; }
.gacha-prelude-draw { position:relative;isolation:isolate;display:grid;width:184px;height:145px;margin:38px auto 20px;place-items:center;overflow:visible;border:1px solid #2b160d;border-radius:3px 3px 8px 8px;background:radial-gradient(circle at 11px 11px,#b69a5b 0 2px,#4b321b 2.5px 4px,transparent 4.5px),radial-gradient(circle at calc(100% - 11px) 11px,#b69a5b 0 2px,#4b321b 2.5px 4px,transparent 4.5px),radial-gradient(circle at 11px calc(100% - 11px),#9e8047 0 2px,#402815 2.5px 4px,transparent 4.5px),radial-gradient(circle at calc(100% - 11px) calc(100% - 11px),#9e8047 0 2px,#402815 2.5px 4px,transparent 4.5px),linear-gradient(100deg,rgba(255,222,159,.07),transparent 24% 70%,rgba(20,7,3,.28)),repeating-linear-gradient(3deg,rgba(41,16,7,.2) 0 1px,transparent 1px 8px),linear-gradient(90deg,#482416,#70402a 48%,#3c1e13);color:#d9bd7a;font:inherit;cursor:pointer;box-shadow:0 24px 48px rgba(0,0,0,.64),0 2px 0 #b08a49,inset 0 0 0 3px rgba(166,123,68,.35),inset 0 -20px 28px rgba(17,6,3,.32),inset 0 1px rgba(255,226,172,.12);animation:gachaPrayerFloat 1.4s ease-in-out infinite alternate; }
.gacha-prelude-draw::before { content:"";position:absolute;z-index:2;top:-24px;left:-8px;width:calc(100% + 16px);height:30px;background:linear-gradient(180deg,rgba(184,140,78,.3),transparent 35%),repeating-linear-gradient(2deg,rgba(31,12,6,.2) 0 1px,transparent 1px 7px),linear-gradient(90deg,#3a1b10,#754329 48%,#32170e);border-top:1px solid #987343;border-bottom:2px solid #241008;clip-path:polygon(7% 100%,12% 0,88% 0,93% 100%);filter:drop-shadow(0 6px 5px rgba(0,0,0,.45)); }
.gacha-prelude-draw::after { content:"";position:absolute;z-index:4;top:-17px;left:50%;width:78px;height:8px;border:1px solid #8f6d3c;border-radius:50%;background:linear-gradient(#160805,#30150b);box-shadow:inset 0 3px 4px #070201,0 1px rgba(224,187,111,.24);transform:translateX(-50%); }
.gacha-prelude-draw strong { position:relative;z-index:3;display:grid;min-width:118px;min-height:52px;place-items:center;margin:0;padding:7px 14px;border:1px solid rgba(174,136,75,.58);border-radius:2px;background:linear-gradient(100deg,rgba(18,6,3,.38),rgba(93,49,28,.22),rgba(16,5,3,.4));color:#d8b978;font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:1.28rem;font-weight:700;letter-spacing:.18em;line-height:1;text-align:center;text-shadow:0 1px #1b0904,0 -1px rgba(236,208,145,.18);box-shadow:inset 0 0 10px rgba(0,0,0,.34),0 1px rgba(226,190,119,.12); }
.gacha-prelude-rays { position:absolute;z-index:-1;inset:-70px;background:repeating-conic-gradient(from 0deg,rgba(242,196,86,.18) 0 5deg,transparent 5deg 18deg);border-radius:50%;animation:gachaPrayerRays 7s linear infinite; }
.gacha-prelude-draw:hover,.gacha-prelude-draw:focus-visible { transform:translateY(-5px) scale(1.035);box-shadow:0 0 35px rgba(232,187,99,.38),0 22px 55px rgba(0,0,0,.55); }
.gacha-prelude-draw:focus-visible { outline:3px solid #fff1b5;outline-offset:6px; }
@keyframes gachaPreludeIn { from{opacity:0}to{opacity:1} }
@keyframes gachaPrayerFloat { from{transform:translateY(2px)}to{transform:translateY(-5px)} }
@keyframes gachaPrayerRays { to{transform:rotate(1turn)} }

/* Shrine-style reveal. The result is already fixed by the server before this runs. */
.gacha-ritual { overflow:hidden;background:radial-gradient(circle at 50% 42%,rgba(210,52,18,.24),transparent 38%),rgba(13,8,7,.9); }
.gacha-ritual-stage { position:absolute;inset:0;display:grid;place-content:center;place-items:center;gap:12px;color:#fff;text-align:center;transition:opacity .38s ease,transform .38s ease; }
.gacha-shrine { position:absolute;inset:5vh 0 auto;text-align:center;opacity:.4;filter:drop-shadow(0 0 25px rgba(255,74,0,.3)); }
.gacha-torii { font-size:clamp(90px,17vw,180px); }
.gacha-rope { display:block;width:min(72vw,520px);height:4px;margin:-20px auto 0;background:linear-gradient(90deg,transparent,#d3a246,transparent); }
.gacha-draw-box { position:relative;display:grid;place-items:center;width:128px;height:180px;border:4px solid #e8bb63;border-radius:20px 20px 28px 28px;background:linear-gradient(90deg,#651c0e,#a53717 48%,#5b170d);box-shadow:0 22px 55px rgba(0,0,0,.55),inset 0 0 24px rgba(255,200,98,.3);animation:gachaBoxShake .62s ease-in-out infinite alternate; }
.gacha-draw-box>span { writing-mode:vertical-rl;color:#f5dc9d;font-size:1.3rem;font-weight:900;letter-spacing:.2em; }
.gacha-draw-box i { position:absolute;top:-45px;width:8px;height:70px;border-radius:5px;background:#e9c88d;transform-origin:50% 100%; }
.gacha-draw-box i:nth-of-type(1){transform:translateX(-24px) rotate(-7deg)}.gacha-draw-box i:nth-of-type(2){transform:rotate(2deg)}.gacha-draw-box i:nth-of-type(3){transform:translateX(24px) rotate(8deg)}
.gacha-fortune-paper { position:absolute;width:86px;height:160px;padding:13px 8px;border:2px solid #dfba6b;background:#fff7de;color:#7e1d0f;writing-mode:vertical-rl;font-weight:900;letter-spacing:.18em;opacity:0;transform:translateY(60px) scale(.55) rotate(10deg);box-shadow:0 16px 40px rgba(0,0,0,.5); }
.gacha-ritual-stage>p { margin:22px 0 0;color:#f3dfba;font-size:.86rem;font-weight:800;letter-spacing:.08em; }
.gacha-skip { position:absolute;z-index:4;right:20px;bottom:20px;padding:9px 14px;border:1px solid rgba(255,255,255,.45);border-radius:999px;background:rgba(0,0,0,.28);color:#fff;font:inherit;font-size:.75rem;font-weight:800;cursor:pointer; }
.gacha-ritual .gacha-result-panel { visibility:hidden;opacity:0;transform:translateY(18px) scale(.9);animation:none;transition:opacity .44s ease,transform .44s cubic-bezier(.2,.85,.25,1.15); }
.gacha-ritual.is-stick-drawn .gacha-draw-box i:nth-of-type(2) { animation:gachaStickDraw .7s ease-out forwards; }
.gacha-ritual.is-paper-open .gacha-fortune-paper { opacity:1;transform:translateY(-8px) scale(1) rotate(-3deg);transition:opacity .35s ease,transform .6s cubic-bezier(.2,.8,.2,1.2); }
.gacha-ritual.rarity-gold.is-paper-open .gacha-fortune-paper { box-shadow:0 0 35px rgba(255,193,24,.72),0 18px 44px rgba(0,0,0,.55); }
.gacha-ritual.rarity-black-gold.is-paper-open .gacha-fortune-paper { color:#f7dc7c;background:#17130d;border-color:#e1b832;box-shadow:0 0 48px rgba(225,184,50,.72);animation:gachaRareOmen .62s ease-in-out infinite alternate; }
.gacha-ritual.rarity-jewel.is-paper-open .gacha-fortune-paper { color:#7040a8;border-color:#fff;background:linear-gradient(145deg,#fff,#d8f6ff,#f3dcff);box-shadow:0 0 38px rgba(124,226,255,.86),0 0 75px rgba(211,122,255,.62);animation:gachaRareOmen .42s ease-in-out infinite alternate; }
.gacha-ritual.rarity-jewel.is-paper-open .gacha-ritual-stage::after { content:"✦  ✧  ✦  ✧  ✦";position:absolute;color:#fff;font-size:clamp(22px,5vw,45px);letter-spacing:.65em;text-shadow:0 0 15px #72dcff,0 0 28px #d77aff;animation:gachaSparkleOmen .85s ease-in-out infinite alternate; }
.gacha-ritual.is-revealed .gacha-ritual-stage,.gacha-ritual.is-revealed .gacha-skip { opacity:0;pointer-events:none;transform:scale(1.08); }
.gacha-ritual.is-revealed .gacha-result-panel { visibility:visible;opacity:1;transform:none; }
.gacha-result-rarity span { margin-left:7px;font-size:.78rem;letter-spacing:.04em; }
.gacha-result-actions { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px; }
.gacha-result-actions button { min-height:43px;padding:8px;border:1px solid var(--gacha-accent);border-radius:12px;background:#fff;color:#303847;font:inherit;font-size:.76rem;font-weight:900;cursor:pointer; }
@keyframes gachaBoxShake { from{transform:rotate(-2deg) translateY(1px)}to{transform:rotate(2deg) translateY(-2px)} }
@keyframes gachaStickDraw { to{transform:translateY(-95px) rotate(9deg);filter:drop-shadow(0 0 12px var(--gacha-accent));} }
@keyframes gachaRareOmen { to{transform:translateY(-8px) scale(1.05) rotate(2deg);filter:brightness(1.18)} }
@keyframes gachaSparkleOmen { from{opacity:.35;transform:scale(.85) rotate(-4deg)}to{opacity:1;transform:scale(1.1) rotate(4deg)} }

@media (max-width:760px) {
  .badge-collection-grid { grid-template-columns:repeat(3,minmax(0,1fr));gap:8px; }
  .badge-collection-filters { grid-template-columns:1fr 1fr; }
  .badge-collection-filters label:last-child { grid-column:1/-1; }
  .badge-collection-image { width:72px;height:72px; }
  .badge-collection-item { padding:11px 5px 10px; }
  .showcase-replacement-list button { grid-template-columns:30px 50px minmax(0,1fr); }
  .showcase-replacement-list em { grid-column:2/-1; }
}
@media (max-width:430px) {
  .badge-collection-summary { grid-template-columns:auto 1fr auto;padding:13px;gap:9px; }
  .badge-collection-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .gacha-result-actions { grid-template-columns:1fr; }
  .gacha-prelude-confirmation,.gacha-prelude-prayer { padding:24px 19px;border-radius:23px; }
  .gacha-prelude-actions { grid-template-columns:1fr; }
  .gacha-prelude-actions button.is-primary { order:-1; }
  .gacha-prelude-draw { width:162px;height:132px;margin-top:34px; }
}
@media (prefers-reduced-motion:reduce) {
  .gacha-prelude,.gacha-prelude-draw,.gacha-prelude-rays,.gacha-draw-box,.gacha-ritual.is-stick-drawn .gacha-draw-box i:nth-of-type(2),.gacha-ritual.is-paper-open .gacha-fortune-paper,.gacha-ritual.rarity-jewel.is-paper-open .gacha-ritual-stage::after { animation:none; }
}

body.level-up-open { overflow:hidden; }
.level-up-celebration { position:fixed;inset:0;z-index:4000;display:grid;place-items:center;padding:24px;overflow:hidden;background:radial-gradient(circle at 50% 42%,rgba(255,116,24,.28),transparent 42%),rgba(23,12,8,.76);backdrop-filter:blur(7px);animation:levelUpBackdropIn .35s ease-out both; }
.level-up-celebration::before { content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 20% 20%,rgba(255,215,74,.13),transparent 22%),radial-gradient(circle at 82% 76%,rgba(255,75,0,.16),transparent 24%); }
.level-up-celebration.is-closing { animation:levelUpBackdropOut .22s ease-in both; }
.level-up-panel { position:relative;z-index:3;width:min(100%,540px);padding:48px 38px 34px;overflow:hidden;border:2px solid #ffcf66;border-radius:30px;background:linear-gradient(160deg,#fffdf7 0%,#fff7e8 52%,#fff0dd 100%);color:#202838;text-align:center;box-shadow:0 0 0 7px rgba(255,205,92,.12),0 30px 90px rgba(24,10,2,.46),inset 0 1px 0 #fff;animation:levelUpPanelIn .7s cubic-bezier(.16,1.25,.38,1) both; }
.level-up-panel::before { content:"";position:absolute;inset:0 0 auto;height:11px;background:repeating-linear-gradient(90deg,#ff4b00 0 34px,#ffb000 34px 68px,#fff0d0 68px 102px);box-shadow:0 4px 14px rgba(196,59,0,.18); }
.level-up-panel::after { content:"";position:absolute;z-index:-1;width:260px;height:260px;left:50%;top:46%;border-radius:50%;background:radial-gradient(circle,rgba(255,190,38,.24),transparent 68%);transform:translate(-50%,-50%);animation:levelUpGlow 1.8s ease-in-out infinite; }
.level-up-lanterns { position:absolute;inset:19px 22px auto;display:flex;justify-content:space-between;font-size:42px;filter:drop-shadow(0 5px 7px rgba(183,48,0,.2)); }
.level-up-lanterns span:first-child { transform:rotate(-9deg); }
.level-up-lanterns span:last-child { transform:rotate(9deg); }
.level-up-festival-mark { position:relative;display:grid;place-items:center;width:76px;height:76px;margin:0 auto 10px;border:3px solid #ffbf3f;border-radius:50%;background:radial-gradient(circle at 36% 30%,#ff8c32,#e83300 68%);color:#fff7cf;box-shadow:0 0 0 6px rgba(255,190,63,.17),0 9px 24px rgba(196,59,0,.28);animation:levelUpFestivalMark .75s .15s cubic-bezier(.2,1.5,.4,1) both; }
.level-up-festival-mark::before { content:"";position:absolute;inset:-23px;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(255,183,33,.55) 0 4deg,transparent 4deg 16deg);-webkit-mask:radial-gradient(circle,transparent 0 54%,#000 56%);mask:radial-gradient(circle,transparent 0 54%,#000 56%);animation:levelUpRays 12s linear infinite; }
.level-up-festival-mark span { position:relative;z-index:1;font-family:serif;font-size:2.35rem;font-weight:900;line-height:1;text-shadow:0 3px 0 rgba(116,23,0,.3); }
.level-up-congratulations { margin:0 0 7px;color:#c43b00;font-size:1.15rem;font-weight:1000;letter-spacing:.04em; }
.level-up-congratulations span { display:inline-block;animation:levelUpParty .8s .45s ease-out both; }
.level-up-panel h2 { margin:0;color:#202838;font-size:clamp(1.55rem,5vw,2.2rem);line-height:1.3;letter-spacing:.02em; }
.level-up-panel h2 b { display:inline-block;color:#ff4b00;font-size:1.35em;text-shadow:0 3px 0 #ffd89d;animation:levelUpNumber .7s .32s cubic-bezier(.2,1.6,.4,1) both; }
.level-up-levels { display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;margin:25px 0 15px; }
.level-up-levels>span { padding:14px 10px;border:1px solid #e4e8ef;border-radius:16px;background:#fff;color:#8993a3;font-size:1.08rem;font-weight:950;box-shadow:0 6px 18px rgba(35,40,55,.07); }
.level-up-levels>span.is-new { border-color:#ffad57;background:linear-gradient(145deg,#ff681f,#ff3f00);color:#fff;font-size:1.42rem;box-shadow:0 10px 26px rgba(255,75,0,.3);animation:levelUpNewBadge .75s .5s cubic-bezier(.2,1.5,.4,1) both; }
.level-up-levels>strong { display:grid;gap:4px;color:#d44600;font-size:.68rem;font-weight:1000;line-height:1;white-space:nowrap; }
.level-up-levels>strong i { display:block;width:34px;height:2px;margin:auto;background:linear-gradient(90deg,transparent,#ff9500,transparent); }
.level-up-message { margin:0;color:#5d6676;font-weight:850; }
.level-up-point-reward { display:flex;align-items:center;justify-content:center;gap:11px;width:max-content;max-width:100%;margin:18px auto 0;padding:9px 18px 9px 9px;border:1px solid #ffc46d;border-radius:999px;background:linear-gradient(135deg,#fff,#fff8e8);box-shadow:0 8px 24px rgba(196,59,0,.15),inset 0 1px 0 #fff; }
.level-up-point-reward img { width:52px;height:52px;object-fit:contain;filter:drop-shadow(0 5px 8px rgba(196,59,0,.28));animation:levelUpCoin 1.8s .8s ease-in-out infinite; }
.level-up-point-reward span { display:grid;gap:2px;text-align:left; }
.level-up-point-reward small { color:#8b5b3d;font-size:.68rem;font-weight:800; }
.level-up-point-reward b { color:#c43b00;font-size:1rem; }
.level-up-close { width:100%;min-height:52px;margin-top:24px;border:0;border-radius:16px;background:linear-gradient(135deg,#ff6b1a,#ff3f00);color:#fff;font:inherit;font-size:1.05rem;font-weight:1000;letter-spacing:.06em;cursor:pointer;box-shadow:0 10px 22px rgba(255,75,0,.28),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .18s ease,box-shadow .18s ease; }
.level-up-close:hover { transform:translateY(-2px);box-shadow:0 14px 27px rgba(255,75,0,.35),inset 0 1px 0 rgba(255,255,255,.35); }
.level-up-close:active { transform:translateY(1px); }
.level-up-close:focus-visible { outline:4px solid rgba(255,153,44,.35);outline-offset:3px; }
.level-up-confetti { position:absolute;inset:0;z-index:2;pointer-events:none; }
.level-up-confetti i { position:absolute;top:-8%;left:var(--confetti-x);width:10px;height:18px;border-radius:2px;background:var(--confetti-color);box-shadow:0 0 8px rgba(255,255,255,.25);transform:rotate(var(--confetti-rotation));animation:levelUpConfetti var(--confetti-duration) var(--confetti-delay) cubic-bezier(.18,.72,.35,1) infinite; }
.level-up-confetti i:nth-child(3n) { width:8px;height:8px;border-radius:50%; }
.level-up-confetti i:nth-child(4n) { width:15px;height:7px; }
.level-up-fireworks { position:absolute;inset:0;z-index:1;pointer-events:none; }
.level-up-fireworks i { position:absolute;width:30px;height:30px;border:3px dotted #ffd34c;border-radius:50%;opacity:0;animation:levelUpFirework 2s ease-out infinite; }
.level-up-fireworks i:nth-child(1) { left:12%;top:22%; }
.level-up-fireworks i:nth-child(2) { right:11%;top:17%;animation-delay:.6s;border-color:#ff6b45; }
.level-up-fireworks i:nth-child(3) { right:18%;bottom:18%;animation-delay:1.15s;border-color:#4ac5ff; }
.level-up-celebration.is-closing .level-up-panel { animation:levelUpPanelOut .2s ease-in both; }

@keyframes levelUpBackdropIn { from{opacity:0}to{opacity:1} }
@keyframes levelUpBackdropOut { from{opacity:1}to{opacity:0} }
@keyframes levelUpPanelIn { 0%{opacity:0;transform:translateY(36px) scale(.72) rotate(-2deg)}65%{opacity:1;transform:translateY(-6px) scale(1.035) rotate(.5deg)}100%{transform:none} }
@keyframes levelUpPanelOut { to{opacity:0;transform:translateY(16px) scale(.94)} }
@keyframes levelUpGlow { 50%{transform:translate(-50%,-50%) scale(1.15);opacity:.65} }
@keyframes levelUpParty { from{opacity:0;transform:scale(.2) rotate(-35deg)}70%{transform:scale(1.35) rotate(10deg)}to{opacity:1;transform:none} }
@keyframes levelUpFestivalMark { from{opacity:0;transform:scale(.25) rotate(-18deg)}to{opacity:1;transform:none} }
@keyframes levelUpRays { to{transform:rotate(360deg)} }
@keyframes levelUpCoin { 50%{transform:translateY(-3px) rotate(3deg);filter:drop-shadow(0 8px 10px rgba(196,59,0,.34))} }
@keyframes levelUpNumber { from{opacity:0;transform:scale(.2) rotate(-12deg)}to{opacity:1;transform:none} }
@keyframes levelUpNewBadge { from{opacity:0;transform:scale(.45) rotate(7deg)}to{opacity:1;transform:none} }
@keyframes levelUpConfetti { 0%{opacity:0;transform:translate3d(0,-5vh,0) rotate(var(--confetti-rotation))}10%{opacity:1}100%{opacity:.9;transform:translate3d(35px,116vh,0) rotate(calc(var(--confetti-rotation) + 700deg))} }
@keyframes levelUpFirework { 0%{opacity:0;transform:scale(.2)}20%{opacity:1}70%,100%{opacity:0;transform:scale(5)} }

@media (max-width: 560px) {
  .level-up-celebration { padding:16px; }
  .level-up-panel { padding:45px 20px 24px;border-radius:25px; }
  .level-up-lanterns { inset:17px 16px auto;font-size:35px; }
  .level-up-levels { gap:8px;margin-top:21px; }
  .level-up-levels>span { padding:12px 7px;font-size:.94rem; }
  .level-up-levels>span.is-new { font-size:1.18rem; }
  .level-up-levels>strong { font-size:.58rem; }
  .level-up-levels>strong i { width:24px; }
}

@media (prefers-reduced-motion: reduce) {
  .level-up-celebration,.level-up-panel,.level-up-festival-mark,.level-up-festival-mark::before,.level-up-congratulations span,.level-up-panel h2 b,.level-up-levels>span.is-new,.level-up-point-reward img { animation:none; }
  .level-up-confetti,.level-up-fireworks { display:none; }
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 12px;
}

.stats-grid div,
.stat-card-button {
  display: grid;
  place-items: center;
  min-height: 116px;
  background: #ffffff;
  border: 1px solid #e9edf3;
  border-radius: 18px;
}

.stat-card-button {
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.stat-card-button:hover {
  box-shadow: 0 14px 28px rgba(17, 24, 39, 0.08);
  transform: translateY(-1px);
}

.stats-grid span {
  font-size: 24px;
}

.stats-grid strong {
  font-size: 30px;
  line-height: 1;
}

.stats-grid p {
  margin: 0;
  color: #8a93a3;
  font-size: 12px;
  font-weight: 900;
}

.compact h2 {
  font-size: 20px;
}

.badge-showcase {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 18px;
  color: #f5df9f;
  background: #171717;
  border-radius: 22px;
}

#mypageBadgeSection {
  overflow: hidden;
  padding: 30px;
  background:
    linear-gradient(135deg, rgba(255, 250, 235, .96), rgba(255, 241, 219, .96)),
    #fff8eb;
  border-color: #efd4ad;
  box-shadow: 0 13px 32px rgba(116, 56, 18, .1), inset 0 4px #b92e16;
}

#mypageBadgeSection::after {
  position: absolute;
  top: -70px;
  right: -55px;
  width: 190px;
  height: 190px;
  background: repeating-radial-gradient(circle, transparent 0 15px, rgba(196, 71, 25, .06) 16px 18px);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

#mypageBadgeSection .section-heading {
  position: relative;
  z-index: 1;
  margin-bottom: 20px;
}

.mypage-section-kicker {
  display: block;
  margin-bottom: 4px;
  color: #b44820;
  font-family: Georgia, serif;
  font-size: .63rem;
  font-weight: 800;
  letter-spacing: .18em;
}

#mypageBadgeSection .section-heading h2 {
  color: #42251a;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 1.55rem;
  letter-spacing: .08em;
}

#mypageBadgeSection .section-heading p {
  margin-top: 6px;
  color: #856c5e;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: .82rem;
  font-weight: 700;
}

#mypageBadgeSection .section-heading button {
  position: relative;
  z-index: 1;
  padding: 10px 17px;
  color: #fff6e8;
  background: #ad2c17;
  border: 1px solid #8d2111;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-weight: 900;
  letter-spacing: .05em;
  box-shadow: 0 6px 13px rgba(104, 29, 13, .17);
  cursor: pointer;
  transition: background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

@media (hover: hover) {
  #mypageBadgeSection .section-heading button:hover {
    background: #a32916;
    box-shadow: 0 2px 6px rgba(104, 29, 13, .14), inset 0 2px 4px rgba(74, 15, 7, .18);
    transform: translateY(1px);
  }
}

#mypageBadgeSection .section-heading button:active {
  background: #952311;
  box-shadow: inset 0 3px 6px rgba(62, 12, 5, .25);
  transform: translateY(2px) scale(.99);
}

#mypageBadgeSection .section-heading button:focus-visible {
  outline: 3px solid rgba(173, 44, 23, .24);
  outline-offset: 3px;
}

#mypageBadgeSection .badge-showcase {
  position: relative;
  z-index: 1;
  padding: 24px 18px;
  background:
    radial-gradient(circle at 50% -15%, rgba(219, 166, 66, .16), transparent 46%),
    linear-gradient(145deg, #211b17, #100f0e 70%);
  border: 1px solid #4a3725;
  border-radius: 18px;
  box-shadow: inset 0 0 0 3px rgba(241, 199, 104, .035), 0 12px 24px rgba(69, 32, 11, .14);
}

#mypageBadgeSection .badge strong {
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  letter-spacing: .04em;
}

@media (max-width: 560px) {
  #mypageBadgeSection { padding: 24px 18px; }
  #mypageBadgeSection .section-heading { align-items: flex-start; gap: 12px; }
  #mypageBadgeSection .section-heading h2 { font-size: 1.35rem; }
  #mypageBadgeSection .section-heading button { padding: 9px 13px; }
  #mypageBadgeSection .badge-showcase { padding: 20px 10px; }
}

.badge {
  display: grid;
  gap: 6px;
  place-items: center;
  text-align: center;
  font-size: 12px;
  font-weight: 900;
}

.badge strong,
.badge small {
  color: inherit;
  line-height: 1.35;
}

.badge small {
  color: #b8ae87;
  font-size: 10px;
}

.badge span {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  color: #ffe8a6;
  background: radial-gradient(circle, #4b4531 0%, #171717 68%);
  border: 3px solid #796d37;
  border-radius: 50%;
  font-size: 24px;
}

.badge-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 14px 4px;
  color: #c8c1a8;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
}

.badge-detail-list {
  display: grid;
  gap: 12px;
}

.badge-detail {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 16px;
  border: 1px solid #e3e8f0;
  border-radius: 18px;
  background: #ffffff;
}

.badge-detail.is-locked {
  background: #f6f7f9;
  filter: grayscale(0.75);
  opacity: 0.72;
}

.badge-detail-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  color: #ffe8a6;
  background: radial-gradient(circle, #4b4531 0%, #171717 68%);
  border: 3px solid #796d37;
  border-radius: 50%;
  font-size: 25px;
  font-weight: 900;
}

.badge-detail strong,
.badge-detail p,
.badge-detail small {
  display: block;
  margin: 0;
}

.badge-detail p {
  margin-top: 3px;
  color: #687386;
  font-size: 13px;
  font-weight: 700;
}

.badge-detail small {
  margin-top: 7px;
  color: #fb4b08;
  font-weight: 900;
}

.recommend-item {
  display: grid;
  width: 100%;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 16px 0;
  color: inherit;
  background: transparent;
  border: 0;
  border-top: 1px solid #eef1f5;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.recommend-item img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 12px;
}

.recommend-item-copy {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.recommend-item-copy strong {
  overflow: hidden;
  color: #1c2434;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recommend-item-date,
.recommend-item-place {
  display: block;
  overflow: hidden;
  color: #7e8797;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recommend-item:hover {
  background: #fffaf6;
}

.recommend-item:focus-visible {
  outline: 3px solid rgba(251, 75, 8, 0.22);
  outline-offset: 2px;
}

.recommend-status {
  margin: 0;
  padding: 22px 4px 8px;
  border-top: 1px solid #eef1f5;
  color: #8a93a3;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.6;
}

.page-header {
  display: grid;
  gap: 16px;
  margin: 0 -28px 28px;
  padding: 44px 36px 28px;
  background: #ffffff;
  border-bottom: 1px solid #e6e9ef;
}

.page-header h2,
.mypage-hero h2,
.activity-card h2 {
  margin: 0;
  font-size: 28px;
}

.page-header p {
  margin: 0;
  color: #7e8797;
  font-weight: 800;
}

.discover-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 12px;
}

.location-search-panel {
  display: grid;
  gap: 14px;
  padding: 18px;
  background: linear-gradient(135deg, #fff7ec, #f3f8ff);
  border: 1px solid #f2e4d5;
  border-radius: 18px;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.location-search-panel.is-location-loading {
  background: linear-gradient(135deg, #f3f7ff, #eef5ff);
  border-color: #bcd5ff;
  box-shadow: 0 8px 22px rgba(33, 104, 245, .1);
}

.location-search-panel.is-location-active {
  background: linear-gradient(135deg, #edf5ff, #f7fbff);
  border-color: #8fbcff;
  box-shadow: 0 10px 26px rgba(33, 104, 245, .13);
}

.location-search-panel.has-location-error {
  background: linear-gradient(135deg, #fff4f1, #fff9f7);
  border-color: #ffb8a2;
}

.location-search-panel.is-location-loading > div:first-child,
.location-search-panel.is-location-active > div:first-child,
.location-search-panel.has-location-error > div:first-child {
  padding: 11px 13px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: 13px;
}

.location-search-panel.is-location-loading strong,
.location-search-panel.is-location-active strong {
  color: #1767ee;
}

.location-search-panel.has-location-error strong {
  color: #d9481c;
}

.location-search-panel.is-location-active #locationSearchStatus {
  color: #43546c;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.location-search-panel > div:first-child {
  display: grid;
  gap: 4px;
}

.location-search-panel strong {
  color: #1c2434;
  font-size: 17px;
}

.location-search-panel span {
  color: #687386;
  font-size: 13px;
  font-weight: 800;
}

.location-search-actions {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto auto;
  gap: 10px;
  align-items: center;
}

.place-autocomplete-host:empty {
  display: none;
}

.place-autocomplete-host gmp-place-autocomplete {
  width: 100%;
  min-height: 58px;
  color: #303847;
  color-scheme: light;
  background-color: #f8f9fb;
  border: 1px solid #e1e6ef;
  border-radius: 18px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.5;
}

.current-location-button,
.map-toggle-button,
.location-clear-button,
.place-current-location-button,
.place-map-picker-button {
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 13px;
  font-weight: 900;
}

.resolved-event-place {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid #b9d1ff;
  border-radius: 14px;
  background: #eef5ff;
  color: #243247;
}

.resolved-event-place[hidden] {
  display: none;
}

.resolved-event-place-label {
  color: #2670e8;
  font-size: 12px;
  font-weight: 800;
}

.resolved-event-place strong {
  font-size: 15px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.current-location-button,
.place-current-location-button {
  color: #2168f5;
  background: #eaf3ff;
}

.event-place-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.place-map-picker-button {
  color: #ffffff;
  background: #fb4b08;
}

.event-location-picker {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: #f8fafc;
  border: 1px solid #e1e6ef;
  border-radius: 18px;
}

#eventLocationPickerMap {
  width: 100%;
  height: 320px;
  overflow: hidden;
  background: #eef2f7;
  border-radius: 14px;
}

.event-location-picker p {
  margin: 0;
  color: #687386;
  font-size: 13px;
  font-weight: 800;
}

.map-toggle-button {
  color: #ffffff;
  background: #fb4b08;
}

.location-clear-button {
  color: #687386;
  background: #edf0f4;
}

.discover-map-panel {
  position: relative;
  width: 100%;
  height: min(58vh, 560px);
  margin: 0 0 28px;
  overflow: hidden;
  background: #eef2f7;
  border: 1px solid #e1e6ef;
  border-radius: 22px;
}

#discoverMap {
  width: 100%;
  height: 100%;
}

.map-loading-message {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  color: #687386;
  background: #f5f7fa;
  font-weight: 900;
}

.map-loading-message.hidden {
  display: none;
}

.event-place-field > input[type="text"].is-autocomplete-ready {
  display: none;
}

.place-current-location-button {
  justify-self: start;
}

.event-detail-map {
  width: 100%;
  height: 260px;
  overflow: hidden;
  background: #eef2f7;
  border-radius: 18px;
}

.event-detail-map-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.discover-filters label {
  display: grid;
  gap: 7px;
  color: #5c6677;
  font-size: 12px;
  font-weight: 900;
}

.discover-filters select {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  color: #1c2434;
  background: #f8f9fb;
  border: 1px solid #e1e6ef;
  border-radius: 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
}

.discover-feed {
  display: grid;
  gap: 16px;
  max-width: none;
  margin: 0 auto;
}

.follow-button.is-active {
  color: #ff4b00;
  background: #fff4e7;
  box-shadow: none;
}

.follow-button.is-disabled {
  color: #8a93a3;
  background: #f1f3f6;
  box-shadow: none;
  cursor: default;
}

.distance-tag {
  padding: 6px 10px;
  color: #2168f5;
  background: #eaf3ff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.map-info-window {
  display: grid;
  gap: 5px;
  max-width: 220px;
  padding: 4px 2px;
  border: 0;
  font: inherit;
  text-align: left;
  color: #1c2434;
  background: transparent;
  cursor: pointer;
}

.map-info-window span,
.map-info-window small,
.maps-setup-note {
  color: #687386;
  font-size: 12px;
  font-weight: 800;
}

.map-info-window em {
  margin-top: 3px;
  color: #2168f5;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.map-info-window:hover strong,
.map-info-window:focus-visible strong {
  color: #2168f5;
}

.discover-empty {
  padding: 42px 24px;
  text-align: center;
  color: #5c6677;
  background: #ffffff;
  border: 1px solid #e9edf3;
  border-radius: 18px;
  font-weight: 800;
}

.discover-empty strong {
  display: block;
  margin-bottom: 8px;
  color: #1c2434;
  font-size: 18px;
}

.map-button,
.like-button,
.next-button {
  min-height: 44px;
  padding: 10px 16px;
  border: 0;
  border-radius: 14px;
  font-weight: 900;
}

.map-button {
  color: #2168f5;
  background: #eaf3ff;
}

.like-button,
.next-button {
  color: #7e8797;
  background: #f8f9fb;
}

.like-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

@media (hover: hover) {
  .like-button:not(:disabled):hover {
    color: #e54848;
    background: #fff0f0;
    box-shadow: 0 9px 20px rgba(229, 72, 72, 0.15);
    transform: translateY(-2px);
  }
  .like-button:not(:disabled):hover .like-button-heart { transform: scale(1.14); }
}

.like-button:not(:disabled):active {
  box-shadow: inset 0 3px 7px rgba(139, 36, 36, 0.16);
  transform: translateY(1px) scale(0.98);
}

.like-button-heart {
  display: inline-block;
  font-size: 1.15em;
  line-height: 1;
  transform-origin: center;
  will-change: transform, filter;
  transition: transform 160ms ease;
}

.like-button-heart.is-bouncing {
  animation: like-heart-bounce 520ms cubic-bezier(.2,.9,.25,1.35);
}

@keyframes like-heart-bounce {
  0% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(229,72,72,0)); }
  22% { transform: scale(.72) rotate(-8deg); }
  52% { transform: scale(1.55) rotate(7deg); filter: drop-shadow(0 4px 7px rgba(229,72,72,.35)); }
  72% { transform: scale(.92) rotate(-3deg); }
  88% { transform: scale(1.12) rotate(1deg); }
  100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(229,72,72,0)); }
}

.like-button.is-active {
  color: #e54848;
  background: #fff0f0;
}

.event-detail-author-actions .like-button.is-active .like-button-heart {
  color: #e54848;
}

.like-button:disabled {
  opacity: 0.8;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .like-button-heart.is-bouncing { animation-duration: 1ms; }
}

.next-button {
  color: #fb4b08;
  background: #fff4e7;
  font-size: 22px;
}

.feed-end {
  margin: 34px 0 0;
  color: #a0a8b6;
  text-align: center;
  font-weight: 900;
}

.feed-end.is-loading::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  vertical-align: -4px;
  border: 3px solid #e1e6ef;
  border-top-color: #fb4b08;
  border-radius: 50%;
  animation: feed-loading-spin 0.75s linear infinite;
}

@keyframes feed-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

.mypage-onboarding,
.mypage-hero,
.mypage-card {
  position: relative;
  padding: 28px;
  background: #ffffff;
  border: 1px solid #e9edf3;
  border-radius: 24px;
  box-shadow: 0 2px 8px rgba(28, 36, 52, 0.06);
}

.mypage-hero {
  margin-top: 28px;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 8%, rgba(255, 196, 91, 0.18), transparent 27%),
    #ffffff;
}

.mypage-onboarding {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
  gap: 28px;
  min-height: calc(100vh - 120px);
  margin-top: 28px;
  overflow: hidden;
  background:
    radial-gradient(circle at 83% 12%, rgba(255, 190, 45, 0.38), transparent 28%),
    radial-gradient(circle at 94% 48%, rgba(81, 177, 255, 0.22), transparent 25%),
    radial-gradient(circle at 9% 86%, rgba(255, 94, 99, 0.18), transparent 26%),
    linear-gradient(135deg, #fff8e9 0%, #fffefb 43%, #edf7ff 100%);
}

.mypage-onboarding::before,
.mypage-onboarding::after {
  position: absolute;
  z-index: 0;
  width: 180px;
  height: 180px;
  border: 26px solid rgba(255, 153, 32, 0.08);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.mypage-onboarding::before { top: -92px; left: 37%; }
.mypage-onboarding::after { right: -88px; bottom: 135px; border-color: rgba(44, 145, 255, 0.08); }
.mypage-onboarding > * { position: relative; z-index: 1; }

.mypage-onboarding.hidden {
  display: none;
}

.onboarding-hero-copy {
  align-self: center;
  min-width: 0;
  padding: clamp(26px, 3vw, 38px);
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid rgba(239, 195, 147, 0.85);
  border-radius: 28px;
  box-shadow: 0 18px 44px rgba(91, 58, 30, 0.1);
  backdrop-filter: blur(7px);
  container-type: inline-size;
}

.onboarding-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  color: #fb4b08;
  background: #fff4e7;
  border: 1px solid #ffd7aa;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 900;
}

.mypage-onboarding h2 {
  max-width: 720px;
  margin: 18px 0 0;
  color: #111827;
  font-size: clamp(28px, 10cqw, 52px);
  line-height: 1.18;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

.onboarding-hero-copy h2 > span {
  display: block;
  width: max-content;
  max-width: 100%;
  overflow-wrap: normal;
  white-space: nowrap;
  word-break: keep-all;
}

@media (min-width: 761px) {
  .onboarding-kicker {
    max-width: 100%;
    font-size: clamp(11px, 1.05vw, 14px);
    white-space: nowrap;
  }
}

.mypage-onboarding p {
  max-width: 660px;
  margin: 18px 0 0;
  color: #6b7280;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.7;
}

.onboarding-benefit-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 20px;
}

.onboarding-benefit-strip span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 13px;
  color: #654b39;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid #efd3b6;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 7px 18px rgba(91, 58, 30, 0.06);
}

.onboarding-benefit-strip b {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  color: #ffffff;
  background: linear-gradient(135deg, #ff7218, #ee3f08);
  border-radius: 50%;
  font-size: 11px;
}

.onboarding-auth-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
}

.onboarding-preview {
  align-self: center;
  display: grid;
  gap: 16px;
  min-height: 420px;
  padding: 28px;
  background:
    radial-gradient(circle at 90% 3%, rgba(255, 196, 68, 0.3), transparent 30%),
    radial-gradient(circle at 4% 98%, rgba(255, 92, 83, 0.12), transparent 29%),
    linear-gradient(155deg, rgba(255, 255, 255, 0.99), rgba(255, 247, 230, 0.97));
  border: 1px solid #f0ca9e;
  border-radius: 28px;
  box-shadow: 0 24px 56px rgba(77, 48, 22, 0.16), 0 0 0 6px rgba(255, 255, 255, 0.48);
}

.preview-profile-head {
  display: flex;
  align-items: center;
  gap: 16px;
}

.preview-profile-head > div:last-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.preview-profile-head strong {
  overflow: hidden;
  color: #222a38;
  font-size: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview-profile-head small {
  color: #8992a2;
  font-weight: 800;
}

.preview-label {
  color: #d24a12;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.preview-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 82px;
  height: 82px;
  color: #ffffff;
  background: #ff4b00;
  border: 7px solid #fff0d8;
  border-radius: 50%;
  font-size: 28px;
  font-weight: 900;
}

.preview-level-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-top: 2px;
}

.preview-level-row strong {
  color: #fb4b08;
  font-size: 22px;
}

.preview-level-row span {
  color: #8b94a4;
  font-size: 12px;
  font-weight: 900;
}

.preview-exp {
  height: 10px;
  overflow: hidden;
  background: #e9edf3;
  border-radius: 999px;
}

.preview-exp span {
  display: block;
  width: 68%;
  height: 100%;
  background: linear-gradient(90deg, #ff4b08, #ffb52d);
  border-radius: inherit;
}

.preview-reward-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.preview-point {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.preview-point img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 4px 7px rgba(210, 101, 0, 0.23));
}

.preview-point span {
  display: grid;
  color: #8a7562;
  font-size: 11px;
  font-weight: 900;
}

.preview-point strong {
  color: #d7470a;
  font-size: 17px;
}

.preview-growth {
  flex: 0 0 auto;
  padding: 7px 10px;
  color: #c54811;
  background: #fff0db;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
}

.preview-showcase {
  margin-top: 3px;
  padding: 16px;
  background:
    radial-gradient(circle at 15% 0%, rgba(95, 158, 255, 0.18), transparent 34%),
    radial-gradient(circle at 86% 9%, rgba(255, 194, 38, 0.2), transparent 32%),
    linear-gradient(145deg, #252525, #0d0d0d);
  border-radius: 20px;
  box-shadow: inset 0 0 0 1px rgba(255, 220, 133, 0.12);
}

.preview-showcase-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
  color: #fff3cf;
}

.preview-showcase-title strong { font-size: 13px; }
.preview-showcase-title span { color: #d8ab49; font-size: 8px; font-weight: 900; letter-spacing: 0.15em; }
.preview-medals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.preview-medal { display: grid; justify-items: center; gap: 4px; min-width: 0; color: #eadba8; }
.preview-medal i { position:relative;isolation:isolate;display:grid;place-items:center;width:72px;height:72px;overflow:hidden;border:0;border-radius:50%;background:#111;box-shadow:0 0 20px currentColor;font-style:normal; }
.preview-medal i::before { position:absolute;inset:0;z-index:2;border-radius:50%;background-position:center;background-size:100% 100%;background-repeat:no-repeat;filter:drop-shadow(0 1px 2px rgba(0,0,0,.7));content:"";pointer-events:none; }
.preview-medal img { position:relative;z-index:1;width:80%;height:80%;margin:10%;object-fit:contain;border-radius:50%; }
.preview-medal small { max-width: 100%; overflow: hidden; color: #e9ddb7; font-size: 9px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.preview-medal b { color: currentColor; font-size: 8px; letter-spacing: 0.02em; }
.preview-medal.is-silver { color: #b9c8db; }
.preview-medal.is-copper { color: #d17d3d; }
.preview-medal.is-gold { color: #edc447; }
.preview-medal.is-silver i { background:radial-gradient(circle at 36% 25%,#526174,#202a36 58%,#080c12); }
.preview-medal.is-copper i { background:radial-gradient(circle at 36% 26%,#6e351c,#24130c 62%,#090504); }
.preview-medal.is-gold i { background:radial-gradient(circle at 36% 24%,#755313,#302000 58%,#090600); }
.preview-medal.is-silver i::before { background-image:url("assets/images/badges/silver-ornate-frame.png"); }
.preview-medal.is-copper i::before { background-image:url("assets/images/badges/bronze-ornate-frame.png"); }
.preview-medal.is-gold i::before { background-image:url("assets/images/badges/gold-ornate-frame.png"); }

.onboarding-feature-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.onboarding-feature-grid article {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 190px;
  padding: 22px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid #edf0f4;
  border-radius: 20px;
  box-shadow: 0 10px 24px rgba(28, 36, 52, 0.07);
}

.onboarding-feature-grid article:nth-child(1) { background: linear-gradient(145deg, #fff8eb, #ffffff); border-color: #ffd9a9; }
.onboarding-feature-grid article:nth-child(2) { background: linear-gradient(145deg, #fff0f4, #ffffff); border-color: #ffcbd9; }
.onboarding-feature-grid article:nth-child(3) { background: linear-gradient(145deg, #eef7ff, #ffffff); border-color: #c9e5ff; }
.onboarding-feature-grid article:nth-child(4) { background: linear-gradient(145deg, #fff9dd, #ffffff); border-color: #f4df83; }
.onboarding-feature-grid article:nth-child(2) > span { color: #e83e73; background: #ffe4ed; }
.onboarding-feature-grid article:nth-child(3) > span { color: #1670dd; background: #e2f0ff; }
.onboarding-feature-grid article:nth-child(4) > span { color: #bf8500; background: #fff0ad; }

.onboarding-feature-grid span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: #fb4b08;
  background: #fff4e7;
  border-radius: 50%;
  font-size: 22px;
  font-weight: 900;
}

.onboarding-feature-grid h3 {
  margin: 0;
  color: #303847;
  font-size: 21px;
  line-height: 1.35;
}

.onboarding-feature-grid p {
  margin: 0;
  color: #7e8797;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.65;
}

.onboarding-cta {
  min-height: 64px;
  padding: 0 28px;
  color: #ffffff;
  background: linear-gradient(135deg, #ff4b00, #ff7a18);
  border: 0;
  border-radius: 999px;
  font-size: 18px;
  font-weight: 900;
  box-shadow: 0 12px 28px rgba(255, 75, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.3);
}

.onboarding-login-link {
  min-height: 52px;
  padding: 0 18px;
  color: #755743;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid #e7cdb5;
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
}

.onboarding-cta:hover,
.onboarding-login-link:hover { transform: translateY(-2px); }
.onboarding-cta:focus-visible,
.onboarding-login-link:focus-visible { outline: 3px solid rgba(251, 75, 8, 0.25); outline-offset: 3px; }

.onboarding-cta-note {
  display: block;
  margin: 11px 0 0 8px;
  color: #929aa8;
  font-size: 12px;
  font-weight: 800;
}

.onboarding-flow {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  background:
    radial-gradient(circle at 88% 50%, rgba(255, 186, 45, 0.2), transparent 26%),
    linear-gradient(120deg, #293349, #3b3151 58%, #43351e);
  border-radius: 20px;
}

.onboarding-flow span {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 16px;
  color: #303847;
  background: #ffffff;
  border-radius: 999px;
  font-weight: 900;
}

.onboarding-flow strong {
  color: #ffcb66;
  font-size: 20px;
}

.settings-button {
  position: absolute;
  top: 22px;
  right: 22px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 15px;
  color: #536072;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid #e0e5ec;
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 5px 14px rgba(28, 36, 52, 0.06);
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.settings-button span {
  color: #ff4b00;
  font-size: 17px;
}

.settings-button:hover {
  color: #d53f00;
  border-color: #ffb173;
  box-shadow: 0 8px 18px rgba(202, 75, 0, 0.1);
  transform: translateY(-1px);
}

.settings-button.is-active {
  color: #fff;
  background: #ff4b00;
  border-color: #ff4b00;
}

.settings-button.is-active span {
  color: #fff;
}

.mypage-profile {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 22px;
  padding-right: 160px;
}

.mypage-profile > div {
  flex: 1 1 auto;
  min-width: 0;
}

.mypage-profile h2 {
  margin: 0;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.mypage-profile-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 10px;
}

.mypage-profile img {
  width: 104px;
  height: 104px;
  object-fit: cover;
  border: 5px solid #fff0d8;
  border-radius: 50%;
}

.avatar-edit-button {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 112px;
  height: 112px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.avatar-edit-button img {
  width: 104px;
  height: 104px;
}

.avatar-edit-button span {
  position: absolute;
  right: 4px;
  bottom: 6px;
  display: grid;
  place-items: center;
  min-width: 42px;
  min-height: 28px;
  padding: 0 10px;
  color: #ffffff;
  background: #303847;
  border: 3px solid #ffffff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  transition: background 0.18s ease, transform 0.18s ease;
}

.avatar-edit-button:hover span {
  background: #ff4b00;
  transform: translateY(-2px);
}

.profile-edit-panel {
  display: grid;
  gap: 20px;
  margin: 0 0 24px;
  padding: 24px;
  background: linear-gradient(145deg, #fffdf9 0%, #fff8ef 100%);
  border: 1px solid #ffd9b5;
  border-radius: 22px;
  box-shadow: 0 14px 34px rgba(164, 72, 7, 0.08);
  animation: profile-editor-in 0.2s ease-out both;
}

.profile-edit-panel input[type="file"] {
  display: none;
}

.profile-edit-panel.hidden {
  display: none;
}

@keyframes profile-editor-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.profile-editor-heading {
  display: grid;
  gap: 4px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(224, 145, 75, 0.2);
}

.profile-editor-kicker {
  color: #e44a05;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.13em;
}

.profile-editor-heading h3 {
  margin: 0;
  color: #1c2434;
  font-size: 21px;
}

.profile-editor-heading p {
  margin: 0;
  color: #7a8494;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.6;
}

.profile-edit-grid {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 22px;
}

.profile-edit-avatar-card {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 10px;
  padding: 17px;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid #f0ded0;
  border-radius: 18px;
}

.profile-edit-avatar-card > .profile-field-label {
  justify-self: start;
}

.profile-edit-avatar-card > small {
  color: #8b93a1;
  font-size: 11px;
  font-weight: 750;
  text-align: center;
}

.profile-edit-avatar-preview {
  position: relative;
  width: 120px;
  height: 120px;
  padding: 0;
  overflow: hidden;
  background: #fff;
  border: 4px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 3px #ffd19d, 0 10px 22px rgba(113, 57, 15, 0.14);
  cursor: pointer;
}

.profile-edit-avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-edit-avatar-preview > span {
  position: absolute;
  right: 5px;
  bottom: 7px;
  left: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 31px;
  color: #fff;
  background: rgba(28, 36, 52, 0.88);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  backdrop-filter: blur(6px);
}

.profile-edit-avatar-preview:hover > span {
  background: rgba(255, 75, 0, 0.94);
}

.profile-edit-avatar-preview b {
  font-size: 16px;
  line-height: 1;
}

.profile-edit-fields {
  display: grid;
  align-content: start;
  gap: 14px;
}

.profile-field-label {
  color: #313a4a;
  font-size: 13px;
  font-weight: 950;
}

.compact-field {
  gap: 6px;
}

.profile-name-field,
.profile-title-setting {
  position: relative;
  padding: 17px 18px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid #f0ded0;
  border-radius: 17px;
}

.profile-name-field > small:not(.field-counter),
.profile-title-copy small {
  color: #8a93a2;
  font-size: 11px;
  font-weight: 750;
}

.profile-name-field input {
  min-height: 48px;
  margin-top: 5px;
  padding: 0 46px 0 14px;
  color: #1c2434;
  background: #fff;
  border: 1px solid #dfe4eb;
  border-radius: 12px;
  font: inherit;
  font-weight: 850;
}

.profile-name-field input:focus {
  border-color: #ff934c;
  outline: 3px solid rgba(255, 115, 31, 0.12);
}

.profile-name-field .field-counter {
  position: absolute;
  right: 30px;
  bottom: 33px;
  color: #9aa2ae;
  font-size: 10px;
}

.profile-title-setting {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
}

.profile-title-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.profile-title-copy strong {
  width: fit-content;
  max-width: 100%;
  margin-top: 3px;
  padding: 5px 10px;
  overflow-wrap: anywhere;
  color: #a63b00;
  background: linear-gradient(135deg, #fff2c9, #ffe2ab);
  border: 1px solid #ffc56a;
  border-radius: 999px;
  font-size: 13px;
}

.profile-title-copy strong.is-empty {
  color: #7b8493;
  background: #f2f4f7;
  border-color: #e1e5eb;
}

.profile-title-change-button {
  min-height: 40px;
  padding: 0 14px;
  color: #df4703;
  background: #fff;
  border: 1px solid #ffbd89;
  border-radius: 999px;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.profile-title-change-button:hover {
  color: #fff;
  background: #ff4b00;
  border-color: #ff4b00;
}

.profile-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid rgba(224, 145, 75, 0.2);
}

.profile-equipped-title {
  width: max-content;
  max-width: 100%;
  margin: 0 !important;
  padding: 4px 11px;
  overflow-wrap: anywhere;
  color: #a63b00 !important;
  background: linear-gradient(135deg, #fff7db, #ffe7bd);
  border: 1px solid #ffc56a;
  border-radius: 999px;
  font-size: 12px !important;
  font-weight: 950 !important;
}

.side-profile-title {
  margin-top: 5px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.achievement-summary-card { padding: 20px; }
.achievement-summary-card .section-heading { margin-bottom: 16px; }
.achievement-summary-card .section-heading p { margin: 4px 0 0;color:#7c8797;font-size:13px;font-weight:800; }
.achievement-summary-progress { height: 11px;overflow:hidden;background:#edf0f4;border-radius:999px; }
.achievement-summary-progress span { display:block;width:0;height:100%;background:linear-gradient(90deg,#ffb31a,#ff4b00);border-radius:inherit;transition:width .45s ease; }
.achievement-pending-rewards { width:100%;margin-top:12px;padding:10px 14px;border:1px solid #ffc46f;border-radius:12px;background:#fff8e9;color:#ad4300;font:inherit;font-size:13px;font-weight:900;text-align:left; }
.equipped-title-summary { display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;margin-top:15px;padding:13px 15px;background:#fff8ed;border:1px solid #ffd5a7;border-radius:14px; }
.equipped-title-summary>span { color:#8b6a4e;font-size:12px;font-weight:800; }
.equipped-title-summary>strong { color:#a63b00;overflow-wrap:anywhere; }
.equipped-title-summary button,.achievement-summary-card .section-heading button { padding:7px 12px;border:0;border-radius:999px;background:#ff4b00;color:#fff;font:inherit;font-size:12px;font-weight:900;cursor:pointer; }

.achievement-category-tabs { display:flex;gap:8px;margin-bottom:16px;padding-bottom:5px;overflow-x:auto; }
.achievement-category-tabs button { flex:0 0 auto;padding:8px 13px;border:1px solid #dfe4ec;border-radius:999px;background:#fff;color:#667083;font:inherit;font-size:12px;font-weight:850;cursor:pointer; }
.achievement-category-tabs button.is-active { border-color:#ff4b00;background:#ff4b00;color:#fff; }
.achievement-list { display:grid;gap:12px; }
.achievement-item { display:grid;gap:13px;padding:16px;border:1px solid #e3e8f0;border-radius:18px;background:#f8fafc; }
.achievement-item.is-unlocked { border-color:#ffc881;background:linear-gradient(145deg,#fffdf8,#fff5e7);box-shadow:0 7px 20px rgba(203,74,0,.07); }
.achievement-item-heading { display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:9px; }
.achievement-item-heading>span { font-size:21px; }
.achievement-item-heading strong { overflow-wrap:anywhere; }
.achievement-item-heading em { padding:4px 8px;border-radius:999px;background:#e9edf3;color:#7d8796;font-size:10px;font-style:normal;font-weight:900;white-space:nowrap; }
.achievement-item.is-unlocked .achievement-item-heading em { background:#ffdfad;color:#a43b00; }
.achievement-item.is-claimed { border-color:#f1d7b5;background:#fffdfa;box-shadow:none; }
.achievement-claim-button { padding:8px 13px;border:0;border-radius:999px;background:#ff4b00;color:#fff;font:inherit;font-size:12px;font-weight:900;white-space:nowrap;box-shadow:0 6px 14px rgba(255,75,0,.18); }
.achievement-claim-button:disabled { opacity:.65;cursor:wait; }
.achievement-progress-row { display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:11px; }
.achievement-progress { height:8px;overflow:hidden;background:#e4e8ee;border-radius:999px; }
.achievement-progress span { display:block;height:100%;background:linear-gradient(90deg,#ffb21b,#ff4b00);border-radius:inherit; }
.achievement-progress-row b { color:#586273;font-size:12px;white-space:nowrap; }
.achievement-rewards { display:flex;flex-wrap:wrap;align-items:center;gap:7px; }
.achievement-rewards small { color:#8992a1;font-weight:850; }
.achievement-rewards span,.achievement-rewards strong { padding:5px 9px;border-radius:9px;background:#fff;color:#ca4300;font-size:12px;font-weight:900; }
.achievement-rewards strong { color:#80520b;background:#fff0ba; }

/* マイページの報酬エリア：漆・朱・金・和紙で祭りの授与所らしく見せる */
.mypage-card.gacha-card {
  padding: 30px;
  color: #fff8df;
  background:
    radial-gradient(circle at 86% 8%, rgba(255, 214, 109, .18), transparent 27%),
    radial-gradient(circle at 8% 115%, rgba(220, 57, 24, .28), transparent 38%),
    linear-gradient(135deg, #210b09 0%, #4d100c 46%, #160908 100%);
  border: 1px solid #b87a35;
  box-shadow: 0 18px 45px rgba(61, 15, 7, .28), inset 0 0 0 4px rgba(255, 222, 142, .055);
}

.mypage-card.gacha-card .gacha-heading h2 { color:#fff9e8; }
.mypage-card.gacha-card .gacha-heading p { color:#efd1b8; }
.mypage-card.gacha-card .gacha-kicker { color:#f2ca70; }

.mypage-card.daily-card {
  isolation: isolate;
  overflow: hidden;
  padding: 30px;
  background:
    linear-gradient(rgba(255, 252, 244, .94), rgba(255, 247, 231, .96)),
    repeating-linear-gradient(90deg, transparent 0 9px, rgba(133, 80, 31, .035) 10px 11px);
  border: 1px solid #d9b278;
  box-shadow: 0 16px 38px rgba(95, 48, 13, .13), inset 0 4px #a82415;
}

.mypage-card.daily-card::before {
  position:absolute;
  top:-82px;
  right:-46px;
  z-index:-1;
  width:220px;
  height:220px;
  background:repeating-radial-gradient(circle,transparent 0 13px,rgba(173,47,21,.055) 14px 16px);
  border-radius:50%;
  content:"";
}

.daily-heading {
  justify-content:flex-start;
  gap:15px;
  margin-bottom:20px;
}

.daily-heading-mark {
  display:grid;
  flex:0 0 58px;
  width:58px;
  height:58px;
  place-items:center;
  color:#fff3cd;
  background:linear-gradient(145deg,#bd381f,#7d160e);
  border:1px solid #d89a54;
  border-radius:50%;
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:24px;
  font-weight:900;
  box-shadow:0 7px 16px rgba(102,27,10,.2),inset 0 0 0 4px rgba(255,225,163,.1);
}

.daily-section-kicker {
  display:block;
  margin-bottom:2px;
  color:#b6762d;
  font-family:Georgia,serif;
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.16em;
}

.daily-card .daily-heading h2 {
  color:#40251a;
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:1.45rem;
  letter-spacing:.08em;
}

.daily-card .daily-heading p {
  margin:3px 0 0;
  color:#9b5a25;
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:.82rem;
  font-weight:800;
}

.daily-card .daily-list {
  gap:10px;
  margin-top:0;
  padding:8px;
  background:rgba(92,45,18,.045);
  border:1px solid rgba(177,111,45,.16);
  border-radius:18px;
}

.daily-card .daily-item {
  position:relative;
  min-height:72px;
  padding:14px 16px 14px 20px;
  background:rgba(255,255,255,.82);
  border:1px solid #ead9bd;
  border-radius:13px;
  box-shadow:0 4px 12px rgba(77,42,16,.045);
}

.daily-card .daily-item::before {
  position:absolute;
  top:12px;
  bottom:12px;
  left:7px;
  width:3px;
  background:#d1b486;
  border-radius:999px;
  content:"";
}

.daily-card .daily-item.is-done {
  background:linear-gradient(135deg,#fff9e9,#fff0d7);
  border-color:#d9a75b;
  box-shadow:0 7px 16px rgba(128,67,17,.08);
}

.daily-card .daily-item.is-done::before { background:linear-gradient(#c83d1f,#e8a83d); }
.daily-card .daily-item-copy strong { color:#3e2b22;font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:.92rem;letter-spacing:.025em; }
.daily-card .daily-item-copy small { color:#8b7768; }
.daily-card .daily-item span { color:#75695f; }
.daily-card .daily-item-reward button { background:linear-gradient(145deg,#bd321a,#e34d20);border:1px solid #a92815;box-shadow:0 7px 16px rgba(132,34,12,.2); }
.daily-card .daily-item-reward button:not(:disabled),
.daily-card .daily-complete-reward-values>button.is-claimable {
  transition:box-shadow 150ms ease,filter 150ms ease,transform 150ms ease;
}

@media (hover:hover) {
  .daily-card .daily-item-reward button:not(:disabled):hover,
  .daily-card .daily-complete-reward-values>button.is-claimable:hover {
    box-shadow:0 2px 6px rgba(105,29,10,.14),inset 0 2px 4px rgba(73,18,7,.18);
    filter:brightness(.98);
    transform:translateY(1px);
  }
}

.daily-card .daily-item-reward button:not(:disabled):active,
.daily-card .daily-complete-reward-values>button.is-claimable:active {
  box-shadow:inset 0 3px 6px rgba(62,13,5,.24);
  transform:translateY(2px) scale(.99);
}
.daily-card .daily-item-reward button:disabled {
  color:#fff8df;
  background:linear-gradient(145deg,#42695c,#233f37);
  border:1px solid #315247;
  box-shadow:0 6px 14px rgba(26,58,48,.18),inset 0 1px rgba(255,255,255,.1);
  cursor:default;
  opacity:1;
}

.daily-card .daily-complete-reward {
  margin-top:14px;
  padding:16px 18px;
  color:#ffe7aa;
  background:
    radial-gradient(circle at 90% 10%,rgba(239,190,83,.16),transparent 28%),
    linear-gradient(135deg,#3a1710,#681c10 58%,#32100c);
  border:1px solid #b8823c;
  border-radius:16px;
  box-shadow:0 10px 24px rgba(73,24,10,.16),inset 0 0 0 2px rgba(255,224,150,.045);
  transition:background .2s ease,border-color .2s ease,box-shadow .2s ease;
}

.daily-complete-reward-title { display:grid;gap:5px;min-width:max-content; }
.daily-complete-reward-title>strong { color:#f7cd6c;font-family:"Yu Mincho","Hiragino Mincho ProN",serif;letter-spacing:.08em; }
.daily-complete-reward-title>span { width:max-content;padding:3px 8px;border:1px solid rgba(255,255,255,.15);border-radius:999px;color:#c8b8a9;background:rgba(0,0,0,.18);font-size:.6rem;font-weight:950;letter-spacing:.06em; }
.daily-card .daily-complete-reward-values { color:#fff3d3; }
.daily-card .daily-complete-reward-values>button { background:rgba(255,255,255,.12);border:1px solid rgba(255,225,168,.18);color:#bda995; }
.daily-card .daily-complete-reward.is-locked { color:#c2b6aa;background:linear-gradient(135deg,#302824,#44332c 58%,#29231f);border-color:#75645a;box-shadow:0 8px 20px rgba(44,35,30,.12),inset 0 0 0 2px rgba(255,255,255,.025); }
.daily-card .daily-complete-reward.is-locked .daily-complete-reward-title>strong,
.daily-card .daily-complete-reward.is-locked .daily-complete-reward-values { color:#c9beb2; }
.daily-card .daily-complete-reward.is-locked .daily-complete-reward-values>button { color:#aea39b;background:#544840;border-color:#77675e;box-shadow:none; }

.daily-card .daily-complete-reward.is-claimable { color:#fff4ca;background:radial-gradient(circle at 86% 10%,rgba(255,236,158,.32),transparent 31%),linear-gradient(135deg,#671b0c,#a93612 58%,#5c160b);border:2px solid #f2bd43;box-shadow:0 0 0 3px rgba(246,190,65,.16),0 13px 30px rgba(135,48,12,.28),inset 0 0 24px rgba(255,193,56,.12); }
.daily-card .daily-complete-reward.is-claimable .daily-complete-reward-title>span { color:#5b2107;background:#ffd96d;border-color:#fff0b5; }
.daily-card .daily-complete-reward-values>button.is-claimable { color:#521804;background:linear-gradient(145deg,#ffe796,#f1b72f);border:2px solid #fff0b2;box-shadow:0 6px 18px rgba(255,193,56,.34),inset 0 1px rgba(255,255,255,.6);cursor:pointer; }

.daily-card .daily-complete-reward.is-claimed { color:#e7fff4;background:radial-gradient(circle at 88% 8%,rgba(123,220,174,.17),transparent 30%),linear-gradient(135deg,#173b30,#245b46 58%,#123027);border:1px solid #63ae89;box-shadow:0 10px 24px rgba(22,74,54,.2),inset 0 0 0 2px rgba(185,255,220,.045); }
.daily-card .daily-complete-reward.is-claimed .daily-complete-reward-title>strong,
.daily-card .daily-complete-reward.is-claimed .daily-complete-reward-values { color:#e6fff2; }
.daily-card .daily-complete-reward.is-claimed .daily-complete-reward-title>span { color:#14392d;background:#9de0bd;border-color:#c5f6db; }
.daily-card .daily-complete-reward-values>button.is-claimed { color:#ddf8e9;background:#315f4e;border:1px solid #6eb493;box-shadow:inset 0 1px rgba(255,255,255,.09);cursor:default; }
.daily-card .matsumari-point-reward { background:#fff9e8;border-color:#e5b85c; }

.mypage-card.achievement-summary-card {
  isolation:isolate;
  overflow:hidden;
  padding:28px;
  color:#f7e5bc;
  background:
    radial-gradient(circle at 84% -10%,rgba(214,166,67,.22),transparent 31%),
    linear-gradient(145deg,#171513,#26201a 54%,#11100f);
  border:1px solid #9f7a3c;
  box-shadow:0 18px 43px rgba(31,23,14,.25),inset 0 0 0 4px rgba(237,199,117,.04);
}

.mypage-card.achievement-summary-card::after {
  position:absolute;
  right:-35px;
  bottom:-52px;
  z-index:-1;
  width:190px;
  height:190px;
  border:1px solid rgba(232,194,110,.14);
  border-radius:50%;
  box-shadow:0 0 0 18px rgba(232,194,110,.025),0 0 0 36px rgba(232,194,110,.018);
  content:"";
}

.achievement-summary-card .section-heading { margin-bottom:20px; }
.achievement-heading-copy { display:flex;align-items:center;gap:14px; }
.achievement-heading-mark { display:grid;flex:0 0 56px;width:56px;height:56px;place-items:center;color:#3b2914;background:linear-gradient(145deg,#fff0b0,#c99431);border:1px solid #ffe5a1;border-radius:50%;font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:22px;font-weight:900;box-shadow:0 7px 20px rgba(0,0,0,.3),inset 0 0 0 4px rgba(94,52,13,.14); }
.achievement-heading-copy>div { display:grid;gap:1px; }
.achievement-heading-copy small { color:#cda654;font-family:Georgia,serif;font-size:.61rem;font-weight:800;letter-spacing:.18em; }
.achievement-summary-card .achievement-heading-copy h2 { margin:0;color:#fff2c9;font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:1.45rem;letter-spacing:.1em; }
.achievement-summary-card .section-heading p { margin:2px 0 0;color:#baa98c;font-family:"Yu Mincho","Hiragino Mincho ProN",serif; }
.achievement-summary-card .section-heading p strong { color:#f1ce7a; }
.equipped-title-summary button,.achievement-summary-card .section-heading button { color:#3c220e;background:linear-gradient(145deg,#f4d98b,#bd8430);border:1px solid #f0d28a;box-shadow:0 6px 15px rgba(0,0,0,.24); }
.equipped-title-summary button,
.achievement-summary-card .section-heading button {
  transition:box-shadow 150ms ease,filter 150ms ease,transform 150ms ease;
}

@media (hover:hover) {
  .equipped-title-summary button:hover,
  .achievement-summary-card .section-heading button:hover {
    box-shadow:0 2px 6px rgba(0,0,0,.18),inset 0 2px 4px rgba(70,40,10,.18);
    filter:brightness(.98);
    transform:translateY(1px);
  }
}

.equipped-title-summary button:active,
.achievement-summary-card .section-heading button:active {
  box-shadow:inset 0 3px 6px rgba(52,30,8,.25);
  transform:translateY(2px) scale(.99);
}

.achievement-summary-card .achievement-summary-progress {
  height:13px;
  padding:2px;
  background:#0b0a09;
  border:1px solid #5b472a;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.65);
}

.achievement-summary-card .achievement-summary-progress span { background:linear-gradient(90deg,#a66b23,#f5d77f,#c68a2e);box-shadow:0 0 12px rgba(231,190,91,.35); }
.achievement-summary-card .achievement-pending-rewards { color:#ffe7a9;background:rgba(122,75,22,.25);border-color:#9b7437; }
.achievement-summary-card .equipped-title-summary { margin-top:17px;background:rgba(255,247,217,.06);border-color:#6c5735; }
.achievement-summary-card .equipped-title-summary>span { color:#a99779; }
.achievement-summary-card .equipped-title-summary>strong { color:#f6d57f;font-family:"Yu Mincho","Hiragino Mincho ProN",serif;letter-spacing:.04em; }

.achievement-item { background:linear-gradient(145deg,#faf7f0,#f2ede3);border-color:#d9c9ae; }
.achievement-item.is-unlocked { background:linear-gradient(145deg,#fff9e8,#f7e2b5);border-color:#c99a43;box-shadow:0 8px 22px rgba(111,70,22,.12); }
.achievement-item.is-unlocked .achievement-item-heading strong { color:#5e3413;font-family:"Yu Mincho","Hiragino Mincho ProN",serif; }
.achievement-progress { background:#d8d0c3; }
.achievement-progress span { background:linear-gradient(90deg,#9e2c18,#e8b44c); }
.achievement-claim-button { background:linear-gradient(145deg,#b52d19,#e74c20);border:1px solid #9e2514; }

@media (max-width:560px) {
  .mypage-card.gacha-card,
  .mypage-card.daily-card,
  .mypage-card.achievement-summary-card { padding:24px 18px; }
  .daily-heading-mark,.achievement-heading-mark { flex-basis:50px;width:50px;height:50px; }
  .daily-section-kicker,.achievement-heading-copy small { letter-spacing:.1em; }
  .daily-card .daily-complete-reward { align-items:flex-start; }
  .achievement-summary-card .section-heading { align-items:flex-start;gap:12px; }
  .achievement-heading-copy { align-items:flex-start;gap:10px; }
}

.title-selector { display:grid;gap:14px; }
.title-selector-intro { display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:13px;padding:15px;background:linear-gradient(135deg,#fff8e9,#fff1d7);border:1px solid #ffd59c;border-radius:17px; }
.title-selector-intro>span { display:grid;place-items:center;width:48px;height:48px;background:#fff;border:1px solid #ffe0ad;border-radius:50%;font-size:24px;box-shadow:0 7px 17px rgba(155,78,13,.1); }
.title-selector-intro div { display:grid;gap:2px; }
.title-selector-intro small { color:#b34b0b;font-size:10px;font-weight:950; }
.title-selector-intro strong { color:#6e350d;overflow-wrap:anywhere; }
.title-selector-intro p { margin:2px 0 0;color:#8a7564;font-size:12px;font-weight:750; }
.title-option-list { display:grid;gap:9px; }
.title-option { position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:13px 14px;border:1px solid #e2e7ef;border-radius:15px;background:#fff;cursor:pointer;transition:border-color .17s ease,background .17s ease,transform .17s ease,box-shadow .17s ease; }
.title-option:hover { border-color:#ffc08c;transform:translateY(-1px); }
.title-option:has(input:checked) { border-color:#ff9d43;background:#fff7ed;box-shadow:0 0 0 2px rgba(255,119,22,.1),0 8px 18px rgba(168,78,13,.07); }
.title-option input { position:absolute;opacity:0;pointer-events:none; }
.title-option-medallion { display:grid;place-items:center;width:42px;height:42px;color:#7d8796;background:#f0f3f7;border-radius:50%;font-size:13px;font-weight:950; }
.title-option:has(input:checked) .title-option-medallion { color:#a53a00;background:linear-gradient(135deg,#ffe7a6,#ffc968);box-shadow:inset 0 0 0 2px rgba(255,255,255,.55); }
.title-option-copy { display:grid;min-width:0;gap:3px; }
.title-option-copy strong { color:#293142;overflow-wrap:anywhere; }
.title-option-copy small { color:#8490a1;font-weight:750; }
.title-option-check { display:grid;place-items:center;width:24px;height:24px;color:transparent;border:2px solid #d8dde5;border-radius:50%;font-size:12px;font-weight:950; }
.title-option:has(input:checked) .title-option-check { color:#fff;background:#ff4b00;border-color:#ff4b00; }
.title-save-button { min-height:50px;margin-top:2px;border:0;border-radius:14px;background:linear-gradient(135deg,#ff6418,#ef3f00);color:#fff;font:inherit;font-weight:950;box-shadow:0 10px 22px rgba(224,64,0,.2);cursor:pointer; }
.title-save-button:disabled { opacity:.6;cursor:wait; }

.achievement-celebration { position:fixed;inset:0;z-index:4500;display:grid;place-items:center;padding:20px;background:rgba(25,14,7,.58);backdrop-filter:blur(5px); }
.achievement-celebration section { width:min(100%,430px);padding:31px;border:2px solid #ffca60;border-radius:27px;background:linear-gradient(155deg,#fffdf7,#fff1da);text-align:center;box-shadow:0 28px 80px rgba(28,12,3,.4);animation:rewardModalIn .24s ease-out both; }
.achievement-trophy { display:block;font-size:52px;filter:drop-shadow(0 7px 8px rgba(185,81,0,.22)); }
.achievement-celebration h2 { margin:8px 0;color:#d64200; }
.achievement-celebration p { margin:0 0 15px;color:#374052;font-weight:900; }
.achievement-celebration>section>strong { display:block;margin:6px;color:#ff4b00;font-size:18px; }
.achievement-new-title { display:grid;gap:6px;margin:17px 0 4px;padding:14px;border:1px solid #efc969;border-radius:14px;background:#fff7d9;color:#80520b; }
.achievement-new-title b { font-size:18px; }
.achievement-celebration button { width:100%;min-height:44px;margin-top:12px;border:0;border-radius:12px;background:#ff4b00;color:#fff;font:inherit;font-weight:900;cursor:pointer; }
.achievement-celebration .achievement-celebration-close { margin-top:8px;background:#fff;color:#687386;border:1px solid #dfe4ea; }

.achievement-toast { position:fixed;top:22px;right:24px;z-index:4600;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:12px;width:min(430px,calc(100vw - 32px));padding:16px 18px;border:1px solid #ffc663;border-radius:18px;background:linear-gradient(145deg,#fffdf7,#fff2dc);color:#3c2b20;font:inherit;text-align:left;box-shadow:0 20px 45px rgba(105,45,4,.2);opacity:0;transform:translateY(-12px);transition:opacity .2s ease,transform .2s ease; }
.achievement-toast.is-visible { opacity:1;transform:translateY(0); }
.achievement-toast>span:first-child { font-size:28px;line-height:1.2; }
.achievement-toast>span:last-child { display:grid;gap:2px; }
.achievement-toast small { color:#d94700;font-size:11px;font-weight:950; }
.achievement-toast strong { font-size:14px;line-height:1.55; }
.achievement-toast em { margin-top:3px;color:#876d5b;font-size:11px;font-style:normal;font-weight:800; }

@media (max-width:560px) {
  .equipped-title-summary { grid-template-columns:1fr auto; }
  .equipped-title-summary>span { grid-column:1 / -1; }
  .achievement-item-heading { grid-template-columns:auto minmax(0,1fr); }
  .achievement-item-heading em { grid-column:2;justify-self:start; }
  .achievement-claim-button { grid-column:2;justify-self:start; }
  .achievement-toast { top:12px;right:16px; }
}

.profile-edit-actions button {
  min-height: 46px;
  min-width: 118px;
  padding: 0 19px;
}

.profile-edit-message {
  min-height: 0;
  margin: 0;
  color: #2168f5;
  font-size: 13px;
  font-weight: 800;
}

.profile-edit-message:empty {
  display: none;
}

.profile-edit-message.is-error {
  color: #d73502;
}

.account-security-card {
  display: grid;
  gap: 18px;
}

.account-security-card .section-heading {
  margin-bottom: 0;
}

.account-security-card .section-heading p {
  margin: 4px 0 0;
  color: #8a93a3;
  font-size: 13px;
  font-weight: 800;
}

.account-security-list {
  display: grid;
  margin: 0;
  border: 1px solid #e8edf4;
  border-radius: 16px;
}

.account-security-list > div {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 16px;
  padding: 14px 16px;
  border-top: 1px solid #e8edf4;
}

.account-security-list > div:first-child {
  border-top: 0;
}

.account-security-list dt {
  color: #8a93a3;
  font-size: 13px;
  font-weight: 900;
}

.account-security-list dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: #303847;
  font-weight: 900;
}

.account-password-button {
  justify-self: start;
  min-height: 44px;
  padding: 0 18px;
  color: #2168f5;
  background: #eaf3ff;
  border: 0;
  border-radius: 999px;
  font-weight: 900;
  cursor: pointer;
}

.account-password-button.hidden {
  display: none;
}

.account-security-note {
  margin: -8px 0 0;
  color: #7e8797;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.6;
}

.account-session-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding-top: 18px;
  border-top: 1px solid #e8edf4;
}

.account-session-actions > div {
  display: grid;
  gap: 3px;
}

.account-session-actions strong {
  color: #303847;
  font-size: 14px;
}

.account-session-actions > div span {
  color: #8a93a3;
  font-size: 12px;
  font-weight: 750;
}

.account-logout-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 15px;
  color: #697386;
  background: #fff;
  border: 1px solid #dfe4eb;
  border-radius: 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  transition: color .17s ease, border-color .17s ease, background .17s ease;
}

.account-logout-button:hover {
  color: #c9342d;
  background: #fff7f6;
  border-color: #f1b7b2;
}

.account-logout-button span {
  font-size: 17px;
}

.logout-confirmation {
  display: grid;
  justify-items: center;
  gap: 16px;
  padding: 8px 2px 2px;
  text-align: center;
}

.logout-confirmation-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  color: #c9342d;
  background: #fff0ef;
  border: 1px solid #ffd0cc;
  border-radius: 50%;
  font-size: 27px;
  font-weight: 900;
}

.logout-confirmation-copy h3 {
  margin: 0;
  color: #222b3b;
  font-size: 20px;
}

.logout-confirmation-copy p {
  max-width: 410px;
  margin: 9px auto 0;
  color: #768193;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.7;
}

.logout-confirmation-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  margin-top: 5px;
}

.logout-confirmation-actions button {
  min-height: 48px;
  color: #4f5a6d;
  background: #f3f5f8;
  border: 1px solid #e1e5eb;
  border-radius: 13px;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.logout-confirmation-actions button.is-danger {
  color: #fff;
  background: #d9423a;
  border-color: #d9423a;
}

.logout-confirmation-actions button:disabled {
  opacity: .65;
  cursor: wait;
}

.delete-event-confirmation {
  position: fixed;
  inset: 0;
  z-index: 350;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(20, 24, 33, 0.64);
  backdrop-filter: blur(8px);
  animation: deleteConfirmationFadeIn 0.2s ease-out both;
}

.delete-event-confirmation.is-closing {
  opacity: 0;
  transition: opacity 0.17s ease;
}

.delete-event-confirmation-card {
  display: grid;
  width: min(440px, 100%);
  justify-items: center;
  padding: 30px;
  overflow: hidden;
  color: #252d3b;
  text-align: center;
  background: radial-gradient(circle at 50% 0, rgba(255, 126, 76, 0.17), transparent 38%), linear-gradient(155deg, #fffdf9, #fff4eb);
  border: 1px solid #ffc9aa;
  border-radius: 26px;
  box-shadow: 0 28px 80px rgba(25, 20, 18, 0.36);
  animation: deleteConfirmationCardIn 0.24s cubic-bezier(.2, .8, .25, 1) both;
}

.delete-event-confirmation-icon {
  display: grid;
  width: 60px;
  height: 60px;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, #ff5b2b, #d8362f);
  border-radius: 50%;
  font-size: 30px;
  font-weight: 950;
  box-shadow: 0 10px 24px rgba(216, 54, 47, 0.24);
}

.delete-event-confirmation-kicker {
  margin-top: 15px;
  color: #d94a19;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.16em;
}

.delete-event-confirmation-card h2 {
  margin: 5px 0 0;
  font-size: 23px;
}

.delete-event-confirmation-name {
  width: min(100%, 360px);
  margin-top: 13px;
  padding: 11px 14px;
  overflow: hidden;
  color: #a83816;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid #ffd5be;
  border-radius: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.delete-event-confirmation-card p {
  margin: 15px 0 0;
  color: #737d8d;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.75;
}

.delete-event-confirmation-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  margin-top: 22px;
}

.delete-event-confirmation-actions button {
  min-height: 50px;
  color: #4e596b;
  background: #f1f3f6;
  border: 1px solid #dde2e9;
  border-radius: 14px;
  font: inherit;
  font-weight: 950;
  cursor: pointer;
}

.delete-event-confirmation-actions button:hover {
  background: #e9edf2;
}

.delete-event-confirmation-actions button.is-danger {
  color: #fff;
  background: linear-gradient(135deg, #ef4b36, #cf312d);
  border-color: #dc3931;
  box-shadow: 0 9px 20px rgba(207, 49, 45, 0.22);
}

.delete-event-confirmation-actions button.is-danger:hover {
  background: linear-gradient(135deg, #e44231, #bd2927);
}

.delete-event-confirmation-actions button:focus-visible {
  outline: 3px solid rgba(255, 75, 0, 0.3);
  outline-offset: 3px;
}

.report-dialog-overlay { position:fixed;inset:0;z-index:5200;display:grid;place-items:center;padding:20px;background:rgba(24,29,38,.62);backdrop-filter:blur(7px); }
.report-dialog { width:min(100%,480px);max-height:calc(100dvh - 40px);padding:28px;overflow-y:auto;color:#283142;background:#fff;border:1px solid #e3e7ee;border-radius:24px;box-shadow:0 28px 85px rgba(17,24,39,.35); }
.report-dialog-kicker { color:#e64a0b;font-size:11px;font-weight:950;letter-spacing:.16em; }
.report-dialog h2 { margin:5px 0 8px;font-size:1.45rem; }
.report-dialog>p { margin:0;color:#727d8e;font-size:14px;font-weight:750;line-height:1.65; }
.report-form { display:grid;gap:17px;margin-top:22px; }
.report-form label { display:grid;gap:8px;color:#313a49;font-size:14px;font-weight:900; }
.report-form label>span { display:flex;align-items:center;gap:7px; }
.report-form label>span small { color:#929aa8;font-size:11px; }
.report-form select,.report-form textarea { width:100%;padding:12px 13px;color:#263041;background:#fbfcfd;border:1px solid #d9dfe8;border-radius:12px;font:inherit;font-size:15px;outline:none; }
.report-form select:focus,.report-form textarea:focus { border-color:#ff8b54;box-shadow:0 0 0 3px rgba(255,104,33,.13); }
.report-form textarea { min-height:112px;resize:vertical;line-height:1.6; }
.report-description-count { justify-self:end;color:#8b94a4;font-size:11px;font-weight:800; }
.report-form-message { min-height:1.4em;margin:0;color:#d92d20;font-size:13px;font-weight:850; }
.report-dialog-actions { display:grid;grid-template-columns:1fr 1.25fr;gap:10px; }
.report-dialog-actions button { min-height:48px;color:#4e5868;background:#f1f3f6;border:1px solid #e0e4ea;border-radius:13px;font:inherit;font-weight:900; }
.report-dialog-actions button.is-primary { color:#fff;background:#e7470a;border-color:#e7470a;box-shadow:0 8px 19px rgba(231,71,10,.2); }
.report-dialog-actions button:disabled { opacity:.62;cursor:wait; }

@media (max-width:520px) {
  .report-dialog-overlay { align-items:end;padding:0; }
  .report-dialog { width:100%;max-height:min(88dvh,760px);padding:24px 18px max(22px,env(safe-area-inset-bottom));border-radius:24px 24px 0 0; }
  .report-dialog-actions { grid-template-columns:1fr; }
  .report-dialog-actions .is-primary { grid-row:1; }
}

@keyframes deleteConfirmationFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes deleteConfirmationCardIn {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 520px) {
  .delete-event-confirmation-card {
    padding: 25px 20px 20px;
    border-radius: 23px;
  }

  .delete-event-confirmation-actions {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .delete-event-confirmation,
  .delete-event-confirmation-card {
    animation: none;
  }
}

.auth-card.is-logged-in {
  display: none;
}

.mypage-profile p {
  margin: 4px 0 10px;
  color: #7e8797;
  font-weight: 800;
}

.profile-social-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 8px 0 12px;
  color: #7e8797;
  font-size: 14px;
  font-weight: 900;
}

.profile-social-counts button {
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  font: inherit;
  cursor: pointer;
}

.profile-social-counts button:hover {
  color: #ff4b00;
}

.profile-social-counts strong {
  color: #1c2434;
  font-size: 16px;
}

.mypage-mobile-point-balance {
  display: none;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  margin: 0 0 18px;
  padding: 10px 13px 10px 9px;
  color: #6d5a4a;
  background: linear-gradient(135deg, #fffaf2, #fff1e3);
  border: 1px solid #ffd6ad;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 850;
  box-shadow: 0 6px 16px rgba(166, 76, 8, 0.07);
}

.mypage-mobile-point-balance img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  filter: drop-shadow(0 3px 5px rgba(196, 59, 0, 0.2));
}

.mypage-mobile-point-balance strong {
  color: #ff4b00;
  font-size: 17px;
  white-space: nowrap;
}

.mypage-profile strong[data-auth-profile-level] {
  display: inline-flex;
  padding: 5px 12px;
  color: #ffffff;
  background: #ff4b00;
  border-radius: 999px;
}

.mypage-exp {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  color: #98a1b0;
  font-weight: 900;
}

.mypage-stats {
  margin: 20px 0;
}

.activity-card {
  margin-top: 20px;
}

.activity-list {
  display: grid;
  margin-top: 16px;
}

.activity-list p {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 18px 0;
  color: #303847;
  border-top: 1px solid #eef1f5;
  font-weight: 800;
}

.activity-list p.is-unread {
  color: #1c2434;
}

.activity-list span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  background: #fff4e7;
  border-radius: 50%;
}

.activity-list small {
  margin-left: auto;
  color: #98a1b0;
  font-size: 13px;
}

/* 実績より下は、明るい祭り色でカード感を少しだけ強める */
.mypage-card.achievement-summary-card {
  margin-top:24px;
}

.mypage-card.mypage-posts-section,
.mypage-card.activity-card,
.mypage-card.account-security-card {
  overflow:hidden;
  background:
    radial-gradient(circle at 96% 0,rgba(255,174,91,.13),transparent 25%),
    linear-gradient(145deg,#fffdfa,#fff8ef);
  border-color:#efcfb2;
  box-shadow:0 10px 26px rgba(146,72,24,.08),inset 0 4px #f07832;
}

.mypage-posts-section .section-heading h2,
.activity-card .section-heading h2,
.account-security-card .section-heading h2 {
  color:#482b20;
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  letter-spacing:.04em;
}

.mypage-posts-section .section-heading p,
.account-security-card .section-heading p { color:#947563; }

.mypage-posts-section .section-heading button,
.activity-card .section-heading button {
  color:#b13d10;
  background:#fff0df;
  border:1px solid #f0bd91;
  box-shadow:0 4px 10px rgba(178,75,18,.07);
}

.mypage-posts-section .section-heading button:hover,
.activity-card .section-heading button:hover {
  color:#fff;
  background:#e95a1d;
  border-color:#e95a1d;
}

.mypage-posts-section .mypage-post-list { border-top-color:#efd9c7; }
.mypage-posts-section .mypage-post-row { border-bottom-color:#efd9c7; }
.mypage-posts-section .mypage-post-main:hover { background:#fff3e5; }
.mypage-posts-section .mypage-post-menu-button { color:#a55d3c;background:#fff0df;border:1px solid #f1d0b5; }
.mypage-posts-section .mypage-post-menu-button:hover,
.mypage-posts-section .mypage-post-menu-button[aria-expanded="true"] { color:#fff;background:#e95a1d;border-color:#e95a1d; }

.mypage-posts-section .empty-posts {
  padding:30px;
  color:#806f65;
  background:linear-gradient(135deg,#fff9f0,#fff3e5);
  border:1px solid #efd4bb;
  border-left:5px solid #ef7b37;
}

.mypage-posts-section .empty-posts strong { color:#493127;font-family:"Yu Mincho","Hiragino Mincho ProN",serif; }
.mypage-posts-section .mypage-posts-more { color:#b43d0d;background:#fff0df;border:1px solid #edbd95; }

.mypage-card.my-exploration-map-card {
  margin-top: 24px;
  padding: 0;
  overflow: hidden;
  color: #fff4d2;
  background:
    radial-gradient(circle at 88% 8%, rgba(235, 174, 53, 0.18), transparent 29%),
    radial-gradient(circle at 9% 92%, rgba(201, 65, 22, 0.18), transparent 27%),
    linear-gradient(145deg, #211b15, #101010 64%, #080808);
  border-color: #80612b;
  box-shadow: 0 16px 38px rgba(45, 27, 11, 0.18), inset 0 3px #c18b2d;
}

.my-exploration-map-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 25px 28px;
}

.my-exploration-map-title-wrap {
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 0;
}

.my-exploration-map-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 54px;
  height: 54px;
  font-size: 29px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(244, 203, 113, 0.3);
  border-radius: 17px;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08), 0 9px 21px rgba(0, 0, 0, 0.24);
}

.my-exploration-map-heading .mypage-section-kicker {
  color: #e8b952;
}

.my-exploration-map-heading h2 {
  margin: 3px 0 4px;
  color: #fff3c8;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  letter-spacing: 0.04em;
}

.my-exploration-map-heading p {
  margin: 0;
  color: #d7c9b1;
  font-size: 13px;
  font-weight: 750;
}

.my-exploration-map-toggle {
  flex: 0 0 auto;
  min-width: 124px;
  min-height: 46px;
  padding: 10px 19px;
  color: #281507;
  background: linear-gradient(135deg, #ffd770, #e8a834);
  border: 1px solid #ffe29b;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(222, 154, 38, 0.24);
  font: inherit;
  font-weight: 950;
  cursor: pointer;
}

.my-exploration-map-toggle:hover,
.my-exploration-map-toggle:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

.my-exploration-map-card.is-open .my-exploration-map-toggle {
  color: #f8e6ba;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(244, 211, 136, 0.3);
  box-shadow: none;
}

.my-exploration-map-panel {
  padding: 0 28px 28px;
  border-top: 1px solid rgba(232, 187, 84, 0.23);
}

.my-exploration-map-panel.hidden,
.my-exploration-map-canvas.hidden,
.my-exploration-map-loading.hidden,
.my-exploration-map-empty.hidden {
  display: none;
}

.my-exploration-map-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 1px 13px;
}

.my-exploration-map-summary strong {
  color: #ffe39b;
  font-size: 16px;
}

.my-exploration-map-summary span {
  color: #bdb4a5;
  font-size: 12px;
  font-weight: 800;
}

.my-exploration-map-canvas {
  width: 100%;
  height: clamp(380px, 54vw, 620px);
  overflow: hidden;
  background: #e8e0d1;
  border: 2px solid #8f6b2d;
  border-radius: 20px;
  box-shadow: 0 20px 42px rgba(0, 0, 0, 0.38), inset 0 0 0 1px rgba(255, 235, 184, 0.18);
}

.my-exploration-map-loading,
.my-exploration-map-empty {
  display: grid;
  place-items: center;
  min-height: 290px;
  padding: 34px 22px;
  text-align: center;
  background:
    linear-gradient(rgba(14, 14, 14, 0.88), rgba(14, 14, 14, 0.88)),
    radial-gradient(circle at center, rgba(214, 158, 48, 0.28), transparent 58%);
  border: 1px solid #6f5630;
  border-radius: 20px;
}

.my-exploration-map-loading {
  align-content: center;
  gap: 13px;
  color: #d9cdb6;
  font-weight: 850;
}

.my-exploration-map-loading > span {
  width: 30px;
  height: 30px;
  border: 4px solid rgba(255, 255, 255, 0.16);
  border-top-color: #efbd55;
  border-radius: 50%;
  animation: feed-loading-spin 0.8s linear infinite;
}

.my-exploration-map-empty {
  align-content: center;
  gap: 10px;
}

.my-exploration-map-empty strong {
  color: #fff0bd;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 1.25rem;
}

.my-exploration-map-empty p {
  max-width: 520px;
  margin: 0;
  color: #cfc4b1;
  line-height: 1.75;
}

.my-exploration-map-empty button {
  min-height: 44px;
  margin-top: 9px;
  padding: 9px 19px;
  color: #2d1708;
  background: #efb847;
  border: 1px solid #ffdc86;
  border-radius: 999px;
  font: inherit;
  font-weight: 950;
  cursor: pointer;
}

.my-exploration-map-status {
  min-height: 20px;
  margin: 10px 2px 0;
  color: #c1b6a4;
  font-size: 12px;
  font-weight: 750;
}

.my-exploration-record {
  margin-top: 18px;
  padding: 22px 24px 19px;
  color: #f5f5f5;
  background: rgba(0, 0, 0, 0.43);
  border: 1px solid #3c3c3c;
  border-radius: 20px;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.04);
}

.my-exploration-record h3 {
  margin: 0;
  color: #f4f4f4;
  font-size: 18px;
  letter-spacing: 0.02em;
}

.my-exploration-record-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 21px 0 14px;
}

.my-exploration-record-grid > div {
  display: grid;
  place-items: center;
  padding: 4px 18px 10px;
  text-align: center;
}

.my-exploration-record-grid > div + div {
  border-left: 1px solid #393939;
}

.my-exploration-record-grid strong {
  color: #fff;
  font-size: clamp(2rem, 5vw, 2.65rem);
  line-height: 1;
}

.my-exploration-record-grid strong small {
  font-size: 0.48em;
}

.my-exploration-record-grid p {
  margin: 12px 0 0;
  color: #c9c9c9;
  font-size: 14px;
}

.my-exploration-record > small {
  color: #979797;
  font-size: 11px;
}

.my-exploration-map-info {
  display: grid;
  min-width: 210px;
  max-width: 280px;
  gap: 7px;
  padding: 3px 1px 1px;
  color: #35271e;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
}

.my-exploration-map-info strong {
  color: #3a2113;
  font-size: 15px;
}

.my-exploration-map-info span {
  color: #66584f;
  font-size: 12px;
  line-height: 1.45;
}

.my-exploration-map-info button {
  justify-self: start;
  padding: 7px 11px;
  color: #fff;
  background: #df4d18;
  border: 0;
  border-radius: 9px;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

@media (max-width: 720px) {
  .mypage-card.my-exploration-map-card {
    margin-top: 18px;
    border-radius: 21px;
  }

  .my-exploration-map-heading {
    align-items: stretch;
    flex-direction: column;
    gap: 16px;
    padding: 21px 17px;
  }

  .my-exploration-map-icon {
    width: 48px;
    height: 48px;
    font-size: 25px;
  }

  .my-exploration-map-heading p {
    font-size: 12px;
    line-height: 1.6;
  }

  .my-exploration-map-toggle {
    width: 100%;
  }

  .my-exploration-map-panel {
    padding: 0 13px 16px;
  }

  .my-exploration-map-summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
    padding: 15px 2px 11px;
  }

  .my-exploration-map-canvas {
    height: min(58vh, 510px);
    min-height: 360px;
    border-radius: 16px;
  }

  .my-exploration-map-loading,
  .my-exploration-map-empty {
    min-height: 250px;
    border-radius: 16px;
  }

  .my-exploration-record {
    padding: 19px 13px 16px;
    border-radius: 16px;
  }

  .my-exploration-record-grid > div {
    padding-right: 8px;
    padding-left: 8px;
  }

  .my-exploration-record-grid p {
    font-size: 12px;
  }
}

.activity-card .activity-list { gap:8px;margin-top:13px; }
.activity-card .activity-list p {
  padding:14px 15px;
  background:rgba(255,255,255,.72);
  border:1px solid #f0ddca;
  border-radius:13px;
}
.activity-card .activity-list p.is-unread { background:#fff4e7;border-color:#efc398; }
.activity-card .activity-list span { color:#c64c18;background:#ffe8d1;border:1px solid #f3c8a2; }
.activity-card .activity-list small { color:#a08372; }

.account-security-card .account-security-list {
  overflow:hidden;
  background:rgba(255,255,255,.7);
  border-color:#efd8c3;
}
.account-security-card .account-security-list>div { border-color:#efd8c3; }
.account-security-card .account-security-list dt { color:#9a7560; }
.account-security-card .account-security-list dd { color:#49362d; }
.account-security-card .account-security-note { color:#8d776b; }
.account-security-card .account-session-actions { border-color:#ecd5c0; }
.account-security-card .account-logout-button { color:#9b4b2b;background:#fff8f1;border-color:#e9c8ac; }
.account-security-card .account-logout-button:hover { color:#fff;background:#c95027;border-color:#c95027; }
.account-security-card .account-password-button { color:#a83a0e;background:#ffead6;border:1px solid #efbd91; }

/* 実績一覧は、図鑑ほど重くせず落ち着いた生成りと薄い朱で統一 */
.social-modal.is-achievement-collection {
  width:min(680px,calc(100vw - 32px));
  max-height:min(850px,calc(100dvh - 32px));
  color:#3d342d;
  background:#f7f1e8;
  border:1px solid #bca88e;
  border-radius:26px;
  box-shadow:0 28px 80px rgba(55,39,27,.35);
}

.social-modal.is-achievement-collection .social-modal-header {
  min-height:88px;
  background:
    radial-gradient(circle at 88% 0,rgba(180,102,55,.11),transparent 32%),
    linear-gradient(135deg,#f8f0e5,#eee1d1);
  border-bottom:1px solid #d3c1ad;
}

.social-modal.is-achievement-collection .social-modal-header h2 {
  color:#443128;
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:1.55rem;
  letter-spacing:.09em;
}

.social-modal.is-achievement-collection .modal-close-button { color:#785d4e;background:#fffaf4;border-color:#d9bda8; }
.social-modal.is-achievement-collection .social-modal-body { padding:22px 24px 30px;background:linear-gradient(145deg,#faf6ef,#f3ece2);scrollbar-color:#b59a7e #eee5da; }

.social-modal.is-achievement-collection .achievement-category-tabs {
  gap:7px;
  margin-bottom:18px;
  padding:3px 0 9px;
}
.social-modal.is-achievement-collection .achievement-category-tabs button { color:#76685d;background:#fffaf5;border-color:#d8ccbf;box-shadow:none; }
.social-modal.is-achievement-collection .achievement-category-tabs button:hover { border-color:#b77958;background:#f8eee5; }
.social-modal.is-achievement-collection .achievement-category-tabs button.is-active { color:#fff8f1;background:#a95635;border-color:#a95635; }

.social-modal.is-achievement-collection .achievement-list { gap:11px; }
.social-modal.is-achievement-collection .achievement-item {
  padding:17px;
  color:#38312c;
  background:#fffdf9;
  border:1px solid #d9cdbf;
  border-radius:16px;
  box-shadow:0 5px 15px rgba(78,57,41,.055);
}
.social-modal.is-achievement-collection .achievement-item.is-unlocked { background:linear-gradient(145deg,#faf1e4,#f3e3d2);border-color:#c99c79;box-shadow:0 7px 18px rgba(111,68,37,.09); }
.social-modal.is-achievement-collection .achievement-item.is-claimed { background:#f2f2ea;border-color:#c9c8b9;box-shadow:none; }
.social-modal.is-achievement-collection .achievement-item-heading>span { color:#8f5a3c;font-size:20px; }
.social-modal.is-achievement-collection .achievement-item-heading strong,
.social-modal.is-achievement-collection .achievement-item.is-unlocked .achievement-item-heading strong { color:#49352b;font-family:"Yu Mincho","Hiragino Mincho ProN",serif; }
.social-modal.is-achievement-collection .achievement-item-heading em { color:#77736a;background:#e7e5df; }
.social-modal.is-achievement-collection .achievement-item.is-unlocked .achievement-item-heading em { color:#7f492d;background:#ead3bd; }
.social-modal.is-achievement-collection .achievement-item.is-claimed .achievement-item-heading em { color:#536254;background:#dce4d9; }
.social-modal.is-achievement-collection .achievement-progress { background:#d9d2c8; }
.social-modal.is-achievement-collection .achievement-progress span { background:linear-gradient(90deg,#9d4a2d,#d7874e); }
.social-modal.is-achievement-collection .achievement-progress-row b { color:#6f655d; }
.social-modal.is-achievement-collection .achievement-rewards small { color:#90867e; }
.social-modal.is-achievement-collection .achievement-rewards span { color:#9a3e1a;background:#fff8f2;border:1px solid #ead5c3; }
.social-modal.is-achievement-collection .achievement-rewards strong { color:#76551e;background:#f4e7b9;border:1px solid #dfcd94; }
.social-modal.is-achievement-collection .achievement-claim-button { color:#fff;background:#b6532f;border:1px solid #984529;box-shadow:0 5px 12px rgba(124,56,31,.16); }

@media (max-width:560px) {
  .mypage-card.achievement-summary-card { margin-top:18px; }
  .mypage-card.mypage-posts-section,.mypage-card.activity-card,.mypage-card.account-security-card { padding:22px 16px; }
  .activity-card .activity-list p { align-items:flex-start;flex-wrap:wrap; }
  .activity-card .activity-list small { margin-left:auto; }
  .social-modal.is-achievement-collection { width:calc(100vw - 20px);max-height:calc(100dvh - 20px);border-radius:21px; }
  /* iOSのホーム画面表示ではsafe-areaが0になるWebViewもあるため、
     ステータスバー相当の余白を最低54px確保する。 */
  .social-modal.is-achievement-collection .social-modal-header {
    min-height: calc(76px + max(54px, env(safe-area-inset-top, 0px)));
    padding-top: calc(10px + max(54px, env(safe-area-inset-top, 0px)));
  }
  .social-modal.is-achievement-collection .social-modal-body { padding:17px 14px 25px; }
}

/* 称号選択：実績で得た称号を飾る、落ち着いた金と濃色の装備室 */
.social-modal.is-title-selector {
  width:min(620px,calc(100vw - 32px));
  max-height:min(820px,calc(100dvh - 32px));
  color:#eee1c1;
  background:
    radial-gradient(circle at 85% 2%,rgba(220,174,75,.16),transparent 29%),
    linear-gradient(145deg,#211b15,#100e0c 74%);
  border:1px solid #80663a;
  border-radius:28px;
  box-shadow:0 30px 90px rgba(0,0,0,.52),inset 0 0 0 4px rgba(239,207,135,.035);
}

.social-modal.is-title-selector .social-modal-header {
  min-height:90px;
  background:linear-gradient(90deg,rgba(255,255,255,.025),rgba(199,151,57,.1),rgba(255,255,255,.018));
  border-bottom:1px solid #5f4b2c;
}

.social-modal.is-title-selector .social-modal-header h2 {
  color:#fff0bd;
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:1.6rem;
  letter-spacing:.1em;
  text-shadow:0 2px 10px rgba(0,0,0,.45);
}

.social-modal.is-title-selector .modal-close-button {
  color:#f3e3b8;
  background:rgba(255,255,255,.055);
  border-color:rgba(226,190,106,.34);
}

.social-modal.is-title-selector .modal-close-button:hover { background:rgba(255,255,255,.1); }

.social-modal.is-title-selector .social-modal-body {
  padding:24px 26px 30px;
  background:
    linear-gradient(rgba(23,20,16,.94),rgba(12,11,9,.97)),
    repeating-linear-gradient(90deg,transparent 0 19px,rgba(232,199,123,.035) 20px 21px);
  scrollbar-color:#896b35 #171411;
}

.social-modal.is-title-selector .title-selector { gap:15px; }
.social-modal.is-title-selector .title-selector-intro {
  position:relative;
  overflow:hidden;
  padding:19px 20px;
  background:
    radial-gradient(circle at 98% 0,rgba(235,190,91,.19),transparent 32%),
    linear-gradient(135deg,#3a2618,#1b1510 70%);
  border:1px solid #987034;
  border-radius:18px;
  box-shadow:0 11px 27px rgba(0,0,0,.3),inset 0 0 0 2px rgba(255,228,162,.035);
}

.social-modal.is-title-selector .title-selector-intro::after {
  position:absolute;
  top:-58px;
  right:-45px;
  width:150px;
  height:150px;
  border:1px solid rgba(245,207,115,.12);
  border-radius:50%;
  box-shadow:0 0 0 17px rgba(245,207,115,.025),0 0 0 33px rgba(245,207,115,.018);
  content:"";
}

.social-modal.is-title-selector .title-selector-intro>span {
  position:relative;
  z-index:1;
  width:54px;
  height:54px;
  color:#4a2d10;
  background:linear-gradient(145deg,#fff0a8,#c58c2b);
  border:1px solid #ffe3a0;
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:19px;
  box-shadow:0 8px 20px rgba(0,0,0,.34),inset 0 0 0 4px rgba(93,51,12,.13);
}

.social-modal.is-title-selector .title-selector-intro div { position:relative;z-index:1; }
.social-modal.is-title-selector .title-selector-intro small { color:#d7a94e;letter-spacing:.1em; }
.social-modal.is-title-selector .title-selector-intro strong { color:#fff1c6;font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:1.12rem;letter-spacing:.04em; }
.social-modal.is-title-selector .title-selector-intro p { color:#c7b79d; }
.social-modal.is-title-selector .title-option-list { gap:10px; }

.social-modal.is-title-selector .title-option {
  padding:14px 15px;
  color:#e8dcc2;
  background:linear-gradient(145deg,#29251f,#1b1916);
  border:1px solid #51483a;
  border-radius:15px;
  box-shadow:0 7px 17px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.025);
}

.social-modal.is-title-selector .title-option:hover {
  background:linear-gradient(145deg,#322b21,#201b16);
  border-color:#9d793b;
  box-shadow:0 10px 23px rgba(0,0,0,.28),0 0 14px rgba(203,157,62,.08);
}

.social-modal.is-title-selector .title-option:has(input:checked) {
  background:
    radial-gradient(circle at 0 50%,rgba(232,185,82,.14),transparent 30%),
    linear-gradient(145deg,#3a2c1b,#211a13);
  border-color:#d1a449;
  box-shadow:0 0 0 2px rgba(222,177,75,.09),0 10px 25px rgba(0,0,0,.31),inset 0 0 18px rgba(225,178,72,.045);
}

.social-modal.is-title-selector .title-option-medallion {
  width:46px;
  height:46px;
  color:#978b77;
  background:#24221f;
  border:1px solid #4f4a41;
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.018);
}

.social-modal.is-title-selector .title-option:has(input:checked) .title-option-medallion {
  color:#4b2c0e;
  background:linear-gradient(145deg,#fff0a5,#c78d2e);
  border-color:#f4cf72;
  box-shadow:0 5px 13px rgba(0,0,0,.28),inset 0 0 0 3px rgba(97,51,10,.12);
}

.social-modal.is-title-selector .title-option-copy strong { color:#eee3ca;font-family:"Yu Mincho","Hiragino Mincho ProN",serif;letter-spacing:.025em; }
.social-modal.is-title-selector .title-option-copy small { color:#9f9688; }
.social-modal.is-title-selector .title-option:has(input:checked) .title-option-copy strong { color:#ffe9aa; }
.social-modal.is-title-selector .title-option:has(input:checked) .title-option-copy small { color:#d1b46e; }
.social-modal.is-title-selector .title-option-check { color:transparent;background:#171614;border-color:#5b554b; }
.social-modal.is-title-selector .title-option:has(input:checked) .title-option-check { color:#241606;background:linear-gradient(145deg,#f7d476,#bf8528);border-color:#f0c85e;box-shadow:0 0 13px rgba(230,184,75,.24); }

.social-modal.is-title-selector .title-save-button {
  min-height:54px;
  color:#2e1c09;
  background:linear-gradient(145deg,#f8dc85,#bd8228);
  border:1px solid #f3d277;
  border-radius:14px;
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  letter-spacing:.06em;
  box-shadow:0 10px 24px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.5);
}

.social-modal.is-title-selector .title-save-button:hover:not(:disabled) { filter:brightness(1.06);transform:translateY(-1px); }
.social-modal.is-title-selector .social-empty { color:#baad96;background:rgba(255,255,255,.035);border-color:#514738; }

@media (max-width:560px) {
  .social-modal.is-title-selector { width:calc(100vw - 20px);max-height:calc(100dvh - 20px);border-radius:22px; }
  .social-modal.is-title-selector .social-modal-header { min-height:76px; }
  .social-modal.is-title-selector .social-modal-header h2 { font-size:1.3rem; }
  .social-modal.is-title-selector .social-modal-body { padding:17px 14px max(22px,env(safe-area-inset-bottom)); }
  .social-modal.is-title-selector .title-selector-intro { padding:16px 14px; }
  .social-modal.is-title-selector .title-selector-intro>span { width:48px;height:48px;font-size:17px; }
  .social-modal.is-title-selector .title-option { padding:12px; }
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  place-items: center;
  padding: 32px;
  background: rgba(17, 24, 39, 0.48);
}

.modal-overlay.active {
  display: grid;
}

#authModal {
  z-index: 1100;
  align-items: center;
  justify-items: center;
  overflow: auto;
}

body.modal-open {
  overflow: hidden;
}

.event-modal {
  width: min(760px, 100%);
  max-height: min(900px, 92vh);
  overflow: hidden;
  background: #ffffff;
  border-radius: 28px;
  box-shadow: 0 24px 80px rgba(17, 24, 39, 0.24);
}

.auth-modal {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  box-sizing: border-box;
  width: min(520px, calc(100vw - 64px));
  max-width: 520px;
  max-height: min(900px, calc(100dvh - 64px));
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 4%, rgba(255, 190, 74, 0.2), transparent 24%),
    linear-gradient(155deg, #fffdf8 0%, #fff8ec 100%);
  border: 1px solid #efc38d;
  border-radius: 24px;
  box-shadow: 0 26px 84px rgba(74, 34, 12, 0.3);
}

.auth-modal::before {
  position: absolute;
  z-index: 4;
  top: 0;
  right: 0;
  left: 0;
  height: 6px;
  background: repeating-linear-gradient(90deg, #ff4b00 0 34px, #f5b72e 34px 68px, #fff1d0 68px 102px);
  content: "";
}

.event-detail-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(760px, 100%);
  max-height: min(860px, 92vh);
  overflow: hidden;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 24px 80px rgba(17, 24, 39, 0.24);
}

.social-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(560px, 100%);
  max-height: min(720px, 88vh);
  overflow: hidden;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 24px 80px rgba(17, 24, 39, 0.24);
}

.social-modal-header {
  grid-template-columns: 72px 1fr 72px;
}

.social-modal-body {
  min-height: 0;
  overflow-y: auto;
  padding: 18px 24px 28px;
}

.social-modal.is-notification-center {
  width: min(620px, calc(100vw - 32px));
  max-height: min(780px, calc(100dvh - 32px));
  background:
    radial-gradient(circle at 92% 0, rgba(255, 180, 91, 0.16), transparent 28%),
    linear-gradient(155deg, #fffdf9, #fff7ed);
  border: 1px solid #efcaa9;
}

.social-modal.is-notification-center .social-modal-header {
  color: #4a2e22;
  background: rgba(255, 250, 243, 0.92);
  border-bottom-color: #efd7c2;
}

.social-modal.is-notification-center .social-modal-body {
  padding: 20px 22px 28px;
}

.notification-center {
  display: grid;
  gap: 14px;
}

.web-push-settings {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid #ecd8c5;
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(110, 61, 28, 0.06);
}

.web-push-settings.is-enabled {
  background: linear-gradient(135deg, #f8fff0, #fffdf8);
  border-color: #bfdf91;
}

.web-push-settings-copy {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.web-push-settings-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  color: #d84d12;
  background: #fff0df;
  border-radius: 50%;
  font-size: 19px;
  font-weight: 950;
}

.web-push-settings.is-enabled .web-push-settings-icon {
  color: #fff;
  background: #8ac83d;
}

.web-push-settings-copy > div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.web-push-settings-copy strong {
  color: #3c2f28;
  font-size: 14px;
}

.web-push-settings-copy p {
  margin: 0;
  color: #806d61;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.55;
}

.web-push-toggle-button {
  align-self: center;
  min-height: 40px;
  padding: 0 14px;
  color: #fff;
  background: linear-gradient(135deg, #ff6b1d, #ed480a);
  border: 1px solid #e34b0e;
  border-radius: 999px;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.web-push-settings.is-enabled .web-push-toggle-button {
  color: #765f52;
  background: #fff;
  border-color: #dfcfc2;
}

.web-push-toggle-button:disabled {
  opacity: 0.55;
  cursor: default;
}

.web-push-mobile-choices {
  display: none;
}

.web-push-install-guide {
  display: grid;
  justify-items: center;
  gap: 15px;
  padding: 22px 8px 8px;
  text-align: center;
}

.web-push-install-guide > span {
  font-size: 52px;
}

.web-push-install-guide h3 {
  margin: 0;
  color: #322a26;
  font-size: 20px;
}

.web-push-install-guide ol {
  display: grid;
  width: min(420px, 100%);
  gap: 9px;
  margin: 0;
  padding: 16px 18px 16px 42px;
  color: #4d443f;
  background: #fff8ef;
  border: 1px solid #f1d2b7;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.55;
  text-align: left;
}

.web-push-install-guide p {
  margin: 0;
  color: #7c6b61;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.65;
}

.web-push-install-guide button {
  min-height: 46px;
  padding: 0 24px;
  color: #fff;
  background: #ef5317;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.web-push-install-guide .web-push-guide-back {
  color: #75665d;
  background: #fff;
  border: 1px solid #dfd1c6;
}

.web-push-permission-guide {
  display: grid;
  justify-items: center;
  gap: 17px;
  padding: 14px 8px 8px;
  text-align: center;
}

.web-push-permission-icon {
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  background: linear-gradient(145deg, #fff6e8, #ffe5c7);
  border: 1px solid #f2c59a;
  border-radius: 50%;
  box-shadow: 0 10px 24px rgba(211, 83, 22, 0.12);
  font-size: 34px;
}

.web-push-permission-heading {
  display: grid;
  gap: 5px;
}

.web-push-permission-heading > span {
  color: #e65318;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.16em;
}

.web-push-permission-heading h3 {
  margin: 0;
  color: #342922;
  font-size: 21px;
}

.web-push-permission-heading p,
.web-push-permission-note {
  margin: 0;
  color: #7d6c61;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.65;
}

.web-push-permission-benefits {
  display: grid;
  width: min(430px, 100%);
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.web-push-permission-benefits li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  background: #fffaf4;
  border: 1px solid #efd7bf;
  border-radius: 15px;
}

.web-push-permission-benefits li > span {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  color: #dd4b12;
  background: #ffead5;
  border-radius: 50%;
  font-size: 20px;
}

.web-push-permission-benefits li > div {
  display: grid;
  gap: 3px;
}

.web-push-permission-benefits strong {
  color: #3d3029;
  font-size: 13px;
}

.web-push-permission-benefits small {
  color: #89776b;
  font-size: 10px;
  font-weight: 750;
  line-height: 1.45;
}

.web-push-permission-note {
  padding: 9px 13px;
  color: #75665d;
  background: #f5f6f7;
  border-radius: 12px;
  font-size: 10px;
}

.web-push-permission-actions {
  display: grid;
  width: min(430px, 100%);
  gap: 9px;
}

.web-push-permission-actions button {
  min-height: 46px;
  color: #75665d;
  background: #fff;
  border: 1px solid #dfd1c6;
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.web-push-permission-actions button.is-primary {
  color: #fff;
  background: linear-gradient(135deg, #ff6b1d, #ed480a);
  border-color: #e34b0e;
  box-shadow: 0 9px 20px rgba(212, 72, 13, 0.2);
}

.web-push-origin-note {
  padding: 10px 12px;
  color: #8b5f48 !important;
  background: #fff3e6;
  border-radius: 12px;
}

.web-push-device-note {
  padding: 10px 12px;
  color: #8b5f48 !important;
  background: #fff3e6;
  border: 1px solid #f3d3b8;
  border-radius: 12px;
}

.notification-center-summary {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 4px 2px;
}

.notification-center-summary > div {
  display: grid;
  gap: 2px;
}

.notification-center-summary span {
  color: #e35318;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.16em;
}

.notification-center-summary strong {
  color: #442c22;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 19px;
}

.notification-center-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.notification-mark-all-button,
.notification-delete-read-button {
  min-height: 36px;
  padding: 0 13px;
  color: #d64a10;
  background: #fff4e7;
  border: 1px solid #efb984;
  border-radius: 999px;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.notification-delete-read-button {
  color: #7d6659;
  background: rgba(255, 255, 255, 0.82);
  border-color: #ddc7b5;
}

.notification-mark-all-button:hover:not(:disabled),
.notification-mark-all-button:focus-visible:not(:disabled),
.notification-delete-read-button:hover:not(:disabled),
.notification-delete-read-button:focus-visible:not(:disabled) {
  color: #ffffff;
  background: #e95216;
  border-color: #e95216;
  box-shadow: 0 7px 16px rgba(192, 67, 15, 0.2);
  transform: translateY(-1px);
}

.notification-mark-all-button:focus-visible,
.notification-delete-read-button:focus-visible {
  outline: 3px solid rgba(240, 90, 24, 0.2);
  outline-offset: 2px;
}

.notification-mark-all-button:disabled,
.notification-delete-read-button:disabled {
  color: #a49387;
  background: #f5eee7;
  border-color: #e4d8ce;
  cursor: default;
}

.notification-center-list {
  display: grid;
  gap: 9px;
}

.notification-center-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px;
  color: #332922;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid #eddcca;
  border-radius: 16px;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.notification-center-item.is-unread {
  background: linear-gradient(135deg, #fff5e8, #fffaf3);
  border-color: #efb984;
  box-shadow: inset 4px 0 #f05a18;
}

.notification-center-item:hover,
.notification-center-item:focus-visible {
  border-color: #eb9c62;
  box-shadow: 0 9px 22px rgba(132, 60, 20, 0.11);
  transform: translateY(-1px);
}

.notification-center-item:focus-visible {
  outline: 3px solid rgba(240, 90, 24, 0.2);
  outline-offset: 2px;
}

.notification-center-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  color: #d84d12;
  background: #ffe7d1;
  border: 1px solid #f1c49e;
  border-radius: 50%;
  font-size: 20px;
  font-weight: 950;
}

.notification-center-copy {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.notification-center-copy strong {
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 1.55;
}

.notification-center-copy small {
  color: #9a8374;
  font-size: 11px;
  font-weight: 800;
}

.notification-new-mark {
  padding: 4px 7px;
  color: #fff;
  background: #ef5317;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 950;
  white-space: nowrap;
}

.notification-center-arrow {
  color: #be9277;
  font-size: 27px;
  line-height: 1;
}

.notification-center-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 50px 20px;
  color: #785f51;
  text-align: center;
}

.notification-center-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 180px;
  color: #7e6759;
  font-size: 13px;
  font-weight: 900;
}

.notification-center-loading > span {
  width: 24px;
  height: 24px;
  border: 3px solid #f3d7c0;
  border-top-color: #ed5316;
  border-radius: 50%;
  animation: notificationLoadingSpin 700ms linear infinite;
}

@keyframes notificationLoadingSpin {
  to { transform: rotate(360deg); }
}

.notification-center-empty > span {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  margin-bottom: 4px;
  background: #fff0df;
  border-radius: 50%;
  font-size: 29px;
}

.notification-center-empty strong {
  color: #482f24;
  font-size: 18px;
}

.notification-center-empty p {
  max-width: 360px;
  margin: 0;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.7;
}

/* バッジ図鑑：ショーケースとつながる漆黒の収集室 */
.social-modal.is-badge-collection {
  width:min(760px,calc(100vw - 32px));
  max-height:min(860px,calc(100dvh - 32px));
  color:#f2e5c5;
  background:
    radial-gradient(circle at 88% 4%,rgba(211,164,66,.17),transparent 28%),
    linear-gradient(145deg,#201b16,#0e0d0c 72%);
  border:1px solid #80683d;
  border-radius:28px;
  box-shadow:0 30px 90px rgba(0,0,0,.55),inset 0 0 0 4px rgba(235,199,120,.035);
}

.social-modal.is-badge-collection .social-modal-header {
  min-height:92px;
  background:linear-gradient(90deg,rgba(255,255,255,.025),rgba(205,160,69,.08),rgba(255,255,255,.02));
  border-bottom:1px solid #5e4a2c;
}

.social-modal.is-badge-collection .social-modal-header h2 {
  color:#fff0c0;
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:1.65rem;
  letter-spacing:.11em;
  text-shadow:0 2px 10px rgba(0,0,0,.4);
}

.social-modal.is-badge-collection .modal-close-button {
  color:#f5e6bc;
  background:rgba(255,255,255,.055);
  border-color:rgba(227,191,110,.35);
}

.social-modal.is-badge-collection .social-modal-body {
  padding:24px 26px 32px;
  background:
    linear-gradient(rgba(21,19,16,.92),rgba(11,10,9,.96)),
    repeating-linear-gradient(90deg,transparent 0 18px,rgba(232,199,123,.035) 19px 20px);
  scrollbar-color:#8d6f37 #171411;
}

.social-modal.is-badge-collection .badge-collection-summary {
  position:relative;
  overflow:hidden;
  padding:20px 22px;
  color:#f5e7bd;
  background:
    radial-gradient(circle at 96% 0,rgba(235,190,91,.2),transparent 30%),
    linear-gradient(135deg,#3a2416,#1a1510 68%);
  border-color:#9b7333;
  box-shadow:0 11px 28px rgba(0,0,0,.3),inset 0 0 0 2px rgba(255,228,162,.035);
}

.social-modal.is-badge-collection .badge-collection-summary::after {
  position:absolute;
  top:-54px;
  right:-42px;
  width:150px;
  height:150px;
  border:1px solid rgba(245,207,115,.12);
  border-radius:50%;
  box-shadow:0 0 0 16px rgba(245,207,115,.025),0 0 0 31px rgba(245,207,115,.018);
  content:"";
}

.social-modal.is-badge-collection .badge-collection-summary div:first-child { position:relative;z-index:1;gap:1px; }
.social-modal.is-badge-collection .badge-collection-summary small { color:#d3a84f;font-family:Georgia,serif;font-size:.58rem;letter-spacing:.14em; }
.social-modal.is-badge-collection .badge-collection-summary div:first-child>span { color:#b9a88e;font-size:.7rem;font-weight:800; }
.social-modal.is-badge-collection .badge-collection-summary strong { color:#fff3cf;font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:1.45rem; }
.social-modal.is-badge-collection .badge-collection-summary>b { position:relative;z-index:1;color:#f4c45f;font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:1.2rem;font-variant-numeric:tabular-nums;font-weight:950;letter-spacing:.01em; }
.social-modal.is-badge-collection .badge-collection-progress { position:relative;z-index:1;height:12px;padding:2px;background:#0b0a09;border:1px solid #554327;box-shadow:inset 0 2px 5px #000; }
.social-modal.is-badge-collection .badge-collection-progress span { background:linear-gradient(90deg,#9e2c17,#df9e33,#f3d477);box-shadow:0 0 12px rgba(232,184,71,.35); }

.social-modal.is-badge-collection .badge-collection-filters {
  gap:12px;
  margin:18px 0;
  padding:14px;
  background:#f5efe4;
  border:1px solid #cdbb9e;
  border-radius:16px;
  box-shadow:0 7px 18px rgba(0,0,0,.16);
}

.social-modal.is-badge-collection .badge-collection-filters label { color:#655747;font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:.72rem;letter-spacing:.03em; }
.social-modal.is-badge-collection .badge-collection-filters select { color:#332d27;background:#fffdf8;border-color:#cfc2ae;border-radius:9px;box-shadow:inset 0 1px 3px rgba(54,40,26,.06); }
.social-modal.is-badge-collection .badge-collection-filters select:focus { border-color:#a87a32;outline:3px solid rgba(187,137,55,.17); }

.social-modal.is-badge-collection .badge-collection-grid { gap:13px; }
.social-modal.is-badge-collection .badge-collection-item {
  --collection-accent:#987044;
  --collection-glow:rgba(152,112,68,.18);
  min-height:190px;
  padding:16px 9px 13px;
  color:#f7eac8;
  background:
    radial-gradient(circle at 50% 25%,var(--collection-glow),transparent 38%),
    linear-gradient(155deg,#2a2520,#151311 75%);
  border-color:var(--collection-accent);
  border-radius:15px;
  box-shadow:0 9px 22px rgba(0,0,0,.3),inset 0 0 0 2px rgba(255,255,255,.025);
}

.social-modal.is-badge-collection .badge-collection-item:hover:not(:disabled) { transform:translateY(-4px);border-color:var(--collection-accent);box-shadow:0 15px 30px rgba(0,0,0,.43),0 0 18px var(--collection-glow); }
.social-modal.is-badge-collection .badge-collection-item.rarity-bronze { --collection-accent:#c6753e;--collection-glow:rgba(199,100,43,.22); }
.social-modal.is-badge-collection .badge-collection-item.rarity-silver { --collection-accent:#b8c5d7;--collection-glow:rgba(177,204,239,.2); }
.social-modal.is-badge-collection .badge-collection-item.rarity-gold { --collection-accent:#e8bd3b;--collection-glow:rgba(236,187,45,.29); }
.social-modal.is-badge-collection .badge-collection-item.rarity-black-gold { --collection-accent:#d8b23a;--collection-glow:rgba(216,178,58,.34); }
.social-modal.is-badge-collection .badge-collection-item.rarity-jewel { --collection-accent:var(--jewel-star-color);--collection-glow:rgba(95,184,213,.29); }

/* 宝石の既存色は維持し、木から黒金までの星色を素材に合わせて統一する。 */
:is(
  .gacha-result.rarity-wood,
  .showcase-badge-slot.rarity-wood,
  .social-modal.is-badge-collection .badge-collection-item.rarity-wood,
  .social-modal.is-badge-detail[data-badge-rarity="wood"],
  .public-badge-preview[data-rarity="wood"]
) { --badge-star-color:#c38c5b;--badge-star-glow:rgba(195,140,91,.34); }

:is(
  .gacha-result.rarity-bronze,
  .showcase-badge-slot.rarity-bronze,
  .social-modal.is-badge-collection .badge-collection-item.rarity-bronze,
  .social-modal.is-badge-detail[data-badge-rarity="bronze"],
  .public-badge-preview[data-rarity="bronze"]
) { --badge-star-color:#e28a50;--badge-star-glow:rgba(226,138,80,.4); }

:is(
  .gacha-result.rarity-silver,
  .showcase-badge-slot.rarity-silver,
  .social-modal.is-badge-collection .badge-collection-item.rarity-silver,
  .social-modal.is-badge-detail[data-badge-rarity="silver"],
  .public-badge-preview[data-rarity="silver"]
) { --badge-star-color:#dce8f5;--badge-star-glow:rgba(183,215,247,.45); }

:is(
  .gacha-result.rarity-gold,
  .showcase-badge-slot.rarity-gold,
  .social-modal.is-badge-collection .badge-collection-item.rarity-gold,
  .social-modal.is-badge-detail[data-badge-rarity="gold"],
  .public-badge-preview[data-rarity="gold"]
) { --badge-star-color:#ffd45f;--badge-star-glow:rgba(255,196,43,.52); }

:is(
  .gacha-result.rarity-black-gold,
  .showcase-badge-slot.rarity-black-gold,
  .social-modal.is-badge-collection .badge-collection-item.rarity-black-gold,
  .social-modal.is-badge-detail[data-badge-rarity="black_gold"],
  .public-badge-preview[data-rarity="black_gold"]
) { --badge-star-color:#e6b936;--badge-star-glow:rgba(230,185,54,.48); }

.gacha-result:not(.rarity-jewel) .gacha-result-rarity span,
.showcase-badge-slot:not(.rarity-jewel):not(.is-empty) small,
.social-modal.is-badge-collection .badge-collection-item.is-owned:not(.rarity-jewel) small,
.social-modal.is-badge-detail:not([data-badge-rarity="jewel"]) .badge-detail-stars,
.public-badge-preview:not([data-rarity="jewel"]) .public-badge-preview-stars {
  color:var(--badge-star-color);
  text-shadow:0 0 9px var(--badge-star-glow);
}

.social-modal.is-badge-collection .badge-collection-image { width:104px;height:104px;background:#0b0908;border:2px solid var(--collection-accent);box-shadow:0 10px 24px rgba(0,0,0,.55),0 0 15px var(--collection-glow); }
.social-modal.is-badge-collection .badge-collection-item.is-owned .badge-collection-image {
  position:relative;
  isolation:isolate;
  border-color:transparent;
  background:radial-gradient(circle at 50% 44%,rgba(255,255,255,.08),#090807 72%);
  box-shadow:0 11px 26px rgba(0,0,0,.58),0 0 18px var(--collection-glow);
}
.social-modal.is-badge-collection .badge-collection-item.is-owned .badge-collection-image img {
  position:relative;
  z-index:1;
  width:82%;
  height:82%;
  margin:9%;
  object-fit:contain;
}
.social-modal.is-badge-collection .badge-collection-item.is-owned .badge-collection-image::before {
  position:absolute;
  z-index:2;
  inset:0;
  border-radius:50%;
  background-position:center;
  background-size:100% 100%;
  background-repeat:no-repeat;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.72)) drop-shadow(0 0 5px var(--collection-glow));
  content:"";
  pointer-events:none;
}
.social-modal.is-badge-collection .badge-collection-item.is-owned.rarity-wood .badge-collection-image::before { background-image:url("assets/images/badges/wood-ornate-frame.png"); }
.social-modal.is-badge-collection .badge-collection-item.is-owned.rarity-bronze .badge-collection-image::before { background-image:url("assets/images/badges/bronze-ornate-frame.png"); }
.social-modal.is-badge-collection .badge-collection-item.is-owned.rarity-silver .badge-collection-image::before { background-image:url("assets/images/badges/silver-ornate-frame.png"); }
.social-modal.is-badge-collection .badge-collection-item.is-owned.rarity-gold .badge-collection-image::before { background-image:url("assets/images/badges/gold-ornate-frame.png"); }
.social-modal.is-badge-collection .badge-collection-item.is-owned.rarity-black-gold .badge-collection-image::before { background-image:url("assets/images/badges/black-gold-ornate-frame.png"); }
.social-modal.is-badge-collection .badge-collection-item.is-owned.rarity-jewel .badge-collection-image::before {
  background-image:url("assets/images/badges/jewel-ornate-frame.png");
  -webkit-mask:radial-gradient(circle closest-side,transparent 0 62%,#000 62.6% 98.2%,transparent 98.8%);
  mask:radial-gradient(circle closest-side,transparent 0 62%,#000 62.6% 98.2%,transparent 98.8%);
}
.social-modal.is-badge-collection .badge-collection-item strong { color:#fff0c5;font-family:"Yu Mincho","Hiragino Mincho ProN",serif;letter-spacing:.03em; }
.social-modal.is-badge-collection .badge-collection-item small { color:var(--collection-accent); }
.social-modal.is-badge-collection .badge-collection-item em { color:#b8aa91; }
.social-modal.is-badge-collection .badge-new-mark { color:#fff4d3;background:linear-gradient(145deg,#c43b1f,#862012);border:1px solid #e27e4d; }

.social-modal.is-badge-collection .badge-collection-item.is-locked {
  --collection-accent:#5d5952;
  --collection-glow:rgba(127,118,103,.08);
  color:#a8a39a;
  background:linear-gradient(155deg,#2a2825,#1c1b19);
  border-color:#47433e;
  filter:none;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.018);
}

.social-modal.is-badge-collection .badge-collection-item.is-locked .badge-collection-image { opacity:1;background:radial-gradient(circle,#3b3935,#171615 72%);border-color:#5d5952;box-shadow:inset 0 0 0 1px #242321,0 8px 18px rgba(0,0,0,.32); }
.social-modal.is-badge-collection .badge-collection-item.is-locked .badge-collection-image i { color:#817c73;font-family:"Yu Mincho","Hiragino Mincho ProN",serif; }
.social-modal.is-badge-collection .badge-collection-item.is-locked strong { color:#aaa59c; }
.social-modal.is-badge-collection .badge-collection-item.is-locked small,.social-modal.is-badge-collection .badge-collection-item.is-locked em { color:#77736d; }

@media (max-width:760px) {
  .social-modal.is-badge-collection { width:min(100%,calc(100vw - 20px));max-height:calc(100dvh - 20px);border-radius:22px; }
  .social-modal.is-badge-collection .social-modal-header { min-height:76px; }
  .social-modal.is-badge-collection .social-modal-header h2 { font-size:1.3rem; }
  .social-modal.is-badge-collection .social-modal-body { padding:18px 14px 26px; }
  .social-modal.is-badge-collection .badge-collection-summary { padding:16px 14px; }
  .social-modal.is-badge-collection .badge-collection-filters { padding:11px; }
  .social-modal.is-badge-collection .badge-collection-item { min-height:166px; }
  .social-modal.is-badge-collection .badge-collection-image { width:82px;height:82px; }
}

.social-modal.is-badge-detail {
  position: relative;
  width: min(560px, calc(100vw - 32px));
  height: min(720px, calc(100dvh - 32px));
  max-height: min(720px, calc(100dvh - 24px));
  color: #fff4cf;
  background: radial-gradient(circle at 50% 38%, rgba(185, 132, 38, 0.2), transparent 42%), #121212;
  border: 1px solid #9f8136;
  box-shadow: 0 28px 85px rgba(0, 0, 0, 0.5);
}

.social-modal.is-badge-detail .social-modal-header {
  position: absolute;
  z-index: 3;
  top: 12px;
  right: 12px;
  display: block;
  min-height: 0;
  padding: 0;
  background: transparent;
  border: 0;
}

.social-modal.is-badge-detail .social-modal-header h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.social-modal.is-badge-detail .social-modal-header > span {
  display: none;
}

.social-modal.is-badge-detail .modal-close-button {
  pointer-events: auto;
  color: #f8e9b7;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(248, 233, 183, 0.22);
}

.social-modal.is-badge-detail .modal-close-button:hover {
  background: rgba(255, 255, 255, 0.13);
}

.social-modal.is-badge-detail .social-modal-body {
  display: grid;
  align-items: start;
  min-height: 0;
  padding: 24px 24px max(24px, env(safe-area-inset-bottom));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
  background: transparent;
}

.social-modal.is-badge-detail .badge-collection-detail {
  align-content: center;
  padding: 0 8px;
}

.social-modal.is-badge-detail .badge-detail-kicker {
  margin: 0 0 9px;
  color: #efb84c;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.16em;
}

.social-modal.is-badge-detail .badge-detail-art {
  width: min(56vw, 24dvh, 210px);
  height: min(56vw, 24dvh, 210px);
  margin: 0 auto 8px;
  border: 3px solid #a88b43;
  background: #090909;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.62), 0 0 34px rgba(212, 164, 61, 0.17);
}

.social-modal.is-badge-detail .badge-detail-stars {
  margin: 0;
  color: #f4d06f;
  font-size: 22px;
  font-weight: 950;
}

.social-modal.is-badge-detail[data-badge-rarity="jewel"] .badge-detail-stars {
  color: var(--jewel-star-color);
  -webkit-text-fill-color: var(--jewel-star-color);
  text-shadow: 0 0 12px var(--jewel-star-glow);
}

.social-modal.is-badge-detail .badge-collection-detail h3 {
  margin: 2px 0;
  color: #fff1bd;
  font-size: 1.55rem;
}

.social-modal.is-badge-detail .badge-collection-detail > strong {
  color: #efc96e;
}

.social-modal.is-badge-detail .badge-collection-detail > p:not(.badge-detail-stars) {
  margin: 5px 0 0;
  color: #eee5cc;
}

.social-modal.is-badge-detail .badge-collection-detail > small {
  color: #bdb6a5;
}

.social-modal.is-badge-detail .badge-detail-actions button {
  min-height: 40px;
  color: #fff0c5;
  background: #242321;
  border-color: #5b5547;
}

.social-modal.is-badge-detail .badge-detail-actions button:hover:not(:disabled) {
  background: #302d27;
  border-color: #9f8136;
}

.social-modal.is-badge-detail .badge-detail-actions button.is-primary {
  color: #17120a;
  background: linear-gradient(135deg, #f8d370, #dca431);
  border-color: #f3cf69;
  box-shadow: 0 9px 22px rgba(220, 164, 49, 0.2);
}

.social-modal.is-badge-detail .badge-detail-actions button:disabled {
  color: #d8bf82;
  background: #2b271f;
  border-color: #75633b;
  opacity: 1;
}

.social-modal.is-badge-detail .badge-detail-actions {
  gap: 6px;
  margin-top: 12px;
}

@media (max-height: 620px) {
  .social-modal.is-badge-detail .social-modal-body {
    padding-top: 16px;
    padding-bottom: 14px;
  }

  .social-modal.is-badge-detail .badge-detail-kicker {
    margin-bottom: 5px;
  }

  .social-modal.is-badge-detail .badge-detail-art {
    width: min(52vw, 25vh, 190px);
    height: min(52vw, 25vh, 190px);
  }

  .social-modal.is-badge-detail .badge-detail-actions {
    margin-top: 8px;
  }
}

@media (max-width: 760px) {
  .social-modal.is-badge-detail {
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border-width: 0;
    border-radius: 0;
  }

  .social-modal.is-badge-detail .social-modal-header {
    top: max(10px, env(safe-area-inset-top));
    right: 10px;
  }

  .social-modal.is-badge-detail .social-modal-body {
    padding: max(18px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom));
    scrollbar-gutter: auto;
  }

  .social-modal.is-badge-detail .badge-collection-detail {
    width: 100%;
    padding: 0 4px;
  }

  .social-modal.is-badge-detail .badge-detail-art {
    width: min(60vw, 22dvh, 190px);
    height: min(60vw, 22dvh, 190px);
  }
}

@media (max-width: 760px) and (max-height: 620px) {
  .social-modal.is-badge-detail .badge-detail-art {
    width: min(46vw, 20dvh, 150px);
    height: min(46vw, 20dvh, 150px);
  }
}

.social-list {
  display: grid;
}

.social-user-row,
.social-event-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid #eef1f5;
}

.social-user-row:first-child,
.social-event-row:first-child {
  border-top: 0;
}

.social-user-row img,
.social-event-row img {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 50%;
}

.social-event-row img {
  border-radius: 12px;
}

.social-user-row strong,
.social-event-row strong {
  display: block;
  color: #1c2434;
  font-size: 15px;
}

.social-user-row span,
.social-event-row span,
.social-event-row small {
  color: #8a93a3;
  font-size: 13px;
  font-weight: 800;
}

button.social-user-row {
  width: 100%;
  color: inherit;
  background: transparent;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

button.social-user-row:hover {
  background: #fff8f1;
}

.public-profile-loading {
  padding: 48px 20px;
  color: #7e8797;
  text-align: center;
  font-weight: 900;
}

.public-profile-card {
  display: grid;
  gap: 18px;
}

.public-profile-hero {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 17px;
  padding: 20px;
  overflow: visible;
  background: radial-gradient(circle at 92% 10%, rgba(255, 188, 79, 0.24), transparent 36%), linear-gradient(145deg, #fff9f0, #fff);
  border: 1px solid #ffdab9;
  border-radius: 22px;
}

.public-profile-hero > img {
  width: 82px;
  height: 82px;
  object-fit: cover;
  background: #f5f7fa;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 9px 24px rgba(91, 46, 15, 0.17);
}

.public-profile-kicker {
  color: #d84a05;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.12em;
}

.public-profile-hero h3 {
  margin: 3px 0 9px;
  color: #202735;
  font-size: 24px;
  overflow-wrap: anywhere;
}

.public-profile-name-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.public-profile-official-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 8px;
  color: #0758c7;
  background: #eaf3ff;
  border: 1px solid #bfd8ff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.public-profile-identity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.public-profile-identity > strong,
.public-profile-identity > span {
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
}

.public-profile-identity > strong {
  color: #fff;
  background: #ff4b00;
}

.public-profile-identity > span {
  color: #9d3d05;
  background: #fff0c8;
  border: 1px solid #ffc361;
}

.public-profile-identity > span.is-empty {
  color: #7f8998;
  background: #f1f3f6;
  border-color: #e1e5eb;
}

.public-profile-follow {
  position: relative;
  z-index: 3;
  display:flex;
  align-items:center;
  gap:8px;
  align-self: center;
}

.public-profile-follow .follow-button {
  min-width: 100px;
  min-height: 42px;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 13px;
  white-space: nowrap;
}

@media (max-width: 520px) {
  .public-profile-hero {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }

  .public-profile-follow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 46px;
    grid-column: 1 / -1;
    justify-self: stretch;
    width: 100%;
    margin-top: 2px;
  }

  .public-profile-follow .follow-button {
    width: 100%;
  }

  .public-profile-more-actions {
    justify-self: end;
  }

  .public-profile-more-actions .event-more-button {
    width: 46px;
    height: 46px;
  }
}

.public-profile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.public-profile-stats > div {
  display: grid;
  place-items: center;
  gap: 3px;
  min-width: 0;
  padding: 14px 6px;
  background: #fff;
  border: 1px solid #e5eaf1;
  border-radius: 18px;
  box-shadow: 0 5px 14px rgba(28, 36, 52, 0.05);
}

.public-profile-stats span {
  font-size: 21px;
}

.public-profile-stats strong {
  color: #18202f;
  font-size: 23px;
}

.public-profile-stats small {
  color: #8b95a5;
  font-size: 10px;
  font-weight: 900;
  text-align: center;
}

.public-profile-showcase > div:first-child {
  margin: 0 0 10px 3px;
}

.public-profile-showcase > div:first-child span {
  color: #c5480a;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.12em;
}

.public-profile-showcase h3 {
  margin: 2px 0 0;
  color: #252d3b;
  font-size: 17px;
}

.public-profile-showcase-slot {
  cursor: pointer;
}

.public-profile-showcase-slot:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-3px) scale(1.02);
}

.public-profile-showcase-slot:focus-visible {
  outline: 3px solid #f3c95d;
  outline-offset: 3px;
}

.public-profile-showcase-slot.is-empty {
  cursor: default;
}

.public-profile-showcase-slot.is-empty:hover {
  background: transparent;
  transform: none;
}

.public-badge-preview {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: none;
  place-items: center;
  padding: 24px;
  background: rgba(8, 9, 12, 0.82);
  backdrop-filter: blur(10px);
}

.public-badge-preview.active {
  display: grid;
  animation: publicBadgePreviewFadeIn 0.2s ease-out both;
}

.public-badge-preview-card {
  position: relative;
  display: grid;
  width: min(420px, 100%);
  place-items: center;
  padding: 38px 30px 34px;
  overflow: hidden;
  color: #fff4cf;
  text-align: center;
  background: radial-gradient(circle at 50% 38%, rgba(191, 137, 43, 0.24), transparent 43%), #151515;
  border: 1px solid #9f8136;
  border-radius: 28px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48);
  animation: publicBadgePreviewCardIn 0.24s cubic-bezier(.2, .8, .25, 1) both;
}

.public-badge-preview-close {
  position: absolute;
  top: 13px;
  right: 13px;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  padding: 0;
  color: #f6e7b8;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(246, 231, 184, 0.24);
  border-radius: 50%;
  font: inherit;
  font-size: 26px;
  cursor: pointer;
}

.public-badge-preview-kicker {
  color: #efb84c;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.16em;
}

.public-badge-preview-art {
  display: grid;
  width: min(64vw, 260px);
  height: min(64vw, 260px);
  margin: 20px 0 14px;
  place-items: center;
  overflow: hidden;
  background: #0d0d0d;
  border: 3px solid #a88b43;
  border-radius: 50%;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.58), 0 0 36px rgba(212, 164, 61, 0.18);
}

.public-badge-preview-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* バッジのレアリティに応じて、結果表示と鑑賞画面の光沢量を段階的に変えます。 */
.gacha-result-image-wrap,
.social-modal.is-badge-detail .badge-detail-art,
.public-badge-preview-art {
  --rarity-shine-opacity: 0.1;
  --rarity-ring-opacity: 0.06;
  --rarity-shine-speed: 6.4s;
  --rarity-ring-speed: 10.8s;
  --rarity-halo-size: 5px;
  --rarity-halo: rgba(151, 104, 61, 0.16);
  --rarity-shine-color: rgba(255, 236, 202, 0.58);
  --rarity-disc-bg: radial-gradient(circle at 38% 28%, #4c3422, #17100b 66%, #080605);
  --rarity-disc-border: #8a6749;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--rarity-disc-bg);
  border-color: var(--rarity-disc-border);
  filter: drop-shadow(0 0 var(--rarity-halo-size) var(--rarity-halo));
}

.gacha-result.rarity-wood .gacha-result-image-wrap,
.social-modal.is-badge-detail[data-badge-rarity="wood"] .badge-detail-art,
.public-badge-preview[data-rarity="wood"] .public-badge-preview-art {
  --rarity-shine-opacity: 0.08;
  --rarity-ring-opacity: 0.04;
  --rarity-shine-speed: 7s;
  --rarity-ring-speed: 12s;
  --rarity-halo-size: 3px;
  --rarity-halo: rgba(138, 90, 50, 0.14);
  --rarity-shine-color: rgba(255, 229, 196, 0.5);
  --rarity-disc-bg: radial-gradient(circle at 38% 28%, #513822, #1d140d 65%, #090604);
  --rarity-disc-border: #8a5a32;
}

.gacha-result.rarity-bronze .gacha-result-image-wrap,
.social-modal.is-badge-detail[data-badge-rarity="bronze"] .badge-detail-art,
.public-badge-preview[data-rarity="bronze"] .public-badge-preview-art {
  --rarity-shine-opacity: 0.17;
  --rarity-ring-opacity: 0.09;
  --rarity-shine-speed: 5.6s;
  --rarity-ring-speed: 9.5s;
  --rarity-halo-size: 6px;
  --rarity-halo: rgba(205, 104, 43, 0.25);
  --rarity-shine-color: rgba(255, 199, 143, 0.68);
  --rarity-disc-bg: radial-gradient(circle at 36% 26%, #6e351c, #24130c 62%, #090504);
  --rarity-disc-border: #c7743c;
}

.gacha-result.rarity-silver .gacha-result-image-wrap,
.social-modal.is-badge-detail[data-badge-rarity="silver"] .badge-detail-art,
.public-badge-preview[data-rarity="silver"] .public-badge-preview-art {
  --rarity-shine-opacity: 0.3;
  --rarity-ring-opacity: 0.16;
  --rarity-shine-speed: 4.4s;
  --rarity-ring-speed: 7.5s;
  --rarity-halo-size: 10px;
  --rarity-halo: rgba(184, 214, 255, 0.34);
  --rarity-shine-color: rgba(232, 244, 255, 0.82);
  --rarity-disc-bg: radial-gradient(circle at 36% 25%, #526174, #202a36 58%, #080c12);
  --rarity-disc-border: #bac8dc;
}

.gacha-result.rarity-gold .gacha-result-image-wrap,
.social-modal.is-badge-detail[data-badge-rarity="gold"] .badge-detail-art,
.public-badge-preview[data-rarity="gold"] .public-badge-preview-art {
  --rarity-shine-opacity: 0.48;
  --rarity-ring-opacity: 0.25;
  --rarity-shine-speed: 3.3s;
  --rarity-ring-speed: 5.6s;
  --rarity-halo-size: 15px;
  --rarity-halo: rgba(255, 193, 24, 0.48);
  --rarity-shine-color: rgba(255, 236, 147, 0.92);
  --rarity-disc-bg: radial-gradient(circle at 36% 24%, #755313, #302000 58%, #090600);
  --rarity-disc-border: #efc33c;
}

.gacha-result.rarity-black-gold .gacha-result-image-wrap,
.social-modal.is-badge-detail[data-badge-rarity="black_gold"] .badge-detail-art,
.public-badge-preview[data-rarity="black_gold"] .public-badge-preview-art {
  --rarity-shine-opacity: 0.62;
  --rarity-ring-opacity: 0.34;
  --rarity-shine-speed: 2.7s;
  --rarity-ring-speed: 4.6s;
  --rarity-halo-size: 20px;
  --rarity-halo: rgba(229, 190, 54, 0.58);
  --rarity-shine-color: rgba(255, 224, 106, 0.96);
  --rarity-disc-bg: radial-gradient(circle at 38% 25%, #4b3a0c, #151005 52%, #020202 78%);
  --rarity-disc-border: #e1b832;
}

.gacha-result.rarity-jewel .gacha-result-image-wrap,
.social-modal.is-badge-detail[data-badge-rarity="jewel"] .badge-detail-art,
.public-badge-preview[data-rarity="jewel"] .public-badge-preview-art {
  --rarity-shine-opacity: 0.58;
  --rarity-ring-opacity: 0.26;
  --rarity-shine-speed: 2.8s;
  --rarity-ring-speed: 5.2s;
  --rarity-halo-size: 18px;
  --rarity-halo: rgba(184, 201, 229, 0.46);
  --rarity-shine-color: rgba(244, 239, 226, 0.92);
  --rarity-disc-bg:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='m' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%236f665c'/%3E%3Cstop offset='.28' stop-color='%231a2028'/%3E%3Cstop offset='.55' stop-color='%23413b37'/%3E%3Cstop offset='.78' stop-color='%23101720'/%3E%3Cstop offset='1' stop-color='%23857767'/%3E%3C/linearGradient%3E%3CradialGradient id='b'%3E%3Cstop offset='0' stop-color='%23e6fbff'/%3E%3Cstop offset='.3' stop-color='%232edfff'/%3E%3Cstop offset='.7' stop-color='%23006da4'/%3E%3Cstop offset='1' stop-color='%23001836'/%3E%3C/radialGradient%3E%3Cfilter id='mglow' x='-40%25' y='-40%25' width='180%25' height='180%25'%3E%3CfeDropShadow dx='0' dy='1' stdDeviation='1.2' flood-color='%23000000' flood-opacity='.9'/%3E%3C/filter%3E%3Cfilter id='bglow' x='-200%25' y='-200%25' width='500%25' height='500%25'%3E%3CfeGaussianBlur stdDeviation='1.2' result='g'/%3E%3CfeMerge%3E%3CfeMergeNode in='g'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3Cg filter='url(%23mglow)'%3E%3Ccircle cx='50' cy='50' r='43' fill='none' stroke='url(%23m)' stroke-width='14'/%3E%3Ccircle cx='50' cy='50' r='48' fill='none' stroke='%238f7d68' stroke-width='1.2'/%3E%3Ccircle cx='50' cy='50' r='36' fill='none' stroke='%23554c43' stroke-width='1.3'/%3E%3Cg id='s' fill='none' stroke='%23aa9274' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M31 13c4-7 13-8 16-3 2 4-2 8-6 6-3-1-2-5 1-5 2 0 2 2 1 3M31 13c4 0 7 2 8 5M29 16c-2-4-6-5-9-2 4 1 6 3 6 7M47 9c2 2 3 5 3 8'/%3E%3Cpath d='M23 18c3 0 6 2 7 5-4 0-7 2-9 5 0-5-2-7-5-9 3-1 5-1 7-1z'/%3E%3C/g%3E%3Cuse href='%23s' transform='rotate(45 50 50)'/%3E%3Cuse href='%23s' transform='rotate(90 50 50)'/%3E%3Cuse href='%23s' transform='rotate(135 50 50)'/%3E%3Cuse href='%23s' transform='rotate(180 50 50)'/%3E%3Cuse href='%23s' transform='rotate(225 50 50)'/%3E%3Cuse href='%23s' transform='rotate(270 50 50)'/%3E%3Cuse href='%23s' transform='rotate(315 50 50)'/%3E%3C/g%3E%3Cg fill='url(%23b)' stroke='%23c7f5ff' stroke-width='.55' filter='url(%23bglow)'%3E%3Ccircle cx='50' cy='5.5' r='2.1'/%3E%3Ccircle cx='81.5' cy='18.5' r='1.7'/%3E%3Ccircle cx='94.5' cy='50' r='2.1'/%3E%3Ccircle cx='81.5' cy='81.5' r='1.7'/%3E%3Ccircle cx='50' cy='94.5' r='2.1'/%3E%3Ccircle cx='18.5' cy='81.5' r='1.7'/%3E%3Ccircle cx='5.5' cy='50' r='2.1'/%3E%3Ccircle cx='18.5' cy='18.5' r='1.7'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat,
    radial-gradient(circle at 36% 22%, #283b48, #141a22 45%, #19151d 70%, #050608 90%);
  --rarity-disc-border: #887764;
  --rarity-disc-bg:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='43' fill='none' stroke='%23111720' stroke-width='15'/%3E%3Ccircle cx='50' cy='50' r='43' fill='none' stroke='%236f6254' stroke-width='11' opacity='.7'/%3E%3Ccircle cx='50' cy='50' r='48' fill='none' stroke='%23917e67' stroke-width='1.2'/%3E%3Ccircle cx='50' cy='50' r='36' fill='none' stroke='%234b443d' stroke-width='1.4'/%3E%3Cg id='s' fill='none' stroke='%23b0997c' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M31 13c4-7 13-8 16-3 2 4-2 8-6 6-3-1-2-5 1-5 2 0 2 2 1 3M31 13c4 0 7 2 8 5M29 16c-2-4-6-5-9-2 4 1 6 3 6 7M47 9c2 2 3 5 3 8'/%3E%3Cpath d='M23 18c3 0 6 2 7 5-4 0-7 2-9 5 0-5-2-7-5-9 3-1 5-1 7-1z'/%3E%3C/g%3E%3Cuse href='%23s' transform='rotate(45 50 50)'/%3E%3Cuse href='%23s' transform='rotate(90 50 50)'/%3E%3Cuse href='%23s' transform='rotate(135 50 50)'/%3E%3Cuse href='%23s' transform='rotate(180 50 50)'/%3E%3Cuse href='%23s' transform='rotate(225 50 50)'/%3E%3Cuse href='%23s' transform='rotate(270 50 50)'/%3E%3Cuse href='%23s' transform='rotate(315 50 50)'/%3E%3Cg fill='%23149fd1' stroke='%23bcefff' stroke-width='.55'%3E%3Ccircle cx='50' cy='5.5' r='2.1'/%3E%3Ccircle cx='81.5' cy='18.5' r='1.65'/%3E%3Ccircle cx='94.5' cy='50' r='2.1'/%3E%3Ccircle cx='81.5' cy='81.5' r='1.65'/%3E%3Ccircle cx='50' cy='94.5' r='2.1'/%3E%3Ccircle cx='18.5' cy='81.5' r='1.65'/%3E%3Ccircle cx='5.5' cy='50' r='2.1'/%3E%3Ccircle cx='18.5' cy='18.5' r='1.65'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat,
    radial-gradient(circle at 36% 22%, #283b48, #141a22 45%, #19151d 70%, #050608 90%);
  --rarity-disc-bg:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='m' x1='10' y1='8' x2='88' y2='92' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23d3bea0'/%3E%3Cstop offset='.18' stop-color='%23534a42'/%3E%3Cstop offset='.42' stop-color='%23a38d70'/%3E%3Cstop offset='.63' stop-color='%23211f20'/%3E%3Cstop offset='.82' stop-color='%237a6956'/%3E%3Cstop offset='1' stop-color='%23e0c9a8'/%3E%3C/linearGradient%3E%3CradialGradient id='b'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='.18' stop-color='%238ceaff'/%3E%3Cstop offset='.48' stop-color='%23068bc5'/%3E%3Cstop offset='.8' stop-color='%23033e70'/%3E%3Cstop offset='1' stop-color='%23000918'/%3E%3C/radialGradient%3E%3Cfilter id='sh' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeDropShadow dx='0' dy='1.2' stdDeviation='1.1' flood-color='%23000000' flood-opacity='.95'/%3E%3C/filter%3E%3Cg id='o' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M27 17c4-8 15-11 20-5 4 5-1 11-6 9-4-1-4-6 0-8 3-1 5 2 3 4M27 17c5-1 10 1 13 5M25 20c-3-5-9-6-13-2 5 1 8 4 8 9M39 10c-1 4 1 8 5 11'/%3E%3Cpath d='M17 23c5-1 9 2 11 6-5-1-9 2-12 6 1-6-2-10-7-12 3-1 6-1 8 0zM31 13c-1 3 0 6 3 8'/%3E%3C/g%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='43' fill='none' stroke='%2307090d' stroke-width='17'/%3E%3Ccircle cx='50' cy='50' r='43' fill='none' stroke='url(%23m)' stroke-width='13' filter='url(%23sh)'/%3E%3Ccircle cx='50' cy='50' r='48' fill='none' stroke='%23c6ad8b' stroke-width='1.1' opacity='.86'/%3E%3Ccircle cx='50' cy='50' r='36' fill='none' stroke='%23705f4e' stroke-width='1.4'/%3E%3Cg stroke='%23070709' stroke-width='3.3' opacity='.9'%3E%3Cuse href='%23o'/%3E%3Cuse href='%23o' transform='rotate(90 50 50)'/%3E%3Cuse href='%23o' transform='rotate(180 50 50)'/%3E%3Cuse href='%23o' transform='rotate(270 50 50)'/%3E%3C/g%3E%3Cg stroke='url(%23m)' stroke-width='1.35'%3E%3Cuse href='%23o'/%3E%3Cuse href='%23o' transform='rotate(90 50 50)'/%3E%3Cuse href='%23o' transform='rotate(180 50 50)'/%3E%3Cuse href='%23o' transform='rotate(270 50 50)'/%3E%3C/g%3E%3Cg fill='url(%23b)' stroke='%23c9edf2' stroke-width='.5'%3E%3Ccircle cx='50' cy='5.5' r='2.25'/%3E%3Ccircle cx='94.5' cy='50' r='2.25'/%3E%3Ccircle cx='50' cy='94.5' r='2.25'/%3E%3Ccircle cx='5.5' cy='50' r='2.25'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat,
    radial-gradient(circle at 34% 20%, #202c35, #0d1117 48%, #161219 72%, #030405 92%);
}

.gacha-result.rarity-jewel .gacha-result-image-wrap,
.social-modal.is-badge-detail[data-badge-rarity="jewel"] .badge-detail-art,
.public-badge-preview[data-rarity="jewel"] .public-badge-preview-art {
  box-shadow:
    inset 0 0 0 2px rgba(157, 137, 112, 0.52),
    inset 0 0 18px rgba(57, 105, 126, 0.36),
    inset 0 0 36px rgba(22, 18, 27, 0.72),
    0 0 22px rgba(75, 132, 153, 0.3);
}

.gacha-result-image-wrap img,
.social-modal.is-badge-detail .badge-detail-art img,
.public-badge-preview-art img {
  position: relative;
  z-index: 1;
}

.gacha-result-image-wrap::before,
.social-modal.is-badge-detail .badge-detail-art::before,
.public-badge-preview-art::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 3%;
  pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 28%, var(--rarity-shine-color) 36%, transparent 44% 73%, var(--rarity-shine-color) 81%, transparent 89%);
  border-radius: 50%;
  opacity: var(--rarity-ring-opacity);
  mix-blend-mode: screen;
  animation: badgeRarityRing var(--rarity-ring-speed) linear infinite;
}

/* 木から黒金までは、素材別の彫金フレームをバッジの手前へ固定表示する。 */
.gacha-result.rarity-wood .gacha-result-image-wrap::before,
.gacha-result.rarity-bronze .gacha-result-image-wrap::before,
.gacha-result.rarity-silver .gacha-result-image-wrap::before,
.gacha-result.rarity-gold .gacha-result-image-wrap::before,
.gacha-result.rarity-black-gold .gacha-result-image-wrap::before,
.social-modal.is-badge-detail[data-badge-rarity="wood"] .badge-detail-art::before,
.social-modal.is-badge-detail[data-badge-rarity="bronze"] .badge-detail-art::before,
.social-modal.is-badge-detail[data-badge-rarity="silver"] .badge-detail-art::before,
.social-modal.is-badge-detail[data-badge-rarity="gold"] .badge-detail-art::before,
.social-modal.is-badge-detail[data-badge-rarity="black_gold"] .badge-detail-art::before,
.public-badge-preview[data-rarity="wood"] .public-badge-preview-art::before,
.public-badge-preview[data-rarity="bronze"] .public-badge-preview-art::before,
.public-badge-preview[data-rarity="silver"] .public-badge-preview-art::before,
.public-badge-preview[data-rarity="gold"] .public-badge-preview-art::before,
.public-badge-preview[data-rarity="black_gold"] .public-badge-preview-art::before {
  inset: 0;
  border-radius: 50%;
  opacity: 1;
  mix-blend-mode: normal;
  animation: none;
  filter:
    drop-shadow(0 2px 2px rgba(0, 0, 0, 0.66))
    drop-shadow(0 0 7px var(--rarity-halo));
}

.gacha-result.rarity-wood .gacha-result-image-wrap::before,
.social-modal.is-badge-detail[data-badge-rarity="wood"] .badge-detail-art::before,
.public-badge-preview[data-rarity="wood"] .public-badge-preview-art::before {
  background: url("assets/images/badges/wood-ornate-frame.png") center / 100% 100% no-repeat;
}

.gacha-result.rarity-bronze .gacha-result-image-wrap::before,
.social-modal.is-badge-detail[data-badge-rarity="bronze"] .badge-detail-art::before,
.public-badge-preview[data-rarity="bronze"] .public-badge-preview-art::before {
  background: url("assets/images/badges/bronze-ornate-frame.png") center / 100% 100% no-repeat;
}

.gacha-result.rarity-silver .gacha-result-image-wrap::before,
.social-modal.is-badge-detail[data-badge-rarity="silver"] .badge-detail-art::before,
.public-badge-preview[data-rarity="silver"] .public-badge-preview-art::before {
  background: url("assets/images/badges/silver-ornate-frame.png") center / 100% 100% no-repeat;
}

.gacha-result.rarity-gold .gacha-result-image-wrap::before,
.social-modal.is-badge-detail[data-badge-rarity="gold"] .badge-detail-art::before,
.public-badge-preview[data-rarity="gold"] .public-badge-preview-art::before {
  background: url("assets/images/badges/gold-ornate-frame.png") center / 100% 100% no-repeat;
}

.gacha-result.rarity-black-gold .gacha-result-image-wrap::before,
.social-modal.is-badge-detail[data-badge-rarity="black_gold"] .badge-detail-art::before,
.public-badge-preview[data-rarity="black_gold"] .public-badge-preview-art::before {
  background: url("assets/images/badges/black-gold-ornate-frame.png") center / 100% 100% no-repeat;
}

/* 宝石レアは、黒銀の彫金フレームをバッジの手前へ固定表示する。 */
.gacha-result.rarity-jewel .gacha-result-image-wrap::before,
.social-modal.is-badge-detail[data-badge-rarity="jewel"] .badge-detail-art::before,
.public-badge-preview[data-rarity="jewel"] .public-badge-preview-art::before {
  inset: 0;
  border-radius: 50%;
  background: url("assets/images/badges/jewel-ornate-frame.png") center / 100% 100% no-repeat;
  opacity: 1;
  mix-blend-mode: normal;
  animation: none;
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 62%, #000 62.6% 98.2%, transparent 98.8%);
  mask: radial-gradient(circle closest-side, transparent 0 62%, #000 62.6% 98.2%, transparent 98.8%);
  filter:
    drop-shadow(0 2px 2px rgba(0, 0, 0, 0.72))
    drop-shadow(0 0 8px rgba(75, 202, 255, 0.32));
}

/* 専用フレームがあるバッジを内周へ収め、名称プレートまで見える「はめ込み」にする。 */
.gacha-result.rarity-wood .gacha-result-image-wrap img,
.gacha-result.rarity-bronze .gacha-result-image-wrap img,
.gacha-result.rarity-silver .gacha-result-image-wrap img,
.gacha-result.rarity-gold .gacha-result-image-wrap img,
.gacha-result.rarity-black-gold .gacha-result-image-wrap img,
.social-modal.is-badge-detail[data-badge-rarity="wood"] .badge-detail-art img,
.social-modal.is-badge-detail[data-badge-rarity="bronze"] .badge-detail-art img,
.social-modal.is-badge-detail[data-badge-rarity="silver"] .badge-detail-art img,
.social-modal.is-badge-detail[data-badge-rarity="gold"] .badge-detail-art img,
.social-modal.is-badge-detail[data-badge-rarity="black_gold"] .badge-detail-art img,
.public-badge-preview[data-rarity="wood"] .public-badge-preview-art img,
.public-badge-preview[data-rarity="bronze"] .public-badge-preview-art img,
.public-badge-preview[data-rarity="silver"] .public-badge-preview-art img,
.public-badge-preview[data-rarity="gold"] .public-badge-preview-art img,
.public-badge-preview[data-rarity="black_gold"] .public-badge-preview-art img,
.gacha-result.rarity-jewel .gacha-result-image-wrap img,
.social-modal.is-badge-detail[data-badge-rarity="jewel"] .badge-detail-art img,
.public-badge-preview[data-rarity="jewel"] .public-badge-preview-art img {
  z-index: 1;
  width: 80%;
  height: 80%;
  margin: 10% auto;
  object-fit: contain;
}

.gacha-result-image-wrap::after,
.social-modal.is-badge-detail .badge-detail-art::after,
.public-badge-preview-art::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: -22%;
  left: -70%;
  width: 38%;
  height: 145%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, var(--rarity-shine-color) 42%, rgba(255, 255, 255, 0.98) 52%, var(--rarity-shine-color) 62%, transparent);
  filter: blur(3px);
  opacity: 0;
  transform: rotate(16deg);
  mix-blend-mode: screen;
  animation: badgeRaritySheen var(--rarity-shine-speed) ease-in-out infinite;
}

@keyframes badgeRaritySheen {
  0%, 15% { opacity: 0; transform: translateX(-30%) rotate(16deg); }
  30% { opacity: var(--rarity-shine-opacity); }
  52% { opacity: 0; transform: translateX(540%) rotate(16deg); }
  100% { opacity: 0; transform: translateX(540%) rotate(16deg); }
}

@keyframes badgeRarityRing {
  to { transform: rotate(360deg); }
}

/* ショーケースにも詳細画面と同じレアリティ別フレームを縮小表示する。 */
.showcase-badge-slot .showcase-badge-image {
  --showcase-shine: rgba(255, 236, 202, 0.58);
  --showcase-shine-opacity: 0.1;
  --showcase-shine-speed: 6.4s;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: radial-gradient(circle at 38% 28%, #4c3422, #17100b 66%, #080605);
  border-color: #8a6749;
  border-radius: 50%;
}

.showcase-badge-slot.rarity-wood .showcase-badge-image {
  --showcase-shine: rgba(255, 229, 196, 0.5);
  --showcase-shine-opacity: 0.08;
  --showcase-shine-speed: 7s;
  background: radial-gradient(circle at 38% 28%, #513822, #1d140d 65%, #090604);
  border-color: #8a5a32;
  box-shadow: 0 5px 14px rgba(138, 90, 50, 0.18);
}

.showcase-badge-slot.rarity-bronze .showcase-badge-image {
  --showcase-shine: rgba(255, 199, 143, 0.68);
  --showcase-shine-opacity: 0.17;
  --showcase-shine-speed: 5.6s;
  background: radial-gradient(circle at 36% 26%, #6e351c, #24130c 62%, #090504);
  border-color: #c7743c;
  box-shadow: 0 5px 16px rgba(205, 104, 43, 0.28);
}

.showcase-badge-slot.rarity-silver .showcase-badge-image {
  --showcase-shine: rgba(232, 244, 255, 0.82);
  --showcase-shine-opacity: 0.3;
  --showcase-shine-speed: 4.4s;
  background: radial-gradient(circle at 36% 25%, #526174, #202a36 58%, #080c12);
  border-color: #bac8dc;
  box-shadow: 0 5px 18px rgba(184, 214, 255, 0.34);
}

.showcase-badge-slot.rarity-gold .showcase-badge-image {
  --showcase-shine: rgba(255, 236, 147, 0.92);
  --showcase-shine-opacity: 0.48;
  --showcase-shine-speed: 3.3s;
  background: radial-gradient(circle at 36% 24%, #755313, #302000 58%, #090600);
  border-color: #efc33c;
  box-shadow: 0 5px 20px rgba(255, 193, 24, 0.44);
}

.showcase-badge-slot.rarity-black-gold .showcase-badge-image {
  --showcase-shine: rgba(255, 224, 106, 0.96);
  --showcase-shine-opacity: 0.62;
  --showcase-shine-speed: 2.7s;
  background: radial-gradient(circle at 38% 25%, #4b3a0c, #151005 52%, #020202 78%);
  border-color: #e1b832;
  box-shadow: 0 5px 22px rgba(229, 190, 54, 0.5);
}

.showcase-badge-slot.rarity-jewel .showcase-badge-image {
  --showcase-shine: rgba(244, 239, 226, 0.94);
  --showcase-shine-opacity: 0.58;
  --showcase-shine-speed: 2.8s;
  background: radial-gradient(circle at 34% 20%, #202c35, #0d1117 48%, #161219 72%, #030405 92%);
  border-color: #887764;
  box-shadow: 0 5px 22px rgba(75, 202, 255, 0.36);
}

.showcase-badge-slot .showcase-badge-image img {
  position: relative;
  z-index: 1;
  width: 84%;
  height: 84%;
  margin: 8%;
  object-fit: contain;
}

.showcase-badge-slot .showcase-badge-image::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 2%;
  pointer-events: none;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 28%, var(--showcase-shine) 36%, transparent 44% 73%, var(--showcase-shine) 81%, transparent 89%);
  opacity: var(--showcase-shine-opacity);
  mix-blend-mode: screen;
  animation: badgeRarityRing 8s linear infinite;
}

.showcase-badge-slot .showcase-badge-image::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: -24%;
  left: -72%;
  width: 38%;
  height: 150%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, var(--showcase-shine) 46%, rgba(255, 255, 255, 0.94) 53%, transparent 68%);
  filter: blur(1px);
  opacity: 0;
  transform: rotate(16deg);
  mix-blend-mode: screen;
  animation: badgeRaritySheen var(--showcase-shine-speed) ease-in-out infinite;
}

.showcase-badge-slot.rarity-wood .showcase-badge-image::before,
.showcase-badge-slot.rarity-bronze .showcase-badge-image::before,
.showcase-badge-slot.rarity-silver .showcase-badge-image::before,
.showcase-badge-slot.rarity-gold .showcase-badge-image::before,
.showcase-badge-slot.rarity-black-gold .showcase-badge-image::before {
  inset: 0;
  opacity: 1;
  mix-blend-mode: normal;
  animation: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.62));
}

.showcase-badge-slot.rarity-wood .showcase-badge-image::before {
  background: url("assets/images/badges/wood-ornate-frame.png") center / 100% 100% no-repeat;
}

.showcase-badge-slot.rarity-bronze .showcase-badge-image::before {
  background: url("assets/images/badges/bronze-ornate-frame.png") center / 100% 100% no-repeat;
}

.showcase-badge-slot.rarity-silver .showcase-badge-image::before {
  background: url("assets/images/badges/silver-ornate-frame.png") center / 100% 100% no-repeat;
}

.showcase-badge-slot.rarity-gold .showcase-badge-image::before {
  background: url("assets/images/badges/gold-ornate-frame.png") center / 100% 100% no-repeat;
}

.showcase-badge-slot.rarity-black-gold .showcase-badge-image::before {
  background: url("assets/images/badges/black-gold-ornate-frame.png") center / 100% 100% no-repeat;
}

.showcase-badge-slot.rarity-wood .showcase-badge-image img,
.showcase-badge-slot.rarity-bronze .showcase-badge-image img,
.showcase-badge-slot.rarity-silver .showcase-badge-image img,
.showcase-badge-slot.rarity-gold .showcase-badge-image img,
.showcase-badge-slot.rarity-black-gold .showcase-badge-image img {
  width: 80%;
  height: 80%;
  margin: 10%;
}

.showcase-badge-slot.rarity-jewel .showcase-badge-image::before {
  inset: 0;
  background: url("assets/images/badges/jewel-ornate-frame.png") center / 100% 100% no-repeat;
  opacity: 1;
  mix-blend-mode: normal;
  animation: none;
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 62%, #000 62.6% 98.2%, transparent 98.8%);
  mask: radial-gradient(circle closest-side, transparent 0 62%, #000 62.6% 98.2%, transparent 98.8%);
}

.showcase-badge-slot.rarity-jewel .showcase-badge-image img {
  width: 80%;
  height: 80%;
  margin: 10%;
}

@media (prefers-reduced-motion: reduce) {
  .gacha-result-image-wrap::before,
  .gacha-result-image-wrap::after,
  .social-modal.is-badge-detail .badge-detail-art::before,
  .social-modal.is-badge-detail .badge-detail-art::after,
  .public-badge-preview-art::before,
  .public-badge-preview-art::after {
    animation: none;
  }

  .showcase-badge-slot .showcase-badge-image::before,
  .showcase-badge-slot .showcase-badge-image::after {
    animation: none;
  }

  .gacha-result-image-wrap::after,
  .social-modal.is-badge-detail .badge-detail-art::after,
  .public-badge-preview-art::after {
    left: 22%;
    opacity: var(--rarity-ring-opacity);
  }
}

.public-badge-preview-stars {
  margin: 0;
  color: #f4d06f;
  font-size: 24px;
  font-weight: 950;
  letter-spacing: 0.1em;
}

#publicBadgePreviewModal[data-rarity="wood"] #publicBadgePreviewStars { color:#c38c5b; }
#publicBadgePreviewModal[data-rarity="bronze"] #publicBadgePreviewStars { color:#e28a50; }
#publicBadgePreviewModal[data-rarity="silver"] #publicBadgePreviewStars { color:#dce8f5; }
#publicBadgePreviewModal[data-rarity="gold"] #publicBadgePreviewStars { color:#ffd45f; }
#publicBadgePreviewModal[data-rarity="black_gold"] #publicBadgePreviewStars { color:#e6b936; }
#publicBadgePreviewModal[data-rarity="jewel"] #publicBadgePreviewStars {
  color: var(--jewel-star-color) !important;
  -webkit-text-fill-color: var(--jewel-star-color) !important;
  text-shadow: 0 0 12px var(--jewel-star-glow);
}

.public-badge-preview-card h2 {
  margin: 5px 0 0;
  color: #fff1bd;
  font-size: 29px;
}

@keyframes publicBadgePreviewFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes publicBadgePreviewCardIn {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.liked-posts-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 0 10px;
}

.liked-posts-toolbar label {
  color: #697386;
  font-size: 13px;
  font-weight: 900;
}

.liked-posts-toolbar select {
  min-height: 42px;
  max-width: 220px;
  padding: 0 38px 0 13px;
  color: #1c2434;
  background: #fff;
  border: 1px solid #d8dde6;
  border-radius: 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
}

.liked-post-row {
  width: 100%;
  height: 92px;
  min-height: 92px;
  padding: 12px 4px;
  color: inherit;
  background: transparent;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.liked-post-row:hover,
.liked-post-row:focus-visible {
  background: #fff8f5;
  outline: none;
}

.liked-post-row img {
  width: 64px;
  height: 64px;
}

.liked-post-copy {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.liked-post-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.liked-post-copy .liked-post-date {
  overflow: hidden;
  color: #7e8797;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.liked-post-row .liked-post-like {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #e53935;
  font-size: 19px;
  font-weight: 900;
}

.liked-post-row .liked-post-like small {
  color: #e53935;
}

.social-empty {
  padding: 34px 12px;
  text-align: center;
  color: #7e8797;
  font-weight: 900;
}

.event-detail-header {
  grid-template-columns: 72px 1fr 72px;
}

.event-detail-body {
  display: grid;
  gap: 18px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px 24px 44px;
  scroll-padding-bottom: 44px;
}

.event-detail-image {
  width: 100%;
  max-height: 320px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 18px;
}

.event-detail-author-row {
  margin: 0;
  padding: 14px 16px;
  background: #f8f9fb;
  border: 1px solid #e8edf4;
  border-radius: 16px;
}

.event-detail-author-row .event-author-avatar {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
}

.event-detail-author-row strong {
  font-size: 15px;
}

.event-detail-author-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
}

.event-detail-author-actions .like-button {
  min-width: 92px;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 999px;
}

.event-detail-tags,
.event-detail-facts {
  gap: 10px;
}

.event-detail-tags {
  display: flex;
  flex-wrap: wrap;
}

.event-detail-facts {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) repeat(2, minmax(0, 1fr));
}

@media (min-width: 761px) {
  .event-detail-facts.has-long-schedule {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    align-items: start;
  }

  .event-detail-facts.has-long-schedule .event-detail-fact:first-child {
    grid-row: 1 / span 2;
  }

  .event-detail-facts.has-long-schedule .event-detail-schedule {
    max-height: 340px;
    padding-right: 6px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  .event-detail-facts.has-long-schedule .event-detail-schedule-heading {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f8f9fb;
  }
}

.event-detail-fact {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding: 18px;
  color: #5c6677;
  background: #f8f9fb;
  border: 1px solid #e8edf4;
  border-radius: 16px;
}

.event-detail-fact-label {
  color: #8a93a3;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.event-detail-fact strong {
  overflow-wrap: break-word;
  color: #303847;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.45;
}

.event-detail-fact strong.is-empty {
  color: #8a93a3;
}

.event-detail-fact small {
  overflow-wrap: anywhere;
  color: #7e8797;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
}

.event-detail-schedule {
  display: grid;
  min-width: 0;
  font-variant-numeric: tabular-nums;
}

.event-detail-schedule-heading,
.event-detail-schedule-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(88px, max-content);
  gap: 10px;
}

.event-detail-schedule-heading {
  padding: 0 2px 8px;
  color: #8a93a3;
  font-size: 12px;
  font-weight: 900;
}

.event-detail-schedule-heading span:last-child {
  text-align: right;
}

.event-detail-schedule-row {
  align-items: end;
  padding: 12px 2px;
  border-top: 1px solid #e1e6ef;
}

.event-detail-schedule-date {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.event-detail-schedule-date small {
  color: #fb4b08;
  font-size: 11px;
  font-weight: 900;
}

.event-detail-schedule-date strong,
.event-detail-schedule-row > strong {
  min-width: 0;
  overflow-wrap: normal;
  font-size: clamp(12px, 1.1vw, 14px);
  letter-spacing: -0.035em;
  line-height: 1.35;
  white-space: nowrap;
}

.event-detail-schedule-row > strong {
  justify-self: end;
  text-align: right;
}

.event-detail-schedule-toggle {
  display: none;
}

.event-detail-fact > small {
  padding-top: 10px;
  border-top: 1px solid #e1e6ef;
}

.event-detail-link {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  color: #2168f5;
  background: #eaf3ff;
  border-radius: 999px;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(33, 104, 245, 0.08);
  transition: color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

@media (hover: hover) {
  .event-detail-link:hover {
    color: #ffffff;
    background: #2168f5;
    box-shadow: 0 10px 22px rgba(33, 104, 245, 0.24);
    transform: translateY(-2px);
  }
}

.event-detail-link:active {
  color: #ffffff;
  background: #1856cf;
  box-shadow: inset 0 3px 7px rgba(8, 42, 111, 0.24);
  transform: translateY(1px) scale(0.985);
}

.event-detail-link:focus-visible { outline: 3px solid rgba(33, 104, 245, 0.25); outline-offset: 3px; }

.event-detail-resource-actions { display:flex;flex-wrap:wrap;align-items:center;gap:10px; }
.event-qr-open-button { display:inline-flex;align-items:center;min-height:44px;padding:0 16px;color:#8a3c10;background:#fff1df;border:1px solid #f1c49d;border-radius:999px;font:inherit;font-weight:900;cursor:pointer;transition:color 160ms ease,background 160ms ease,border-color 160ms ease,box-shadow 160ms ease,transform 160ms ease; }
.event-qr-open-button span { margin-right:7px;font-size:20px;line-height:1; }
.event-qr-open-button:hover { color:#fff;background:#d94a10;border-color:#d94a10;box-shadow:0 9px 20px rgba(217,74,16,.22);transform:translateY(-2px); }
.event-qr-open-button:active { background:#bd3808;border-color:#bd3808;box-shadow:inset 0 3px 7px rgba(91,24,0,.25);transform:translateY(1px) scale(.985); }
.event-qr-open-button:focus-visible { outline:3px solid rgba(217,74,16,.25);outline-offset:2px; }

.event-share-panel { display:grid;gap:14px;padding:18px 20px;background:linear-gradient(135deg,#fff9f0,#fff3e2);border:1px solid #f2cda8;border-radius:18px; }
.event-share-copy { display:flex;align-items:center;gap:12px; }
.event-share-copy>span { display:grid;flex:0 0 42px;width:42px;height:42px;place-items:center;background:#fff;border:1px solid #f4d2b1;border-radius:50%;font-size:21px; }
.event-share-copy h3,.event-share-copy p { margin:0; }
.event-share-copy h3 { color:#2e261f;font-size:15px;font-weight:900; }
.event-share-copy p { margin-top:2px;color:#7d7066;font-size:12px;font-weight:700; }
.event-share-buttons { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px; }
.event-share-button { display:flex;min-height:46px;align-items:center;justify-content:center;gap:8px;padding:8px 12px;color:#fff;border:0;border-radius:12px;font:inherit;font-size:13px;text-decoration:none;box-shadow:0 5px 12px rgba(31,38,51,.12);cursor:pointer;transition:box-shadow 160ms ease,filter 160ms ease,transform 160ms ease; }
.event-share-button>span { display:grid;min-width:25px;height:25px;place-items:center;padding:0 4px;background:rgba(255,255,255,.16);border-radius:7px;font-size:12px;font-weight:900; }
.event-share-button strong { font-weight:900; }
.event-share-button.is-line { background:#06c755; }
.event-share-button.is-x { background:#0f1012; }
.event-share-button.is-facebook { background:#1877f2; }
.event-share-button.is-native { color:#49372a;background:linear-gradient(145deg,#fff,#f5e4ce);border:1px solid #e4c29d; }
.event-share-button.is-native>span { background:#fff3e4; }
.event-share-button:focus-visible { outline:3px solid rgba(255,100,26,.3);outline-offset:3px; }
@media (hover:hover) and (pointer:fine) { .event-share-button:hover { filter:brightness(1.08);box-shadow:0 10px 20px rgba(31,38,51,.2);transform:translateY(-2px); } }
.event-share-button:active { filter:brightness(.94);box-shadow:0 3px 8px rgba(31,38,51,.16);transform:translateY(1px) scale(.985); }

.event-qr-overlay { position:fixed;inset:0;z-index:5300;display:grid;place-items:center;padding:20px;background:rgba(18,16,13,.72);backdrop-filter:blur(8px); }
.event-qr-dialog { position:relative;display:grid;justify-items:center;width:min(100%,480px);max-height:calc(100dvh - 40px);padding:31px 30px 27px;overflow-y:auto;color:#2b261f;background:radial-gradient(circle at 92% 0,rgba(218,165,62,.16),transparent 31%),linear-gradient(145deg,#fffdf8,#f7eddf);border:1px solid #c6a66f;border-radius:26px;text-align:center;box-shadow:0 28px 85px rgba(0,0,0,.46),inset 0 0 0 4px rgba(255,255,255,.6); }
.event-qr-close { position:absolute;top:15px;left:15px;display:grid;width:44px;height:44px;place-items:center;padding:0;color:#705a45;background:#fffaf2;border:1px solid #d8bfa3;border-radius:50%;font-size:0;line-height:0;appearance:none;-webkit-appearance:none;cursor:pointer; }
.event-qr-close::before,.event-qr-close::after { position:absolute;top:50%;left:50%;width:21px;height:3px;background:currentColor;border-radius:999px;content:"";transform-origin:center; }
.event-qr-close::before { transform:translate(-50%,-50%) rotate(45deg); }
.event-qr-close::after { transform:translate(-50%,-50%) rotate(-45deg); }
.event-qr-close:hover { color:#fff;background:#a24b25;border-color:#a24b25; }
.event-qr-kicker { color:#a96a29;font-family:Georgia,serif;font-size:.62rem;font-weight:900;letter-spacing:.18em; }
.event-qr-dialog h2 { margin:8px 48px 6px;color:#3b2b20;font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:1.45rem;letter-spacing:.06em; }
.event-qr-dialog>p { margin:0;max-width:360px;color:#7c6f63;font-size:.78rem;font-weight:750;line-height:1.65; }
.event-qr-code { display:grid;width:296px;height:296px;margin:20px 0 13px;padding:18px;place-items:center;background:#fff;border:1px solid #d5c5ae;box-shadow:0 12px 28px rgba(75,48,25,.16); }
.event-qr-code canvas,.event-qr-code img { display:block;width:260px!important;height:260px!important;image-rendering:pixelated; }
.event-qr-event-name { max-width:100%;color:#332920;font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:1rem;overflow-wrap:anywhere; }
.event-qr-url { display:block;max-width:100%;margin-top:5px;overflow:hidden;color:#918375;font-size:.62rem;font-weight:700;text-overflow:ellipsis;white-space:nowrap; }
.event-qr-actions { display:grid;grid-template-columns:1fr 1.2fr;gap:9px;width:100%;margin-top:19px; }
.event-qr-actions button { min-height:46px;padding:9px 13px;color:#72583f;background:#fffaf2;border:1px solid #d9c2a7;border-radius:12px;font:inherit;font-size:.78rem;font-weight:900;cursor:pointer; }
.event-qr-actions button.is-primary { color:#352009;background:linear-gradient(145deg,#f4d47a,#c89230);border-color:#e3b956;box-shadow:0 7px 17px rgba(112,69,20,.17); }
.event-qr-actions button:hover:not(:disabled) { filter:brightness(1.04);transform:translateY(-1px); }
.event-qr-actions button:disabled { opacity:.58;cursor:wait; }
.event-qr-note { margin-top:12px;color:#958474;font-size:.64rem;font-weight:700;line-height:1.5; }

@media (prefers-reduced-motion: reduce) {
  .daily-card .daily-item-reward button,
  .daily-card .daily-complete-reward-values>button,
  .equipped-title-summary button,
  .achievement-summary-card .section-heading button,
  #mypageBadgeSection .section-heading button,
  .detail-button,
  .event-detail-link,
  .event-qr-open-button,
  .event-share-button,
  .follow-button,
  .like-button,
  .like-button-heart,
  .large-register-button,
  .big-post-button,
  .big-post-button::before { transition: none; }
  .daily-card .daily-item-reward button:hover,
  .daily-card .daily-item-reward button:active,
  .daily-card .daily-complete-reward-values>button:hover,
  .daily-card .daily-complete-reward-values>button:active,
  .equipped-title-summary button:hover,
  .equipped-title-summary button:active,
  .achievement-summary-card .section-heading button:hover,
  .achievement-summary-card .section-heading button:active,
  #mypageBadgeSection .section-heading button:hover,
  #mypageBadgeSection .section-heading button:active,
  .detail-button:hover,
  .detail-button:active,
  .event-detail-link:hover,
  .event-detail-link:active,
  .event-qr-open-button:hover,
  .event-qr-open-button:active,
  .event-share-button:hover,
  .event-share-button:active,
  .follow-button:hover,
  .follow-button:active,
  .like-button:hover,
  .like-button:active,
  .like-button:hover .like-button-heart,
  .large-register-button:hover,
  .large-register-button:active,
  .big-post-button:hover,
  .big-post-button:active { transform: none; }
  .big-post-button:hover::before { transform: skewX(-18deg) translateX(-180%); }
}

@media (max-width:560px) {
  .event-detail-resource-actions { align-items:stretch;flex-direction:column; }
  .event-detail-resource-actions .event-detail-link,.event-qr-open-button { justify-content:center;width:100%; }
  .event-qr-overlay { padding:10px; }
  .event-qr-dialog { max-height:calc(100dvh - 20px);padding:27px 17px max(22px,env(safe-area-inset-bottom));border-radius:22px; }
  .event-qr-close { top:14px;left:14px;width:40px;height:40px; }
  .event-qr-dialog h2 { margin-right:40px;margin-left:40px;font-size:1.22rem; }
  .event-qr-code { width:min(276px,80vw);height:min(276px,80vw);padding:16px; }
  .event-qr-code canvas,.event-qr-code img { width:min(244px,calc(80vw - 32px))!important;height:min(244px,calc(80vw - 32px))!important; }
  .event-share-panel { padding:16px; }
  .event-share-buttons { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .event-share-button { justify-content:flex-start;padding:9px 13px; }
}

.event-detail-comment-section {
  display: grid;
  gap: 8px;
}

.event-detail-comment-section h3,
.event-detail-comment {
  margin: 0;
}

.event-detail-comment-section h3 {
  color: #1c2434;
  font-size: 15px;
  font-weight: 900;
}

.event-detail-comment {
  padding: 16px 18px;
  white-space: pre-wrap;
  color: #303847;
  background: #fff8f3;
  border: 1px solid #ffe0cf;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.75;
}

.event-comments-section {
  display: grid;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid #e8edf4;
}

.event-comments-heading {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.event-comments-heading h3,
.event-comments-heading span,
.comment-message,
.comment-list-status,
.comment-content,
.comment-login-message {
  margin: 0;
}

.event-comments-heading h3 {
  color: #1c2434;
  font-size: 20px;
  font-weight: 900;
}

.event-comments-heading span {
  color: #7e8797;
  font-size: 13px;
  font-weight: 800;
}

.comment-form {
  display: grid;
  gap: 8px;
  padding: 11px;
  background: #f8f9fb;
  border: 1px solid #e8edf4;
  border-radius: 16px;
}

.comment-form textarea {
  width: 100%;
  min-height: 64px;
  resize: vertical;
  padding: 11px 13px;
  color: #303847;
  background: #ffffff;
  border: 1px solid #dce2eb;
  border-radius: 12px;
  font: inherit;
  font-size: 16px;
  line-height: 1.6;
}

.comment-form textarea:focus {
  outline: 3px solid rgba(33, 104, 245, 0.14);
  border-color: #2168f5;
}

.comment-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.comment-character-count {
  color: #7e8797;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.comment-character-count.is-near-limit {
  color: #e04a18;
}

.comment-submit-button {
  min-width: 132px;
  min-height: 46px;
  padding: 0 18px;
  color: #ffffff;
  background: #fb4b08;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.comment-submit-button:disabled {
  color: #9aa3b2;
  background: #e8ebf0;
  cursor: not-allowed;
}

.comment-login-message,
.comment-list-status {
  padding: 18px;
  color: #687386;
  background: #f8f9fb;
  border: 1px solid #e8edf4;
  border-radius: 14px;
  font-weight: 800;
  line-height: 1.65;
  text-align: center;
}

.comment-login-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 0%, rgba(255, 180, 58, 0.24), transparent 42%),
    linear-gradient(135deg, #fff9ef, #fff);
  border: 1px solid #ffd4b4;
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(176, 72, 15, 0.08);
}

.comment-login-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  background: #fff0df;
  border-radius: 50%;
  font-size: 22px;
}

.comment-login-card strong {
  display: block;
  color: #252d3b;
  font-size: 15px;
  font-weight: 950;
}

.comment-login-card p {
  margin: 4px 0 0;
  color: #7a8495;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.55;
}

.comment-login-card button {
  min-height: 44px;
  padding: 9px 16px;
  color: #fff;
  background: #fb4b08;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 9px 20px rgba(251, 75, 8, 0.2);
}

.event-comments-section.is-locked .comment-list {
  display: none;
}

.comment-message {
  min-height: 0;
  color: #247447;
  font-size: 13px;
  font-weight: 800;
}

.comment-message:empty {
  display: none;
}

.comment-message.is-error {
  color: #c53d24;
}

.comment-list {
  display: grid;
  gap: 10px;
}

.event-comments-section.is-empty {
  gap: 9px;
}

.event-comments-section.is-empty .comment-form {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
}

.event-comments-section.is-empty .comment-form textarea {
  min-height: 52px;
  height: 52px;
  resize: none;
}

.event-comments-section.is-empty .comment-form textarea:focus {
  grid-column: 1 / -1;
  min-height: 84px;
  height: auto;
  resize: vertical;
}

.event-comments-section.is-empty .comment-form textarea:focus + .comment-form-footer {
  grid-column: 1 / -1;
}

.event-comments-section.is-empty .comment-form-footer {
  justify-content: flex-end;
}

.event-comments-section.is-empty .comment-list-status {
  justify-self: start;
  padding: 0 2px;
  color: #8a93a3;
  background: transparent;
  border: 0;
  font-size: 12px;
  line-height: 1.5;
  text-align: left;
}

.event-comments-section.is-empty .comment-login-message {
  padding: 12px 14px;
  font-size: 13px;
}

.comment-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  width: 100%;
  padding: 15px;
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid #e8edf4;
  border-radius: 16px;
}

.comment-avatar {
  width: 44px;
  height: 44px;
  object-fit: cover;
  background: #f8fafc;
  border-radius: 50%;
}

.comment-avatar-button {
  align-self: start;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.comment-avatar-button:hover,
.comment-avatar-button:focus-visible {
  outline: 3px solid rgba(255, 75, 0, 0.18);
  outline-offset: 2px;
}

.comment-card-body {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.comment-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.comment-author-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 9px;
  min-width: 0;
}

.comment-author-meta strong {
  overflow-wrap: anywhere;
  color: #303847;
  font-size: 14px;
  font-weight: 900;
}

.comment-author-meta time {
  color: #8a93a3;
  font-size: 12px;
  font-weight: 700;
}

.comment-content {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  color: #3c4657;
  font-size: 15px;
  line-height: 1.7;
}

.comment-content-wrap {
  display: grid;
  min-width: 0;
}

.comment-content.is-collapsed {
  display: -webkit-box;
  overflow: hidden;
  max-height: 5.1em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.comment-expand-button {
  justify-self: start;
  min-height: 32px;
  margin-top: 2px;
  padding: 2px 8px;
  color: #657084;
  background: transparent;
  border: 0;
  border-radius: 8px;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.comment-expand-button:hover,
.comment-expand-button:focus-visible {
  color: #fb4b08;
  background: #fff2ea;
  outline: none;
}

.comment-interactions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.comment-like-button,
.comment-reply-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 34px;
  padding: 4px 10px;
  color: #687386;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.comment-like-button > span:first-child {
  color: #e1524a;
  font-size: 17px;
  line-height: 1;
}

.comment-like-button:hover,
.comment-like-button:focus-visible,
.comment-reply-button:hover,
.comment-reply-button:focus-visible {
  color: #fb4b08;
  background: #fff2ea;
  border-color: #ffd7c3;
  outline: none;
}

.comment-like-button.is-active {
  color: #d83c37;
  background: #fff0ef;
  border-color: #ffd0ce;
}

.comment-like-button[aria-busy="true"] {
  pointer-events: none;
}

.comment-replies {
  display: grid;
  gap: 8px;
  margin-top: 4px;
  padding: 2px 0 0 14px;
  border-left: 3px solid #ffe0d1;
}

.comment-card.is-reply {
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
  background: #fafbfc;
  border-color: #e9edf3;
  border-radius: 14px;
}

.comment-card.is-reply .comment-avatar,
.comment-card.is-reply .comment-avatar-button {
  width: 36px;
  height: 36px;
}

.comment-card.is-reply .comment-author-meta strong {
  font-size: 13px;
}

.comment-card.is-reply .comment-content {
  font-size: 14px;
}

.comment-reply-composer:empty {
  display: none;
}

.comment-reply-form {
  display: grid;
  gap: 8px;
  margin-top: 4px;
  padding: 10px;
  background: #fff8f3;
  border: 1px solid #ffddc9;
  border-radius: 14px;
}

.comment-reply-form textarea {
  width: 100%;
  min-height: 68px;
  resize: vertical;
  padding: 10px 12px;
  box-sizing: border-box;
  color: #303847;
  background: #fff;
  border: 1px solid #dce2eb;
  border-radius: 11px;
  font: inherit;
  font-size: 15px;
  line-height: 1.6;
}

.comment-reply-form textarea:focus {
  border-color: #fb4b08;
  outline: 3px solid rgba(251, 75, 8, 0.12);
}

.comment-reply-form-footer,
.comment-reply-form-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.comment-reply-form-footer {
  justify-content: space-between;
}

.comment-reply-cancel-button,
.comment-reply-submit-button {
  min-height: 38px;
  padding: 0 13px;
  border-radius: 999px;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.comment-reply-cancel-button {
  color: #667184;
  background: #fff;
  border: 1px solid #dce2eb;
}

.comment-reply-submit-button {
  color: #fff;
  background: #fb4b08;
  border: 1px solid #fb4b08;
}

.comment-reply-cancel-button:disabled,
.comment-reply-submit-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.comment-card-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
}

.comment-edit-button,
.comment-delete-button {
  flex: 0 0 auto;
  min-width: 54px;
  min-height: 38px;
  padding: 0 10px;
  color: #c53d24;
  background: #fff4f0;
  border: 1px solid #ffd8cc;
  border-radius: 999px;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.comment-edit-button {
  color: #2168f5;
  background: #eef5ff;
  border-color: #cfe1ff;
}

.comment-edit-button:hover {
  background: #e2eeff;
}

.comment-delete-button {
  color: #c53d24;
  background: #fff4f0;
  border-color: #ffd8cc;
}

.comment-edit-button:disabled,
.comment-delete-button:disabled {
  opacity: 0.55;
  cursor: wait;
}

.comment-edit-form {
  display: grid;
  gap: 9px;
}

.comment-edit-textarea {
  width: 100%;
  min-height: 88px;
  resize: vertical;
  padding: 11px 12px;
  color: #303847;
  background: #ffffff;
  border: 1px solid #cfd7e4;
  border-radius: 12px;
  font: inherit;
  font-size: 15px;
  line-height: 1.65;
}

.comment-edit-textarea:focus {
  outline: 3px solid rgba(33, 104, 245, 0.14);
  border-color: #2168f5;
}

.comment-edit-footer,
.comment-edit-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.comment-edit-footer {
  justify-content: space-between;
}

.comment-edit-cancel-button,
.comment-edit-save-button {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.comment-edit-cancel-button {
  color: #5f6a7c;
  background: #ffffff;
  border: 1px solid #dce2eb;
}

.comment-edit-save-button {
  color: #ffffff;
  background: #fb4b08;
  border: 1px solid #fb4b08;
}

.comment-edit-cancel-button:disabled,
.comment-edit-save-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.auth-modal-header {
  grid-template-columns: 72px 1fr 72px;
  background:
    radial-gradient(circle at 86% 12%, rgba(255, 177, 85, 0.2), transparent 30%),
    linear-gradient(135deg, #fff8ec, #fffdf9 58%, #fff1df);
  border-bottom-color: #f2d3ad;
}

.auth-modal-header h2 {
  color: #292520;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-weight: 900;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.auth-modal-body {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
  padding: 28px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

#authModal .auth-modal-body > * {
  box-sizing: border-box;
  width: 100%;
  margin-right: 0;
  margin-left: 0;
  min-width: 0;
  max-width: 100%;
}

.auth-form,
.auth-form .form-field {
  min-width: 0;
  max-width: 100%;
}

/* フォームはモーダル幅を基準にし、各項目を左右同じ余白で中央配置します。 */
#authModal .auth-form {
  width: 100%;
  max-width: 100%;
  margin-right: 0;
  margin-left: 0;
}

#authModal .auth-form > * {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin-right: 0;
  margin-left: 0;
}

.auth-brand-intro {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  color: #50311f;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid #f1c998;
  border-radius: 18px;
  box-shadow: 0 7px 22px rgba(150, 75, 22, 0.07);
}

.auth-brand-mark {
  position: relative;
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  color: #fff6d8;
  background: radial-gradient(circle at 35% 28%, #ff7d2d, #df3d06 72%);
  border: 2px solid #f7b84a;
  border-radius: 50%;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 22px;
  font-weight: 900;
  box-shadow: 0 6px 14px rgba(201, 58, 5, 0.2), 0 0 0 4px rgba(255, 187, 65, 0.12);
}

.auth-brand-intro strong {
  display: block;
  color: #292520;
  font-size: 16px;
  font-weight: 950;
}

.auth-brand-intro p {
  margin: 2px 0 0;
  color: #756456;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.6;
}

.auth-signup-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.auth-signup-benefits span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  color: #7b401f;
  background: #fff8ec;
  border: 1px solid #f0d0a8;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 5px;
  background: #f6eadc;
  border: 1px solid #efd5b7;
  border-radius: 16px;
}

.auth-tabs button {
  min-height: 44px;
  color: #5c6677;
  background: transparent;
  border: 0;
  border-radius: 12px;
  font-weight: 900;
}

.auth-tabs button.active {
  color: #e74208;
  background: linear-gradient(145deg, #ffffff, #fffaf3);
  box-shadow: 0 4px 12px rgba(138, 66, 20, 0.1);
}

.auth-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
}

.auth-form .form-field {
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
}

.auth-form.hidden {
  display: none;
}

.auth-form-description {
  margin: 0;
  color: #5c6677;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.auth-modal .form-field input {
  display: block;
  max-width: 100%;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid #eadbc9;
  box-shadow: inset 0 1px 2px rgba(88, 50, 27, 0.035);
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.auth-modal .form-field input:focus {
  background: #ffffff;
  border-color: #f38a4c;
  box-shadow: 0 0 0 4px rgba(251, 75, 8, 0.11);
}

.auth-modal .auth-submit-button {
  width: 100%;
  max-width: 100%;
  background: linear-gradient(135deg, #ff5b13, #e94105);
  border: 1px solid #e74308;
  box-shadow: 0 8px 18px rgba(222, 61, 4, 0.2);
}

.auth-modal .auth-submit-button:hover:not(:disabled) {
  background: linear-gradient(135deg, #ff6a22, #ef4a0c);
  transform: translateY(-1px);
}

/* PCではモーダルを少し広げ、内容を左右同じ余白で完全に収めます。 */
@media (min-width: 901px) {
  .auth-modal {
    width: min(560px, calc(100vw - 64px));
    max-width: 560px;
  }

  .auth-modal-body {
    padding-right: 0;
    padding-left: 0;
  }

  #authModal .auth-modal-body > * {
    width: calc(100% - 56px);
    max-width: calc(100% - 56px);
    align-self: center;
  }
}

.auth-text-button,
.auth-text-link {
  align-self: center;
  justify-self: center;
  padding: 4px 8px;
  color: #2168f5;
  background: transparent;
  border: 0;
  font-weight: 900;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

#authModal .auth-help-link,
#authModal .auth-help-link:visited {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 10px 14px;
  color: #50311f;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(255, 246, 232, 0.96));
  border: 1px solid #efc792;
  border-radius: 18px;
  box-shadow: 0 7px 18px rgba(150, 75, 22, 0.07);
  text-decoration: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

#authModal .auth-help-link:hover {
  border-color: #f29b58;
  box-shadow: 0 9px 22px rgba(150, 75, 22, 0.12);
  transform: translateY(-1px);
}

.auth-help-link-icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  color: #fff6df;
  background: linear-gradient(145deg, #ff6b20, #df3d06);
  border: 2px solid #ffc567;
  border-radius: 50%;
  font-weight: 950;
  line-height: 1;
}

.auth-help-link-copy {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.auth-help-link-copy strong {
  font-size: 13px;
  font-weight: 950;
  line-height: 1.45;
}

.auth-help-link-copy small {
  color: #8a7464;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.45;
}

.auth-help-link-arrow {
  color: #e64a0a;
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
}

.social-login-actions {
  display: grid;
  min-width: 0;
  max-width: 100%;
  gap: 12px;
}

.social-login-actions button {
  width: 100%;
  max-width: 100%;
}

.auth-social-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  color: #9a806d;
  font-size: 11px;
  font-weight: 800;
}

.auth-social-divider::before,
.auth-social-divider::after {
  height: 1px;
  background: #ead3bc;
  content: "";
}

.auth-social-divider span {
  padding: 0 2px;
}

.social-login-actions.hidden {
  display: none;
}

.google-login-button {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  min-height: 48px;
  padding: 0 12px;
  color: #1f1f1f;
  background: #ffffff;
  border: 1px solid #747775;
  font-family: "Google Sans", Roboto, Arial, sans-serif;
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(60, 64, 67, 0.09);
  transition: background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.google-login-button:hover:not(:disabled) {
  background: #f8faff;
  box-shadow: 0 5px 14px rgba(60, 64, 67, 0.15);
  transform: translateY(-1px);
}

.google-login-button:focus-visible {
  outline: 3px solid rgba(66, 133, 244, 0.28);
  outline-offset: 2px;
}

.google-login-icon {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  background: #ffffff;
}

.google-login-icon svg {
  display: block;
  width: 20px;
  height: 20px;
}

.google-login-label {
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  text-overflow: ellipsis;
}

.google-login-spacer {
  display: block;
}

.line-login-button {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  min-height: 48px;
  padding: 0 12px;
  color: #ffffff;
  background: #06c755;
  border: 0;
  font-weight: 900;
  box-shadow: 0 6px 14px rgba(6, 199, 85, 0.14);
  transition: background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.line-login-button:hover:not(:disabled) {
  background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), #06c755;
  box-shadow: 0 8px 18px rgba(6, 199, 85, 0.2);
  transform: translateY(-1px);
}

.line-login-button:active:not(:disabled) {
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), #06c755;
  transform: translateY(0);
}

.line-login-button:focus-visible {
  outline: 3px solid rgba(6, 199, 85, 0.25);
  outline-offset: 2px;
}

.line-login-icon {
  position: relative;
  display: grid;
  width: 44px;
  height: 48px;
  place-items: center;
}

.line-login-icon::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background: rgba(0, 0, 0, 0.08);
  content: "";
}

.line-login-icon img {
  display: block;
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.line-login-label {
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  text-overflow: ellipsis;
}

.line-login-spacer {
  display: block;
}

.line-login-button:disabled {
  color: rgba(30, 30, 30, 0.2);
  background: #ffffff;
  border: 1px solid rgba(229, 229, 229, 0.6);
  box-shadow: none;
  opacity: 1;
}

.line-login-button:disabled .line-login-icon {
  opacity: 0.2;
}

.line-login-button:disabled .line-login-icon::after {
  background: rgba(229, 229, 229, 0.6);
}

.auth-message {
  min-height: 22px;
  margin: 0;
  color: #2168f5;
  font-size: 14px;
  font-weight: 800;
}

.auth-message.is-error {
  color: #d73502;
}

.event-modal form {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  max-height: inherit;
}

.modal-header {
  display: grid;
  grid-template-columns: 96px 1fr 120px;
  align-items: center;
  gap: 16px;
  min-height: 96px;
  padding: 20px 30px;
  border-bottom: 1px solid #edf0f4;
}

.modal-header h2 {
  margin: 0;
  font-size: 28px;
  text-align: center;
}

#eventModal .modal-header {
  background:
    radial-gradient(circle at 50% -35%, rgba(255, 174, 103, .28), transparent 55%),
    linear-gradient(135deg, #fffaf5 0%, #fff3e8 52%, #fffaf6 100%);
  border-bottom-color: #ffd2b6;
  box-shadow: 0 5px 18px rgba(166, 71, 18, .07);
}

#eventModal .modal-header h2 {
  padding: 4px 10px 7px;
  color: #3c2418;
  background: linear-gradient(transparent 70%, rgba(255, 119, 51, .25) 70%);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif JP", serif;
  font-weight: 900;
  letter-spacing: .09em;
  text-shadow: 0 2px 0 rgba(255, 255, 255, .9), 0 4px 12px rgba(113, 51, 18, .1);
  font-feature-settings: "palt";
}

.modal-close-button {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  place-items: center;
  padding: 0;
  color: #4b5563;
  background: #fff7f1;
  border: 1px solid #ffd0bb;
  border-radius: 50%;
  font-size: 0;
  line-height: 0;
  appearance: none;
  -webkit-appearance: none;
}

.modal-close-button::before,
.modal-close-button::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 25px;
  height: 4px;
  background: currentColor;
  border-radius: 999px;
  content: "";
  transform-origin: center;
}

.modal-close-button::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.modal-close-button::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.modal-close-button:hover {
  color: #e54816;
  background: #ffffff;
  border-color: #ffb891;
}

.modal-header.event-detail-header {
  position: relative;
  grid-template-columns: 72px minmax(0, 1fr) 72px;
  background:
    radial-gradient(circle at 88% 18%, rgba(255, 177, 113, 0.18), transparent 24%),
    linear-gradient(135deg, #fff7ed 0%, #fffdf9 52%, #fff1e8 100%);
  border-bottom-color: #ffddc4;
  box-shadow: 0 5px 18px rgba(180, 76, 14, 0.07);
}

.event-detail-header h2 {
  justify-self: center;
  max-width: 100%;
  padding: 2px 16px 5px;
  color: #29232c;
  background: linear-gradient(transparent 68%, rgba(255, 169, 99, 0.3) 68%);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif JP", serif;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.055em;
  text-wrap: balance;
}

.event-detail-header .modal-close-button {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 190, 142, 0.55);
  box-shadow: 0 5px 14px rgba(118, 56, 15, 0.08);
}

.event-detail-header .modal-close-button:hover {
  color: #e54816;
  background: #ffffff;
  border-color: #ffb47c;
}

.event-form-submit-button {
  position: relative;
  isolation: isolate;
  min-height: 56px;
  overflow: hidden;
  white-space: nowrap;
  color: #ffffff;
  background: linear-gradient(125deg, #ff3d00, #ff6817 55%, #ed3e00);
  border: 0;
  border-radius: 999px;
  font-size: 18px;
  font-weight: 900;
  box-shadow: 0 5px 0 #b93208, 0 10px 22px rgba(225, 58, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: background 170ms ease, box-shadow 170ms ease, filter 170ms ease, transform 170ms ease;
}

.event-form-submit-button::before {
  position: absolute;
  inset: -55% auto -55% -35%;
  z-index: -1;
  width: 30%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.44), transparent);
  content: "";
  pointer-events: none;
  transform: skewX(-18deg) translateX(-170%);
  transition: transform 430ms ease;
}

@media (hover: hover) {
  .event-form-submit-button:not(:disabled):hover {
    background: linear-gradient(125deg, #ff5712, #ff861f 52%, #ff4b00);
    box-shadow: 0 8px 0 #ad2d06, 0 17px 32px rgba(231, 66, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    filter: saturate(1.08);
    transform: translateY(-3px) scale(1.025);
  }
  .event-form-submit-button:not(:disabled):hover::before { transform: skewX(-18deg) translateX(520%); }
}

.event-form-submit-button:not(:disabled):active {
  background: linear-gradient(125deg, #de3500, #ed4708);
  box-shadow: 0 1px 0 #9d2906, inset 0 4px 9px rgba(99, 22, 0, 0.23);
  transform: translateY(4px) scale(0.98);
}

.event-form-submit-button:focus-visible { outline: 4px solid rgba(255, 128, 34, 0.33); outline-offset: 4px; }
.event-form-submit-button:disabled { opacity: 0.58; box-shadow: none; cursor: wait; }

@media (prefers-reduced-motion: reduce) {
  .event-form-submit-button,
  .event-form-submit-button::before { transition: none; }
  .event-form-submit-button:hover,
  .event-form-submit-button:active { transform: none; }
  .event-form-submit-button:hover::before { transform: skewX(-18deg) translateX(-170%); }
}

.modal-body {
  display: grid;
  gap: 22px;
  overflow-y: auto;
  padding: 34px 38px 42px;
}

.postable-event-guide {
  display: block !important;
  visibility: visible !important;
  overflow: hidden;
  background: linear-gradient(135deg, #fff8ed, #fffdf9);
  border: 1px solid #ffd7b3;
  border-radius: 18px;
  box-shadow: 0 7px 20px rgba(164, 76, 18, 0.07);
}

.postable-event-guide-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 12px 17px;
  color: #9f390e;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-weight: 900;
  text-align: left;
}

.postable-event-guide-toggle > span {
  display: grid;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  place-items: center;
  color: #fff;
  background: #ff6418;
  border-radius: 50%;
  font-size: 16px;
}

.postable-event-guide-toggle::after {
  margin-left: auto;
  color: #d34a0d;
  content: "＋";
  font-size: 21px;
  line-height: 1;
}

.postable-event-guide-toggle[aria-expanded="true"] {
  border-bottom: 1px solid #ffe0c4;
}

.postable-event-guide-toggle[aria-expanded="true"]::after {
  content: "−";
}

.postable-event-guide-toggle:hover {
  background: rgba(255, 224, 190, .28);
}

.postable-event-guide-toggle:focus-visible {
  outline: 3px solid rgba(255, 100, 24, .35);
  outline-offset: -3px;
}

.postable-event-guide-body {
  padding: 17px;
}

.postable-event-guide-body[hidden] {
  display: none !important;
}

.postable-event-guide-body > p {
  margin: 0 0 13px;
  color: #4f5968;
  font-size: 14px;
  font-weight: 750;
}

.postable-event-guide-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.postable-event-guide-tags span {
  padding: 6px 10px;
  color: #a83c0d;
  background: #fff;
  border: 1px solid #ffd3ae;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 850;
}

.postable-event-guide-body ul {
  display: grid;
  gap: 6px;
  margin: 15px 0 0;
  padding-left: 1.35em;
  color: #626d7d;
  font-size: 13px;
  font-weight: 650;
}

.duplicate-event-welcome {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  color: #6f330f;
  background: linear-gradient(135deg, #fff2d9, #fff9ee);
  border: 1px solid #ffc985;
  border-radius: 16px;
  box-shadow: 0 7px 18px rgba(164, 76, 18, 0.07);
}

.duplicate-event-welcome > span {
  display: grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #fff;
  background: #ff6418;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 900;
}

.duplicate-event-welcome strong {
  display: block;
  font-size: 14px;
  font-weight: 900;
}

.duplicate-event-welcome p {
  margin: 3px 0 0;
  color: #715d50;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.55;
}

/* イベント分類・タグ・条件 */
.event-form-section {
  display: grid;
  gap: 18px;
  min-width: 0;
  padding: 22px;
  background: #ffffff;
  border: 1px solid #e7eaf0;
  border-radius: 24px;
}

.event-form-section.is-required-step {
  position: relative;
  background: linear-gradient(145deg, #fffaf6 0%, #fff 48%);
  border-color: #ffc6a5;
  box-shadow: inset 5px 0 0 #ff6b2c, 0 8px 24px rgba(127, 55, 19, .05);
}

.event-form-section-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}

.event-form-section-heading > span,
.condition-step {
  display: inline-grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #fff;
  background: #ff4b00;
  border-radius: 50%;
  font-weight: 900;
}

.event-form-section-heading h3,
.event-form-section-heading p { margin: 0; }
.event-form-section-heading h3 { font-size: 19px; }
.event-form-section-heading h3 small { color: #6b7280; font-size: 12px; }
.event-form-section-heading h3 .required-step-badge {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  margin-left: 7px;
  padding: 3px 9px;
  color: #c63d05;
  background: #fff0e7;
  border: 1px solid #ffb58f;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  vertical-align: 2px;
}
.event-form-section-heading p { margin-top: 3px; color: #6b7280; font-size: 13px; }
.optional-setting-note { margin: -4px 0 0; padding: 10px 12px; color: #765022; background: #fff8ed; border-radius: 12px; font-size: 13px; font-weight: 700; }

.required-steps-finish {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  color: #245c43;
  background: #f1faf4;
  border: 1px solid #bfe4cc;
  border-radius: 18px;
}
.required-steps-finish > span {
  display: grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #fff;
  background: #38a169;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 900;
}
.required-steps-finish div { display: grid; gap: 3px; }
.required-steps-finish strong { font-size: 15px; }
.required-steps-finish small { color: #557364; font-size: 12px; font-weight: 700; }

.optional-input-card {
  overflow: hidden;
  background: #fafbfc;
  border: 1px solid #e1e5eb;
  border-radius: 18px;
}

.optional-input-card summary {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  color: #303847;
  cursor: pointer;
  font-size: 15px;
  font-weight: 900;
  list-style: none;
}

.optional-input-card summary::-webkit-details-marker { display: none; }
.optional-input-card summary::after { color: #fb4b08; content: "＋"; font-size: 22px; }
.optional-input-card[open] summary { border-bottom: 1px solid #e1e5eb; }
.optional-input-card[open] summary::after { content: "−"; }
.optional-input-card summary small { margin-left: auto; color: #7b8493; font-size: 12px; }
.optional-input-card-body { display: grid; gap: 16px; padding: 16px; }

.genre-picker {
  display: grid;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.genre-picker legend {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-bottom: 12px;
  color: #303847;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.5;
  overflow-wrap: normal;
  white-space: nowrap;
  word-break: keep-all;
  writing-mode: horizontal-tb;
}

.genre-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.genre-choice-grid label {
  position: relative;
  display: flex;
  min-width: 0;
  cursor: pointer;
}

.genre-choice-grid input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.genre-choice-grid span {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 54px;
  padding: 10px 16px;
  color: #252d3b;
  background: #fff;
  border: 2px solid #e1e5eb;
  border-radius: 15px;
  font-size: 15px;
  font-weight: 900;
  overflow-wrap: anywhere;
  transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}

.genre-choice-grid input:checked + span {
  color: #d83e00;
  background: #fff1e9;
  border-color: #ff7138;
  box-shadow: inset 0 0 0 1px #ff7138;
}

.genre-choice-grid input:focus-visible + span {
  outline: 3px solid rgba(251, 75, 8, .22);
  outline-offset: 2px;
}

.genre-choice-grid label:hover span {
  border-color: #ffb28e;
}

.tag-editor,
.tag-search-control { position: relative; min-width: 0; }
.tag-input-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.tag-input-row input,
.tag-search-control input { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid #d8dde6; border-radius: 14px; font: inherit; }
.tag-input-row button { min-width: 72px; min-height: 48px; color: #fff; background: #ff4b00; border: 0; border-radius: 14px; font-weight: 900; }
.tag-input-row input:disabled { color: #8b93a1; background: #f4f6f9; cursor: not-allowed; }
.tag-input-row button:disabled { color: #fff; background: #b9c0cb; cursor: not-allowed; }
.tag-suggestions { position: absolute; z-index: 12; top: 52px; left: 0; right: 0; display: none; max-height: 210px; overflow-y: auto; padding: 6px; background: #fff; border: 1px solid #d8dde6; border-radius: 14px; box-shadow: 0 12px 30px rgba(28, 36, 50, .15); }
.tag-suggestions.is-open { display: grid; }
.tag-suggestion-button { min-height: 44px; padding: 8px 12px; text-align: left; background: transparent; border: 0; border-radius: 10px; font-weight: 800; }
.tag-suggestion-button:hover { background: #fff4ed; }
.selected-tag-list { display: flex; flex-wrap: wrap; gap: 8px; min-height: 4px; margin-top: 10px; }
.tag-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 11px; color: #d83e00; background: #fff1e9; border: 1px solid #ffd1bd; border-radius: 999px; font-size: 13px; font-weight: 900; }
button.tag-chip { cursor: pointer; }
.tag-chip-remove { display: inline-grid; width: 24px; height: 24px; place-items: center; padding: 0; color: inherit; background: rgba(255,255,255,.7); border: 0; border-radius: 50%; font-size: 17px; }
.tag-editor > small { display: block; margin-top: 8px; color: #667085; }
.tag-editor > small.is-error { color: #d73502; }

.condition-card,
.discover-advanced-filters { overflow: hidden; border: 1px solid #e1e5eb; border-radius: 18px; background: #fafbfc; }
.condition-card.has-open-picker { overflow: visible; }
.condition-card summary,
.discover-advanced-filters summary { min-height: 52px; padding: 14px 16px; cursor: pointer; font-weight: 900; }
.condition-card[open] summary,
.discover-advanced-filters[open] > summary { border-bottom: 1px solid #e1e5eb; }
.condition-select-grid,
.filter-select-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 16px; }
.condition-select-grid label,
.filter-select-grid label { display: grid; gap: 7px; font-size: 13px; font-weight: 800; }
.filter-select-grid select { width: 100%; min-height: 48px; padding: 0 10px; background: #fff; border: 1px solid #d8dde6; border-radius: 12px; }
.condition-picker { position: relative; min-width: 0; }
.event-condition-native-select {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.event-condition-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 50px;
  padding: 0 15px;
  color: #192131;
  background: #fff;
  border: 2px solid #dfe4ec;
  border-radius: 14px;
  font: inherit;
  font-weight: 900;
  text-align: left;
  cursor: pointer;
}
.event-condition-trigger:hover { border-color: #ffb18d; }
.event-condition-trigger:focus-visible { outline: 3px solid rgba(251, 75, 8, .22); outline-offset: 2px; }
.event-condition-trigger[aria-expanded="true"] {
  color: #d83e00;
  background: #fff8f3;
  border-color: #ff7138;
  box-shadow: inset 0 0 0 1px #ff7138;
}
.event-condition-trigger b { color: #7d8797; font-size: 20px; line-height: 1; transition: transform .18s ease; }
.event-condition-trigger[aria-expanded="true"] b { color: #e64a0b; transform: rotate(180deg); }
.event-condition-option-list { display: none; }
.event-condition-option-list.is-open {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  left: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  width: max(100%, 270px);
  padding: 11px;
  background: #fff;
  border: 1px solid #e1e5eb;
  border-radius: 16px;
  box-shadow: 0 16px 38px rgba(30, 38, 53, .16);
}
.condition-picker:last-child .event-condition-option-list.is-open { right: 0; left: auto; }
.event-condition-option {
  min-width: 0;
  min-height: 46px;
  padding: 9px 11px;
  color: #222a39;
  background: #fff;
  border: 2px solid #e1e5eb;
  border-radius: 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.event-condition-option:hover { border-color: #ffb18d; }
.event-condition-option.is-selected {
  color: #d83e00;
  background: #fff1e9;
  border-color: #ff7138;
  box-shadow: inset 0 0 0 1px #ff7138;
}
.event-condition-option:focus-visible { outline: 3px solid rgba(251, 75, 8, .22); outline-offset: 1px; }
.condition-check-grid,
.filter-check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; padding: 16px; }
.condition-check-grid label,
.filter-check-grid label { position: relative; display: flex; align-items: center; min-height: 48px; min-width: 0; cursor: pointer; }
.condition-check-grid input,
.filter-check-grid input { position: absolute; opacity: 0; }
.condition-check-grid span,
.filter-check-grid span { display: flex; align-items: center; width: 100%; min-height: 48px; padding: 9px 12px; background: #fff; border: 2px solid #e1e5eb; border-radius: 13px; font-size: 13px; font-weight: 800; overflow-wrap: anywhere; }
.condition-check-grid input:checked + span,
.filter-check-grid input:checked + span { color: #d83e00; background: #fff1e9; border-color: #ff7a3d; box-shadow: inset 0 0 0 1px #ff7a3d; }
.condition-check-grid input:focus-visible + span,
.filter-check-grid input:focus-visible + span { outline: 3px solid rgba(33,104,245,.25); }

.discover-advanced-filters { margin-top: 14px; background: #fff; }
.discover-advanced-filter-body { display: grid; gap: 15px; padding: 16px; }
.discover-mobile-filter-bar,
.discover-filter-backdrop,
.discover-filter-sheet-header,
.discover-filter-sheet-footer,
.mobile-filter-option-list { display: none; }
.primary-filter-trigger { display: none; }
.discover-filter-panel { min-width: 0; }
.discover-filter-sheet-content { min-width: 0; }

@media (min-width: 761px) {
  .discover-filters > label {
    position: relative;
  }

  .discover-filters > label > select {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .primary-filter-trigger {
    display: flex;
    width: 100%;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 14px;
    color: #1c2434;
    background: #f8f9fb;
    border: 2px solid #e1e6ef;
    border-radius: 13px;
    font: inherit;
    font-size: 14px;
    font-weight: 900;
    text-align: left;
  }

  .primary-filter-trigger:hover,
  .primary-filter-trigger[aria-expanded="true"] {
    background: #fffaf6;
    border-color: #ff8a55;
  }

  .primary-filter-trigger:focus-visible {
    outline: 3px solid rgba(251, 75, 8, .22);
    outline-offset: 2px;
  }

  .primary-filter-trigger b {
    color: #7c8696;
    font-size: 20px;
    line-height: 1;
    transition: transform .16s ease;
  }

  .primary-filter-trigger[aria-expanded="true"] b {
    transform: rotate(180deg);
  }

  .primary-filter-option-list.is-open {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 45;
    display: grid;
    width: max(100%, 310px);
    max-height: 360px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 12px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e1e5eb;
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(35, 42, 55, .18);
  }

  .discover-filters > label:nth-child(n + 3) .primary-filter-option-list.is-open {
    right: 0;
    left: auto;
  }

  .primary-filter-option-list .mobile-filter-option-button {
    min-height: 48px;
    padding: 10px 13px;
    color: #252d3b;
    background: #fff;
    border: 2px solid #e1e5eb;
    border-radius: 13px;
    font-size: 13px;
    font-weight: 900;
    text-align: left;
  }

  .primary-filter-option-list .mobile-filter-option-button:hover {
    border-color: #ffad87;
  }

  .primary-filter-option-list .mobile-filter-option-button.is-selected {
    color: #d83e00;
    background: #fff1e9;
    border-color: #ff7138;
    box-shadow: inset 0 0 0 1px #ff7138;
  }
}
.filter-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.filter-group-title,
.filter-group legend { display: block; margin-bottom: 8px; color: #374151; font-size: 13px; font-weight: 900; }
.filter-group .filter-check-grid { padding: 0; }
.discover-advanced-filter-body .filter-select-grid { padding: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.active-search-filters { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 12px; background: #fff8ed; border-radius: 14px; }
.active-search-filters.hidden { display: none; }
.active-search-filters > div { display: flex; flex-wrap: wrap; gap: 7px; }
.active-filter-chip { min-height: 36px; padding: 6px 11px; color: #444; background: #fff; border: 1px solid #e0d5c8; border-radius: 999px; font-weight: 800; }
.active-search-filters > button { min-height: 36px; flex: 0 0 auto; color: #d73502; background: transparent; border: 0; font-weight: 900; }
.event-feature-labels { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.event-feature-label { display: inline-flex; align-items: center; min-height: 32px; padding: 5px 10px; color: #344054; background: #f2f4f7; border: 1px solid #dfe3ea; border-radius: 9px; font-size: 12px; font-weight: 850; }
.event-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.event-card-tags .tag-chip { min-height: 28px; padding: 3px 8px; font-size: 11px; }

.event-draft-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  color: #5c6677;
  background: #fff8ed;
  border: 1px solid #ffe0b7;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 800;
}

.event-draft-toolbar button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 12px;
  color: #d73502;
  background: #ffffff;
  border: 1px solid #ffd1c2;
  border-radius: 999px;
  font-weight: 900;
}

.image-upload-wrap {
  position: relative;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.image-upload-wrap *::selection {
  background: transparent;
}

.image-upload-wrap.is-processing .image-upload-box {
  cursor: progress;
  pointer-events: none;
}

.image-upload-wrap.is-processing .image-upload-box::after {
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;
  width: calc(100% - 32px);
  max-width: 360px;
  min-height: 64px;
  padding: 12px 18px;
  color: #b83a0b;
  background: rgba(255, 250, 243, 0.96);
  border: 1px solid #ffc09d;
  border-radius: 999px;
  box-shadow: 0 12px 30px rgba(94, 38, 9, 0.16);
  content: "写真を軽量化しています…";
  font-size: 15px;
  font-weight: 900;
}

.image-upload-box {
  position: relative;
  display: grid;
  place-items: center;
  height: clamp(260px, 34vw, 360px);
  min-height: 330px;
  overflow: hidden;
  color: #5c6677;
  background: #fafbfc;
  border: 4px dashed #d0d5dd;
  border-radius: 28px;
  text-align: center;
  cursor: pointer;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.image-upload-box input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.image-upload-box img {
  position: absolute;
  top: 50%;
  left: 50%;
  display: none;
  width: var(--crop-base-width, 100%);
  height: var(--crop-base-height, 100%);
  max-width: none;
  max-height: none;
  object-fit: fill;
  pointer-events: none;
  transform: translate(calc(-50% + var(--crop-x, 0px)), calc(-50% + var(--crop-y, 0px))) scale(var(--crop-scale, 1));
  transform-origin: center;
  -webkit-user-drag: none;
  user-select: none;
}

.image-upload-box.has-image {
  border-style: solid;
  cursor: grab;
}

.image-upload-box.has-image.is-dragging {
  cursor: grabbing;
}

.image-upload-box.has-image img {
  display: block;
}

.image-upload-wrap.has-image .upload-placeholder,
.image-upload-box.has-image .upload-placeholder {
  display: none !important;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.image-clear-button {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: none;
  min-height: 44px;
  padding: 0 16px;
  color: #303847;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #dfe3ea;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 8px 20px rgba(17, 24, 39, 0.12);
}

.image-upload-wrap.has-image .image-clear-button,
.image-upload-wrap:has(.image-upload-box.has-image) .image-clear-button {
  display: inline-flex;
  align-items: center;
}

.image-crop-controls {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 14px 8px 0;
}

.image-upload-wrap.has-image .image-crop-controls,
.image-upload-wrap:has(.image-upload-box.has-image) .image-crop-controls {
  display: flex;
}

.image-crop-controls input[type="range"] {
  flex: 1;
  min-width: 0;
  accent-color: #ff4b00;
}

.image-crop-controls button {
  min-height: 42px;
  padding: 0 16px;
  color: #303847;
  background: #f4f6f9;
  border: 1px solid #dfe3ea;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 900;
}

.crop-icon {
  color: #303847;
  font-weight: 900;
  line-height: 1;
}

.crop-icon-small {
  font-size: 18px;
}

.crop-icon-large {
  font-size: 24px;
}

.upload-placeholder {
  display: grid;
  gap: 8px;
  font-size: 22px;
  font-weight: 900;
  user-select: none;
}

.upload-placeholder strong {
  color: #9aa3b2;
  font-size: 64px;
  line-height: 1;
}

.upload-placeholder small {
  color: #98a1b0;
  font-size: 18px;
}

.form-field {
  display: grid;
  gap: 10px;
}

.form-field span {
  color: #303847;
  font-size: 18px;
  font-weight: 900;
}

.required-label::after {
  content: " *";
  color: #fb4b08;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  border: 0;
  outline: 0;
  color: #303847;
  background: #f8f9fb;
  border-radius: 22px;
  font-size: 20px;
  font-weight: 800;
}

.form-field input,
.form-field select {
  min-height: 66px;
  padding: 0 24px;
}

.form-field textarea {
  resize: vertical;
  min-height: 132px;
  padding: 20px 24px;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: #a0a8b6;
}

.field-counter {
  justify-self: end;
  color: #7e8797;
  font-size: 14px;
  font-weight: 800;
}

.field-note {
  color: #7e8797;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.6;
}

.field-counter.is-near-limit {
  color: #fb4b08;
}

.form-field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #98a1b0 50%), linear-gradient(135deg, #98a1b0 50%, transparent 50%);
  background-position: calc(100% - 28px) 28px, calc(100% - 18px) 28px;
  background-size: 10px 10px, 10px 10px;
  background-repeat: no-repeat;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.schedule-panel {
  display: grid;
  gap: 18px;
  padding: 18px;
  background: #f8f9fb;
  border: 1px solid #e8edf4;
  border-radius: 24px;
}

.schedule-panel-heading,
.schedule-item-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.schedule-item-heading {
  display: none;
}

.schedule-panel-heading span,
.schedule-item-heading strong {
  color: #303847;
  font-size: 18px;
  font-weight: 900;
}

.schedule-panel-heading > div {
  display: grid;
  gap: 3px;
}

.schedule-panel-heading small,
.schedule-mode-note {
  color: #737d8d;
  font-size: 13px;
  font-weight: 700;
}

.schedule-mode-switch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 5px;
  background: #e9edf3;
  border-radius: 16px;
}

.schedule-mode-switch label {
  cursor: pointer;
}

.schedule-mode-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.schedule-mode-switch span {
  display: grid;
  min-height: 46px;
  place-items: center;
  padding: 6px 10px;
  color: #687283;
  border: 2px solid transparent;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 900;
  text-align: center;
}

.schedule-mode-switch input:checked + span {
  color: #fb4b08;
  background: #fff;
  border-color: #ffb48f;
  box-shadow: 0 3px 10px rgba(40, 50, 70, 0.08);
}

.schedule-mode-switch input:focus-visible + span {
  outline: 3px solid rgba(251, 75, 8, 0.25);
  outline-offset: 2px;
}

.schedule-mode-note {
  margin: -8px 2px 0;
}

.schedule-panel-heading button,
.schedule-item-heading button {
  min-height: 42px;
  padding: 0 16px;
  color: #fb4b08;
  background: #fff4e7;
  border: 1px solid #ffd4a3;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 900;
}

.schedule-panel-heading button:disabled {
  color: #98a1b0;
  background: #eef2f7;
  border-color: #dfe5ee;
  cursor: not-allowed;
}

.schedule-item-heading button {
  display: none;
  color: #7e8797;
  background: #ffffff;
  border-color: #dfe5ee;
}

.schedule-list {
  display: grid;
  gap: 14px;
}

.schedule-item {
  display: grid;
  gap: 14px;
  padding: 16px;
  background: #ffffff;
  border: 1px solid #e2e7f0;
  border-radius: 20px;
}

.schedule-list.has-multiple .schedule-item-heading button {
  display: inline-flex;
  align-items: center;
}

.schedule-list.has-multiple .schedule-item-heading {
  display: flex;
}

.schedule-date-row,
.schedule-time-row {
  display: grid;
  gap: 14px;
}

.schedule-date-row {
  grid-template-columns: minmax(190px, 1fr) minmax(190px, 1fr) auto;
  align-items: end;
}

.schedule-list:not([data-mode="range"]) .schedule-end-date-field {
  display: none;
}

.schedule-time-row {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
}

.time-range-separator {
  display: grid;
  min-height: 58px;
  place-items: center;
  padding: 0 2px;
  color: #7e8797;
  font-size: 28px;
  font-weight: 900;
}

.date-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 2px;
}

.date-shortcuts button {
  min-height: 52px;
  padding: 0 18px;
  color: #303847;
  background: #ffffff;
  border: 1px solid #dfe5ee;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 900;
}

.date-shortcuts button:hover,
.date-shortcuts button.is-active {
  color: #fb4b08;
  background: #fff4e7;
  border-color: #ffd4a3;
}

.schedule-panel .form-field input,
.schedule-panel .form-field select,
.date-field input,
.time-field input,
.time-field select {
  min-height: 58px;
  background-color: #ffffff;
  border: 1px solid #e2e7f0;
  border-radius: 18px;
  font-size: 18px;
}

.date-field,
.time-field {
  display: grid;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.date-field > span,
.time-field > span {
  display: block;
  width: 100%;
  min-width: 0;
  color: #303847;
  font-size: 18px;
  font-weight: 900;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}

.time-field > span small {
  color: #8b94a3;
  font-size: 12px;
}

.time-selects {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.time-selects span {
  color: #7e8797;
  font-size: 22px;
  font-weight: 900;
}

.time-field input,
.time-field select {
  width: 100%;
  padding: 0 12px;
  color: #303847;
  font-weight: 800;
  text-align: center;
}

.time-field input::placeholder {
  color: #9aa3b2;
  opacity: 1;
}

.date-field input,
.date-field select {
  width: 100%;
  min-height: 58px;
  padding: 0 16px;
  color: #303847;
  font-weight: 800;
  padding: 0 12px;
  color: #303847;
  background: #ffffff;
  border: 1px solid #e2e7f0;
  border-radius: 18px;
  font-size: 18px;
  font-weight: 800;
}

.schedule-item.has-date-error {
  border-color: #ffb199;
  box-shadow: 0 0 0 3px rgba(251, 75, 8, 0.1);
}

@media (max-width: 1180px) {
  .app-shell {
    grid-template-columns: 240px minmax(620px, 1fr);
  }

  .right-panel {
    display: none;
  }

  .mypage-mobile-point-balance {
    display: grid;
  }

  .onboarding-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mypage-onboarding {
    grid-template-columns: 1fr;
  }

  .onboarding-preview {
    min-height: 300px;
  }

  .discover-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .event-form-section { padding: 16px 14px; border-radius: 18px; }
  .condition-select-grid,
  .condition-check-grid,
  .filter-check-grid,
  .discover-advanced-filter-body .filter-select-grid { grid-template-columns: 1fr; }
  .condition-select-grid,
  .condition-check-grid { padding: 12px; }
  .event-condition-option-list.is-open {
    position: static;
    width: 100%;
    margin-top: 2px;
    box-shadow: none;
  }
  .active-search-filters { align-items: stretch; flex-direction: column; }

}

/* スマホ・iPad幅では、PC用の左右パネルを下部ナビへ集約します。 */
@media (max-width: 1024px) {
  .app-shell {
    display: block;
    min-width: 0;
  }

  .right-panel {
    display: none;
  }

  .sidebar {
    position: fixed;
    inset: auto 0 0;
    z-index: 90;
    display: block;
    width: 100%;
    height: auto;
    padding: 7px 14px calc(7px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid #e3e7ee;
    border-right: 0;
    box-shadow: 0 -8px 28px rgba(28, 36, 52, 0.1);
    backdrop-filter: blur(16px);
    transform: translateY(calc(0px - var(--mobile-viewport-bottom-offset, 0px)));
  }

  .sidebar > div:first-child {
    width: 100%;
  }

  .sidebar .logo,
  .sidebar .mini-profile,
  .sidebar .auth-card,
  .sidebar-bottom {
    display: none;
  }

  .side-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    width: min(100%, 620px);
    margin: 0 auto;
  }

  .nav-item {
    position: relative;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    min-height: 58px;
    padding: 5px 8px;
    border-radius: 12px;
    font-size: 11px;
    line-height: 1.25;
    text-align: center;
  }

  .nav-item.active {
    color: #fb4b08;
    background: transparent;
  }

  .nav-item.active::after {
    position: absolute;
    bottom: 2px;
    width: 5px;
    height: 5px;
    background: #fb4b08;
    border-radius: 50%;
    content: "";
  }

  .nav-icon {
    width: 28px;
    height: 28px;
    font-size: 22px;
  }

  .main-content {
    width: 100%;
    min-width: 0;
    padding-bottom: calc(92px + env(safe-area-inset-bottom) + var(--mobile-viewport-bottom-offset, 0px));
  }

  .event-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
    min-height: 0;
    padding: 0;
    cursor: pointer;
  }

  .event-author-row-mobile {
    display: flex;
    justify-content: flex-start;
    margin: 0;
    padding: 16px;
  }

  .event-author-row-mobile .event-author-profile {
    flex: 1 1 0;
    overflow: hidden;
  }

  .event-author-row-mobile .event-author-profile > div {
    min-width: 0;
  }

  .event-author-row-mobile .event-author-profile strong {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .event-card-like-mobile {
    display: block;
    flex: 0 0 auto;
  }

  .event-author-row-mobile .follow-button,
  .event-card-like-mobile .like-button {
    min-height: 38px;
    padding: 7px 10px;
    font-size: 12px;
  }

  .event-card-like-mobile .like-button {
    min-width: 58px;
  }

  .event-card-like-mobile .like-button.is-active .like-button-heart,
  .event-card-like-mobile .like-button.is-active .like-button-count {
    color: #e54848;
  }

  .event-author-row-desktop {
    display: none;
  }

  .event-card > .event-card-image {
    width: calc(100% - 32px);
    height: clamp(220px, 52vw, 420px);
    margin: 0 16px;
    object-fit: cover;
    border-radius: 18px;
  }

  .event-card .event-body {
    padding: 16px 18px 10px;
  }

  .event-card h3 {
    font-size: 20px;
  }

  .event-card .event-card-title {
    justify-content: center;
    margin: 10px 0 12px;
    min-height: 62px;
    padding: 13px 16px;
    text-align: center;
    background:
      radial-gradient(circle at 50% -15%, rgba(255, 184, 45, .42), transparent 56%),
      linear-gradient(135deg, #fff9e9, #ffeac5 50%, #fff9e9);
    border: 1px solid #ffc58e;
    border-left-width: 1px;
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(184, 66, 10, .13), inset 0 1px 0 #fff;
  }

  .event-card-title-label {
    display: none;
  }

  .event-card-title-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 23px;
    line-height: 1.4;
  }

  .event-card-title-text::before,
  .event-card-title-text::after {
    color: #dc9200;
    font-size: 13px;
    content: "◆";
    text-shadow: 0 0 8px rgba(255, 190, 48, .38);
  }

  .event-card-date-block {
    grid-template-columns: auto minmax(0, 1fr);
    margin: 14px 0;
    padding: 12px;
  }

  .event-card-date-icon {
    align-self: center;
  }

  .event-card-date-details {
    width: 100%;
    gap: 9px;
  }

  .event-card-date-copy strong {
    gap: 6px;
    font-size: 16px;
    overflow-wrap: normal;
  }

  .event-card-date-subrow {
    gap: 7px;
  }

  .event-card-date-time {
    padding: 7px 10px;
    font-size: 15px;
  }

  .event-card-date-more {
    padding: 4px 9px;
    font-size: 11px;
  }

  .event-card-actions {
    display: none;
  }

  .event-card-actions .like-button {
    min-width: 0;
    min-height: 42px;
    padding: 8px 12px;
    font-size: 16px;
  }

  .event-card-actions .detail-button {
    display: none;
  }
}

@media (max-width: 760px) {
  button,
  a[href],
  [role="button"] {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
  }

  button.is-mobile-pressed:not(:disabled),
  a[href].is-mobile-pressed,
  [role="button"].is-mobile-pressed:not([aria-disabled="true"]) {
    filter: brightness(0.94);
    scale: 0.96;
  }

  button::selection,
  a[href]::selection,
  [role="button"]::selection {
    background: transparent;
  }

  .event-card {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
    transition: box-shadow 120ms ease, filter 120ms ease, transform 120ms ease;
  }

  .event-card.is-pressed {
    box-shadow: 0 5px 16px rgba(28, 36, 52, 0.12);
    filter: brightness(0.97);
    transform: scale(0.99);
  }

  .event-card *::selection {
    background: transparent;
  }

  .event-card-actions {
    display: none;
  }

  .event-author-row-mobile .event-author-profile {
    flex: 1 1 auto;
  }

  .event-author-row-mobile .event-author-profile > div {
    min-width: 0;
  }

  .event-author-row-mobile .event-author-profile strong {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .event-card-like-mobile {
    display: block;
    flex: 0 0 auto;
  }

  .event-author-row-mobile .follow-button,
  .event-card-like-mobile .like-button {
    min-height: 38px;
    padding: 7px 10px;
    font-size: 12px;
  }

  .event-card-like-mobile .like-button {
    min-width: 58px;
  }

  .event-card-like-mobile .like-button.is-active .like-button-heart,
  .event-card-like-mobile .like-button.is-active .like-button-count {
    color: #e54848;
  }

  .liked-posts-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 6px;
  }

  .liked-posts-toolbar select {
    width: 100%;
    max-width: none;
  }

  .liked-post-row {
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 10px;
    height: 84px;
    min-height: 84px;
    padding: 10px 4px;
  }

  .liked-post-row img {
    width: 56px;
    height: 56px;
  }

  .app-shell {
    display: block;
    min-width: 0;
  }

  .sidebar {
    position: fixed;
    inset: auto 0 0;
    z-index: 90;
    display: block;
    width: 100%;
    height: auto;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid #e6e9ef;
    backdrop-filter: blur(14px);
    transform: translateY(calc(0px - var(--mobile-viewport-bottom-offset, 0px)));
  }

  .sidebar > div:first-child {
    width: 100%;
  }

  .sidebar .logo,
  .sidebar .mini-profile,
  .sidebar .auth-card,
  .sidebar-bottom {
    display: none;
  }

  .side-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin: 0;
  }

  .nav-item {
    justify-content: center;
    min-height: 52px;
    padding: 7px 8px;
    border-radius: 14px;
    font-size: 12px;
  }

  .nav-icon {
    font-size: 20px;
  }

  .main-content {
    width: 100%;
    min-width: 0;
    padding: 0 16px calc(96px + env(safe-area-inset-bottom) + var(--mobile-viewport-bottom-offset, 0px));
  }

  .home-nearby-heading {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 20px;
  }

  .home-nearby-heading > div:first-child {
    width: 100%;
    gap: 7px;
  }

  .home-nearby-heading h2 {
    font-size: clamp(21px, 6.1vw, 26px);
    line-height: 1.35;
  }

  .home-nearby-heading p {
    font-size: 13px;
    line-height: 1.6;
  }

  .home-nearby-heading .section-heading-actions {
    width: 100%;
    justify-content: stretch;
  }

  .home-nearby-heading [data-action="home-nearby"] {
    width: 100%;
    min-height: 48px;
    padding: 11px 16px;
    color: #1767ee;
    background: linear-gradient(135deg, #edf5ff, #e3efff);
    border: 1px solid #cfe2ff;
    box-shadow: 0 6px 16px rgba(33, 104, 245, .1);
  }

  .home-nearby-heading [data-action="event-list"] {
    display: none;
  }

  .modal-overlay {
    padding: 0;
  }

  .event-modal {
    width: 100%;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
  }

  .event-modal form {
    height: 100%;
  }

  .event-modal .modal-header {
    grid-template-columns: 92px minmax(0, 1fr) 92px;
    gap: 8px;
    min-height: calc(76px + max(54px, env(safe-area-inset-top, 0px)));
    padding:
      calc(12px + max(54px, env(safe-area-inset-top, 0px)))
      max(12px, env(safe-area-inset-right))
      12px
      max(12px, env(safe-area-inset-left));
    background: rgba(255, 255, 255, 0.98);
  }

  .event-modal .modal-header h2 {
    min-width: 0;
    font-size: 21px;
    line-height: 1.25;
    white-space: nowrap;
  }

  .event-modal .modal-close-button {
    width: 50px;
    height: 50px;
    justify-self: start;
  }

  .event-modal .event-form-submit-button {
    min-width: 92px;
    min-height: 50px;
    padding: 0 12px;
    font-size: 16px;
    justify-self: end;
  }

  /* 投稿フォームは実機の表示幅を基準に収める */
  #eventModal .modal-body {
    width: 100%;
    min-width: 0;
    gap: 18px;
    overflow-x: hidden;
    padding: 18px 14px calc(32px + env(safe-area-inset-bottom));
  }

  #eventModal .postable-event-guide-toggle {
    min-height: 54px;
    padding: 10px 13px;
    font-size: 14px;
  }

  #eventModal .postable-event-guide-body {
    padding: 14px;
  }

  #eventModal .optional-input-card summary {
    flex-wrap: wrap;
    gap: 4px 8px;
    padding: 13px 14px;
  }

  #eventModal .optional-input-card summary small {
    order: 3;
    width: 100%;
    margin-left: 0;
  }

  #eventModal .optional-input-card-body {
    padding: 12px;
  }

  #eventModal .event-form-section {
    width: 100%;
    min-width: 0;
    gap: 16px;
    padding: 16px 12px;
    border-radius: 20px;
  }

  #eventModal .event-form-section-heading {
    align-items: flex-start;
    gap: 10px;
  }

  #eventModal .event-form-section-heading > span {
    flex-basis: 32px;
    width: 32px;
    height: 32px;
  }

  #eventModal .event-form-section-heading h3 {
    font-size: 18px;
    line-height: 1.35;
  }

  #eventModal .event-form-section-heading p {
    font-size: 13px;
    line-height: 1.55;
    overflow-wrap: anywhere;
  }

  #eventModal .image-upload-box {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
    border-width: 3px;
    border-radius: 22px;
  }

  #eventModal .upload-placeholder {
    width: 100%;
    gap: 6px;
    padding: 20px 16px;
    font-size: 16px;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }

  #eventModal .upload-placeholder strong {
    font-size: 48px;
  }

  #eventModal .upload-placeholder small {
    font-size: 13px;
    line-height: 1.45;
  }

  #eventModal .form-field {
    min-width: 0;
    gap: 8px;
  }

  #eventModal .form-field > span {
    font-size: 16px;
    line-height: 1.45;
  }

  #eventModal .form-field input,
  #eventModal .form-field select {
    min-height: 54px;
    padding: 0 16px;
    border-radius: 17px;
    font-size: 16px;
  }

  #eventModal .form-field textarea {
    min-height: 112px;
    padding: 16px;
    border-radius: 17px;
    font-size: 16px;
  }

  #eventModal .field-counter {
    font-size: 12px;
  }

  #eventModal .event-place-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  #eventModal .event-place-actions button {
    width: 100%;
    min-height: 48px;
  }

  #eventModal #eventLocationPickerMap {
    height: 260px;
  }

  .social-modal .modal-header {
    grid-template-columns: 52px minmax(0, 1fr) 52px;
    gap: 6px;
    min-height: 72px;
    padding: 10px 12px;
  }

  .social-modal .modal-header h2 {
    overflow: hidden;
    font-size: 20px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .social-modal .modal-close-button {
    width: 46px;
    height: 46px;
  }

  .auth-modal .modal-header {
    position: sticky;
    top: 0;
    z-index: 2;
    grid-template-columns: 52px minmax(0, 1fr) 52px;
    gap: 6px;
    min-height: calc(72px + env(safe-area-inset-top));
    padding: calc(10px + env(safe-area-inset-top)) 12px 10px;
    background:
      radial-gradient(circle at 86% 12%, rgba(255, 177, 85, 0.2), transparent 30%),
      linear-gradient(135deg, #fff8ec, #fffdf9 58%, #fff1df);
  }

  .auth-modal .modal-header h2 {
    font-size: 22px;
    white-space: nowrap;
  }

  .auth-modal .modal-close-button {
    width: 46px;
    height: 46px;
  }

  #authModal {
    align-items: center;
    justify-items: center;
    padding: 12px;
    overflow: auto;
  }

  .auth-modal {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: 100%;
    max-width: 520px;
    height: auto;
    max-height: calc(100dvh - 24px);
    overflow: hidden;
    border-radius: 24px;
  }

  .auth-modal-body {
    min-height: 0;
    padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  #authModal .auth-modal-body > * {
    width: 100%;
    max-width: 100%;
  }

  #authModal .auth-form {
    width: 100%;
    max-width: 100%;
  }

  #authModal .auth-form > * {
    width: 100%;
    max-width: 100%;
  }

  .auth-brand-intro {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 12px;
    padding: 12px 14px;
  }

  .auth-brand-mark {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }

  .event-detail-modal .modal-header {
    grid-template-columns: 52px minmax(0, 1fr) 52px;
    gap: 6px;
    min-height: 80px;
    padding: 10px 12px;
  }

  .event-detail-modal .modal-header h2 {
    display: -webkit-box;
    overflow: hidden;
    font-size: 18px;
    line-height: 1.35;
    overflow-wrap: anywhere;
    text-wrap: balance;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .event-detail-modal .modal-close-button {
    width: 46px;
    height: 46px;
  }

  /*
   * iPhoneのSafari・ホーム画面表示でステータスバーと重ならないように、
   * 主要モーダルの閉じるボタンとタイトルを同じ基準線に揃える。
   * iPhoneのsafe-area実測値から30px引き、最低8pxの余白は確保する。
   */
  .event-modal .modal-header,
  .event-detail-modal .modal-header,
  .social-modal.is-achievement-collection .social-modal-header,
  .social-modal.is-badge-collection .social-modal-header {
    min-height: calc(72px + max(8px, calc(env(safe-area-inset-top, 0px) - 30px)));
    padding-top: calc(8px + max(8px, calc(env(safe-area-inset-top, 0px) - 30px)));
    padding-bottom: 8px;
  }

  .event-draft-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .event-draft-toolbar button {
    align-self: flex-start;
  }

  .app-toast {
    top: calc(10px + env(safe-area-inset-top));
    right: 12px;
    left: 12px;
    width: auto;
    min-height: 72px;
    padding: 11px 14px 11px 12px;
    border-radius: 18px;
  }

  .app-toast-icon {
    width: 40px;
    height: 40px;
  }

  .app-toast-copy strong {
    font-size: 13px;
  }

  .hero {
    position: relative;
    min-height: 470px;
    margin: 0 -16px;
    padding: calc(38px + env(safe-area-inset-top)) 28px 104px;
    overflow: hidden;
    background:
      radial-gradient(circle at 82% 8%, rgba(255, 220, 145, 0.34), transparent 27%),
      radial-gradient(circle at 12% 86%, rgba(143, 19, 0, 0.24), transparent 36%),
      linear-gradient(145deg, #d93600 0%, #ff4b00 52%, #ff7618 100%);
    isolation: isolate;
  }

  .hero::before {
    position: absolute;
    top: -92px;
    right: -94px;
    z-index: -1;
    width: 220px;
    height: 220px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 50%;
    box-shadow:
      0 0 0 30px rgba(255, 255, 255, 0.055),
      0 0 0 62px rgba(255, 255, 255, 0.035);
    content: "";
  }

  .hero::after {
    position: absolute;
    right: -8px;
    bottom: 16px;
    z-index: -1;
    color: rgba(255, 255, 255, 0.075);
    font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
    font-size: 150px;
    font-weight: 900;
    line-height: 1;
    content: "祭";
    transform: rotate(-7deg);
  }

  .hero-text {
    position: relative;
    z-index: 1;
  }

  .hero-text::before {
    display: none;
    margin-bottom: 12px;
    padding: 5px 10px;
    color: #fff3dc;
    background: rgba(113, 25, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.14em;
    content: "MATSUMARI TODAY";
    backdrop-filter: blur(5px);
  }

  .hero-platform-label {
    max-width: calc(100% - 64px);
    font-size: 10px;
    letter-spacing: 0.06em;
  }

  .hero-text h1 {
    max-width: calc(100% - 64px);
    margin-top: 12px;
    overflow-wrap: anywhere;
    font-size: clamp(44px, 13vw, 56px);
    line-height: 1.08;
    letter-spacing: 0.08em;
    text-shadow: 0 6px 18px rgba(91, 19, 0, 0.34), 2px 2px 0 rgba(120, 24, 0, 0.16);
  }

  .hero-mission-copy {
    max-width: 290px;
    margin-top: 18px !important;
    color: rgba(255, 255, 255, 0.92);
    font-size: 15px;
    line-height: 1.7;
  }

  .hero-welcome {
    max-width: 290px;
    margin-top: 18px;
    padding: 9px 11px;
  }

  .hero-welcome > strong {
    font-size: 14px;
  }

  .hero-auth-copy {
    font-size: 10px;
  }

  .hero-avatar-button {
    position: absolute;
    top: calc(38px + env(safe-area-inset-top));
    right: 21px;
    z-index: 2;
    display: grid;
    width: 66px;
    height: 66px;
    place-items: center;
    padding: 4px;
  }

  .hero-avatar {
    position: static;
    width: 58px;
    height: 58px;
    border: 4px solid rgba(255, 243, 225, 0.92);
    box-shadow: 0 8px 22px rgba(89, 20, 0, 0.28), 0 0 0 5px rgba(255, 255, 255, 0.1);
  }

  .hero-avatar-button:hover {
    transform: none;
  }

  .post-panel {
    margin: -72px 4px 30px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(255, 205, 169, 0.72);
    border-radius: 24px;
    box-shadow: 0 18px 42px rgba(92, 39, 7, 0.16);
    backdrop-filter: blur(14px);
  }

  .post-panel::before {
    display: block;
    margin: 2px 2px 11px;
    color: #8b5b3d;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.06em;
    content: "さあ、まつまりを楽しもう";
  }

  .big-post-button {
    min-height: 74px;
    background: linear-gradient(135deg, #ff6418, #ed3d00);
    border-radius: 18px;
    font-size: 20px;
    box-shadow: 0 10px 24px rgba(225, 59, 0, 0.24);
  }

  .post-options {
    display: grid;
    gap: 10px;
    margin-top: 11px;
  }

  .post-options button {
    min-height: 82px;
    padding: 11px 8px;
    border: 1px solid #ffe0b7;
    border-radius: 16px;
    font-size: 13px;
    line-height: 1.35;
  }

  .post-options button:last-child {
    border-color: #d7e6ff;
  }

  .post-options span {
    margin-bottom: 4px;
    font-size: 24px;
  }

  .about-intro-card {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    margin: 0 4px 28px;
    padding: 17px;
    border-radius: 20px;
  }

  .about-intro-icon {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    font-size: 24px;
  }

  .about-intro-copy h2 {
    font-size: 18px;
  }

  .about-intro-card > a {
    grid-column: 1 / -1;
    justify-content: center;
    width: 100%;
  }

  .mypage-onboarding h2 { font-size:clamp(23px,10cqw,34px); }

  .mypage-onboarding {
    min-height: auto;
    padding: 22px;
  }

  .onboarding-hero-copy { padding: 24px 20px; border-radius: 22px; }
  .onboarding-kicker { max-width: 100%; min-height: 34px; padding: 0 10px; font-size: clamp(10px, 3.15vw, 12px); letter-spacing: -0.02em; white-space: nowrap; }

  .mypage-onboarding p {
    font-size: 16px;
  }

  .onboarding-benefit-strip { display: grid; }
  .onboarding-benefit-strip span { justify-content: flex-start; width: 100%; }
  .onboarding-auth-actions { display: grid; }
  .onboarding-cta,
  .onboarding-login-link { width: 100%; }
  .onboarding-cta-note { margin-left: 0; text-align: center; line-height: 1.6; }

  .onboarding-preview {
    min-height: auto;
    padding: 22px 14px;
  }

  .preview-medal i {
    width: 60px;
    height: 60px;
  }

  .preview-growth {
    font-size: 10px;
  }

  .onboarding-feature-grid {
    grid-template-columns: 1fr;
  }

  .onboarding-flow {
    display: grid;
  }

  .onboarding-flow strong {
    display: none;
  }

  .profile-edit-panel {
    padding: 19px 16px;
  }

  .mypage-profile {
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 14px;
    padding-top: 54px;
    padding-right: 0;
  }

  .mypage-hero {
    padding: 20px 18px;
  }

  .mypage-profile .avatar-edit-button {
    width: 90px;
    height: 90px;
  }

  .mypage-profile .avatar-edit-button img {
    width: 84px;
    height: 84px;
    border-width: 4px;
  }

  .mypage-profile-heading {
    margin-bottom: 6px;
  }

  .mypage-profile .profile-social-counts {
    flex-wrap: nowrap;
    gap: 8px;
    margin: 6px 0 10px;
    font-size: 12px;
  }

  .mypage-profile .profile-social-counts button {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    white-space: nowrap;
  }

  .mypage-profile .profile-social-counts strong {
    font-size: 15px;
  }

  .mypage-mobile-point-balance {
    margin-bottom: 16px;
  }

  .settings-button {
    top: 18px;
    right: 18px;
  }

  .profile-edit-grid {
    grid-template-columns: 1fr;
  }

  .profile-edit-avatar-card {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    justify-items: start;
  }

  .profile-edit-avatar-card > .profile-field-label,
  .profile-edit-avatar-card > small {
    grid-column: 2;
    text-align: left;
  }

  .profile-edit-avatar-preview {
    grid-row: 1 / span 2;
    width: 92px;
    height: 92px;
  }

  .profile-edit-avatar-preview > span {
    right: 3px;
    bottom: 4px;
    left: 3px;
    min-height: 27px;
    font-size: 9px;
  }

  .profile-title-setting {
    grid-template-columns: 1fr;
  }

  .profile-title-change-button {
    justify-self: start;
  }

  .profile-edit-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .profile-edit-actions button {
    min-width: 0;
  }

  .account-security-list > div {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .account-session-actions {
    grid-template-columns: 1fr;
  }

  .account-logout-button {
    justify-content: center;
    width: 100%;
  }

  .account-password-button {
    justify-self: stretch;
  }

  .mypage-posts-section {
    padding: 20px 16px;
  }

  .mypage-posts-section .section-heading {
    align-items: flex-start;
    gap: 12px;
  }

  .mypage-post-main {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 10px;
  }

  .mypage-post-main img {
    width: 64px;
    height: 52px;
  }

  .mypage-post-title-line {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .mypage-post-menu-button {
    width: 38px;
    height: 38px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .schedule-panel {
    padding: 14px;
    border-radius: 20px;
  }

  #eventModal .schedule-panel {
    min-width: 0;
    gap: 14px;
    padding: 12px;
    border-radius: 18px;
  }

  .schedule-panel-heading,
  .schedule-item-heading {
    align-items: stretch;
  }

  #eventModal .schedule-panel-heading {
    align-items: center;
    gap: 8px;
  }

  #eventModal .schedule-panel-heading span,
  #eventModal .schedule-item-heading strong {
    font-size: 16px;
  }

  #eventModal .schedule-panel-heading button,
  #eventModal .schedule-item-heading button {
    min-height: 40px;
    padding: 0 12px;
    font-size: 13px;
  }

  #eventModal .schedule-panel-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .schedule-mode-switch span {
    min-height: 44px;
    padding: 5px 4px;
    font-size: 12px;
  }

  #eventModal .schedule-item {
    min-width: 0;
    gap: 12px;
    padding: 12px;
    border-radius: 16px;
  }

  .schedule-date-row,
  .schedule-time-row {
    grid-template-columns: 1fr;
  }

  .time-range-separator {
    min-height: auto;
    margin: -5px 0;
    font-size: 24px;
  }

  .date-shortcuts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #eventModal .date-field > span,
  #eventModal .time-field > span {
    font-size: 16px;
  }

  #eventModal .time-selects {
    gap: 6px;
  }

  #eventModal .date-field input,
  #eventModal .date-field select,
  #eventModal .time-field input,
  #eventModal .time-field select {
    min-height: 52px;
    padding: 0 8px;
    border-radius: 15px;
    font-size: 16px;
  }

  #eventModal .time-selects span {
    font-size: 18px;
  }

  .date-shortcuts button {
    min-height: 48px;
    padding: 0 10px;
    font-size: 14px;
  }

  .page-header {
    margin: 0 -16px 24px;
    padding: 28px 16px 22px;
  }

  .discover-filters {
    grid-template-columns: 1fr;
  }

  .discover-mobile-filter-bar {
    display: flex;
    justify-content: flex-end;
  }

  .discover-mobile-filter-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 52px;
    padding: 10px 16px;
    color: #d83e00;
    background: #fff4ed;
    border: 1px solid #ffc5a5;
    border-radius: 15px;
    font-weight: 900;
  }

  .discover-mobile-filter-button > span {
    font-size: 21px;
    line-height: 1;
  }

  .discover-mobile-filter-button > b {
    display: inline-grid;
    min-width: 24px;
    height: 24px;
    place-items: center;
    padding: 0 7px;
    color: #fff;
    background: #fb4b08;
    border-radius: 999px;
    font-size: 12px;
  }

  .discover-mobile-filter-button > b.hidden {
    display: none;
  }

  .discover-filter-backdrop {
    position: fixed;
    inset: 0;
    z-index: 139;
    display: block;
    visibility: hidden;
    background: rgba(15, 20, 29, 0.48);
    opacity: 0;
    transition: opacity 180ms ease, visibility 180ms ease;
  }

  .discover-filter-backdrop.is-open {
    visibility: visible;
    opacity: 1;
  }

  .discover-filter-panel {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 140;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    max-height: min(88dvh, 760px);
    overflow: hidden;
    background: #fff;
    border-radius: 26px 26px 0 0;
    box-shadow: 0 -22px 60px rgba(15, 20, 29, 0.24);
    pointer-events: none;
    transform: translateY(105%);
    transition: transform 220ms cubic-bezier(0.22, 0.8, 0.3, 1);
  }

  .discover-filter-panel.is-open {
    pointer-events: auto;
    transform: translateY(calc(0px - var(--mobile-viewport-bottom-offset, 0px)));
  }

  .discover-filter-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px 13px;
    border-bottom: 1px solid #edf0f4;
  }

  .discover-filter-sheet-header > div {
    display: grid;
    gap: 1px;
  }

  .discover-filter-sheet-header span {
    color: #fb4b08;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.12em;
  }

  .discover-filter-sheet-header h3 {
    margin: 0;
    font-size: 19px;
  }

  .discover-filter-sheet-header button {
    display: grid;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    place-items: center;
    padding: 0;
    color: #596476;
    background: #f2f4f7;
    border: 0;
    border-radius: 50%;
    font-size: 24px;
  }

  .discover-filter-sheet-content {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 18px;
    -webkit-overflow-scrolling: touch;
  }

  .discover-filter-sheet-content .discover-filters {
    gap: 18px;
  }

  .discover-filter-panel .discover-filters label,
  .discover-filter-panel .filter-select-grid label {
    gap: 9px;
    font-size: 14px;
  }

  .discover-filter-panel select {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .mobile-filter-option-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .mobile-filter-option-button {
    min-height: 42px;
    padding: 8px 13px;
    color: #495467;
    background: #f5f7fa;
    border: 1px solid #dfe4ec;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 850;
  }

  .mobile-filter-option-button.is-selected {
    color: #fff;
    background: #fb4b08;
    border-color: #fb4b08;
    box-shadow: 0 6px 14px rgba(251, 75, 8, 0.2);
  }

  .discover-filter-panel .discover-advanced-filters {
    margin-top: 22px;
    overflow: visible;
    border: 0;
    border-radius: 0;
  }

  .discover-filter-panel .discover-advanced-filters > summary {
    display: none;
  }

  .discover-filter-panel .discover-advanced-filter-body {
    display: grid;
    gap: 22px;
    padding: 20px 0 0;
    border-top: 1px solid #edf0f4;
  }

  .discover-filter-panel .discover-advanced-filter-body::before {
    color: #1f2937;
    font-size: 16px;
    font-weight: 900;
    content: "タグ・詳しい条件";
  }

  .discover-filter-panel .filter-check-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .discover-filter-sheet-footer {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.35fr);
    gap: 10px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.97);
    border-top: 1px solid #e7eaf0;
  }

  .discover-filter-sheet-footer button {
    min-height: 50px;
    border: 0;
    border-radius: 15px;
    font-size: 14px;
    font-weight: 900;
  }

  .discover-filter-reset-button {
    color: #5d6879;
    background: #f0f2f5;
  }

  .discover-filter-apply-button {
    color: #fff;
    background: #fb4b08;
    box-shadow: 0 9px 20px rgba(251, 75, 8, 0.22);
  }

  body.discover-filter-sheet-open {
    overflow: hidden;
  }

  .location-search-actions {
    grid-template-columns: 1fr 1fr;
  }

  .place-autocomplete-host {
    grid-column: 1 / -1;
  }

  .discover-map-panel {
    height: 52vh;
    border-radius: 16px;
  }

  .report-grid {
    grid-auto-columns: minmax(250px, 84vw);
  }

  /* iOS Safariでもカード幅を基準にタイトルを中央へ揃える */
  .report-card .report-body {
    width: 100%;
    min-width: 0;
  }

  .report-card .report-title {
    display: grid;
    width: 100%;
    justify-items: center;
    text-align: center !important;
  }

  .report-card .report-title > span {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: calc(1.55em * 3);
    margin-inline: auto;
    overflow: hidden;
    overflow-wrap: anywhere;
    text-align: center !important;
    -webkit-box-orient: initial;
    -webkit-line-clamp: initial;
  }

  .event-detail-author-row {
    align-items: flex-start;
  }

  .event-detail-author-row .event-author-profile {
    flex: 1 1 auto;
    overflow: hidden;
  }

  .event-detail-author-row .event-author-profile > div {
    min-width: 0;
  }

  .event-detail-author-row .event-author-profile strong {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .event-detail-author-actions {
    display: grid;
    grid-template-columns: minmax(80px, 1fr) 44px;
    align-items: center;
    gap: 8px;
  }

  .event-detail-author-actions .follow-button {
    grid-column: 1 / -1;
  }

  .event-detail-author-actions .follow-button,
  .event-detail-author-actions .like-button {
    min-width: 92px;
  }

  .event-detail-author-actions .event-more-actions {
    grid-column: 2;
    justify-self: end;
  }

  .event-detail-facts {
    grid-template-columns: 1fr;
  }

  .event-detail-facts.has-collapsible-schedule .event-detail-schedule-row.is-mobile-extra {
    display: none;
  }

  .event-detail-facts.has-collapsible-schedule .event-detail-schedule.is-expanded .event-detail-schedule-row.is-mobile-extra {
    display: grid;
  }

  .event-detail-facts.has-collapsible-schedule .event-detail-schedule-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    min-height: 46px;
    margin-top: 8px;
    padding: 9px 14px;
    color: #d83e00;
    background: #fff1e9;
    border: 1px solid #ffc9ae;
    border-radius: 13px;
    font-size: 14px;
    font-weight: 900;
  }

  .event-detail-schedule-toggle span {
    font-size: 18px;
    line-height: 1;
  }

  .event-detail-modal {
    width: 100%;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
  }

  .event-detail-body {
    padding: 18px 16px 32px;
  }

  .comment-form-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .comment-submit-button {
    width: 100%;
    min-height: 48px;
  }

  .event-comments-section.is-empty .comment-form {
    grid-template-columns: 1fr;
  }

  .event-comments-section.is-empty .comment-form-footer {
    align-items: center;
    flex-direction: row;
  }

  .event-comments-section.is-empty .comment-submit-button {
    width: auto;
    min-height: 44px;
  }

  .comment-card {
    grid-template-columns: 40px minmax(0, 1fr);
    padding: 13px;
  }

  .comment-avatar {
    width: 40px;
    height: 40px;
  }

  .comment-avatar-button {
    width: 40px;
    height: 40px;
  }

  .comment-card-actions {
    flex-wrap: wrap;
  }

  .comment-edit-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .comment-edit-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .comment-edit-cancel-button,
  .comment-edit-save-button {
    min-height: 46px;
  }

  .comment-replies {
    padding-left: 8px;
  }

  .comment-card.is-reply {
    grid-template-columns: 32px minmax(0, 1fr);
    padding: 10px;
  }

  .comment-card.is-reply .comment-avatar,
  .comment-card.is-reply .comment-avatar-button {
    width: 32px;
    height: 32px;
  }

  .comment-reply-form-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .comment-reply-form-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .comment-reply-cancel-button,
  .comment-reply-submit-button {
    min-height: 44px;
  }

}
.auth-legal-note {
  margin: 14px 0 0;
  color: #7c8799;
  font-size: 12px;
  line-height: 1.7;
  text-align: center;
}
.auth-legal-note a { color:#b63e10; font-weight:800; }

.legal-consent-overlay { z-index: 1200; align-items:center; justify-content:center; padding:20px; }
.legal-consent-overlay.is-open { display:flex; }
.legal-consent-modal {
  width:min(560px, 100%);
  max-height:min(760px, calc(100dvh - 40px));
  overflow:auto;
  padding:clamp(28px, 6vw, 52px);
  border:1px solid #efb96d;
  border-radius:32px;
  background:linear-gradient(160deg,#fffdf8,#fff4df);
  box-shadow:0 28px 80px rgba(32,23,15,.3);
  color:#1c2432;
  text-align:center;
}
.legal-consent-mark { display:grid; place-items:center; width:72px; height:72px; margin:0 auto 16px; border-radius:50%; background:#ffecd0; color:#d7470a; font-size:30px; font-weight:900; }
.legal-consent-kicker { margin:0 0 8px; color:#bd480f; font-size:12px; font-weight:900; letter-spacing:.16em; }
.legal-consent-modal h2 { margin:0 0 18px; font-size:clamp(24px,5vw,34px); }
.legal-consent-modal > p:not(.legal-consent-kicker,.legal-consent-version,.legal-consent-message) { margin:0; color:#69758a; font-weight:700; line-height:1.85; }
.legal-consent-links { display:grid; gap:10px; margin:26px 0 14px; }
.legal-consent-links a { padding:14px; border:1px solid #efc792; border-radius:16px; background:#fff; color:#b63e10; font-weight:900; text-decoration:none; }
.legal-consent-check { display:flex; align-items:center; gap:12px; margin:0 4px 4px; padding:2px 4px; color:#465268; font-size:14px; font-weight:800; line-height:1.5; text-align:left; cursor:pointer; }
.legal-consent-check input { flex:0 0 auto; width:22px; height:22px; margin:0; accent-color:#ff4b0b; cursor:pointer; }
.legal-consent-version { margin:10px 0 20px; color:#8791a2; font-size:12px; }
.legal-consent-message { min-height:1.4em; margin:0 0 10px; color:#b42318; font-weight:800; }
.legal-consent-accept,.legal-consent-logout { width:100%; border:0; border-radius:17px; font:inherit; font-weight:900; cursor:pointer; }
.legal-consent-accept { padding:17px; background:#ff4b0b; color:#fff; box-shadow:0 12px 28px rgba(255,75,11,.2); }
.legal-consent-logout { margin-top:10px; padding:13px; background:transparent; color:#657084; }
.legal-consent-accept:disabled { opacity:.42; box-shadow:none; cursor:not-allowed; }
.legal-consent-logout:disabled { opacity:.55; cursor:wait; }

.mypage-secondary-settings { margin:18px 4px 0; }
.mypage-secondary-settings details { color:#81786f; }
.mypage-secondary-settings summary { width:max-content;margin-left:auto;padding:7px 2px;color:#887b71;cursor:pointer;font-size:12px;font-weight:800;list-style:none; }
.mypage-secondary-settings summary::-webkit-details-marker { display:none; }
.mypage-secondary-settings summary::after { display:inline-block;margin-left:7px;content:"⌄";transition:transform .18s ease; }
.mypage-secondary-settings details[open] summary::after { transform:rotate(180deg); }
.mypage-secondary-settings summary:hover { color:#b5532d; }
.mypage-secondary-settings-body { display:flex;align-items:center;justify-content:flex-end;gap:14px;margin-top:4px;padding:13px 15px;background:rgba(255,250,244,.7);border:1px solid #eadbcf;border-radius:13px; }
.mypage-secondary-settings-body p { margin:0;color:#91867d;font-size:11px;font-weight:700;line-height:1.6; }
.account-delete-link { flex:0 0 auto;padding:6px 2px;color:#8e6e60;background:transparent;border:0;border-bottom:1px solid #cbb3a6;font:inherit;font-size:11px;font-weight:800;cursor:pointer; }
.account-delete-link:hover,.account-delete-link:focus-visible { color:#a9382d;border-bottom-color:#a9382d; }
.withdrawal-confirmation { display:grid; gap:18px; color:#1c2432; }
.withdrawal-summary { padding:16px; border-radius:16px; background:#fff3f1; color:#7a271a; line-height:1.8; }
.withdrawal-check { display:flex; align-items:flex-start; gap:10px; font-weight:800; line-height:1.6; }
.withdrawal-check input { width:20px; height:20px; margin-top:2px; accent-color:#c43224; }
.withdrawal-confirmation-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.withdrawal-confirmation-actions button { padding:14px; border:1px solid #dce2ea; border-radius:14px; background:#fff; font:inherit; font-weight:900; }
.withdrawal-confirmation-actions .is-danger { border-color:#c43224; background:#c43224; color:#fff; }

.event-information-notice { margin-top:22px; padding:16px 18px; border:1px solid #f0d0a5; border-radius:16px; background:#fffaf1; color:#687286; font-size:13px; font-weight:700; line-height:1.75; }
.event-information-notice strong { color:#a83c10; }
.event-information-notice a { color:#a83c10; font-weight:900; }
.mypage-legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  margin-top: 24px;
  padding: 22px 18px calc(24px + env(safe-area-inset-bottom));
  color: #7d8797;
  font-size: 14px;
}

.mypage-legal-links a {
  color: inherit;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.mypage-legal-links a:hover,
.mypage-legal-links a:focus-visible {
  color: #e64208;
}

@media (max-width: 700px) {
  .legal-consent-overlay { align-items:center; justify-content:center; padding:12px; }
  .legal-consent-modal { max-height:calc(100dvh - 24px); padding:28px 20px calc(24px + env(safe-area-inset-bottom)); border-radius:28px; }
  .mypage-secondary-settings { margin-right:2px;margin-left:2px; }
  .mypage-secondary-settings-body { align-items:flex-start;flex-direction:column; }
  .withdrawal-confirmation-actions { grid-template-columns:1fr; }
  .mypage-legal-links { padding-bottom:calc(92px + env(safe-area-inset-bottom)); }
  .comment-login-card { grid-template-columns:auto minmax(0,1fr); padding:14px; }
  .comment-login-card button { grid-column:1 / -1; width:100%; }
}

/* スマホではプロフィールカード上端の左右に操作を分けます。 */
@media (max-width: 1024px) {
  .app-notification-button {
    top: calc(18px + env(safe-area-inset-top));
    right: 18px;
    width: 50px;
    height: 50px;
  }

  body[data-active-page="mypage"] .app-notification-button {
    top: 18px;
    right: 18px;
  }

  body[data-active-page="mypage"] .settings-button {
    top: 18px;
    right: auto;
    left: 18px;
  }

  .nav-item.has-unread-notifications::before {
    top: 9px;
    right: max(18px, calc(50% - 35px));
    width: 9px;
    height: 9px;
    transform: none;
  }
}

@media (max-width: 560px) {
  .social-modal.is-notification-center {
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
  }

  .social-modal.is-notification-center .social-modal-body {
    padding: 14px 12px max(22px, env(safe-area-inset-bottom));
  }

  .notification-center-summary {
    align-items: start;
    flex-direction: column;
    gap: 10px;
    padding: 2px 4px 4px;
  }

  .notification-center-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .web-push-settings {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px;
  }

  .web-push-toggle-button {
    width: 100%;
  }

  .web-push-settings.has-mobile-choices > .web-push-toggle-button {
    display: none;
  }

  .web-push-mobile-choices {
    display: grid;
    gap: 10px;
    padding-top: 2px;
  }

  .web-push-mobile-choices > strong {
    color: #68564b;
    font-size: 12px;
    text-align: center;
  }

  .web-push-mobile-choices > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .web-push-mobile-choices button {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 88px;
    padding: 11px 8px;
    place-items: center;
    align-content: center;
    gap: 5px;
    color: #4d3b31;
    background: #fffaf4;
    border: 1px solid #edcfb5;
    border-radius: 15px;
    font: inherit;
    cursor: pointer;
  }

  .web-push-mobile-choices button > span:first-child {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    color: #e65014;
    background: #ffe9d4;
    border-radius: 50%;
    font-size: 17px;
    font-weight: 950;
  }

  .web-push-mobile-choices button > span:last-child {
    display: grid;
    min-width: 0;
    gap: 2px;
  }

  .web-push-mobile-choices b {
    font-size: 11px;
    line-height: 1.35;
  }

  .web-push-mobile-choices small {
    color: #8a7669;
    font-size: 8px;
    font-weight: 750;
    line-height: 1.35;
  }

  .web-push-mobile-choices em {
    position: absolute;
    top: 7px;
    right: 7px;
    padding: 2px 6px;
    color: #fff;
    background: #ec5318;
    border-radius: 999px;
    font-size: 7px;
    font-style: normal;
    font-weight: 900;
    line-height: 1.4;
  }

  .notification-center-item {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    padding: 13px 11px;
  }

  .notification-center-icon {
    width: 40px;
    height: 40px;
  }

  .notification-center-copy strong {
    font-size: 13px;
  }

  .notification-new-mark {
    grid-column: 2;
    justify-self: start;
  }

  .notification-center-arrow {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
}

/* iPhoneのホーム画面アプリでは画面がステータスバーの背後まで広がるため、
   通知モーダル全体をセーフエリアより下に収める。 */
@media (display-mode: standalone) and (max-width: 560px) {
  #socialModal:has(.social-modal.is-notification-center) {
    align-items: start;
    padding:
      max(54px, calc(env(safe-area-inset-top, 0px) + 8px))
      12px
      max(12px, env(safe-area-inset-bottom, 0px));
  }

  .social-modal.is-notification-center {
    width: 100%;
    max-height: calc(
      100dvh
      - max(54px, calc(env(safe-area-inset-top, 0px) + 8px))
      - max(12px, env(safe-area-inset-bottom, 0px))
    );
  }
}