/*
Theme Name: Inspinder
Theme URI: https://inspinder.app
Author: Inspinder
Description: Capture first. Organize later. - Inspinder app landing page theme.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: inspinder
*/

/* ===== Base ===== */
body {
    font-family: 'Inter', sans-serif;
    background-color: #FFFFFF;
    color: #000000;
    overflow-x: hidden;
    transition: background-color 0.4s ease, color 0.4s ease;
    margin: 0;
    padding: 0;
}

/* Nav drawer – DLボタン（ライト/ダーク共通で黒背景・白文字） */
.nav-drawer .btn-dl {
    background-color: #000000 !important;
    color: #FFFFFF !important;
}

/* Nav drawer divider */
.nav-drawer-divider { border-color: #E5E7EB; }
@media (prefers-color-scheme: dark) {
    .nav-drawer-divider { border-color: #3A3A3C; }
}


/* ===== Dark Mode ===== */
@media (prefers-color-scheme: dark) {
    body { background-color: #000000; color: #FFFFFF; }
    .phone-shell { background: #1C1C1E; }
    .app-content { background: #000000; }
    .bg-gray-50 { background-color: #1C1C1E !important; }
    /* .bg-white は pricing カードと競合するため個別指定に移行 */
    .dark-nav { background-color: rgba(0,0,0,0.8) !important; }
    .btn-dl { background-color: #FFFFFF !important; color: #000000 !important; }
    /* ドロワー内DLボタン: ダークモードは白背景・黒文字で強調 */
    .nav-drawer .btn-dl { background-color: #FFFFFF !important; color: #000000 !important; }
    .logo-icon { background-color: #FFFFFF !important; color: #000000 !important; }
    .feature-card { background-color: #000000 !important; }
    .feature-icon-wrap { background-color: #1C1C1E !important; }
    .text-gray-500 { color: #8E8E93 !important; }
    .text-gray-400 { color: #636366 !important; }
    .footer-brand { color: #FFFFFF !important; }
    .note-card { background-color: #1C1C1E !important; }
    .binder-card { background-color: #1C1C1E !important; }
    .binder-add { border-color: #3A3A3C !important; }
    section.features-section { background-color: #1C1C1E !important; }
}

/* ===== Navigation & Footer Links ===== */
.nav-link,
.footer-nav-link {
    color: #9CA3AF; /* 薄いグレーがベース */
    text-decoration: none;
    transition: color 0.2s ease;
}
.nav-link:hover,
.footer-nav-link:hover {
    color: #000000; /* light mode: 濃い黒へ */
}

@media (prefers-color-scheme: dark) {
    .nav-link,
    .footer-nav-link {
        color: #636366; /* dark mode: 暗めの薄いグレー */
    }
    .nav-link:hover,
    .footer-nav-link:hover {
        color: #FFFFFF !important; /* dark mode: 白へ */
    }
}

/* ===== Layout Utilities ===== */
.rounded-super { border-radius: 2rem; }
.rounded-inner { border-radius: 1rem; }

/* ===== Phone Image Wrapper ===== */
.phone-image-wrap {
    display: flex;
    align-items: flex-end;
}
.phone-image {
    border-radius: 40px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
    transition: box-shadow 0.5s cubic-bezier(0.16,1,0.3,1), transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.phone-image-wrap:hover .phone-image {
    box-shadow: 0 32px 80px rgba(0,0,0,0.22), 0 8px 24px rgba(0,0,0,0.12);
}

/* ===== Phone Shell ===== */
.phone-shell {
    width: 280px;
    height: 580px;
    border-radius: 40px;
    padding: 12px;
    box-sizing: border-box;
    position: relative;
    background: #F2F2F7;
    transition: background-color 0.4s ease, transform 0.5s cubic-bezier(0.16,1,0.3,1), box-shadow 0.5s cubic-bezier(0.16,1,0.3,1);
    box-shadow: 0 8px 32px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
}
.phone-shell:hover {
    box-shadow: 0 32px 80px rgba(0,0,0,0.18), 0 8px 24px rgba(0,0,0,0.10);
}

.app-content {
    background: #FFFFFF;
    width: 100%;
    height: 100%;
    border-radius: 32px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* ===== Animations ===== */
.fade-in-up {
    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
    transform: translateY(20px);
}
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }

@keyframes fadeInUp {
    to { opacity: 1; transform: translateY(0); }
}

/* ===== Features Page ===== */

/* Pill tag (Product Tour label) */
.pill-tag {
    background: #F2F2F7;
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    color: #8E8E93;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-block;
}

/* Dot-grid background for mockup panels */
.grid-accent {
    background-image: radial-gradient(#E5E7EB 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Smaller phone shell used inside feature sections */
.features-phone-shell {
    width: 260px;
    height: 540px;
    border-radius: 40px;
    padding: 10px;
    box-sizing: border-box;
    background: #F2F2F7;
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
    position: relative;
    flex-shrink: 0;
}
.features-phone-shell .app-content {
    border-radius: 32px;
}

/* Checklist items */
.features-checklist-item {
    color: #374151; /* gray-700 */
}

/* Mini info cards in Binder section */
.features-mini-card {
    border-color: #F3F4F6; /* gray-100 */
}

/* Dark mode adjustments for Features page */
@media (prefers-color-scheme: dark) {
    .pill-tag {
        background: #1C1C1E;
        color: #636366;
    }
    .grid-accent {
        background-image: radial-gradient(#374151 1px, transparent 1px);
    }
    .features-phone-shell {
        background: #1C1C1E;
    }
    .features-checklist-item {
        color: #D1D5DB;
    }
    .features-mini-card {
        border-color: #3A3A3C;
        background-color: #1C1C1E;
    }
    /* Binder floating card */
    .features-detail-binder-float {
        background: #1C1C1E;
        border-color: #3A3A3C;
    }
    /* Context section background */
    .bg-purple-50 { background-color: #1a1025 !important; }
    .bg-gray-50.grid-accent { background-color: #111 !important; }
}

/* ===== Features Page – Screenshot Image ===== */
.features-screenshot-img {
    height: 520px;
    width: auto;
    object-fit: contain;
    border-radius: 44px;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.12));
    position: relative;
    z-index: 1;
}

/* ===== Top Page – Feature Card Link ===== */
a.feature-card {
    color: inherit;
    text-decoration: none;
    display: flex !important;
    flex-direction: column;
    align-items: center;
}
a.feature-card:hover {
    text-decoration: none;
}
/* 機能名を1行に収める */
a.feature-card h3 {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 詳しく見るをカード下部に固定 */
.features-readmore {
    color: #9CA3AF;
    transition: color 0.2s ease;
    margin-top: auto;
}
a.feature-card:hover .features-readmore {
    color: #000000;
}

@media (prefers-color-scheme: dark) {
    .features-readmore { color: #636366; }
    a.feature-card:hover .features-readmore { color: #FFFFFF; }
}

/* ===== wp_nav_menu の <a> にも nav-link スタイルを適用 ===== */
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 2rem;
}
nav ul li a {
    color: #9CA3AF;
    text-decoration: none;
    transition: color 0.2s ease;
    font-size: 0.875rem;
    font-weight: 500;
}
nav ul li a:hover,
nav ul li.current-menu-item a,
nav ul li.current_page_item a {
    color: #000000;
}

@media (prefers-color-scheme: dark) {
    nav ul li a { color: #636366; }
    nav ul li a:hover,
    nav ul li.current-menu-item a,
    nav ul li.current_page_item a { color: #FFFFFF !important; }
}

/* ===== Features CTA Section ===== */
.features-cta {
    background-color: #000000;
    color: #FFFFFF;
}
.features-cta-btn-primary {
    background-color: #FFFFFF;
    color: #000000;
}
.features-cta-btn-primary:hover {
    background-color: #F3F4F6;
    color: #000000;
    text-decoration: none;
}
.features-cta-btn-secondary {
    background-color: #1F2937; /* gray-800 */
    color: #FFFFFF;
}
.features-cta-btn-secondary:hover {
    background-color: #374151;
    color: #FFFFFF;
    text-decoration: none;
}

@media (prefers-color-scheme: dark) {
    .features-cta {
        background-color: #000000;
        color: #FFFFFF;
    }
    .features-cta-btn-primary {
        background-color: #FFFFFF;
        color: #000000;
    }
    .features-cta-btn-secondary {
        background-color: #1F2937;
        color: #FFFFFF;
    }
}

/* ===== Pricing Page ===== */

/* Plan Cards */
.pricing-card {
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.pricing-card:hover {
    transform: translateY(-8px);
}
.pricing-card-free {
    background-color: #F9FAFB !important;
    border: 1px solid #E5E7EB !important;
    color: #000000 !important;
}
.pricing-card-pro {
    background-color: #000000 !important;
    color: #FFFFFF !important;
}
.pricing-plan-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #9CA3AF;
    display: block;
}
.pricing-plan-label-pro {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #6B7280;
    display: block;
}
.pricing-popular-badge {
    background-color: rgba(255,255,255,0.15) !important;
    color: #FFFFFF !important;
}
.pricing-check-free   { color: #000000 !important; }
.pricing-check-dim    { color: #D1D5DB !important; }

/* Buttons */
.pricing-btn-free {
    border: 2px solid #000000 !important;
    color: #000000 !important;
    background-color: transparent !important;
    text-decoration: none;
    display: block;
}
.pricing-btn-free:hover {
    background-color: #000000 !important;
    color: #FFFFFF !important;
    text-decoration: none;
}
.pricing-btn-pro {
    background-color: #FFFFFF !important;
    color: #000000 !important;
    text-decoration: none;
    display: block;
}
.pricing-btn-pro:hover {
    text-decoration: none;
    opacity: 0.92;
}

/* Comparison Table */
.pricing-table-header-row {
    border-bottom: 1px solid #F3F4F6;
}
.pricing-table-row {
    border-bottom: 1px solid #F3F4F6;
}
.pricing-table-check     { color: #000000 !important; }
.pricing-table-check-dim { color: #D1D5DB !important; }
.pricing-table-value-bold { color: #000000 !important; font-weight: 700; }

/* Bottom CTA */
.pricing-bottom-cta {
    background-color: #F2F2F7 !important;
}
.pricing-cta-btn-primary {
    background-color: #000000 !important;
    color: #FFFFFF !important;
    text-decoration: none;
}
.pricing-cta-btn-primary:hover {
    color: #FFFFFF !important;
    text-decoration: none;
    opacity: 0.85;
}
.pricing-cta-btn-secondary {
    background-color: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    color: #000000 !important;
    text-decoration: none;
}
.pricing-cta-btn-secondary:hover {
    color: #000000 !important;
    text-decoration: none;
}

/* ===== Pricing Dark Mode ===== */
@media (prefers-color-scheme: dark) {
    .pricing-card-free {
        background-color: #1C1C1E !important;
        border-color: #3A3A3C !important;
        color: #FFFFFF !important;
    }
    .pricing-card-free .text-gray-500 { color: #8E8E93 !important; }
    .pricing-card-free .text-gray-400 { color: #636366 !important; }
    .pricing-card-pro {
        background-color: #000000 !important;
        color: #FFFFFF !important;
    }

    .pricing-check-free   { color: #FFFFFF !important; }
    .pricing-check-dim    { color: #3A3A3C !important; }

    .pricing-btn-free {
        border-color: #FFFFFF !important;
        color: #FFFFFF !important;
        background-color: transparent !important;
    }
    .pricing-btn-free:hover {
        background-color: #FFFFFF !important;
        color: #000000 !important;
    }
    .pricing-btn-pro {
        background-color: #FFFFFF !important;
        color: #000000 !important;
    }

    .pricing-table-header-row { border-color: #3A3A3C; }
    .pricing-table-row        { border-color: #2C2C2E; }
    .pricing-table-check      { color: #FFFFFF !important; }
    .pricing-table-check-dim  { color: #3A3A3C !important; }
    /* pricing-comparison.php の text-black クラスをダークモードで上書き */
    .pricing-table-row td i.text-black { color: #FFFFFF !important; }
    .pricing-table-value-bold { color: #FFFFFF !important; }

    .pricing-bottom-cta {
        background-color: #1C1C1E !important;
        color: #FFFFFF;
    }
    .pricing-bottom-cta .text-gray-500 { color: #8E8E93 !important; }

    .pricing-cta-btn-primary {
        background-color: #FFFFFF !important;
        color: #000000 !important;
    }
    .pricing-cta-btn-secondary {
        background-color: #2C2C2E !important;
        border-color: #3A3A3C !important;
        color: #FFFFFF !important;
    }
    .pricing-cta-btn-secondary:hover { color: #FFFFFF !important; }
}

/* ===== Pricing Card Order & Dark Mode Pro Highlight ===== */

/* ライトモード: Free左・Pro右 */
.pricing-order-pro  { order: 2; }
.pricing-order-free { order: 1; }

/* ダークモード: Pro左（白カード）・Free右 */
@media (prefers-color-scheme: dark) {
    .pricing-order-pro  { order: 1; }
    .pricing-order-free { order: 2; }

    /* Proカードをダークモードでは白く反転して目立たせる */
    .pricing-card-pro {
        background-color: #FFFFFF !important;
        color: #000000 !important;
    }
    .pricing-plan-label-pro {
        color: #6B7280 !important;
    }
    .pricing-pro-sub  { color: #6B7280 !important; }
    .pricing-pro-desc { color: #6B7280 !important; }
    .pricing-check-pro { color: #000000 !important; }
    .pricing-popular-badge {
        background-color: #000000 !important;
        color: #FFFFFF !important;
    }
    .pricing-btn-pro {
        background-color: #000000 !important;
        color: #FFFFFF !important;
    }
    .pricing-btn-pro:hover {
        opacity: 0.85;
    }
}

/* ===== Terms of Service Page ===== */

.terms-header-border {
    border-bottom: 1px solid #F3F4F6;
}

/* Sticky sidebar nav */
.sticky-nav {
    position: sticky;
    top: 2rem;
}
.legal-nav-item {
    display: block;
    padding: 0.4rem 0;
    font-size: 0.8rem;
    color: #9CA3AF;
    text-decoration: none;
    transition: color 0.2s ease;
    line-height: 1.4;
}
.legal-nav-item:hover {
    color: #000000;
    text-decoration: none;
}
.legal-nav-item.active {
    color: #000000;
    font-weight: 600;
}

/* Article sections */
.legal-section {
    margin-bottom: 3rem;
}
.legal-section h2 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1rem;
    letter-spacing: -0.01em;
}
.legal-section p,
.legal-section li {
    font-size: 0.95rem;
    color: #4B5563;
    line-height: 1.75;
    margin-bottom: 0.75rem;
}

/* Lists */
.legal-list-decimal {
    list-style: decimal;
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}
.legal-list-alpha {
    list-style: lower-alpha;
    padding-left: 1.5rem;
    margin-top: 0.5rem;
}
.legal-list-disc {
    list-style: disc;
    padding-left: 1.5rem;
    margin-top: 0.5rem;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    .terms-header-border { border-color: #3A3A3C; }
    .legal-nav-item { color: #636366; }
    .legal-nav-item:hover { color: #FFFFFF; }
    .legal-nav-item.active { color: #FFFFFF; }
    .legal-section p,
    .legal-section li { color: #8E8E93; }
    .legal-section h2 { color: #FFFFFF; }
}

/* Terms inline link */
.terms-link {
    color: #000000;
    font-weight: 600;
    text-decoration: underline;
}
.terms-link:hover {
    opacity: 0.7;
}
@media (prefers-color-scheme: dark) {
    .terms-link { color: #FFFFFF; }
}

/* ===================================================
   Hero – Phone Mockups (responsive)
   =================================================== */

/* ---- 共通ラッパー: 画像モード / HTMLモックアップ共通 ---- */
.hero-phones-wrap,
.hero-mockup-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
    padding-bottom: 1rem;
}

/* ---- 画像モード ---- */
.hero-phone-item {
    flex-shrink: 0;
    transition: transform 0.4s ease;
}
.hero-phone-item:hover { transform: translateY(-12px); }

.hero-phone-main { z-index: 2; }
.hero-phone-sub  {
    transform: none;
    opacity: 1;
    z-index: 1;
}
.hero-phone-sub:hover {
    transform: translateY(-12px);
}

.hero-phone-img {
    height: 520px;
    width: auto;
    object-fit: contain;
    display: block;
}

/* ---- HTMLモックアップ: デスクトップでも両方同じサイズ・位置 ---- */
.phone-shell-sub {
    transform: none;
    opacity: 1;
}
.phone-shell-sub:hover {
    transform: translateY(-1rem) !important;
}
.phone-shell-main { z-index: 2; }

/* ---- スマホ / 小画面: 横スクロール ---- */
@media (max-width: 767px) {
    .hero-phones-wrap,
    .hero-mockup-wrap {
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: visible;  /* hover で上に動いても見切れない */
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        padding-top: 1.5rem;  /* hover の上方向の余白 */
        gap: 1.25rem;
        align-items: center;
    }
    .hero-phones-wrap::-webkit-scrollbar,
    .hero-mockup-wrap::-webkit-scrollbar { display: none; }

    /* 画像モード */
    .hero-phone-item {
        scroll-snap-align: center;
    }
    .hero-phone-img { height: 420px; }
    /* サブのオフセット解除 */
    .hero-phone-sub {
        transform: none;
        opacity: 1;
    }
    .hero-phone-sub:hover { transform: translateY(-12px); }

    /* HTMLモックアップ: オフセット解除・等サイズ */
    .phone-shell-sub {
        transform: none !important;
        opacity: 1 !important;
        scroll-snap-align: center;
        flex-shrink: 0;
    }
    .phone-shell-sub:hover {
        transform: translateY(-1rem) !important;
    }
    .phone-shell-main {
        scroll-snap-align: center;
        flex-shrink: 0;
    }
}

/* ===================================================
   Navigation – Hamburger Menu (mobile)
   =================================================== */

.hamburger-bar {
    display: block;
    width: 22px;
    height: 2px;
    background-color: #000000;
    border-radius: 2px;
    transition: all 0.25s ease;
}
@media (prefers-color-scheme: dark) {
    .hamburger-bar { background-color: #FFFFFF; }
}

/* Open state */
#nav-toggle.is-open .hamburger-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
#nav-toggle.is-open .hamburger-bar:nth-child(2) {
    opacity: 0;
}
#nav-toggle.is-open .hamburger-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Drawer */
.nav-drawer {
    background-color: #FFFFFF;
    border-top: 1px solid #F3F4F6;
    border-bottom: 1px solid #F3F4F6;
}
.nav-drawer a,
.nav-drawer ul li a {
    font-size: 1rem;
    font-weight: 500;
    color: #000000;
    text-decoration: none;
    padding: 0.5rem 0;
    display: block;
}
.nav-drawer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

@media (prefers-color-scheme: dark) {
    .nav-drawer {
        background-color: #000000;
        border-color: #3A3A3C;
    }
    .nav-drawer a,
    .nav-drawer ul li a { color: #FFFFFF; }
}

/* ===== Privacy Policy – 追加スタイル ===== */
.legal-h3 {
    font-size: 0.95rem;
    font-weight: 700;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    letter-spacing: -0.01em;
}
.legal-contact-box {
    background-color: #F9FAFB;
    border: 1px solid #F3F4F6;
    border-radius: 1rem;
    padding: 1.5rem;
    margin-top: 1rem;
}
.legal-contact-name {
    font-weight: 600;
    color: #000000 !important;
    margin-bottom: 0.5rem;
}
.legal-contact-detail {
    font-size: 0.875rem;
    color: #6B7280 !important;
    margin-bottom: 0.25rem;
}

@media (prefers-color-scheme: dark) {
    .legal-h3 { color: #FFFFFF; }
    .legal-contact-box {
        background-color: #1C1C1E;
        border-color: #3A3A3C;
    }
    .legal-contact-name  { color: #FFFFFF !important; }
    .legal-contact-detail { color: #8E8E93 !important; }
}

/* ===== Email Verified Page ===== */

.email-success-ring {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.email-success-ring::before {
    content: '';
    position: absolute;
    width: 120%;
    height: 120%;
    border: 1px solid #E5E7EB;
    border-radius: 50%;
    animation: email-ring-pulse 2s infinite;
}
@keyframes email-ring-pulse {
    0%   { transform: scale(1);   opacity: 0.5; }
    70%  { transform: scale(1.1); opacity: 0; }
    100% { transform: scale(1.1); opacity: 0; }
}

.email-support-divider {
    border-top: 1px solid #F3F4F6;
}
.email-support-link {
    color: #000000;
    font-weight: 500;
}
.email-support-link:hover {
    text-decoration: underline;
}

@media (prefers-color-scheme: dark) {
    .email-success-ring::before { border-color: #3A3A3C; }
    .email-support-divider      { border-color: #3A3A3C; }
    .email-support-link         { color: #FFFFFF; }
}

/* Email Verified – ダークモード時チェックアイコン反転 */
@media (prefers-color-scheme: dark) {
    .email-success-icon {
        background-color: #FFFFFF !important;
        color: #000000 !important;
    }
    .email-success-icon svg,
    .email-success-icon i {
        color: #000000 !important;
        stroke: #000000 !important;
    }
}

/* ===== Account Delete Page ===== */

.account-delete-warning {
    background-color: #FFF5F5;
    border: 1px solid #FED7D7;
    border-radius: 1.5rem;
}
.account-delete-warning-icon {
    background-color: #FEE2E2;
    color: #DC2626;
}
.account-delete-warning-title { color: #7F1D1D; }
.account-delete-warning-body  { color: #B91C1C; }

.account-delete-step {
    border: 1px solid #F2F2F7;
    transition: border-color 0.3s ease, transform 0.3s ease;
}
.account-delete-step:hover {
    border-color: #000000;
    transform: translateX(4px);
}
.account-delete-step-number {
    width: 32px;
    height: 32px;
    background: #000000;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
}

.account-delete-cta-divider {
    border-top: 1px solid #F3F4F6;
}
.account-delete-btn-support {
    background-color: #000000;
    color: #FFFFFF;
}
.account-delete-btn-support:hover { color: #FFFFFF; }

/* Dark mode */
@media (prefers-color-scheme: dark) {
    .account-delete-warning {
        background-color: #2D1515;
        border-color: #5B2020;
    }
    .account-delete-warning-icon {
        background-color: #3D1A1A;
        color: #F87171;
    }
    .account-delete-warning-title { color: #FCA5A5; }
    .account-delete-warning-body  { color: #F87171; }

    .account-delete-step { border-color: #3A3A3C; }
    .account-delete-step:hover { border-color: #FFFFFF; }
    .account-delete-step-number {
        background: #FFFFFF;
        color: #000000;
    }

    .account-delete-cta-divider { border-color: #3A3A3C; }
    .account-delete-btn-support {
        background-color: #FFFFFF;
        color: #000000;
    }
    .account-delete-btn-support:hover { color: #000000; }
}

/* Account Delete – individual item icon */
.account-delete-icon-wrap {
    background-color: #F3F4F6;
    color: #4B5563;
}
@media (prefers-color-scheme: dark) {
    .account-delete-icon-wrap {
        background-color: #3A3A3C;
        color: #9CA3AF;
    }
}

/* Pricing comparison table – center columns */
.pricing-col-center {
    text-align: center;
}
.pricing-col-center i,
.pricing-col-center span {
    display: inline-flex;
    justify-content: center;
    width: 100%;
}

/* Pricing comparison – force icon block centering */
.pricing-table td.text-center i,
.pricing-table td.text-center span {
    display: block;
    text-align: center;
    margin: 0 auto;
}

/* ===== Logo Icon – 画像設定時の背景/枠を隠す ===== */
.logo-icon {
    background-color: #000000;
    color: #FFFFFF;
    flex-shrink: 0;
}
/* 画像がある場合は背景を透明に（imgがbg-blackの角丸枠を覆う） */
.logo-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px; /* rounded-xl と揃える */
}

/* ===== Contact Page ===== */
.contact-card {
    background: #F9F9FB;
    border: 1px solid #F2F2F7;
    border-radius: 40px;
    transition: all 0.3s ease;
}
.contact-card-divider {
    border-top: 1px solid #E5E7EB;
}
.mail-link {
    position: relative;
    display: inline-block;
    color: inherit;
    text-decoration: none;
}
.mail-link::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -4px;
    left: 0;
    background-color: currentColor;
    transform: scaleX(0);
    transition: transform 0.3s ease;
}
.mail-link:hover::after {
    transform: scaleX(1);
}

@media (prefers-color-scheme: dark) {
    .contact-card {
        background: #1C1C1E;
        border-color: #2C2C2E;
    }
    .contact-card:hover {
        background: #2C2C2E;
    }
    .contact-badge {
        background-color: #2C2C2E;
        color: #8E8E93;
    }
    .contact-card-divider {
        border-color: #3A3A3C;
    }
    .contact-icon-wrap {
        background-color: #2C2C2E;
    }
}