/*
Theme Name: Cocoon Child
Theme URI: https://wp-cocoon.com/
Description: ダスティモーヴ（Dusty Mauve）スキン。ダークなモーヴブラウンと柔らかなラベンダー、ローズピンクを基調とした落ち着きのある上品なデザイン。
Author: ABCD
Author URI: 
Template: cocoon-master
Version: 1.0.0
*/

:root {
    --color-main: #B07ACB;
    --color-main-dark: #7B5A86;
    --color-main-light: #D2A1DA;
    --color-accent: #F08AB7;
    --color-accent-hover: #F5B0CF;
    --color-bg: #2A1F2D;
    --color-bg-sub: #342638;
    --color-text: #F2EAF6;
    --color-text-sub: #C8B8CF;
    --color-border: rgba(210, 161, 218, 0.24);
}

body {
    background: var(--color-bg);
    background: radial-gradient(circle at center, #46344B 0%, var(--color-bg) 72%);
    color: var(--color-text);
    font-family: "Georgia", serif;
}

a {
    color: var(--color-accent);
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

a:hover {
    color: var(--color-accent-hover);
}

p {
    color: var(--color-text);
    line-height: 1.8;
}

.site-header {
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-accent);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.navi ul li a {
    color: var(--color-text);
    border-bottom: 2px solid transparent;
    transition: border-color 0.3s ease;
}

.navi ul li a:hover {
    color: var(--color-accent-hover);
    border-bottom: 2px solid var(--color-accent-hover);
}

.main {
    background: unset;
}

.main-container {
    background: transparent;
}

.entry-card {
    background: var(--color-bg-sub);
    border: 1px solid var(--color-border);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.entry-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(176, 122, 203, 0.36);
}

.entry-title a {
    color: var(--color-text);
}

.entry-title a:hover {
    color: var(--color-accent-hover);
}

.sidebar {
    background: transparent;
}

.widget {
    background: var(--color-bg-sub);
    border: 1px solid var(--color-border);
    margin-bottom: 20px;
    padding: 15px;
    border-radius: 5px;
}

.widget-title {
    color: var(--color-accent);
    border-bottom: 1px solid var(--color-main);
    padding-bottom: 5px;
    margin-bottom: 10px;
}

.article {
    background: transparent;
    padding: 20px;
}

.article h2 {
    color: var(--color-main-light);
    border-left: 5px solid var(--color-main);
    border-bottom: 1px solid var(--color-main-dark);
    padding: 10px 15px;
    margin-top: 30px;
}

.article h3 {
    color: var(--color-accent);
    border-bottom: 1px dashed var(--color-border);
    padding-bottom: 5px;
    margin-top: 20px;
}

.btn,
button,
input[type="submit"] {
    background: var(--color-main);
    color: var(--color-text);
    border: 1px solid var(--color-accent);
    transition: background 0.3s ease, color 0.3s ease;
}

.btn:hover,
button:hover,
input[type="submit"]:hover {
    background: var(--color-accent);
    color: var(--color-bg);
    border-color: var(--color-accent-hover);
}

blockquote {
    background: var(--color-bg-sub);
    border-left: 5px solid var(--color-accent);
    color: var(--color-text);
    padding: 15px;
    font-style: italic;
}

.toc {
    background: var(--color-bg-sub);
    border: 1px solid var(--color-main);
    padding: 15px;
    border-radius: 5px;
}

.toc-title {
    color: var(--color-accent);
    border-bottom: 1px solid var(--color-main);
    padding-bottom: 5px;
}

.toc ul li a {
    color: var(--color-text);
}

.toc ul li a:hover {
    color: var(--color-accent-hover);
}

.comment-area {
    background: var(--color-bg-sub);
    border: 1px solid var(--color-border);
    padding: 20px;
    border-radius: 5px;
}

.comment-reply-link {
    color: var(--color-accent);
}

.pagination .page-numbers {
    background: var(--color-bg-sub);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.pagination .page-numbers:hover,
.pagination .current {
    background: var(--color-main);
    color: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
}

pre,
code {
    background: #3E2F43;
    color: #8BE0C2;
    border: 1px solid #59465F;
    padding: 5px;
    border-radius: 3px;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
textarea {
    background: var(--color-bg-sub);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    padding: 8px;
    border-radius: 3px;
}

.site-footer {
    background: var(--color-bg-sub);
    border-top: 1px solid var(--color-main);
    color: var(--color-text-sub);
}

.post-meta,
.post-meta a {
    color: var(--color-text-sub);
}

.post-meta a:hover {
    color: var(--color-accent-hover);
}

.label-tag,
.label-category {
    background: var(--color-main-dark);
    color: var(--color-text);
    border: 1px solid var(--color-main);
}

.label-tag:hover,
.label-category:hover {
    background: var(--color-main);
    color: var(--color-accent-hover);
}

.balloon-box {
    background: var(--color-bg-sub);
    border: 1px solid var(--color-main);
}

.balloon-box::before {
    border-right-color: var(--color-main);
}

.balloon-box::after {
    border-right-color: var(--color-bg-sub);
}