* { margin: 0; padding: 0; box-sizing: border-box; }
body { background-color: #FFFFEE; font-family: 'MS PGothic','IPAMonaPGothic','Mona','Osaka','Hiragino Kaku Gothic Pro',sans-serif; font-size: 16px; color: #800000; line-height: 1.6; }
a { color: #0000EE; text-decoration: underline; }
a:visited { color: #551A8B; }
a:hover { color: #DD0000; }
.board-container { max-width: 960px; margin: 0 auto; padding: 8px 16px; }
.nav-bar { font-size: 13px; color: #800000; padding: 2px 0; }
.nav-bar a { color: #0000EE; margin: 0 2px; }
.nav-hr { border: none; border-top: 1px solid #D9BFB7; margin: 4px 0; }
.board-title { text-align: center; font-size: 24px; color: #CC1105; font-weight: bold; margin: 10px 0 16px 0; letter-spacing: 2px; }
.board-search-form { margin-bottom: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.board-search-form .board-search-input { width: 220px; max-width: 100%; border: 1px solid #AAA; padding: 4px 8px; font-size: 14px; font-family: inherit; }
.board-search-form .board-search-submit { background: #F0E0D6; border: 1px solid #AAA; padding: 4px 12px; font-size: 14px; cursor: pointer; font-family: inherit; color: #800000; }
.board-search-form .board-search-submit:hover { background: #E8D0C0; }
.thread-see-all-hint { font-size: 12px; color: #800000; margin-left: 2px; }
.board-pagination { margin-left: 12px; }
.board-pagination a { margin: 0 4px; }
.thread-page-title { font-size: 20px; font-weight: bold; color: #CC1105; margin: 8px 0 12px 0; }
.form-and-pinups { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 16px; }
.form-and-pinups-left { flex: 1; min-width: 0; }
.pinups-panel { width: 280px; flex-shrink: 0; background: #F0E0D6; border: 1px solid #D9BFB7; font-size: 14px; color: #800000; display: flex; flex-direction: column; max-height: 360px; overflow: hidden; }
.pinups-title { flex-shrink: 0; background-color: #EA8060; color: #800000; font-weight: bold; padding: 6px 8px; border-bottom: 1px solid #D9BFB7; }
.pinups-list { flex: 1 1 0; min-height: 280px; max-height: 320px; overflow: auto; overflow-x: hidden; padding: 6px; -webkit-overflow-scrolling: touch; }
.pinup-item { padding: 6px 0; border-bottom: 1px solid #E0D0C8; font-size: 14px; line-height: 1.45; min-width: 0; overflow: hidden; }
.pinup-item:last-child { border-bottom: none; }
.pinup-date { font-size: 12px; color: #800000; display: block; margin-bottom: 2px; }
.pinup-body { word-break: break-word; overflow-wrap: break-word; margin-bottom: 4px; min-width: 0; overflow: hidden; }
.pinup-del-btn { font-size: 12px; color: #CC0000; cursor: pointer; text-decoration: underline; }
.pinup-del-btn:hover { color: #990000; }
.post-form-wrap { margin-bottom: 16px; }
.post-form { display: inline-block; }
.form-table { border-collapse: collapse; background: #F0E0D6; }
.form-label { background-color: #EA8060; color: #800000; font-weight: bold; font-size: 14px; padding: 2px 8px; text-align: left; vertical-align: middle; white-space: nowrap; border: 1px solid #D9BFB7; }
.form-label-comment { vertical-align: top; padding-top: 6px; }
.form-table td { padding: 2px 4px; border: 1px solid #D9BFB7; background: #F0E0D6; }
.form-input { width: 320px; border: 1px solid #AAA; padding: 2px 4px; font-size: 14px; font-family: inherit; }
.form-input-title { width: 220px; }
.form-textarea { width: 480px; border: 1px solid #AAA; padding: 4px; font-size: 14px; font-family: inherit; resize: vertical; }
.form-input-small { width: 120px; border: 1px solid #AAA; padding: 2px 4px; font-size: 14px; font-family: inherit; }
.form-select { border: 1px solid #AAA; padding: 2px 4px; font-size: 14px; font-family: inherit; background: #F0E0D6; color: #800000; min-width: 4em; }
.form-submit { background: #F0E0D6; border: 1px solid #AAA; padding: 2px 12px; font-size: 14px; font-weight: bold; cursor: pointer; font-family: inherit; color: #800000; }
.form-submit:hover { background: #E8D0C0; }
.form-submit-small { padding: 1px 8px; font-size: 13px; }
.form-submit-cell { text-align: center; padding: 6px !important; }
.form-file { font-size: 13px; }
.form-noimage { font-size: 13px; margin-left: 8px; color: #800000; }
.form-hint { font-size: 12px; color: #800000; }
.form-notes { font-size: 12px; color: #800000; margin-top: 6px; padding-left: 20px; line-height: 1.5; }
.form-notes li { margin-bottom: 1px; }
.error-msg { background: #FFE0E0; color: #CC0000; border: 1px solid #CC0000; padding: 6px 12px; margin: 8px 0; font-size: 14px; }
.success-msg { background: #E0FFE0; color: #006600; border: 1px solid #006600; padding: 6px 12px; margin: 8px 0; font-size: 14px; }
.section-hr, .thread-hr { border: none; border-top: 1px solid #D9BFB7; margin: 12px 0; }
.thread-block { margin: 8px 0; }
.thread-title-bar { margin-bottom: 4px; }
.thread-title-text { font-size: 18px; font-weight: bold; color: #CC1105; }
.thread-del-btn { font-size: 12px; color: #CC0000; cursor: pointer; text-decoration: underline; font-weight: normal; }
.thread-del-btn:hover { color: #990000; }
.post { margin: 0 0 4px 0; }
.post-header { font-size: 14px; line-height: 1.4; color: #800000; word-break: break-all; }
.post-num { font-weight: bold; color: #800000; margin-right: 2px; }
.post-label { color: #800000; }
.post-name b { color: #117743; }
.post-name-email { color: #0000EE !important; text-decoration: underline; }
.post-name-email b { color: #0000EE; }
.post-trip { color: #117743; font-weight: normal; }
.post-separator { color: #800000; }
.post-date { color: #800000; font-size: 14px; }
.post-no { color: #800000; font-size: 14px; }
.post-expand-btn { display: inline-block; color: #800000; cursor: pointer; font-weight: bold; font-size: 14px; margin-left: 4px; user-select: none; min-width: 14px; text-align: center; }
.post-expand-btn:hover { color: #DD0000; }
.post-menu { font-size: 13px; margin-left: 4px; }
.agree-btn { display: inline-block; color: #117743; cursor: pointer; font-size: 13px; text-decoration: underline; margin-right: 8px; }
.agree-btn:hover { color: #0a5c30; }
.agree-btn-done { color: #999; text-decoration: none; cursor: default; }
.owner-del-btn { display: inline-block; color: #CC0000; cursor: pointer; font-size: 13px; text-decoration: underline; }
.owner-del-btn:hover { color: #990000; }
.post-body { padding: 4px 0 4px 24px; font-size: 16px; color: #800000; word-break: break-word; overflow-wrap: break-word; }
.reply-link { color: #0000EE; text-decoration: underline; }
.reply-link:hover { color: #DD0000; }
.post-file { margin: 4px 0 8px 0; }
.post-image { max-width: 300px; max-height: 300px; border: 1px solid #D9BFB7; display: block; margin: 4px 0; }
.post-video { max-width: 400px; max-height: 300px; display: block; margin: 4px 0; }
.post-audio { display: block; margin: 4px 0; max-width: 100%; }
.post-file-link { color: #0000EE; text-decoration: underline; }
.post-file-link:hover { color: #DD0000; }
.post-file-info { font-size: 12px; color: #800000; display: block; }
.thread-footer { font-size: 13px; margin-top: 4px; padding: 2px 0; color: #800000; }
.reply-btn { color: #0000EE; text-decoration: underline; font-weight: bold; }
.thread-post-count { margin-left: 8px; color: #800000; }
.reply-form-wrap { margin-top: 16px; }
.delete-form-wrap { margin-top: 12px; padding: 6px 0; border-top: 1px solid #D9BFB7; font-size: 13px; }
.delete-form { display: inline; }
.delete-form-label { font-weight: bold; color: #800000; margin-right: 4px; }
.thread-full-msg { text-align: center; color: #CC0000; font-weight: bold; font-size: 16px; padding: 12px; margin: 12px 0; border: 1px solid #CC0000; background: #FFE8E8; }
.no-threads { text-align: center; padding: 24px; color: #800000; font-size: 16px; }
.board-footer { margin-top: 20px; padding-top: 8px; border-top: 1px solid #D9BFB7; }
.admin-status { background: #E8FFE8; border: 1px solid #4a4; color: #040; padding: 8px 12px; margin: 12px 0; font-weight: bold; font-size: 14px; }
.admin-link { font-size: 11px; color: #999; text-decoration: none; }
.admin-link:hover { color: #666; }
@media (max-width: 640px) {
    body { font-size: 14px; }
    .board-container { padding: 4px 8px; }
    .form-and-pinups { flex-direction: column; }
    .pinups-panel { width: 100%; min-width: 0; max-width: 100%; max-height: 240px; display: flex; flex-direction: column; overflow: hidden; }
    .pinups-list { flex: 1 1 0; min-height: 160px; max-height: 200px; overflow: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
    .form-input, .form-textarea { width: 100%; max-width: 100%; }
    .form-input-title { width: 60%; }
    .form-table { width: 100%; }
    .form-table td { display: block; width: 100%; }
    .post-image { max-width: 100%; }
}