/* ===== くらしのノート — カスタムCSS =====
   テーマカラー: #4A8D6E (緑) / 背景: #F5F5F0
   目標: gzip後 15KB以内
================================================ */

/* ----- リセット & ベース ----- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,'Hiragino Sans','Noto Sans JP',sans-serif;
  background:#F5F5F0;color:#333;line-height:1.6;min-height:100vh;
  padding-bottom:72px} /* タブバー分 */
a{color:#4A8D6E;text-decoration:none}
img{max-width:100%;height:auto;display:block}
ul{list-style:none}
button{cursor:pointer;font:inherit;border:none;background:none}

/* ----- カラー変数 ----- */
:root{
  --green:#4A8D6E;
  --green-dark:#376b54;
  --green-light:#e8f4ee;
  --bg:#F5F5F0;
  --bg-card:#fff;
  --text:#333;
  --text-muted:#777;
  --border:#e0e0da;
  --danger:#c0392b;
  --radius:10px;
  --shadow:0 1px 4px rgba(0,0,0,.08);
}

/* ----- ユーティリティ ----- */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.text-center{text-align:center}
.text-muted{color:var(--text-muted)}

/* ----- ボタン ----- */
.btn{display:inline-flex;align-items:center;justify-content:center;
  padding:.6rem 1.2rem;border-radius:8px;font-size:.9rem;font-weight:600;
  transition:background .15s,opacity .15s;white-space:nowrap;gap:.3rem}
.btn--primary{background:var(--green);color:#fff}
.btn--primary:hover{background:var(--green-dark)}
.btn--ghost{background:transparent;color:var(--green);border:1.5px solid var(--green)}
.btn--ghost:hover{background:var(--green-light)}
.btn--danger{background:var(--danger);color:#fff}
.btn--danger:hover{opacity:.85}
.btn--full{width:100%}
.btn--sm{padding:.4rem .8rem;font-size:.8rem}
.btn--xs{padding:.25rem .5rem;font-size:.75rem}

/* ----- フォーム ----- */
.form-group{margin-bottom:1.2rem}
.form-label{display:block;font-size:.85rem;font-weight:600;color:#555;margin-bottom:.4rem}
.form-label .required{color:var(--danger);font-size:.75rem;margin-left:.3rem}
.form-input{width:100%;padding:.7rem .9rem;border:1.5px solid var(--border);border-radius:8px;
  font:inherit;font-size:.95rem;background:#fff;transition:border .15s}
.form-input:focus{outline:none;border-color:var(--green)}
.form-input--error{border-color:var(--danger)}
.form-input--xs{width:120px;padding:.25rem .5rem;font-size:.8rem}
.form-textarea{resize:vertical;min-height:100px}
select.form-input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 0l6 8 6-8z' fill='%23777'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8rem center;padding-right:2rem}

/* ----- アラート ----- */
.alert{padding:.8rem 1rem;border-radius:8px;margin-bottom:1rem;font-size:.9rem}
.alert--error{background:#fde8e8;color:var(--danger);border:1px solid #f5c6c6}
.alert--success{background:var(--green-light);color:var(--green-dark);border:1px solid #b2d8c4}
.error-list{padding-left:1rem;list-style:disc}

/* ----- フラッシュメッセージ ----- */
.flash{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);
  padding:.7rem 1.4rem;border-radius:20px;font-size:.85rem;font-weight:600;
  z-index:200;animation:slideup .3s ease;box-shadow:var(--shadow);white-space:nowrap}
.flash--success{background:var(--green);color:#fff}
.flash--error{background:var(--danger);color:#fff}
@keyframes slideup{from{opacity:0;transform:translateX(-50%) translateY(10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* ----- パニックボタン ----- */
.panic-btn{position:fixed;top:.8rem;right:.8rem;z-index:300;
  background:#fff;border:1.5px solid var(--border);border-radius:50%;
  width:42px;height:42px;display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;box-shadow:var(--shadow);text-decoration:none}

/* ----- タブバー ----- */
.tab-bar{position:fixed;bottom:0;left:0;right:0;z-index:100;
  background:#fff;border-top:1px solid var(--border);
  display:flex;height:60px}
.tab-item{flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;color:var(--text-muted);font-size:.65rem;gap:.1rem;
  text-decoration:none;transition:color .15s}
.tab-item.active,.tab-item:hover{color:var(--green)}
.tab-icon{font-size:1.3rem}

/* ----- ページヘッダー ----- */
.page-header{display:flex;align-items:center;justify-content:space-between;
  padding:.8rem 1rem;background:#fff;border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:50}
.page-header__title{font-size:1.1rem;font-weight:700}
.page-header--back .btn-back{color:var(--green);font-size:.9rem;padding:.3rem 0}
.page-header__category{font-size:.8rem;color:var(--text-muted);background:var(--green-light);
  padding:.2rem .6rem;border-radius:20px}

/* ===== TOP画面 ===== */
.top-main{max-width:400px;margin:0 auto;padding:2rem 1.2rem}
.top-hero{text-align:center;padding:2rem 0 1.5rem}
.top-logo{font-size:3rem;margin-bottom:.5rem}
.top-title{font-size:1.8rem;font-weight:700;color:var(--green);margin-bottom:.3rem}
.top-catch{font-size:1rem;color:var(--text-muted);margin-bottom:.8rem}
.top-desc{font-size:.85rem;color:var(--text-muted);line-height:1.7}
.top-actions{display:flex;flex-direction:column;gap:.8rem;margin:1.5rem 0}
.top-categories__title{font-size:.9rem;font-weight:600;margin-bottom:.8rem}
.category-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{background:var(--green-light);color:var(--green-dark);padding:.3rem .8rem;
  border-radius:20px;font-size:.8rem;font-weight:500}

/* ===== 認証画面 ===== */
.auth-main{min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:1rem;background:var(--bg)}
.auth-card{background:#fff;border-radius:var(--radius);padding:2rem 1.5rem;
  width:100%;max-width:400px;box-shadow:var(--shadow)}
.auth-logo{font-size:2rem;text-align:center;margin-bottom:.3rem}
.auth-title{font-size:1.3rem;font-weight:700;text-align:center;color:var(--green);margin-bottom:.2rem}
.auth-sub{font-size:.85rem;text-align:center;color:var(--text-muted);margin-bottom:1.5rem}
.auth-form{margin-top:1rem}
.auth-link{text-align:center;font-size:.85rem;margin-top:1.2rem;color:var(--text-muted)}

/* ===== 掲示板画面 ===== */
/* カテゴリータブ */
.category-tabs-wrap{position:relative;background:#fff;border-bottom:1px solid var(--border)}
.page-board .category-tabs-wrap{position:sticky;top:50px;z-index:49}
.cat-scroll-btn{position:absolute;top:0;bottom:0;width:52px;
  display:flex;align-items:center;justify-content:center;
  z-index:2;font-size:1.6rem;font-weight:300;color:var(--text-muted);
  transition:color .15s;border:none}
.cat-scroll-btn:active{color:var(--green)}
.cat-scroll-btn--left{left:0;
  background:linear-gradient(to right,rgba(255,255,255,.96) 55%,rgba(255,255,255,0));
  padding-left:4px}
.cat-scroll-btn--right{right:0;
  background:linear-gradient(to left,rgba(255,255,255,.96) 55%,rgba(255,255,255,0));
  padding-right:4px}
.cat-scroll-btn[hidden]{display:none}

.category-tabs{display:flex;overflow-x:auto;gap:.4rem;padding:.6rem 1rem;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.category-tabs::-webkit-scrollbar{display:none}
.category-tab{flex-shrink:0;padding:.35rem .85rem;border-radius:20px;
  font-size:.82rem;color:var(--text-muted);border:1px solid var(--border);
  background:#fff;white-space:nowrap;transition:background .15s,color .15s}
.category-tab--active,.category-tab:hover{background:var(--green);color:#fff;border-color:var(--green)}

.thread-list{padding:.6rem .8rem}

/* スレッドカード */
.thread-card{background:#fff;border-radius:var(--radius);margin-bottom:.6rem;
  box-shadow:var(--shadow);overflow:hidden}
.thread-card__link{display:block;padding:.9rem 1rem;color:inherit}
.thread-card__meta{display:flex;align-items:center;gap:.4rem;margin-bottom:.35rem}
.thread-card__category{font-size:.72rem;background:var(--green-light);color:var(--green-dark);
  padding:.15rem .5rem;border-radius:20px;font-weight:500}
.thread-card__pin{font-size:.85rem}
.thread-card__title{font-size:.95rem;font-weight:700;margin-bottom:.3rem;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.thread-card__body{font-size:.82rem;color:var(--text-muted);margin-bottom:.5rem;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.thread-card__footer{display:flex;justify-content:space-between;align-items:center}
.thread-card__author{display:flex;align-items:center;gap:.4rem;font-size:.78rem}
.thread-card__stats{display:flex;align-items:center;gap:.6rem;font-size:.75rem;color:var(--text-muted)}
.thread-card__count{font-weight:600}

/* アバター */
.avatar{border-radius:50%;object-fit:cover}
.avatar--xs{width:24px;height:24px}
.avatar--sm{width:36px;height:36px}
.avatar--default{background:var(--green-light);color:var(--green);
  display:inline-flex;align-items:center;justify-content:center;font-size:.9rem}

/* 無限スクロール */
.load-more-indicator{display:none;justify-content:center;padding:1rem}
.load-more-indicator.active{display:flex}
.spinner{width:24px;height:24px;border:2.5px solid var(--border);
  border-top-color:var(--green);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.empty-state{text-align:center;padding:2rem;color:var(--text-muted);font-size:.9rem}

/* ----- 縦スクロールバー（全幅） ----- */
.scroll-strip{position:fixed;left:0;right:0;height:44px;
  border:none;width:100%;display:none;
  align-items:center;justify-content:center;
  font-size:1.1rem;color:rgba(80,80,80,.5);cursor:pointer;
  z-index:48;-webkit-tap-highlight-color:transparent}
.scroll-strip.visible{display:flex}
.scroll-strip--up{
  background:linear-gradient(to bottom,rgba(245,245,240,.95) 30%,rgba(245,245,240,0))}
.scroll-strip--down{
  background:linear-gradient(to top,rgba(245,245,240,.95) 30%,rgba(245,245,240,0))}

/* ===== スレッド詳細 ===== */
.thread-detail{padding:.8rem}

.thread-body{background:#fff;border-radius:var(--radius);padding:1rem;
  margin-bottom:.8rem;box-shadow:var(--shadow)}
.thread-body__title{font-size:1.1rem;font-weight:700;margin-bottom:.8rem}
.thread-body__author{display:flex;align-items:center;gap:.5rem;margin-bottom:.8rem}
.author-link{display:flex;align-items:center;gap:.4rem;color:inherit;font-size:.82rem;font-weight:600}
.thread-body__time{font-size:.75rem;color:var(--text-muted);margin-left:auto}
.thread-body__text{font-size:.9rem;line-height:1.8;white-space:pre-wrap;word-break:break-word}
.thread-body__actions{margin-top:.8rem;text-align:right}

.post-list{background:#fff;border-radius:var(--radius);padding:1rem;box-shadow:var(--shadow)}
.post-list__heading{font-size:.9rem;font-weight:700;color:var(--text-muted);margin-bottom:.8rem}
.post-list__count{color:var(--green)}

.post-item{padding:.8rem 0;border-bottom:1px solid var(--border);transition:background .3s}
.post-item:last-child{border-bottom:none}
@keyframes post-highlight{0%,30%{background:var(--green-light)}100%{background:transparent}}
.post-item--highlight{animation:post-highlight 2s ease-out forwards;border-radius:6px;padding-left:.5rem;padding-right:.5rem}
.post-item__author{display:flex;align-items:center;gap:.4rem;margin-bottom:.4rem}
.post-item__time{font-size:.72rem;color:var(--text-muted);margin-left:auto}
.post-item__body{font-size:.88rem;line-height:1.7;white-space:pre-wrap;word-break:break-word;margin-bottom:.4rem}
.post-item__actions{display:flex;gap:.6rem}

.btn-reply-to,.btn-report{font-size:.75rem;color:var(--text-muted);padding:.1rem .4rem}
.btn-reply-to:hover,.btn-report:hover{color:var(--green)}

.image-gallery{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.6rem}
.post-image{width:80px;height:80px;object-fit:cover;border-radius:6px}

.reply-to-indicator{display:flex;align-items:center;gap:.5rem;padding:.4rem .7rem;
  background:var(--green-light);border-radius:6px;font-size:.82rem;margin-bottom:.4rem}

.post-quote{display:block;border-left:3px solid var(--green);border-radius:4px;
  padding:.35rem .65rem;margin-bottom:.5rem;background:var(--green-light);
  font-size:.8rem;text-decoration:none;color:inherit}
.post-quote:hover{background:var(--border)}
.post-quote__author{font-weight:600;color:var(--green);display:block;margin-bottom:.15rem}
.post-quote__body{color:var(--text-muted);display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}

.reply-form{position:sticky;bottom:60px;background:#fff;border-top:1px solid var(--border);
  padding:.7rem .8rem;z-index:60}
.reply-form__textarea{resize:none;min-height:60px;font-size:.9rem}
.reply-form__footer{display:flex;align-items:center;gap:.6rem;margin-top:.4rem}
.reply-form__submit{margin-left:auto}

.image-preview-area{display:flex;gap:.4rem;flex-wrap:wrap}
.image-preview-area img{width:60px;height:60px;object-fit:cover;border-radius:6px}

.thread-closed-notice{text-align:center;padding:1rem;color:var(--text-muted);font-size:.85rem}

/* ===== プロフィール共通 ===== */
.profile-main{padding:.8rem}
.profile-card{background:#fff;border-radius:var(--radius);padding:1rem;
  margin-bottom:.8rem;box-shadow:var(--shadow)}
.profile-images{display:flex;gap:.5rem;margin-bottom:.8rem;flex-wrap:wrap}
.profile-img{width:80px;height:80px;border-radius:10px;object-fit:cover}
.profile-img--main{width:100px;height:100px;border:2.5px solid var(--green)}
.profile-img--default{background:var(--green-light);color:var(--green);
  font-size:2rem;display:flex;align-items:center;justify-content:center}
.profile-info__name{font-size:1.1rem;font-weight:700;margin-bottom:.4rem}
.profile-info__item{font-size:.85rem;color:var(--text-muted);margin-bottom:.2rem}
.profile-info__introduction{font-size:.85rem;line-height:1.7;margin-top:.5rem;
  white-space:pre-wrap;word-break:break-word}

.section-title{font-size:.9rem;font-weight:700;color:var(--text-muted);
  padding:.5rem 0 .4rem;border-bottom:1px solid var(--border);margin-bottom:.5rem}

.thread-list-item{display:flex;align-items:center;gap:.6rem;padding:.6rem 0;
  border-bottom:1px solid var(--border);color:inherit}
.thread-list-item__category{font-size:.72rem;background:var(--green-light);color:var(--green-dark);
  padding:.15rem .5rem;border-radius:20px;white-space:nowrap;flex-shrink:0}
.thread-list-item__title{font-size:.88rem;flex:1;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
.thread-list-item__count{font-size:.75rem;color:var(--text-muted);white-space:nowrap;flex-shrink:0}

.member-actions{display:flex;gap:.6rem;margin-top:.8rem;flex-wrap:wrap}
.blocked-notice{background:#fff;border-radius:var(--radius);padding:1.5rem;
  text-align:center;color:var(--text-muted);font-size:.9rem;box-shadow:var(--shadow)}
.mypage-actions{margin-top:1rem}
.account-settings__list{display:flex;flex-direction:column;gap:.6rem}
.btn-logout{color:var(--text-muted);border-color:var(--border)}

/* ===== 画像管理（編集画面） ===== */
.image-manager{background:#fff;border-radius:var(--radius);padding:1rem;
  margin-bottom:1rem;box-shadow:var(--shadow)}
.image-manager__list{display:flex;gap:.6rem;margin-bottom:.8rem;flex-wrap:wrap}
.image-manager__item{position:relative}
.profile-thumb{width:80px;height:80px;border-radius:8px;object-fit:cover}
.btn-delete-image{position:absolute;top:-6px;right:-6px;width:20px;height:20px;
  background:var(--danger);color:#fff;border-radius:50%;font-size:.7rem;
  display:flex;align-items:center;justify-content:center;line-height:1}

/* ===== フォームページ共通 ===== */
.form-page{padding:.8rem;max-width:600px;margin:0 auto}
.form-actions{margin-top:1.5rem}

/* ===== モーダル共通 ===== */
.modal{position:fixed;inset:0;z-index:500;display:flex;align-items:flex-start;
  justify-content:center;padding-top:4rem}
.modal[hidden]{display:none}
.modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.4)}
.modal__content{position:relative;background:#fff;border-radius:var(--radius);
  padding:1.5rem 1.2rem;width:100%;max-width:500px;z-index:1}
.modal__title{font-size:1rem;font-weight:700;margin-bottom:1rem}
.modal__actions{display:flex;gap:.6rem;margin-top:1rem;justify-content:flex-end}

/* ===== 安全画面 ===== */
.tips-main{max-width:600px;margin:0 auto;padding:1.2rem}
.tips-header{text-align:center;margin-bottom:1.5rem}
.tips-header__title{font-size:1.3rem;font-weight:700;color:var(--green)}
.tips-header__sub{font-size:.85rem;color:var(--text-muted);margin-top:.3rem}
.tips-article{background:#fff;border-radius:var(--radius);padding:1.2rem;
  margin-bottom:1rem;box-shadow:var(--shadow)}
.tips-article h2{font-size:1rem;font-weight:700;margin-bottom:.6rem;color:var(--green-dark)}
.tips-article h3{font-size:.9rem;font-weight:600;margin:.8rem 0 .3rem}
.tips-article p,.tips-article li{font-size:.88rem;line-height:1.8;color:var(--text)}
.tips-article ul{padding-left:1.2rem;list-style:disc}
.tips-back{text-align:center;margin-top:1rem}

/* ===== 管理画面 ===== */
body.page-admin{padding-bottom:0}
.admin-layout{display:flex;min-height:100vh}
.admin-nav{width:180px;background:#fff;border-right:1px solid var(--border);
  padding:1rem;flex-shrink:0}
.admin-nav__title{font-size:.82rem;font-weight:700;color:var(--text-muted);
  text-transform:uppercase;margin-bottom:.8rem;letter-spacing:.05em}
.admin-nav__item{display:block;padding:.5rem .6rem;border-radius:6px;
  font-size:.85rem;color:var(--text);margin-bottom:.2rem}
.admin-nav__item:hover,.admin-nav__item--active{background:var(--green-light);color:var(--green)}
.admin-main{flex:1;padding:1.2rem;overflow:auto}
.admin-title{font-size:1.2rem;font-weight:700;margin-bottom:1rem}
.admin-title small{font-size:.8rem;color:var(--text-muted);font-weight:400}

.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.8rem;margin-bottom:1.5rem}
.stat-card{background:#fff;border-radius:var(--radius);padding:1rem;text-align:center;box-shadow:var(--shadow)}
.stat-card--alert{border:2px solid var(--danger)}
.stat-card__value{font-size:2rem;font-weight:700;color:var(--green)}
.stat-card__label{font-size:.78rem;color:var(--text-muted);margin-top:.3rem}

.admin-search{display:flex;gap:.5rem;margin-bottom:1rem}
.admin-filters{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem}
.admin-filters .active{background:var(--green);color:#fff;border-color:var(--green)}

.admin-table{width:100%;border-collapse:collapse;font-size:.82rem;background:#fff;
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.admin-table th{background:var(--green-light);color:var(--green-dark);
  padding:.5rem .7rem;text-align:left;font-weight:600;border-bottom:1px solid var(--border)}
.admin-table td{padding:.5rem .7rem;border-bottom:1px solid var(--border)}
.admin-table tr:last-child td{border-bottom:none}
.admin-table tr.row--suspended{background:#fde8e8}
.admin-table a{color:var(--green)}

.pagination{display:flex;gap:.3rem;margin-top:1rem;flex-wrap:wrap}
.pagination__item{padding:.35rem .65rem;border-radius:6px;font-size:.82rem;border:1px solid var(--border);color:var(--text)}
.pagination__item--active{background:var(--green);color:#fff;border-color:var(--green)}

@media(max-width:500px){
  .admin-layout{flex-direction:column}
  .admin-nav{width:100%;display:flex;overflow-x:auto;gap:.4rem;padding:.6rem}
  .admin-nav__title{display:none}
}