/* ==========================================================
   Project: NOOKBBS
   File: nookbbs_style.css
   Version: 1.0
   Author: MOMOWORK
   Created: 2025-10-09
   Updated: 2025-10-12
   License: MIT
   Description: 投稿処理＋認証付きCGI（UTF-8完全対応）
                JS連動箇所を注釈で明示したCSS整理版
   ========================================================== */


/* ===== 全体レイアウト ===== */
html {line-height:1.5; tab-size:4;} /* 文字行間とタブ幅を調整 */
body {margin:0; padding:0; min-height:100vh; overflow-y:auto; font-family:sans-serif; color:#333; background:#f0f0f0;} /* ページ全体の基本設定 */
#container {margin:0 auto; padding:80px 0.5em; min-height:calc(100vh - 130px); overflow-x:hidden; overflow-y:auto; box-sizing:border-box; -webkit-overflow-scrolling:touch;} /* メイン領域（JSで投稿を追加） */


/* ===== ヘッダー（JS非連動） ===== */
header {position:fixed; top:0; left:0; width:100%; height:80px; display:flex; align-items:center; justify-content:center; padding:0 10px; background:#00afcc; color:#fff; z-index:500;}
#logo {position:absolute; left:20px; top:50%; height:40px; transform:translateY(-50%);}
header h1 {font-weight:700;}
header h1 a {color:#fff; text-decoration:none; transition:color 0.3s;}
header h1 a:hover {color:#eee;}


/* ===== フッター（JS非連動） ===== */
footer {position:fixed; bottom:0; left:0; width:100%; height:50px; display:flex; align-items:center; justify-content:center; background:#00afcc; color:#fff; font-size:0.9em; z-index:200;}


/* ===== ログインフォーム（login.cgi 用） ===== */
#loginForm {margin:2em auto; padding:1.5em; max-width:320px; text-align:center; background:#fff; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,0.1);} /* フォーム全体 */
#loginForm input {display:block; width:90%; margin:1em auto; padding:0.7em; font-size:1em; border:1px solid #ccc; border-radius:10px; box-sizing:border-box;} /* テキスト入力欄 */
#loginForm button {display:block; width:90%; margin:10px auto; padding:0.7em; font-size:1.1em; border:none; border-radius:8px; background:#00afcc; color:#fff; cursor:pointer; transition:background 0.2s;} /* ログインボタン */
#loginForm button:hover {background:#008ca3;} /* hover時 */


/* ===== 投稿フォーム（JS: 投稿送信処理と連動） ===== */
#postForm {margin:2em auto; padding:1.5em; max-width:800px; width:100%; display:flex; flex-direction:column; box-sizing:border-box; background:#fff; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,0.1);} /* 投稿エリア全体 */
#postForm textarea {margin:0 0 8px 0; width:100%; height:150px; padding:0.8em; font-size:clamp(1em,3.5vw,1.2em); line-height:1.6em; white-space:pre-wrap; border:1px solid #ccc; border-radius:10px; resize:none; box-sizing:border-box; transition:border-color 0.2s, box-shadow 0.2s;} /* 投稿入力欄 */
#postForm textarea:focus {outline:none; border-color:#00afcc; box-shadow:0 0 0 3px rgba(0,175,204,0.2);} /* フォーカス時 */
#postForm button {display:block; width:100%; margin:0; padding:0.8em; font-size:1.1em; font-weight:bold; border:none; border-radius:10px; background:#00afcc; color:#fff; cursor:pointer; transition:background 0.2s, transform 0.1s;} /* 投稿ボタン */
#postForm button:hover {background:#008ca3;} /* hover時 */
#postForm button:active {transform:scale(0.99);} /* 押下時 */


/* ===== 投稿一覧（JS: loadNookbbs() で追加） ===== */
.nookbbs {width:95%; max-width:800px; margin:1.5em auto; padding:1em; font-size:clamp(0.9em,3vw,1.1em); background:#fff; border-radius:12px; box-shadow:0 2px 6px rgba(0,0,0,0.08); overflow-wrap:break-word; box-sizing:border-box; opacity:0; transform:translateY(10px);} /* 各投稿ボックス */
.fade-in {animation:fadeIn 0.5s forwards;} /* 投稿追加時のフェードアニメーション */
@keyframes fadeIn {from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);}} /* フェード効果定義 */
.date {margin-bottom:0.3em; color:#888; font-size:clamp(0.75em,2vw,0.9em);} /* 投稿日時（上部の小文字） */
.msg {line-height:1.6em; font-size:clamp(1em,3vw,1.2em);} /* 投稿本文 */


/* ===== 下矢印（JS: スクロール制御で表示切替） ===== */
#scroll-down {position:fixed; bottom:60px; left:50%; transform:translateX(-50%); font-size:2em; color:#666; cursor:pointer; animation:bounce 1s infinite; z-index:250; -webkit-tap-highlight-color:transparent; touch-action:manipulation;} /* 誘導アイコン */
#scroll-down.hidden {opacity:0; pointer-events:none; transition:0.3s;} /* 非表示時 */
@keyframes bounce {0%,20%,50%,80%,100%{transform:translateX(-50%) translateY(0);} 40%{transform:translateX(-50%) translateY(-8px);} 60%{transform:translateX(-50%) translateY(-4px);}} /* バウンド動作 */


/* ===== ハンバーガーメニュー（JS: 開閉制御） ===== */
.hamburger-overlay { position: fixed; top: 20px; right: 20px; width: 48px; height: 48px; border: none; background: transparent; cursor: pointer; z-index: 1000; }
.hamburger-overlay__line { position: absolute; left: 11px; width: 26px; height: 2px; background: #eee; transition: all 0.6s; }
.hamburger-overlay__line:nth-of-type(1) { top: 14px; }
.hamburger-overlay__line:nth-of-type(2) { top: 23px; }
.hamburger-overlay__line:nth-of-type(3) { top: 32px; }
.hamburger-overlay.active .hamburger-overlay__line { background: #fff; }
.hamburger-overlay.active .hamburger-overlay__line:nth-of-type(1) { transform: translateY(9px) rotate(-45deg); }
.hamburger-overlay.active .hamburger-overlay__line:nth-of-type(2) { opacity: 0; }
.hamburger-overlay.active .hamburger-overlay__line:nth-of-type(3) { transform: translateY(-9px) rotate(45deg); }

.nav-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0,0,0,.8); visibility: hidden; opacity: 0; transition: all 0.6s; z-index: 900; pointer-events: none; }
.nav-overlay.active { visibility: visible; opacity: 1; pointer-events: auto; }

.nav-overlay__content { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; text-align: center; }
.nav-overlay__list { list-style: none; margin: 0; padding: 0; }
.nav-overlay__item { opacity: 0; transform: translateY(20px); transition: all 0.6s; }
.nav-overlay.active .nav-overlay__item { opacity: 1; transform: translateY(0); }
.nav-overlay.active .nav-overlay__item:nth-child(1) { transition-delay: .1s; }
.nav-overlay.active .nav-overlay__item:nth-child(2) { transition-delay: .2s; }
.nav-overlay.active .nav-overlay__item:nth-child(3) { transition-delay: .3s; }
.nav-overlay.active .nav-overlay__item:nth-child(4) { transition-delay: .4s; }
.nav-overlay__link { display: inline-block; padding: 20px; color: #fff !important; font-size: 24px; text-decoration: none; transition: color .3s; }
.nav-overlay__link:hover { color: #00afcc !important; }

#img_profile {display:block; margin:0.5em auto; width:80px; max-width:20%; height:80px; border-radius:50%; object-fit:cover;} /* メニュー内プロフィール画像 */


/* ===== 終端メッセージ（JS: 投稿読み切り時に表示） ===== */
#end-message {margin:1.5em 0; text-align:center; color:#666; cursor:pointer;} /* 「これ以上ありません」表示 */
#end-message:hover {text-decoration:underline;} /* hover時 */


/* ===== エラーメッセージ（JS: 投稿時エラー表示） ===== */
#error-message {min-height:1.2em; color:red; transition:opacity 1s ease;} /* 投稿失敗・未入力など */


/* ===== レスポンシブ調整 ===== */
@media (max-width:768px){
  #postForm{margin:1em auto;} /* スマホ時フォーム余白調整 */
  #postForm textarea{font-size:1.2em;} /* 入力文字を少し大きく */
  .nookbbs{margin:1em auto;} /* 投稿間の余白調整 */
}