@import "tailwindcss";

/* ===========================================
   Components
   =========================================== */

/* Server Mini Card */
.server-mini-card {
  @apply flex items-center gap-3 rounded-lg px-4 py-3 max-w-[700px] mx-auto mb-4 no-underline text-inherit transition-all;
  background: var(--color-bg-light);
  box-shadow: var(--shadow-card);
}

.server-mini-card:hover {
  @apply shadow-md;
}

.server-mini-card__icon {
  @apply w-12 h-12 rounded-md overflow-hidden shrink-0 flex items-center justify-center;
  background: var(--color-bg-card);
}

.server-mini-card__icon img {
  @apply w-full h-full object-cover;
}

.server-mini-card__icon-default {
  @apply text-2xl;
}

.server-mini-card__info {
  @apply flex-1 min-w-0;
}

.server-mini-card__name {
  @apply block text-base font-semibold mb-0.5;
  color: var(--color-text);
}

.server-mini-card__meta {
  @apply flex items-center gap-1.5 text-sm;
  color: var(--color-text-muted);
}

.server-mini-card__status-dot {
  @apply w-2 h-2 rounded-full;
}

.server-mini-card__status-dot--online {
  @apply bg-emerald-500;
}

.server-mini-card__status-dot--offline {
  background: var(--color-text-muted);
}

.server-mini-card__arrow {
  @apply text-lg;
  color: var(--color-text-muted);
}


/* ===========================================
   Static Pages
   =========================================== */

/* Static Page Layout */
.static-page {
  @apply py-12 min-h-screen;
}

.static-page__header {
  @apply mb-10 text-center;
}

.static-page__title {
  @apply text-2xl font-bold mb-2;
  color: var(--color-text);
}

.static-page__updated {
  @apply text-sm;
  color: var(--color-text-muted);
}

.static-page__description {
  @apply mt-2;
  color: var(--color-text-muted);
}

/* 1カラムの読み物はコラム記事詳細と同じ幅に揃える（行長を読みやすい範囲に保つ） */
.static-page__content {
  @apply rounded-xl p-8 max-w-3xl mx-auto;
  background: var(--color-bg-light);
  box-shadow: var(--shadow-card);
}

.static-page__section {
  @apply mb-8 last:mb-0;
}

.static-page__section h2 {
  @apply text-xl font-bold mb-4 pb-2;
  color: var(--color-text);
}

.static-page__section h3 {
  @apply text-lg font-semibold mt-4 mb-2;
  color: var(--color-text);
}

.static-page__section p {
  @apply leading-relaxed mb-3;
  color: var(--color-text-muted);
}

.static-page__section ul,
.static-page__section ol {
  @apply pl-6 mb-3 space-y-1;
  color: var(--color-text-muted);
}

.static-page__section ul {
  @apply list-disc;
}

.static-page__section ol {
  @apply list-decimal;
}

.static-page__section a {
  @apply underline;
  color: var(--color-primary);
}

.static-page__section a:hover {
  opacity: 0.8;
}

.static-page__footer {
  @apply mt-8 text-center;
}

/* Contact Methods */
.contact-methods {
  @apply grid gap-6 md:grid-cols-3 mt-6;
}

.contact-method {
  @apply rounded-lg p-6 text-center break-all;
  background: var(--color-bg-card);
}

.contact-method__icon {
  @apply text-4xl mb-3;
}

.contact-method__title {
  @apply text-lg font-semibold mb-2;
  color: var(--color-text);
}

.contact-method__description {
  @apply text-sm mb-4;
  color: var(--color-text-muted);
}

.contact-method__link {
  @apply inline-block text-emerald-400 hover:text-emerald-300 font-medium;
}

/* FAQ */
.faq-list {
  @apply space-y-3 mt-4 grid gap-2;
}

.faq-item {
  @apply rounded-lg overflow-hidden;
  background: var(--color-bg-card);
}

.faq-item__question {
  @apply px-5 py-4 cursor-pointer font-medium transition-colors;
  color: var(--color-text);
}

.faq-item__question:hover {
  background: var(--color-border);
}

.faq-item__answer {
  @apply px-5 pb-4;
  color: var(--color-text-muted);
}

.faq-item__answer p {
  @apply mb-0;
}


/* External Service Table (外部送信規律) */
.external-service-table {
  @apply overflow-x-auto mt-4;
}

.external-service-table table {
  @apply w-full text-sm border-collapse;
}

.external-service-table th,
.external-service-table td {
  @apply px-3 py-2 text-left;
  border: 1px solid var(--color-border);
}

.external-service-table th {
  @apply text-left px-3 py-2 font-semibold;
  background: var(--color-bg-card);
  color: var(--color-text);
}

.external-service-table td {
  @apply px-3 py-2;
  background: var(--color-bg-light);
  color: var(--color-text-muted);
}

.external-service-table a {
  @apply text-emerald-400 hover:text-emerald-300;
}


/* ===========================================
   Vote Section
   =========================================== */

/* Vote Status */
.vote-status {
  @apply py-3 px-4 rounded-lg;
  background: var(--color-bg-card);
}

.vote-status__message {
  @apply font-semibold text-base mb-1;
  color: var(--color-primary);
}

.vote-status__next-time {
  @apply text-sm;
  color: var(--color-text-muted);
}

/* Vote Account Picker（Java版・統合版の両方を連携しているときの投票アカウント選択） */
.vote-account-picker__label {
  @apply text-xs font-semibold mb-2;
  color: var(--color-text-muted);
}

.vote-account-picker__options {
  @apply flex flex-col gap-2 mb-3;
}

.vote-account-picker__option {
  @apply flex items-center gap-3 rounded-lg px-3 py-2 cursor-pointer transition-colors;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
}

.vote-account-picker__option:has(.vote-account-picker__input:checked) {
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}

.vote-account-picker__option:has(.vote-account-picker__input:focus-visible) {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.vote-account-picker__input {
  @apply w-4 h-4 shrink-0;
  accent-color: var(--color-primary);
}

.vote-account-picker__icon {
  @apply text-lg shrink-0;
}

.vote-account-picker__body {
  @apply flex flex-col min-w-0;
}

.vote-account-picker__name {
  @apply text-sm font-semibold truncate;
  color: var(--color-text);
}

.vote-account-picker__edition {
  @apply text-xs;
  color: var(--color-text-muted);
}

/* Vote Notice */
.vote-notice {
  @apply text-sm;
  color: var(--color-text-muted);
}

/* Recent Voters */
.recent-voters {
  @apply mt-3 pt-3;
}

.recent-voters__label {
  @apply block text-sm mb-2;
  color: var(--color-text-muted);
}

.recent-voters__avatars {
  @apply flex flex-wrap gap-1.5;
}

.recent-voters__avatar {
  @apply w-8 h-8 rounded-full overflow-hidden flex items-center justify-center cursor-pointer transition-transform hover:scale-110 hover:ring-2 hover:ring-emerald-500;
  background: var(--color-bg-card);
}

.recent-voters__avatar-img {
  @apply w-full h-full object-cover;
}

.recent-voters__avatar-fallback {
  @apply text-sm;
}


/* ===========================================
   Votifier Test Section
   =========================================== */

/* Votifier Test Section */
.votifier-test-section {
  @apply mt-6 pt-6;
}

.votifier-test-section__title {
  @apply text-lg font-semibold mb-2;
  color: var(--color-text);
}

.votifier-test-section__description {
  @apply text-sm mb-4;
  color: var(--color-text-muted);
}

/* Votifier Test Result */
.votifier-test-result {
  @apply mt-4;
}

.votifier-test__result {
  @apply px-4 py-3 rounded-lg text-sm;
}

.votifier-test__result--success {
  @apply bg-emerald-900/50 border border-emerald-700 text-emerald-300;
}

.votifier-test__result--error {
  @apply bg-red-900/50 border border-red-700 text-red-300;
}


/* ===========================================
   Favorite Section
   =========================================== */

/* Favorite Button (for server cards) */
.favorite-btn {
  @apply w-8 h-8 flex items-center justify-center rounded-full transition-all cursor-pointer hover:border-yellow-500 hover:text-yellow-500;
  background: var(--color-bg-card);
  border: none;
  color: var(--color-text-muted);
}

.favorite-btn--active {
  @apply bg-yellow-500/20 border-yellow-500 text-yellow-500;
}

.favorite-btn__icon {
  @apply text-lg leading-none;
}

/* Favorite Status (for sidebar) */
.favorite-status {
  @apply flex items-center gap-2 py-3 px-4 rounded-lg mb-3;
}

.favorite-status--active {
  @apply bg-amber-50 border border-amber-200;
}

[data-theme="dark"] .favorite-status--active {
  background: rgba(234, 179, 8, 0.1);
  border: 1px solid rgba(234, 179, 8, 0.25);
}

.favorite-status__icon {
  @apply text-yellow-500 text-xl;
}

.favorite-status__text {
  @apply font-medium text-sm;
  color: var(--color-text);
}

.favorite-actions {
  @apply flex flex-col gap-2 mt-3;
}

/* Favorite Star (for detail page) */
.favorite-star {
  @apply text-yellow-400 text-lg leading-none;
}


/* ===========================================
   Settings Form
   =========================================== */

.settings-form__section {
  @apply mb-6;
}

.settings-form__section-title {
  @apply text-lg font-semibold mb-4 pb-2;
  color: var(--color-text);
}

.settings-form__item {
  @apply py-3;
}

.settings-form__toggle {
  @apply flex items-start gap-3 cursor-pointer;
}

.settings-form__checkbox {
  @apply w-5 h-5 mt-0.5 rounded text-emerald-500 focus:ring-emerald-500;
  border-color: var(--color-border);
  background: var(--color-bg-card);
}

.settings-form__toggle-label {
  @apply flex flex-col;
}

.settings-form__toggle-title {
  @apply font-medium;
  color: var(--color-text);
}

.settings-form__toggle-description {
  @apply text-sm mt-0.5;
  color: var(--color-text-muted);
}

.settings-form__toggle--disabled {
  @apply opacity-50 cursor-not-allowed;
}

.settings-form__toggle--disabled .settings-form__checkbox {
  @apply cursor-not-allowed;
}

.settings-form__actions {
  @apply mt-6 pt-6;
}

.settings-form__section-description {
  @apply text-sm mb-4;
  color: var(--color-text-muted);
}

.settings-form__server-list {
  @apply space-y-1;
}

.settings-form__notice {
  @apply text-sm mt-4 p-3 rounded-lg;
}

.settings-form__notice--warning {
  @apply bg-amber-900/30 text-amber-300 border border-amber-700/50;
}

.settings-form__empty-message {
  @apply text-center py-6;
  color: var(--color-text-muted);
}

.settings-form__empty-message a {
  @apply text-emerald-400 hover:text-emerald-300 underline;
}

/* ===========================================
   Unsubscribe
   =========================================== */

.unsubscribe-card {
  @apply text-center;
}

.unsubscribe-card__message {
  @apply text-lg mb-4;
  color: var(--color-text);
}

.unsubscribe-card__note {
  @apply text-sm mb-6;
  color: var(--color-text-muted);
}

.unsubscribe-card__form {
  @apply mb-4;
}

.unsubscribe-card__cancel {
  @apply text-sm;
  color: var(--color-text-muted);
}

.unsubscribe-complete {
  @apply py-8;
}

.unsubscribe-complete__icon {
  @apply text-5xl mb-4;
}

.unsubscribe-complete__title {
  @apply text-2xl font-bold mb-4;
  color: var(--color-text);
}

.unsubscribe-complete__message {
  @apply mb-6;
  color: var(--color-text-muted);
}


/* ===========================================
   Settings Link Card
   =========================================== */

.settings-link-section {
  @apply mt-6 pt-6;
}

.settings-link-card {
  @apply flex items-center gap-3 p-4 rounded-lg text-inherit no-underline transition-all;
  background: var(--color-bg-card);
}

.settings-link-card:hover {
  background: var(--color-border);
}

.settings-link-icon {
  @apply text-2xl;
}

.settings-link-text {
  @apply flex flex-col flex-1;
}

.settings-link-title {
  @apply font-medium;
  color: var(--color-text);
}

.settings-link-description {
  @apply text-sm;
  color: var(--color-text-muted);
}

.settings-link-arrow {
  color: var(--color-text-muted);
}

/* Server Address Entry (Dual Address Display) */
.server-address-entry {
  @apply flex flex-col gap-2;
}

.server-address-entry + .server-address-entry {
  @apply mt-3;
}

.server-address-entry__label-row {
  @apply flex items-center justify-between;
}

.server-address-entry__label {
  @apply text-sm font-medium;
  color: var(--color-text);
}

.server-address-entry__badge {
  @apply text-xs font-medium px-2 py-0.5 rounded-full;
}

.server-address-entry__badge--verified {
  @apply bg-emerald-900/50 text-emerald-400 border border-emerald-700/50;
}

.server-address-entry__badge--unverified {
  @apply bg-amber-900/40 text-amber-400 border border-amber-700/50 no-underline hover:bg-amber-900/60;
}

.server-address-entry__box {
  @apply flex flex-col gap-2;
}

.server-address-entry__code {
  @apply block px-3 py-2.5 rounded-lg font-mono text-sm text-center break-all;
  background: var(--color-bg-card);
  color: var(--color-text);
  border: none;
}

/* Verification Card - Verified Badge */
.verification-card__verified {
  @apply flex items-center gap-3 bg-emerald-900/30 border border-emerald-700/50 rounded-lg px-4 py-3;
}

.verification-card__verified-badge {
  @apply text-emerald-400 font-semibold text-base;
}

.verification-card__verified-address {
  @apply text-sm m-0;
  color: var(--color-text-muted);
}

/* Edition Address Group (Form) */
.edition-address-group {
  @apply mt-2 rounded-lg p-4 mb-3 last:mb-0 transition-colors;
  background: var(--color-bg);
}

.edition-address-group--active {
  background: var(--color-bg-light);
  box-shadow: inset 0 0 0 1px var(--color-border), var(--shadow-card);
}

.edition-address-group__header {
  @apply flex items-center gap-3 cursor-pointer select-none;
}

.edition-address-group__label {
  @apply font-medium text-sm;
  color: var(--color-text);
}

.edition-address-group__input {
  @apply mt-3 pl-7;
}

/* Verification Accordion */
.verification-methods__hint {
  @apply mb-3;
}

.verification-methods__hint-text {
  @apply text-sm leading-relaxed;
  color: var(--color-text-muted);
}

.verification-accordion {
  @apply rounded-lg overflow-hidden;
  background: var(--color-bg-card);
  border: none;
}

.verification-accordion__trigger {
  @apply flex items-center gap-2.5 px-4 py-3.5 cursor-pointer select-none list-none transition-colors;
  background: var(--color-bg-card);
}

.verification-accordion__trigger:hover {
  background: var(--color-border);
}

.verification-accordion__trigger::-webkit-details-marker {
  display: none;
}

.verification-accordion__icon {
  @apply text-lg leading-none;
}

.verification-accordion__title {
  @apply flex-1 text-sm font-semibold;
  color: var(--color-text);
}

.verification-accordion__arrow {
  @apply text-xs transition-transform duration-200;
  color: var(--color-text-muted);
}

.verification-accordion[open] > .verification-accordion__trigger .verification-accordion__arrow {
  @apply rotate-90;
}

.verification-accordion__content {
  @apply px-4 pb-4 pt-4;
  border-top: none;
  background: var(--color-bg-card);
}

.verification-accordion__content .method-steps {
  @apply list-decimal ml-5 text-sm leading-loose;
  color: var(--color-text);
}

/* Unverified Address Warning */
.unverified-warning {
  @apply rounded-lg px-5 py-4 mb-6;
  background: rgba(245, 158, 11, 0.08);
  border: none;
  border-left: 4px solid rgba(245, 158, 11, 0.6);
}

.unverified-warning__title {
  @apply font-semibold text-base m-0 mb-2;
  color: var(--color-accent);
}

.unverified-warning__list {
  @apply list-none m-0 p-0 flex flex-col gap-1;
}

.unverified-warning__item {
  @apply text-sm;
  color: var(--color-text-muted);
}

.unverified-warning__link {
  @apply underline;
  color: var(--color-accent);
}

.unverified-warning__link:hover {
  opacity: 0.8;
}

/* Status Check Paused Alert */
.status-paused-alert {
  @apply flex items-start gap-3 rounded-lg px-5 py-4 mb-6;
  background: rgba(148, 163, 184, 0.1);
  border-left: 4px solid rgba(148, 163, 184, 0.6);
}

.status-paused-alert__icon {
  @apply text-xl leading-none;
}

.status-paused-alert__content {
  @apply flex-1;
}

.status-paused-alert__title {
  @apply font-semibold text-base m-0 mb-1;
  color: var(--color-text);
}

.status-paused-alert__text {
  @apply text-sm leading-relaxed m-0 mb-3;
  color: var(--color-text-muted);
}

.status-paused-alert__action {
  @apply inline-block;
}

.status-paused-alert__note {
  @apply text-xs m-0 mt-2;
  color: var(--color-text-muted);
}

/* Community Post Blocked Label */
.feed-card--blocked {
  @apply opacity-50;
}

.community-post-blocked-label {
  @apply text-xs text-red-400 bg-red-950/50 border border-red-800/50 rounded px-2 py-1 mt-2;
}


/* ===========================================
   Admin Layout
   =========================================== */

.admin-layout {
  @apply bg-slate-50 text-slate-800 min-h-screen;
}

.admin-header {
  @apply bg-slate-800 text-white shadow;
}

.admin-header__inner {
  @apply max-w-7xl mx-auto px-6 py-3 flex items-center justify-between;
}

.admin-header__title {
  @apply text-lg font-bold m-0;
}

.admin-header__title-link {
  @apply text-white no-underline hover:text-slate-300;
}

.admin-header__nav {
  @apply flex items-center gap-4;
}

.admin-header__nav-link {
  @apply text-slate-300 no-underline text-sm hover:text-white;
}

.admin-main {
  @apply max-w-7xl mx-auto px-6 py-8;
}

.admin-flash {
  @apply px-4 py-3 rounded-lg mb-6 text-sm;
}

.admin-flash--notice {
  @apply bg-emerald-100 text-emerald-800 border border-emerald-300;
}

.admin-flash--alert {
  @apply bg-red-100 text-red-800 border border-red-300;
}


/* ===========================================
   Admin Common Components
   =========================================== */

/* Admin Page */
.admin-page {
  @apply max-w-4xl;
}

.admin-page--wide {
  @apply max-w-none;
}

.admin-page__header {
  @apply flex items-center justify-between mb-6;
}

.admin-page__title {
  @apply text-2xl font-bold text-slate-800 m-0;
}

/* Admin Table */
.admin-table {
  @apply w-full bg-white border border-slate-200 rounded-lg overflow-hidden text-sm;
}

.admin-table__th {
  @apply bg-slate-100 text-left px-4 py-3 font-semibold text-slate-600 border-b border-slate-200;
}

.admin-table__th--actions {
  @apply w-40 text-right;
}

.admin-table__row {
  @apply border-b border-slate-100 last:border-b-0 hover:bg-slate-50;
}

.admin-table__td {
  @apply px-4 py-3 text-slate-700;
}

.admin-table__td--actions {
  @apply text-right space-x-2;
}

/* Admin Buttons */
.admin-btn {
  @apply inline-block px-4 py-2 rounded-lg text-sm font-medium no-underline cursor-pointer transition-colors;
}

.admin-btn--primary {
  @apply bg-emerald-600 text-white hover:bg-emerald-700;
}

.admin-btn--secondary {
  @apply bg-slate-200 text-slate-700 hover:bg-slate-300;
}

.admin-btn--danger {
  @apply bg-red-600 text-white hover:bg-red-700;
}

.admin-btn--small {
  @apply px-3 py-1 text-xs;
}

/* Admin Form */
.admin-form {
  @apply bg-white border border-slate-200 rounded-lg p-6;
}

.admin-form__errors {
  @apply bg-red-50 border border-red-300 rounded-lg p-4 mb-6;
}

.admin-form__errors-title {
  @apply text-red-800 font-semibold text-sm mb-2;
}

.admin-form__errors-list {
  @apply list-disc pl-5 text-red-700 text-sm space-y-1;
}

.admin-form__field {
  @apply mb-4;
}

.admin-form__label {
  @apply block text-sm font-medium text-slate-700 mb-1;
}

.admin-form__input {
  @apply w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500;
}

.admin-form__actions {
  @apply flex items-center gap-3 mt-6;
}

/* Admin Empty State */
.admin-empty {
  @apply text-slate-500 text-center py-12 bg-white border border-slate-200 rounded-lg;
}

/* Admin Status Badge */
.admin-status {
  @apply inline-block px-2 py-0.5 rounded-full text-xs font-medium;
}

.admin-status--published {
  @apply bg-emerald-100 text-emerald-700;
}

.admin-status--draft {
  @apply bg-slate-100 text-slate-600;
}

/* Admin Top Columns Section */
.admin-top-columns {
  @apply mt-8 bg-white border border-slate-200 rounded-lg p-6;
}

.admin-top-columns__title {
  @apply text-lg font-bold text-slate-800 mb-1;
}

.admin-top-columns__description {
  @apply text-sm text-slate-500 mb-4;
}

/* Admin Form Extensions */
.admin-form__textarea {
  @apply resize-y;
}

.admin-form__file-input {
  @apply text-sm text-slate-600 file:mr-3 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-medium file:bg-slate-100 file:text-slate-700 hover:file:bg-slate-200;
}

.admin-form__image-preview {
  @apply mb-3;
}

.admin-form__image-preview-img {
  @apply w-48 h-auto rounded-lg border border-slate-200;
}

.admin-form__richtext {
  @apply w-full;
}

.admin-form__checkboxes {
  @apply flex flex-wrap gap-3;
}

.admin-form__checkbox-label {
  @apply flex items-center gap-1.5 text-sm text-slate-700 cursor-pointer;
}


/* ===========================================
   Admin Dashboard / User & Server Management
   =========================================== */

.admin-header__user {
  @apply text-xs text-slate-400 pl-3 border-l border-slate-600;
}

.admin-page__count {
  @apply text-sm text-slate-500;
}

.admin-page__actions {
  @apply flex items-center gap-2;
}

.admin-section__title {
  @apply text-base font-bold text-slate-600 mb-3 mt-8 first:mt-0;
}

/* 数値サマリー */
.admin-stats {
  @apply grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3 mb-6;
}

.admin-stat {
  @apply flex flex-col gap-1 bg-white border border-slate-200 rounded-lg px-4 py-3 no-underline transition-colors;
}

a.admin-stat {
  @apply hover:border-emerald-400 hover:bg-emerald-50;
}

.admin-stat__label {
  @apply text-xs text-slate-500;
}

.admin-stat__value {
  @apply text-2xl font-bold text-slate-800 leading-tight;
}

.admin-stat__value--online {
  @apply text-emerald-600;
}

.admin-stat__value--warning {
  @apply text-amber-600;
}

/* カード */
.admin-card {
  @apply bg-white border border-slate-200 rounded-lg p-6 mb-6;
}

.admin-card__title {
  @apply text-lg font-bold text-slate-800 mb-1;
}

.admin-card__description {
  @apply text-sm text-slate-500 mb-4;
}

.admin-columns-2 {
  @apply grid grid-cols-1 lg:grid-cols-2 gap-6;
}

/* 簡易リスト */
.admin-list {
  @apply list-none p-0 m-0 mt-3;
}

.admin-list__item {
  @apply flex items-center justify-between gap-3 py-2 border-b border-slate-100 last:border-b-0 text-sm;
}

.admin-list__main {
  @apply flex items-center gap-2 min-w-0;
}

.admin-list__link {
  @apply text-slate-700 truncate hover:text-emerald-600;
}

.admin-list__owner {
  @apply text-xs text-slate-400 truncate;
}

.admin-list__meta {
  @apply text-xs text-slate-400 whitespace-nowrap;
}

/* 定義リスト */
.admin-detail {
  @apply m-0 mt-3;
}

.admin-detail__row {
  @apply flex flex-col sm:flex-row sm:items-baseline gap-1 sm:gap-4 py-2 border-b border-slate-100 last:border-b-0;
}

.admin-detail__label {
  @apply text-xs text-slate-500 sm:w-40 shrink-0;
}

.admin-detail__value {
  @apply text-sm text-slate-700 m-0 min-w-0;
}

/* 検索・絞り込み */
.admin-filters {
  @apply flex flex-wrap items-center gap-2 mb-4;
}

.admin-filters__search {
  @apply flex-1 min-w-56 px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500;
}

.admin-filters__select {
  @apply px-3 py-2 border border-slate-300 rounded-lg text-sm bg-white focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500;
}

.admin-filters__clear {
  @apply text-sm text-slate-500 underline hover:text-slate-700;
}

/* テーブル拡張 */
.admin-table__th--num {
  @apply text-right;
}

.admin-table__td--num {
  @apply text-right tabular-nums;
}

.admin-pagination {
  @apply mt-6 flex justify-center;
}

/* ステータスバッジ拡張 */
.admin-status--online {
  @apply bg-emerald-100 text-emerald-700;
}

.admin-status--offline {
  @apply bg-slate-100 text-slate-500;
}

.admin-status--warning {
  @apply bg-amber-100 text-amber-700;
}

.admin-status--admin {
  @apply bg-indigo-100 text-indigo-700;
}

/* テキスト補助 */
.admin-text--muted {
  @apply text-slate-400;
}

.admin-text--small {
  @apply text-xs;
}

.admin-text--break {
  @apply break-all;
}

/* 横に長い表はスクロールさせる */
.admin-table-scroll {
  @apply overflow-x-auto mb-6;
}

.admin-table-scroll .admin-table {
  @apply whitespace-nowrap;
}

/* ランキング */
.admin-ranking-notes {
  @apply mt-3 list-disc pl-5 text-sm text-slate-500 space-y-1;
}

.admin-ranking__total {
  @apply font-bold text-slate-800;
}

/* 日別の棒グラフ（1系列なので凡例なし。値はホバーで表示） */
.admin-bar-chart {
  @apply relative mt-4;
}

.admin-bar-chart__max {
  @apply absolute -top-1 left-0 text-xs text-slate-400;
}

.admin-bar-chart__plot {
  @apply flex items-end h-48 pt-5 border-b border-slate-300;
  gap: 2px;
  background-image: linear-gradient(to bottom, rgb(226 232 240) 1px, transparent 1px);
  background-position: 0 1.25rem;
  background-size: 100% calc((100% - 1.25rem) / 2);
}

.admin-bar-chart__col {
  @apply relative flex flex-1 h-full items-end cursor-default;
}

.admin-bar-chart__bar {
  @apply w-full bg-emerald-500 transition-colors;
  border-radius: 4px 4px 0 0;
  min-height: 1px;
}

.admin-bar-chart__col:hover .admin-bar-chart__bar {
  @apply bg-emerald-700;
}

.admin-bar-chart__col:hover::after {
  @apply absolute bottom-full left-1/2 z-10 mb-1 -translate-x-1/2 whitespace-nowrap rounded bg-slate-800 px-2 py-1 text-xs text-white;
  content: attr(data-label);
}

.admin-bar-chart__axis {
  @apply mt-1 flex justify-between text-xs text-slate-400;
}


/* ===========================================
   Column Public Pages
   =========================================== */

/* Column List */
.column-list {
  @apply py-12 min-h-screen;
}

.column-list__container {
  @apply max-w-[1200px] mx-auto px-4;
}

.column-list__header {
  @apply mb-10 text-center;
}

.column-list__title {
  @apply text-2xl font-bold mb-2;
  color: var(--color-text);
}

.column-list__subtitle {
  @apply text-sm;
  color: var(--color-text-muted);
}

.column-list__body {
  @apply mt-8;
}

.column-list__grid {
  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;
}

.column-list__pagination {
  @apply mt-10 flex justify-center;
}

.column-list__footer {
  @apply mt-10 text-center;
}

.column-list__categories-link {
  @apply inline-flex items-center gap-2 text-sm font-medium no-underline transition-colors;
  color: var(--color-primary);
}

/* Column Top (Featured) Section */
.column-top {
  @apply mb-10;
}

.column-top__heading {
  @apply text-lg font-bold mb-4;
  color: var(--color-text);
}

.column-top__grid {
  @apply grid grid-cols-1 md:grid-cols-3 gap-6;
}

/* Column Card */
/* タイトルの行数が違ってもメタ情報の位置が揃うよう、縦フレックスで組む */
.column-card {
  @apply flex flex-col h-full rounded-xl overflow-hidden no-underline text-inherit transition-all hover:shadow-lg;
  background: var(--color-bg-light);
  box-shadow: var(--shadow-card);
}

.column-card--featured {
  @apply ring-1 ring-emerald-700/30;
}

.column-card__image {
  @apply w-full h-44 overflow-hidden;
  background: var(--color-bg-card);
}

.column-card__image-img {
  @apply w-full h-full object-cover;
}

.column-card__image-placeholder {
  @apply w-full h-full flex items-center justify-center text-4xl;
  color: var(--color-text-muted);
}

.column-card__body {
  @apply p-4 flex flex-col flex-1;
}

.column-card__title {
  @apply text-base font-bold mb-2 line-clamp-2;
  color: var(--color-text);
}

.column-card__description {
  @apply text-sm mb-3 line-clamp-3;
  color: var(--color-text-muted);
}

/* 常にカード下端へ寄せることで、カード間でメタ情報の高さを一致させる */
.column-card__meta {
  @apply flex items-center gap-3 text-xs mt-auto;
  color: var(--color-text-muted);
}

.column-card__date {
  @apply shrink-0;
}

.column-card__categories {
  @apply flex flex-wrap gap-1.5;
}

.column-card__category-tag {
  @apply inline-block px-2 py-0.5 rounded text-xs;
  background: var(--color-bg-card);
  color: var(--color-text-muted);
}

/* Column Detail (Public Show Page) */
.column-detail {
  @apply py-12 min-h-screen;
}

.column-detail__container {
  @apply max-w-3xl mx-auto px-4;
}

.column-detail__header {
  @apply mb-8;
}

.column-detail__title {
  @apply text-2xl font-bold mb-4 leading-tight;
  color: var(--color-text);
}

.column-detail__meta {
  @apply flex flex-wrap items-center gap-4 text-sm;
}

.column-detail__date {
  color: var(--color-text-muted);
}

.column-detail__categories {
  @apply flex flex-wrap gap-2;
}

.column-detail__category-tag {
  @apply inline-block px-2.5 py-0.5 rounded text-xs;
  background: var(--color-bg-card);
  color: var(--color-text-muted);
}

.column-detail__eyecatch {
  @apply mb-8;
}

.column-detail__eyecatch-img {
  @apply w-full h-auto rounded-xl;
}

.column-detail__content {
  @apply leading-relaxed mb-10;
  color: var(--color-text-muted);
}

.column-detail__content .trix-content {
  @apply leading-relaxed;
  color: var(--color-text-muted);
}

.column-detail__content .trix-content h1 {
  @apply text-2xl font-bold mt-8 mb-4;
  color: var(--color-text);
}

.column-detail__content .trix-content h2 {
  @apply text-xl font-bold mt-6 mb-3;
  color: var(--color-text);
}

.column-detail__content .trix-content h3 {
  @apply text-lg font-semibold mt-5 mb-2;
  color: var(--color-text);
}

.column-detail__content .trix-content p {
  @apply mb-4;
}

.column-detail__content .trix-content a {
  @apply underline;
  color: var(--color-primary);
}

.column-detail__content .trix-content ul {
  @apply list-disc pl-6 mb-4 space-y-1;
}

.column-detail__content .trix-content ol {
  @apply list-decimal pl-6 mb-4 space-y-1;
}

.column-detail__content .trix-content blockquote {
  @apply pl-4 italic my-4;
  border-left: 4px solid var(--color-border);
  color: var(--color-text-muted);
}

.column-detail__content .trix-content pre {
  @apply rounded-lg p-4 overflow-x-auto text-sm my-4;
  background: var(--color-bg-card);
  color: var(--color-text);
}

.column-detail__content .trix-content code {
  @apply px-1.5 py-0.5 rounded text-sm;
  background: var(--color-bg-card);
  color: var(--color-primary);
}

.column-detail__content .trix-content img {
  @apply rounded-lg max-w-full h-auto my-4;
}

.column-detail__content .trix-content strong {
  @apply font-semibold;
  color: var(--color-text);
}

.column-detail__back {
  @apply pt-8;
}

.column-detail__back-link {
  @apply inline-flex items-center gap-1 text-sm font-medium no-underline transition-colors;
  color: var(--color-primary);
}


/* ===========================================
   Category Public Pages
   =========================================== */

/* Category List (Index) */
.category-list {
  @apply py-12 min-h-screen;
}

.category-list__container {
  @apply max-w-[1200px] mx-auto px-4;
}

.category-list__header {
  @apply mb-10 text-center;
}

.category-list__title {
  @apply text-2xl font-bold mb-2;
  color: var(--color-text);
}

.category-list__subtitle {
  @apply text-sm;
  color: var(--color-text-muted);
}

.category-list__grid {
  @apply grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4;
}

.category-list__item {
  @apply flex items-center justify-between rounded-lg px-5 py-4 no-underline text-inherit transition-all;
  background: var(--color-bg-light);
  box-shadow: var(--shadow-card);
}

.category-list__item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.category-list__item-name {
  @apply font-medium;
  color: var(--color-text);
}

.category-list__item-count {
  @apply text-sm;
  color: var(--color-text-muted);
}

.category-list__footer {
  @apply mt-10 text-center;
}

.category-list__back-link {
  @apply inline-flex items-center gap-1 text-sm font-medium no-underline transition-colors;
  color: var(--color-primary);
}

/* Category Detail (Show) */
.category-detail {
  @apply py-12 min-h-screen;
}

.category-detail__container {
  @apply max-w-[1200px] mx-auto px-4;
}

.category-detail__header {
  @apply mb-10 text-center;
}

.category-detail__title {
  @apply text-2xl font-bold mb-2;
  color: var(--color-text);
}

.category-detail__subtitle {
  @apply text-sm;
  color: var(--color-text-muted);
}

.category-detail__footer {
  @apply mt-10 text-center;
}

.category-detail__back-link {
  @apply inline-flex items-center gap-1 text-sm font-medium no-underline transition-colors;
  color: var(--color-primary);
}


/* ===========================================
   Server Tabs (server detail main column)
   =========================================== */

.server-tabs__nav {
  @apply px-1.5 py-1.5 grid grid-cols-4;
  background: rgba(148, 163, 184, 0.08);
  border-radius: 10px;
}

.server-event-item--past {
  opacity: 0.55;
  filter: grayscale(0.4);
}

.server-event-item--past:hover {
  opacity: 0.85;
  filter: grayscale(0);
}

.server-tabs__tab {
  @apply leading-none px-2 py-3 justify-center text-sm font-medium cursor-pointer bg-transparent transition-colors no-underline inline-flex items-center;
  color: var(--color-text-muted);
  border: 0;
  border-radius: 6px;
}

.server-tabs__tab:hover {
  color: var(--color-text);
  text-decoration: none;
}

.server-tabs__tab--active {
  background: var(--color-bg-light);
  color: var(--color-text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.server-tabs__badge {
  @apply hidden md:inline-flex items-center justify-center ml-1.5 px-1.5 min-w-[18px] h-[18px] text-xs font-semibold rounded-full leading-none;
  background: var(--color-primary);
  color: #ffffff;
}

.server-tabs__panel {
  @apply flex flex-col gap-4;
}

[data-theme="light"] .server-tabs__nav {
  background: rgba(148, 163, 184, 0.15);
}

[data-theme="light"] .server-tabs__tab--active {
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}


/* ===========================================
   Server Stats Chart (server detail page)
   =========================================== */

.server-stats-chart {
  @apply flex flex-col gap-5;
}

.server-stats-chart__item {
  @apply flex flex-col gap-2;
}

.server-stats-chart__label {
  @apply flex flex-wrap items-center justify-between gap-x-3 gap-y-1 text-xs font-semibold;
  color: var(--color-text-muted);
  letter-spacing: 0.03em;
}

.server-stats-chart__legend {
  @apply flex flex-wrap items-center gap-x-3 gap-y-1 text-xs font-normal ml-auto;
  color: var(--color-text-muted);
}

.server-stats-chart__legend-chip {
  @apply inline-block align-middle w-2.5 h-2.5 rounded-sm mr-1;
}

.server-stats-chart__legend-chip--online {
  background: var(--color-primary);
}

.server-stats-chart__legend-chip--offline {
  background: rgb(239 68 68);
}

.server-stats-chart__legend-chip--unknown {
  background: rgba(148, 163, 184, 0.45);
}

.stats-card {
  @apply flex flex-col gap-4;
}

.stats-card__header {
  @apply flex items-baseline flex-wrap gap-x-3 gap-y-1;
}

.stats-card__title {
  @apply text-sm font-semibold;
  color: var(--color-text);
  margin: 0;
}

.stats-card__range {
  @apply text-xs;
  color: var(--color-text-muted);
}

.server-stats-chart__canvas {
  @apply w-full rounded-md overflow-hidden;
  background: rgba(148, 163, 184, 0.06);
  min-height: 210px;
}

.server-stats-chart__canvas--uptime {
  min-height: 76px;
  background: transparent;
}

.server-stats-chart__empty {
  @apply py-6 text-center text-xs;
  color: var(--color-text-muted);
}

.server-stats-chart__svg {
  @apply block;
}

.server-stats-chart__grid {
  stroke: rgba(148, 163, 184, 0.25);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}

.server-stats-chart__axis {
  font-size: 10px;
  fill: var(--color-text-muted);
}

.server-stats-chart__line {
  stroke: var(--color-primary);
  stroke-width: 2.25;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.server-stats-chart__area {
  stroke: none;
}

.server-stats-chart__grad-top {
  stop-color: var(--color-primary);
  stop-opacity: 0.55;
}

.server-stats-chart__grad-bottom {
  stop-color: var(--color-primary);
  stop-opacity: 0;
}

.server-stats-chart__point {
  fill: var(--color-primary);
}

.server-stats-chart__day-sep {
  stroke: var(--color-border);
  stroke-width: 1;
  stroke-dasharray: 2 4;
  opacity: 0.45;
}

.server-stats-chart__baseline {
  stroke: var(--color-border);
  stroke-width: 1;
  opacity: 0.5;
}

.server-stats-chart__peak-halo {
  fill: var(--color-primary);
  opacity: 0.22;
}

.server-stats-chart__peak-dot {
  fill: var(--color-primary);
  stroke: var(--color-bg-card);
  stroke-width: 2;
}

.server-stats-chart__peak-label {
  font-size: 11px;
  font-weight: 700;
  fill: var(--color-text);
}

.server-stats-chart__latest-dot {
  fill: var(--color-primary);
  stroke: var(--color-bg-card);
  stroke-width: 2;
}

.server-stats-chart__bar {
  shape-rendering: crispEdges;
}

.server-stats-chart__bar--online {
  fill: var(--color-primary);
}

.server-stats-chart__bar--partial {
  fill: rgb(234 179 8);
}

.server-stats-chart__bar--offline {
  fill: rgb(239 68 68);
}

.server-stats-chart__bar--unknown {
  fill: rgba(148, 163, 184, 0.35);
}

.server-stats-chart__track {
  fill: color-mix(in srgb, var(--color-text-muted) 14%, transparent);
}

.server-stats-chart__day-sep-overlay {
  stroke: var(--color-bg-card);
  stroke-opacity: 0.7;
  stroke-width: 1;
  stroke-dasharray: 2 3;
  pointer-events: none;
}

.server-stats-chart__marker-line {
  stroke: var(--color-primary);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  opacity: 0.6;
}

.server-stats-chart__marker-dot {
  fill: var(--color-primary);
  stroke: var(--color-bg-card);
  stroke-width: 2;
}

.server-stats-chart__hover-overlay {
  cursor: crosshair;
}

.server-stats-chart__tooltip {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11px;
  line-height: 1.5;
  white-space: pre-line;
  background: var(--color-bg-card);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  display: none;
}

[data-theme="light"] .server-stats-chart__canvas {
  background: rgba(148, 163, 184, 0.1);
}

[data-theme="light"] .server-stats-chart__canvas--uptime {
  background: transparent;
}

.server-stats-chart__vote-bar {
  fill: var(--color-primary);
  opacity: 0.85;
  transition: opacity 0.15s ease;
}

.server-stats-chart__vote-bar:hover {
  opacity: 1;
}


/* ===========================================
   Minecraft Account Link
   =========================================== */

/* 連携済みエディションの選択肢 */
.form-radio--disabled {
  @apply opacity-60 cursor-not-allowed;
}

.form-radio__note {
  @apply text-xs ml-auto;
  color: var(--color-primary);
}

/* アカウント設定の連携一覧（Java版・統合版） */
.minecraft-link-list {
  @apply flex flex-col gap-2;
}

/* 統合版の連携に添える、ゲーマータグ変更時の案内 */
.minecraft-link-hint {
  @apply text-xs;
  color: var(--color-text-muted);
}


/* ===========================================
   Landing Page（トップページ・運営者向けページ）
   =========================================== */

/* Hero */
.lp-hero {
  @apply text-center;
  padding: 72px 0 56px;
  background:
    radial-gradient(ellipse at top, color-mix(in srgb, var(--color-primary) 14%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, var(--color-bg-light) 0%, var(--color-bg) 100%);
}

/* 見出しの上の小見出し。両側に細い線を引いて、ラベルっぽさを抑える */
.lp-hero__eyebrow {
  @apply inline-flex items-center gap-3 text-sm font-semibold mb-5 tracking-wider;
  color: var(--color-primary);
}

.lp-hero__eyebrow::before,
.lp-hero__eyebrow::after {
  @apply block w-8 h-px;
  content: "";
  background: currentColor;
  opacity: 0.5;
}

/* Java版 + 統合版（トップのヒーロー）
   2枚のタイルを少しずつ逆に傾け、下辺を濃くしてマイクラのブロックのような厚みを出す */
.lp-editions {
  @apply inline-flex items-center gap-3 mb-7;
}

.lp-editions__item {
  --edition-color: #ef4444;
  --edition-text: #fca5a5;
  @apply inline-flex items-center gap-2.5 rounded-lg pl-3 pr-4 py-2 text-left;
  color: var(--edition-text);
  background: color-mix(in srgb, var(--edition-color) 14%, var(--color-bg-light));
  border: 1px solid color-mix(in srgb, var(--edition-color) 40%, transparent);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--edition-color) 45%, transparent);
  transform: rotate(-3deg);
}

.lp-editions__item--bedrock {
  --edition-color: #3b82f6;
  --edition-text: #93c5fd;
  transform: rotate(3deg);
}

[data-theme="light"] .lp-editions__item--java {
  --edition-text: #dc2626;
}

[data-theme="light"] .lp-editions__item--bedrock {
  --edition-text: #2563eb;
}

.lp-editions__icon {
  font-size: var(--icon-lg);
}

.lp-editions__text {
  @apply flex flex-col leading-tight;
}

.lp-editions__text strong {
  @apply text-base font-extrabold;
}

.lp-editions__text small {
  @apply text-xs font-medium opacity-80;
}

.lp-editions__plus {
  @apply text-xl font-extrabold;
  color: var(--color-text-muted);
}

.lp-hero__title {
  @apply font-extrabold;
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1.3;
  color: var(--color-text);
}

.lp-hero__lead {
  @apply max-w-xl mx-auto mt-4 text-base leading-relaxed;
  color: var(--color-text-muted);
}

.lp-hero__live {
  @apply inline-flex flex-wrap items-center justify-center gap-x-1.5 mt-5 text-sm;
  color: var(--color-text-muted);
}

.lp-hero__live strong {
  @apply text-base font-bold;
  color: var(--color-text);
}

.lp-hero__live-dot {
  @apply w-2 h-2 rounded-full bg-emerald-500 animate-pulse;
}

.lp-hero__actions {
  @apply flex flex-wrap justify-center gap-3 mt-7;
}

.lp-hero__chips {
  @apply flex flex-wrap justify-center gap-2 mt-5 max-w-2xl mx-auto;
}

/* 広い画面でだけ改行する（狭い画面では自然に折り返す） */
@media (max-width: 640px) {
  .lp-br-wide {
    display: none;
  }
}

/* Chip（絞り込みの入口） */
.lp-chip {
  @apply inline-flex items-center gap-1.5 rounded-full px-3.5 py-1.5 text-sm font-medium no-underline transition-colors;
  color: var(--color-text);
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
}

a.lp-chip:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.lp-chip__count {
  @apply text-xs rounded-full px-1.5;
  color: var(--color-text-muted);
  background: var(--color-bg-card);
}

/* Section */
.lp-section {
  padding: 56px 0;
}

.lp-section--tinted {
  background: color-mix(in srgb, var(--color-primary) 5%, var(--color-bg));
}

.lp-section__header {
  @apply text-center mb-8;
}

.lp-section__title {
  @apply text-2xl font-bold;
  color: var(--color-text);
}

.lp-section__lead {
  @apply mt-2 text-sm;
  color: var(--color-text-muted);
}

.lp-subheading {
  @apply text-lg font-bold mb-4;
  color: var(--color-text);
}

.lp-subheading:not(:first-of-type) {
  @apply mt-10;
}

/* Features（選ばれる理由・できること） */
.lp-features {
  @apply grid gap-5 md:grid-cols-3;
}

.lp-features--2col {
  @apply md:grid-cols-2 max-w-4xl mx-auto;
}

.lp-feature {
  @apply rounded-xl p-6;
  background: var(--color-bg-light);
  box-shadow: var(--shadow-card);
}

.lp-feature__icon {
  @apply mb-3;
  font-size: var(--icon-2xl);
}

.lp-feature__title {
  @apply text-base font-bold mb-2;
  color: var(--color-text);
}

.lp-feature__text {
  @apply text-sm leading-relaxed;
  color: var(--color-text-muted);
}

/* Tag groups（遊び方から探す） */
.lp-tag-groups {
  @apply grid gap-6 md:grid-cols-2 max-w-4xl mx-auto;
}

.lp-tag-group__label {
  @apply text-xs font-semibold mb-2;
  color: var(--color-text-muted);
}

.lp-tag-group__tags {
  @apply flex flex-wrap gap-2;
}

/* Benefits（アカウントを作るメリット） */
/* 左に見出しとボタン、右にメリットのカード。狭い画面では縦に積む */
.lp-benefits {
  @apply grid gap-8 rounded-2xl p-6 md:p-10 items-center md:grid-cols-[minmax(0,5fr)_minmax(0,6fr)];
  background:
    radial-gradient(ellipse at top left, color-mix(in srgb, var(--color-primary) 16%, transparent) 0%, transparent 55%),
    var(--color-bg-light);
  border: 1px solid color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
  box-shadow: var(--shadow-card);
}

.lp-benefits__eyebrow {
  @apply inline-block rounded-full px-3 py-0.5 text-xs font-semibold mb-3;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.lp-benefits__title {
  @apply text-2xl font-bold leading-snug;
  color: var(--color-text);
}

.lp-benefits__lead {
  @apply mt-3 text-sm leading-relaxed;
  color: var(--color-text-muted);
}

.lp-benefits__action {
  @apply mt-6 flex flex-col items-start gap-2;
}

.lp-benefits__note {
  @apply text-xs;
  color: var(--color-text-muted);
}

.lp-benefits__note a {
  color: var(--color-primary);
}

.lp-benefits__items {
  @apply grid gap-3 list-none p-0 m-0;
}

.lp-benefit {
  @apply flex items-start gap-4 rounded-xl p-4;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}

.lp-benefit__icon {
  @apply flex items-center justify-center shrink-0 w-11 h-11 rounded-lg;
  font-size: var(--icon-md);
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.lp-benefit__title {
  @apply flex flex-wrap items-center gap-x-2 gap-y-1 text-sm font-bold;
  color: var(--color-text);
}

.lp-benefit__badge {
  @apply rounded-full px-2 py-px text-[11px] font-semibold;
  color: var(--color-primary);
  border: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
}

.lp-benefit__text {
  @apply mt-1 text-xs leading-relaxed;
  color: var(--color-text-muted);
}

/* Owner band（運営者への呼びかけ） */
.lp-owner-band {
  @apply text-white;
  padding: 48px 0;
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
}

.lp-owner-band__inner {
  @apply flex flex-col gap-6 md:flex-row md:items-center md:justify-between;
}

.lp-owner-band__eyebrow {
  @apply text-xs font-semibold mb-1 opacity-80;
}

.lp-owner-band__title {
  @apply text-2xl font-bold;
}

.lp-owner-band__text {
  @apply text-sm mt-2 opacity-90;
}

/* 緑の帯の上では白いボタンにして埋もれないようにする */
.lp-owner-band .btn-primary {
  @apply shrink-0;
  background: #ffffff;
  color: var(--color-primary-dark);
}

.lp-owner-band .btn-primary:hover {
  background: #f0fdf4;
}

/* Steps（掲載までの流れ） */
.lp-steps {
  @apply grid gap-4 max-w-3xl mx-auto list-none p-0;
}

.lp-step {
  @apply flex gap-4 rounded-xl p-5;
  background: var(--color-bg-light);
  box-shadow: var(--shadow-card);
}

.lp-step__number {
  @apply w-9 h-9 rounded-full flex items-center justify-center font-bold text-white shrink-0;
  background: var(--color-primary);
}

.lp-step__title {
  @apply text-base font-bold mb-1;
  color: var(--color-text);
}

.lp-step__text {
  @apply text-sm leading-relaxed;
  color: var(--color-text-muted);
}

.lp-steps__note {
  @apply text-center text-xs mt-4;
  color: var(--color-text-muted);
}

.lp-faq {
  @apply max-w-3xl mx-auto;
}

/* 日本語の見出しを単語の途中で改行させない（文節ごとに折り返す） */
.lp-phrase {
  @apply inline-block;
}

/* 見出しと導入文は文節で折り返す（auto-phrase 非対応のブラウザでは通常の折り返し） */
.lp-hero__lead,
.lp-section__lead,
.lp-section__title,
.lp-owner-band__title {
  word-break: auto-phrase;
  text-wrap: balance;
}

.lp-owner-band .btn {
  @apply justify-center text-center;
}

/* フッターのリンクは語の途中で折り返さず、狭い画面では行ごと折り返す */
.footer-nav {
  @apply flex-wrap justify-center gap-x-5 gap-y-2;
}

.footer-nav a {
  @apply whitespace-nowrap;
}


/* ===========================================
   Server Search（サーバー一覧の検索パネル）
   =========================================== */

.server-search {
  @apply flex flex-col gap-4 rounded-xl p-4 md:p-5 mb-5;
  background: var(--color-bg-light);
  box-shadow: var(--shadow-card);
}

.server-search__row {
  @apply flex flex-col gap-3 md:flex-row md:items-center;
}

/* キーワード */
.server-search__keyword {
  @apply relative flex flex-1 items-center;
}

.server-search__keyword-icon {
  @apply absolute left-3 text-sm pointer-events-none opacity-60;
}

.server-search__keyword-input {
  @apply w-full rounded-lg py-2.5 pl-9 pr-3 text-sm;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}

.server-search__keyword-input:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: -1px;
}

/* エディション（セグメント切り替え） */
.server-search__editions {
  @apply flex shrink-0 rounded-lg p-1 md:inline-flex;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}

/* SPでは3つを均等幅で横幅いっぱいに並べる */
.server-search__edition {
  @apply relative flex-1 md:flex-none;
}

/* ラジオボタンは隠さず重ねる（キーボード操作とフォーカスリングを維持するため） */
.server-search__edition-input {
  @apply absolute inset-0 m-0 h-full w-full cursor-pointer opacity-0;
}

.server-search__edition-label {
  @apply block whitespace-nowrap rounded-md px-3 py-1.5 text-center text-sm font-medium transition-colors;
  color: var(--color-text-muted);
}

.server-search__edition:has(.server-search__edition-input:checked) .server-search__edition-label {
  color: var(--color-text);
  background: var(--color-bg-light);
  box-shadow: var(--shadow-card);
}

.server-search__edition-input:focus-visible + .server-search__edition-label {
  outline: 2px solid var(--color-primary);
}

/* 並び順 */
.server-search__sort {
  @apply block w-full md:w-auto;
}

.server-search__sort-select {
  @apply w-full rounded-lg px-3 py-2.5 text-sm md:w-auto;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}

/* タグ（開閉式） */
.server-search__tags {
  @apply pt-3;
  border-top: 1px solid var(--color-border);
}

.server-search__tags-summary {
  @apply flex cursor-pointer list-none items-center justify-between gap-3 text-sm font-semibold;
  color: var(--color-text);
}

.server-search__tags-summary::-webkit-details-marker {
  display: none;
}

.server-search__tags-summary::after {
  content: "▾";
  @apply ml-auto transition-transform;
  color: var(--color-text-muted);
}

.server-search__tags[open] .server-search__tags-summary::after {
  transform: rotate(180deg);
}

.server-search__tags-hint {
  @apply mt-2 mb-1 text-xs;
  color: var(--color-text-muted);
}

.server-search__tag-count {
  @apply ml-1 text-xs opacity-70;
}

/* 件数と条件クリア */
.server-search__summary {
  @apply flex items-center justify-between gap-3 mb-3;
}

.server-search__count {
  @apply text-sm;
  color: var(--color-text-muted);
}

.server-search__count strong {
  @apply text-base;
  color: var(--color-text);
}

.server-search__clear {
  @apply text-sm underline;
  color: var(--color-primary);
}

/* 端の棒のツールチップがはみ出さないよう、内側に寄せる */
.admin-bar-chart__col:nth-child(-n+4):hover::after {
  @apply left-0 translate-x-0;
}

.admin-bar-chart__col:nth-last-child(-n+4):hover::after {
  @apply left-auto right-0 translate-x-0;
}