/* =====================================
     2ch風 全体デザイン
===================================== */
body {
    font-family: "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;
    background: #FFFFEE;
    margin: 0;
    padding: 20px;
}

a {
    color: #0000CC;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* =====================================
      コンテナ
===================================== */
.container,
.board-wrapper,
.thread-wrapper {
    width: 90%;
    max-width: 850px;
    margin: auto;
    background: #FFFFFF;
    padding: 20px;
    border: 1px solid #C0C0C0;
    box-shadow: 2px 2px 4px #DDD;
}

/* =====================================
      タイトル系
===================================== */
.title,
.board-title,
.thread-title {
    font-size: 22px;
    font-weight: bold;
    border-left: solid 8px #CC6600;
    padding-left: 10px;
    margin-bottom: 20px;
}

/* =====================================
      スレッド一覧（Board）
===================================== */
.thread-item {
    padding: 10px;
    margin-bottom: 8px;
    border-bottom: 1px dotted #AAA;
    background: #FAFAF0;
}

.thread-link {
    font-size: 18px;
    font-weight: bold;
}

.thread-info {
    font-size: 13px;
    color: #555;
    margin-top: 5px;
}

/* レス投稿へ移動ボタン */
.reply-btn {
    margin-top: 8px;
    padding: 4px 10px;
    background: #DDDDFF;
    border: 1px solid #8888CC;
    cursor: pointer;
}

.reply-btn:hover {
    background: #CCCCFF;
}

/* =====================================
      新規スレ作成フォーム
===================================== */
.new-thread-box {
    margin-top: 20px;
    padding: 15px;
    background: #FFF8DD;
    border: 1px solid #E0D0A0;
}

.thread-input,
.post-input {
    width: 95%;
    padding: 5px;
    border: 1px solid #AAA;
}

.thread-textarea,
.post-textarea {
    width: 95%;
    height: 80px;
    padding: 5px;
    border: 1px solid #AAA;
}

.thread-create-btn,
.post-btn {
    padding: 6px 12px;
    background: #FFEE99;
    border: 1px solid #CCAA55;
    cursor: pointer;
}

.thread-create-btn:hover,
.post-btn:hover {
    background: #FFE066;
}

/* =====================================
      スレッド表示（Thread）
===================================== */
.res-item {
    padding: 10px 5px;
    border-bottom: 1px dotted #AAA;
    background: #FFFFFF;
}

.res-meta {
    font-size: 13px;
    color: #008800;
    font-weight: bold;
}

.res-body {
    margin: 5px 0;
    font-size: 14px;
    white-space: pre-wrap;
}

.res-image {
    max-width: 250px;
    border: 1px solid #CCC;
    margin-top: 5px;
}

/* =====================================
      投稿フォーム
===================================== */
.post-form {
    margin-top: 25px;
    background: #FFF8DD;
    padding: 15px;
    border: 1px solid #E0D0A0;
}

/* =====================================
      ログ表示（デバッグ用）
===================================== */
#log {
    background: #EEEEEE;
    padding: 10px;
    border: 1px solid #CCCCCC;
    margin-top: 15px;
    font-size: 12px;
    height: 150px;
    overflow-y: scroll;
}

/* =====================================
      ボタン共通
===================================== */
button {
    font-family: "MS PGothic", sans-serif;
}

/* =====================================
      アンカーリンク（>>1）
===================================== */
a[href^="#res-"] {
    color: #0000CC;
    font-weight: bold;
}

a[href^="#res-"]:hover {
    text-decoration: underline;
}

/* =====================================
      レスポンスのハイライト
===================================== */
.res-item.highlight {
    background: #FFEE99 !important;
    transition: background 0.5s ease;
}

/* =====================================
      スマホ対応（レスポンシブ）
===================================== */
@media screen and (max-width: 600px) {
    .container,
    .board-wrapper,
    .thread-wrapper {
        width: 95%;
        padding: 15px;
    }

    .res-image {
        max-width: 95%;
    }

    .thread-input,
    .post-input,
    .thread-textarea,
    .post-textarea {
        width: 100%;
    }
}

/* =====================================
      認証ページ（login / register）
===================================== */

.auth-box {
    background: #FFF8DD;
    border: 1px solid #E0D0A0;
    padding: 20px;
    margin-top: 20px;
}

.auth-input {
    width: 95%;
    padding: 8px;
    border: 1px solid #AAA;
    font-size: 16px;
}

.auth-btn {
    padding: 8px 15px;
    background: #FFEE99;
    border: 1px solid #CCAA55;
    cursor: pointer;
    font-size: 16px;
}

.auth-btn:hover {
    background: #FFE066;
}

.auth-link {
    color: #0000CC;
    font-size: 14px;
}

.auth-link:hover {
    text-decoration: underline;
}