@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-[15px] font-semibold mb-0.5;
  color: var(--color-text);
}

.server-mini-card__meta {
  @apply flex items-center gap-1.5 text-[13px];
  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-3xl 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);
}

.static-page__content {
  @apply rounded-xl p-8 max-w-4xl 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 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-[15px];
  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-[15px] 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;
}

/* 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;
}


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

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

.column-list__container {
  @apply max-w-5xl mx-auto px-4;
}

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

.column-list__title {
  @apply text-3xl 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__empty {
  @apply text-center py-16;
  color: var(--color-text-muted);
}

.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 block 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;
}

.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;
  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-3xl 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-5xl mx-auto px-4;
}

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

.category-list__title {
  @apply text-3xl 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__empty {
  @apply text-center py-16;
  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-5xl mx-auto px-4;
}

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

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

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

.category-detail__empty {
  @apply text-center py-16;
  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);
}