:root {
    --main-color: #60a5fa;      
    --accent-color: #ff87a3;
    --card-bg: #ffffff;
    --text-main: #4a4a4a;
    --text-muted: #888888;
    --radius: 24px;
    --main-max-width: 600px;
}

html { scroll-behavior: smooth; }

body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    background-color: #fff9e6;
    background-size: 20px 20px;
    color: var(--text-main);
    margin: 0;
    padding: 15px 10px;
}

.container {
    max-width: var(--main-max-width);
    margin: 0 auto;
}

/* ヘッダー */
h1 {
    position: relative;
    text-align: center;
    background-color: #ffffff; 
    color: #ea580c; 
    font-size: 1.4rem;
    font-weight: 800;
    margin: 10px 0 15px; 
    padding: 16px;
    border: 3px solid #fdba74; 
    border-radius: 16px;
    box-shadow: 0 4px 0 #fdba74;
    letter-spacing: 1px;
}
h1::before {
    content: "✨";
    position: absolute;
    top: -12px;
    left: -10px;
    font-size: 1.8rem;
    transform: rotate(-10deg);
}
h1 .circle-char {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background-color: #ea580c; 
    color: #ffffff; 
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: text-bottom;
}

/* カード共通 */
.post-form, .comment-item, .post-complete, .token-warning {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: 0 6px 16px rgba(255, 205, 56, 0.2);
    border: 3px solid #fff0b3;
    padding: 24px;
    padding-top:0;
    padding-left:10px;
    padding-right:10px;
    margin-bottom: 24px;
    box-sizing: border-box;
}

/* フォーム要素 */
label {
    display: block;
    font-size: 0.95rem;
    font-weight: bold;
    color: var(--main-color);
    margin: 15px 0 8px;
}
label:first-child { margin-top: 0; }

input[type="text"], textarea {
    width: 100%;
    padding: 14px;
    border: 3px solid #cbd5e1;
    border-radius: 16px;
    font-size: 1rem; 
    color: var(--text-main);
    background-color: #f8fafc;
    box-sizing: border-box;
    transition: all 0.2s;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}
input[type="text"]:focus, textarea:focus {
    outline: none;
    border-color: #ff87a3;
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(255, 135, 163, 0.2);
}
textarea { min-height: 120px; resize: vertical; }

button[type="submit"] {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 100vh;
    background-color: var(--accent-color);
    color: #fff;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    margin-top: 20px;
    box-shadow: 0 5px 0 #e05c7e;
    transition: all 0.1s;
}
button[type="submit"]:active { 
    transform: translateY(5px);
    box-shadow: 0 0 0 #e05c7e;
}
button[type="submit"]:hover { background-color: #ff7293; }

/* キャラ選択 */
.character-select {
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
    padding: 4px;
}
.character-select label {
    flex: 0 0 calc(25% - 6px); 
    margin: 0;
    cursor: pointer;
}
.character-select input[type="radio"] { display: none; }
.character-select img {
    width: 100%;
    height: 55px;
    object-fit: contain;
    border-radius: 12px;
    padding: 4px;
    border: 3px solid transparent;
    background-color: #f1f5f9;
    transition: all 0.2s;
    box-sizing: border-box;
}
.character-select input[type="radio"]:checked + img {
    border-color: #60a5fa; 
    transform: translateY(-3px);
    box-shadow: 0 4px 0 #2563eb; 
}
.character-select input[value="chiikawa"]:checked+img { background-color: #fff6e3; }
.character-select input[value="hachiware"]:checked+img { background-color: #e3f2ff; }
.character-select input[value="usagi"]:checked+img { background-color: #ffe3ed; }
.character-select input[value="momonga"]:checked+img { background-color: #f1e3ff; }
.character-select input[value="kurimanju"]:checked+img { background-color: #fff1c9; }
.character-select input[value="rakko"]:checked+img { background-color: #e3fff2; }
.character-select input[value="shisa"]:checked+img { background-color: #e3f8ff; }
.character-select input[value="furuhonya"]:checked+img { background-color: #ffeaf4; }

/* コメント一覧 */
.comment-container { margin-top: 30px; }
.comment-item { padding: 20px; transition: opacity 0.3s; }
.comment-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-weight: bold;
    font-size: 1.05rem;
    overflow: hidden; 
}
.comment-header img {
    width: 48px;
    height: 48px;
    background-color: #ffffff;
    border: 3px solid #ffcd38;
    border-radius: 50%;
    padding: 2px;
    box-shadow: 0 3px 0 #d97706;
    object-fit: contain;
    flex-shrink: 0; 
}
.comment-header span {
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis; 
}

.comment-body-container {
    background-color: #f0f7ff;
    border: 3px solid #bae6fd;
    border-radius: 16px;
    padding: 18px;
    position: relative;
    margin-left: 0; 
    margin-bottom: 10px;
    margin-top: 8px;
}
.comment-body-container::before {
    content: "";
    position: absolute;
    top: -14px;
    left: 21px; 
    border-bottom: 12px solid #bae6fd;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}
.comment-body-container::after {
    content: "";
    position: absolute;
    top: -10px;
    left: 23px; 
    border-bottom: 10px solid #f0f7ff;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
}

/* IDコピーボタン */
.id-copy-container {
    display: inline-flex;
    align-items: stretch; 
    background: #ffffff; 
    border: 2px solid #7dd3fc;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 12px;
    box-shadow: 0 3px 0 #38bdf8;
    max-width: 100%; 
}
.copy-id-no {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    font-family: monospace;
    font-weight: bold;
    font-size: 1rem;
    color: #4a4a4a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
}
.copy-id-btn {
    background: #38bdf8;
    border: none;
    border-left: 2px solid #0284c7;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: bold;
    color: #fff;
    transition: 0.2s;
    white-space: nowrap; 
    flex-shrink: 0; 
}
.copy-id-btn:hover { background: #0284c7; }

.comment-body {
    line-height: 1.6;
    word-break: break-word;
    font-size: 1rem;
    color: #1e293b;
}

/* アクションボタン */
.action-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 15px;
    flex-wrap: wrap; 
}
.btn-share-x, .btn-delete {
    padding: 8px 16px;
    border-radius: 100vh;
    font-size: 0.9rem;
    font-weight: bold;
    text-decoration: none !important; 
    cursor: pointer;
    border: none;
    display: inline-flex;
    align-items: center;
    box-shadow: 0 3px 0 rgba(0,0,0,0.2);
    transition: 0.2s;
    white-space: nowrap; 
}
.btn-share-x:active, .btn-delete:active {
    transform: translateY(3px);
    box-shadow: 0 0 0 rgba(0,0,0,0);
}
.btn-share-x { background: #1d9bf0; color: #fff !important; }
.btn-share-x:hover { background: #1a8cd8; }
.btn-delete { background: #ef4444; color: #fff !important; }
.btn-delete:hover { background: #dc2626; }

.comment-footer { text-align: right; font-size: 0.85rem; color: var(--text-muted); font-weight: bold; }
.deleted-msg { text-align: center; color: var(--text-muted); padding: 15px; font-style: italic; background:#f8fafc; border-radius:12px; }
.admin-deleted-msg {
    text-align: center;
    color: #ef4444;
    padding: 15px;
    font-weight: bold;
    background: #fee2e2;
    border-radius: 12px;
    border: 2px dashed #f87171;
}
.post-complete h2 { color: #10b981; margin: 0; font-size: 1.2rem; }
.token-warning h2 { color: var(--accent-color); margin: 0; font-size: 1.2rem; }

/* ページネーション */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: 30px 0 10px;
    flex-wrap: wrap;
}
.page-num, .page-nav {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    background: #fff;
    border: 1px solid #38bdf8;
    border-radius: 4px;
    color: #0284c7;
    text-decoration: none;
    font-size: 0.95rem;
    transition: 0.2s;
    box-sizing: border-box;
}
.page-num:hover, .page-nav:hover:not(.disabled) { background: #e0f2fe; }
.page-num.active { background: #2cb1ed; color: #fff; border-color: #2cb1ed; }
.page-nav.disabled { border-color: #cbd5e1; color: #94a3b8; pointer-events: none; }
.page-dots { color: #64748b; font-weight: bold; padding: 0 2px; }

/* トップへ戻るボタン（固定フロート用） */
.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: var(--accent-color);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: 0 4px 0 #e05c7e, 0 6px 12px rgba(0,0,0,0.15);
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
}
.back-to-top.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.back-to-top:active {
    transform: translateY(4px) !important;
    box-shadow: 0 0 0 #e05c7e !important;
}

/* フィルタと日付見出し */
.date-heading {
    background: linear-gradient(135deg, #f97316, #fb923c);
    color: #fff;
    padding: 8px 18px;
    border-radius: 12px;
    font-size: 1.1rem;
    margin: 35px 0 15px;
    box-shadow: 0 4px 0 #c2410c;
    display: inline-block;
}
.filter-wrapper { margin-top: 20px; text-align: center; }
.filter-toggle-btn {
    background: #fff;
    border: 3px solid #60a5fa;
    color: #60a5fa;
    padding: 10px 24px;
    border-radius: 100vh;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 3px 0 #60a5fa;
    transition: 0.2s;
    width: 85%; 
    max-width: 340px;
}
.filter-toggle-btn:active { transform: translateY(3px); box-shadow: none; }
.filter-toggle-btn.open { background: #60a5fa; color: #fff; }

.filter-panel {
    background: #fff;
    border: 3px solid #bae6fd;
    border-radius: 16px;
    padding: 20px;
    margin-top: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    text-align: left;
}
.filter-char-select {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.filter-char-select label { flex: 0 0 calc(25% - 8px); cursor: pointer; margin: 0; }
.filter-char-select input { display: none; }
.filter-char-select img {
    width: 100%; height: 50px; object-fit: contain;
    border-radius: 12px; padding: 4px; border: 3px solid transparent;
    transition: 0.2s; box-sizing: border-box;
    filter: grayscale(100%) opacity(40%); 
    background: #f1f5f9;
}
.filter-char-select input:checked + img {
    filter: none; 
    background: #eff6ff;
    border-color: #60a5fa;
    box-shadow: 0 3px 0 #60a5fa;
    transform: translateY(-2px);
}
.filter-toggle-switch { margin-top: 15px; border-top: 2px dashed #e2e8f0; padding-top: 15px; }
.toggle-label-container {
    display: inline-flex; align-items: center; cursor: pointer; margin: 0; font-weight: bold; color: #4a4a4a;
}
.toggle-label-container input { display: none; }
.toggle-slider {
    position: relative; width: 46px; height: 26px; background-color: #cbd5e1;
    border-radius: 100vh; margin-right: 10px; transition: 0.3s;
}
.toggle-slider::before {
    content: ""; position: absolute; height: 20px; width: 20px;
    left: 3px; bottom: 3px; background-color: white; border-radius: 50%; transition: 0.3s;
}
.toggle-label-container input:checked + .toggle-slider { background-color: #10b981; }
.toggle-label-container input:checked + .toggle-slider::before { transform: translateX(20px); }

/* 広告用コンテナ */
.ad-wrapper {
    margin: 25px auto;
    text-align: center;
    padding: 10px;
    background: #f8fafc;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
}
.ad-wrapper::before {
    content: "スポンサーリンク";
    display: block;
    font-size: 0.75rem;
    color: #94a3b8;
    margin-bottom: 8px;
    text-align: center;
}

/* 静的ページ（規約・使い方等）のスタイル */
.page-content {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: 0 6px 16px rgba(255, 205, 56, 0.2);
    border: 3px solid #fff0b3;
    padding: 24px;
    margin-bottom: 24px;
    box-sizing: border-box;
    line-height: 1.8;
    color: var(--text-main);
}
.page-content h2 {
    color: var(--main-color);
    font-size: 1.15rem;
    background-color: #f0f7ff;
    border-left: 6px solid #38bdf8;
    padding: 10px 15px;
    margin-top: 35px;
    border-radius: 0 8px 8px 0;
}
.page-content h2:first-child { margin-top: 0; }
.page-content h3 {
    color: var(--text-main);
    font-size: 1.05rem;
    border-bottom: 2px dotted #bae6fd;
    padding-bottom: 5px;
    margin-top: 25px;
    margin-bottom: 10px;
}
.page-content ul { padding-left: 20px; }
.page-content a { color: var(--main-color); font-weight: bold; }

/* 掲示板ヘッダーの「使い方」ボタン */
.header-nav-wrapper {
    text-align: right;
    margin-bottom: 25px; 
    padding-right: 5px;
}
.header-nav-btn {
    display: inline-block; 
    background: #ffffff; /* ★修正：白背景に変更 */
    color: #ea580c !important; 
    border: 2px solid #fdba74;
    padding: 6px 14px; 
    border-radius: 100vh;
    font-size: 0.85rem;
    font-weight: bold;
    text-decoration: none !important; 
    box-shadow: 0 3px 0 #fdba74;
    transition: 0.2s;
    white-space: nowrap;
}
.header-nav-btn:active {
    transform: translateY(3px); 
    box-shadow: none;
}

/* ★追加：「掲示板へ戻る」などページ下部のナビゲーション用ボタン */
.btn-back-home {
    display: inline-block;
    background: #ffffff;
    color: #60a5fa;
    border: 3px solid #60a5fa;
    padding: 12px 30px;
    border-radius: 100vh;
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 4px 0 #60a5fa;
    transition: 0.1s;
}
.btn-back-home:hover {
    background: #f0f7ff;
}
.btn-back-home:active {
    transform: translateY(4px);
    box-shadow: none;
}

/* フッターリンク用のスタイル */
.footer-link {
    color: #60a5fa !important;
    text-decoration: none;
    font-weight: bold;
}
.footer-link:hover {
    text-decoration: underline;
}

/* スマホ向け最適化 */
@media (max-width: 480px) {
    body { padding: 10px 5px; }
    
    h1 {
        font-size: 1.1rem;
        padding: 12px 5px;
        letter-spacing: 0;
    }
    h1 .circle-char {
        width: 1.6rem;
        height: 1.6rem;
    }

    .post-form, .comment-item, .post-complete, .token-warning, .page-content { padding: 20px 12px; }
    .comment-header { gap: 8px; }
    .comment-header img { width: 40px; height: 40px; }
    .comment-header span { font-size: 0.9rem; letter-spacing: -0.5px; }
    .copy-id-no { font-size: 0.9rem; padding: 6px 8px; letter-spacing: -0.5px;}
    .copy-id-btn { font-size: 0.85rem; padding: 6px 10px; }
    .comment-body-container { padding: 14px; }
}