/* accounts.css - Accounts page specific styles (3-column Boxes) */

.account-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin: 1.5rem 0 3rem;
    padding: 0;
    list-style: none;
}

.account-grid li {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 0;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 64px;
    /* ボックスらしさを出すための高さ */
    overflow: hidden;
    /* 角丸のはみ出しをカット */
}

.account-grid li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 15px 10px;
    color: var(--text-color);
    background-color: var(--bg-color);
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.account-grid li:hover {
    transform: translateY(-3px);
}

/* 各プラットフォームのカラースタイル (サイトのトーンに合わせて微調整 & 16進数) */
.account-grid li a.is-youtube {
    --p-color: #e52d27;
}

.account-grid li a.is-x {
    --p-color: #444444;
}

.account-grid li a.is-instagram {
    --p-color: #d62976;
    --p-grad: linear-gradient(45deg, #405DE6, #5851DB, #833AB4, #C13584, #E1306C, #FD1D1D);
}

.account-grid li a.is-instagram::before {
    background: var(--p-grad);
}


.account-grid li a.is-tiktok {
    --p-color: #000;
}

.account-grid li a.is-nicovideo {
    --p-color: #6d6d6d;
    --p-alum: linear-gradient(to bottom, #eeeeee 0%, #cccccc 40%, #aaaaaa 60%, #eeeeee 100%);
}

.account-grid li a.is-nicovideo::before {
    background: var(--p-alum);
}


.account-grid li a.is-piapro {
    --p-color: #ff3b9a;
}

.account-grid li a.is-tunecore {
    --p-color: #ff1212;
}

.account-grid li a.is-skeb {
    --p-color: #2b8c89;
}

.account-grid li a.is-vgen {
    --p-color: #92d40d;
}

.account-grid li a.is-discord {
    --p-color: #7289da;
}

.account-grid li a.is-threads {
    --p-color: #444444;
}

.account-grid li a.is-audiostock {
    --p-color: #b30000;
}

.account-grid li a.is-github {
    --p-color: #000;
}

.account-grid li a.is-booth {
    --p-color: #fc4d50;
}

.account-grid li a.is-soundcloud {
    --p-color: #ff8800;
}

.account-grid li a.is-bluesky {
    --p-color: #0085ff;
}

.account-grid li a.is-twitch {
    --p-color: #a970ff;
}

.account-grid li a.is-pixiv {
    --p-color: #0096fa;
}

.account-grid li a.is-note {
    --p-color: #1a233b;
}

.account-grid li a.is-kyusan {
    --p-color: #ff9900;
}

.account-grid li a.is-foriio {
    --p-color: #4e59e8;
}

.account-grid li a.is-dlsite {
    --p-color: #0066cc;
}

.account-grid li a[class^="is-"] {
    position: relative;
    border: 3px solid transparent;
    /* デフォルトは枠線なし */
    border-radius: 12px;
    background-color: transparent;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 1;
}

/* ほんのり背景色 (Subtle Tint Overlay) */
.account-grid li a[class^="is-"]::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--p-color);
    opacity: 0;
    /* デフォルトは極薄 */
    z-index: -1;
    transition: all 0.3s ease;
}

.account-grid li a[class^="is-"]:hover {
    border-color: var(--p-color);
    /* ホバー時に3pxの枠線を出す */
    color: var(--p-color);
    box-shadow: 0 5px 15px -5px var(--p-color);
    transform: none;
}

.account-grid li a[class^="is-"]:hover::before {
    opacity: 0.1;
    /* ホバー時に少し背景色を出す */
}


/* アイコンやロゴを目立たせる場合はここを調整（現在はテキストのみ） */


/* カテゴリ見出しをより明確に */
.common-section h3 {
    margin-top: 3rem;
    margin-bottom: 1.2rem;
    font-size: 1.2rem;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--card-border);
}

/* スマホでは2列 */
@media screen and (max-width: 768px) {
    .account-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 10px;
    }

    .account-grid li {
        min-height: 56px;
    }

    .account-grid li a {
        font-size: 0.9rem;
        padding: 12px 8px;
    }
}