/* ホーム/マイページ/フォルダはページ遷移せず、#hashで切り替える単一ページ内の
     セクション表示/非表示だけで実現する(それぞれのview/side-noteを個別に出し分ける) */
  .view[hidden], .side-note[hidden]{ display:none; }

  .folder-form{ display:flex; gap:8px; padding:18px 20px; border-bottom:1px solid var(--line-soft); }
  .folder-form input{
    flex:1;
    background:var(--surface-2);
    border:1px solid var(--line);
    border-radius:var(--radius-pill);
    color:var(--text);
    font-size:14px;
    padding:8px 12px;
  }
  .folder-form input:focus{ border-color:var(--accent); }
  .folder-form button{
    padding:8px 18px;
    background:var(--accent);
    color:var(--text);
    border:none;
    border-radius:var(--radius-pill);
    font-weight:700;
    font-size:13.5px;
  }
  .folder-form button:hover:not(:disabled){ opacity:.9; }

  .folder-row{
    display:flex; align-items:center; gap:12px;
    padding:14px 20px;
    border-bottom:1px solid var(--line-soft);
    cursor:pointer;
  }
  .folder-row:hover{ background:var(--surface-2); }
  .folder-row.active{ background:var(--accent-wash); }
  .folder-row svg{ width:20px; height:20px; color:var(--text-faint); flex-shrink:0; }
  .folder-row .folder-name{ font-weight:700; font-size:14.5px; flex:1; min-width:0; }
  .folder-key-btn{
    background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-pill);
    color:var(--text); font-size:12.5px; padding:6px 10px; cursor:pointer; white-space:nowrap;
  }
  .folder-key-btn:hover{ background:var(--accent-wash); border-color:var(--accent-dim); }
  .folder-key-btn.folder-key-revoke{ color:var(--danger); border-color:var(--danger); }
  .folder-key-btn.folder-key-revoke:hover{ background:var(--danger); color:var(--text); }

  .feed-search-form{ padding:14px 16px; }
  .feed-search-form input{
    width:100%;
    background:var(--surface-2);
    border:1px solid var(--line);
    border-radius:var(--radius-pill);
    color:var(--text);
    font-size:14px;
    padding:8px 12px;
  }
  .feed-search-form input:focus{ border-color:var(--accent); }

  /* モバイル幅では検索フォームがfeed-header直下のスロットへ移動してくる
     (app.jsのplaceSearchForm参照)。side-homeパネルと違い単独の罫線が無いので付ける */
  #feed-search-mobile-slot .feed-search-form{ border-bottom:1px solid var(--line-soft); }

  .feed-sentinel{ height:1px; }
  .feed-loading-more{ text-align:center; padding:16px; color:var(--text-faint); font-size:13px; }

  .admin-report-tabs{ display:flex; border-bottom:1px solid var(--line-soft); }
  .admin-report-tab{
    flex:1;
    background:none; border:none; border-bottom:2px solid transparent;
    color:var(--text-faint); font-weight:700; font-size:13.5px;
    padding:10px 4px; margin-bottom:-1px; cursor:pointer;
    text-align:center;
  }
  .admin-report-tab.active{ color:var(--text); border-bottom-color:var(--accent); }
  .admin-report-tab:hover:not(.active){ color:var(--text); }
  a.admin-report-tab{ text-decoration:none; }

  .follow-list-row{
    display:flex; align-items:center; gap:12px;
    padding:12px 16px; border-bottom:1px solid var(--line-soft);
  }
  .follow-list-row .avatar{ width:40px; height:40px; flex-shrink:0; }
  .follow-list-info{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
  .follow-list-info .name{ font-weight:700; }
  .follow-list-bio{
    font-size:12.5px; color:var(--text-faint);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .follow-list-row .follow-btn{ flex-shrink:0; }

  .admin-feedback-filters{ display:flex; gap:8px; flex-wrap:wrap; padding:10px 16px; }
  .admin-feedback-filters select{
    background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius);
    color:var(--text); font-size:13px; padding:6px 8px;
  }
  .admin-feedback-row-top{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
  .admin-feedback-awaiting{ color:var(--accent); font-weight:700; }

  .admin-report-card .kebab-btn:disabled{ opacity:.4; cursor:default; }
  .admin-report-divider{ border:none; border-top:1px solid var(--line-soft); margin:0; }
  .admin-report-info{
    padding:10px 16px; display:flex; flex-direction:column; gap:4px;
    font-size:13px; color:var(--text);
  }
  .admin-report-photo{ cursor:pointer; }
  .admin-report-actions-row{
    display:flex; align-items:center; gap:40px; flex-wrap:wrap;
    padding:12px 16px; border-top:1px solid var(--line-soft);
  }
  .admin-report-current{ font-size:12.5px; color:var(--text-faint); margin-right:auto;}
  .admin-report-actions-row button{
    background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-pill);
    color:var(--text); font-size:12.5px; padding:6px 10px; cursor:pointer; white-space:nowrap;
  }
  .admin-report-actions-row button:hover:not(:disabled){ background:var(--accent-wash); border-color:var(--accent-dim); }
  .admin-report-post-count{
    display:flex; align-items:center; gap:8px; padding:10px 16px 0;
    font-size:13px; color:var(--text-faint);
  }
  .admin-report-post-count svg{ width:18px; height:18px; }
  .admin-user-report-card .post-head{ padding-bottom:8px; }

  .user-profile-header{
    display:flex;
    align-items:flex-start;
    gap:16px;
    padding:20px;
    border-bottom:1px solid var(--line-soft);
  }
  .user-profile-avatar{
    width:72px; height:72px;
    overflow:hidden;
    flex-shrink:0;
  }
  .user-profile-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
  .user-profile-info{
    display:flex;
    flex-direction:column;
    gap:6px;
    min-width:0;
    flex:1;
  }
  .user-profile-name-row{
    display:flex;
    align-items:center;
    gap:12px;
  }
  .user-profile-name-row .name{ font-size:17px; font-weight:700; }
  .user-profile-bio{
    font-size:13px;
    line-height:1.6;
    color:var(--text-faint);
    white-space:pre-wrap;
    word-break:break-word;
  }
  .user-profile-follow-counts{ display:flex; gap:16px; font-size:13px; color:var(--text-faint); }
  .user-profile-follow-counts[hidden]{ display:none; }
  .user-profile-follow-counts a{ color:inherit; text-decoration:none; }
  .user-profile-follow-counts a:hover{ text-decoration:underline; }
  .user-profile-follow-counts strong{ color:var(--text); }
  .follow-btn{
    padding:7px 16px;
    background:var(--accent);
    color:var(--text);
    border:none;
    border-radius:var(--radius-pill);
    font-weight:700;
    font-size:12.5px;
    margin-left:auto;
    flex-shrink:0;
  }
  .follow-btn:hover:not(:disabled){ opacity:.9; }
  .follow-btn.is-following{
    background:none;
    border:1px solid var(--line);
    color:var(--text-dim);
  }
  .follow-btn.is-following:hover:not(:disabled){ border-color:var(--danger); color:var(--danger); opacity:1; }

  .icon-crop-canvas{
    display: block;
    margin: 0 auto;
    background: var(--surface-2);
  }
  .icon-crop-zoom{
    accent-color: var(--accent);
  }

  .folder-posts{ padding:8px 20px 20px; }
  .folder-post-item{
    display:flex; align-items:center; gap:12px;
    padding:10px 0;
    border-bottom:1px solid var(--line-soft);
  }
  .folder-post-item:last-child{ border-bottom:none; }
  .folder-post-thumb{
    width:64px; height:64px;
    border-radius:8px;
    overflow:hidden;
    background:var(--surface-2);
    flex-shrink:0;
  }
  .folder-post-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
  .folder-post-desc{ font-size:13.5px; line-height:1.5; word-break:break-word; }
  .folder-post-time{ font-family:var(--font-mono); font-size:11px; color:var(--text-faint); margin-top:2px; }

  /* ホームのゲスト向け案内(投稿フォームの代わりに出す) */
  .guest-cta{ padding:20px; border-bottom:1px solid var(--line-soft); }
  .guest-cta-title{ font-size:17px; font-weight:700; margin-bottom:4px; }
  .guest-cta-text{ font-size:13.5px; color:var(--text-faint); margin-bottom:14px; }
  .guest-cta-actions{ display:flex; gap:10px; flex-wrap:wrap; }
  .guest-cta-btn{
    padding:8px 20px;
    border:1px solid var(--line);
    border-radius:var(--radius-pill);
    font-weight:700; font-size:14px;
  }
  .guest-cta-btn:hover{ background:var(--surface-2); }
  .guest-cta-btn--primary{ background:var(--accent); border-color:var(--accent); color:var(--text); }
  .guest-cta-btn--primary:hover{ background:var(--accent); opacity:.9; }

  /* 設定: 一覧(.settings-menu-col)→項目ページ(.settings-detail-col)。
     PC幅(.shell-wide、右サイドを畳んだ広い中央)では2列、それ以外は選んだ方だけを出す */
  .settings-layout{ display:grid; grid-template-columns: minmax(0,1fr); }
  .settings-layout[hidden], .settings-page[hidden]{ display:none !important; }
  .settings-layout[data-page=""] .settings-detail-col{ display:none; }
  .settings-layout:not([data-page=""]) .settings-menu-col{ display:none; }
  .settings-placeholder{ display:none; }
  @media (min-width: 1025px){
    .shell.shell-wide{ grid-template-columns: var(--nav-w) minmax(0,920px); }
    .shell.shell-wide .side{ display:none; }
    .settings-layout{ grid-template-columns: minmax(0,360px) minmax(0,1fr); min-height:100vh; }
    .settings-layout .settings-menu-col,
    .settings-layout .settings-detail-col{ display:block !important; }
    .settings-menu-col{ border-right:1px solid var(--line-soft); }
    .settings-placeholder{ display:block; padding:40px 24px; color:var(--text-faint); font-size:14px; }
    /* 一覧は左に常に見えているので、一覧の直下のページには戻るボタンを出さない */
    .settings-back-top{ display:none !important; }
  }
  .settings-menu{ display:flex; flex-direction:column; }
  .settings-menu-item{
    display:flex; align-items:center; gap:12px;
    padding:14px 20px;
    transition:background .15s;
  }
  .settings-menu-item:hover{ background:var(--surface); }
  .settings-menu-item.active{ background:var(--surface); box-shadow:inset -2px 0 0 var(--accent); }
  .settings-menu-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
  .settings-menu-title{ font-size:15px; }
  .settings-menu-desc{ font-size:12.5px; color:var(--text-faint); overflow-wrap:anywhere; }
  .settings-menu-desc:empty{ display:none; }
  .settings-menu-item--danger .settings-menu-title{ color:var(--danger); }
  .settings-chevron{ width:18px; height:18px; color:var(--text-faint); flex-shrink:0; }
  .settings-page-header{ justify-content:flex-start; gap:20px; }
  .settings-back{
    display:flex; align-items:center; justify-content:center;
    width:34px; height:34px; margin:-8px 0 -8px -8px;
    border-radius:50%;
  }
  .settings-back:hover{ background:var(--surface-2); }
  .settings-back svg{ width:20px; height:20px; }

  .settings-section{
    padding:18px 20px;
    border-bottom:1px solid var(--line-soft);
  }
  .settings-section h2{ font-size:15px; font-weight:700; margin:0 0 12px; }
  .settings-toggle-row{
    display:flex; align-items:center; gap:8px;
    font-size:13.5px; color:var(--text); cursor:pointer;
  }
  .settings-toggle-row input{ width:16px; height:16px; cursor:pointer; flex-shrink:0; }
  .settings-current{ font-size:13px; color:var(--text-faint); margin:0 0 10px; }
  .settings-form{ display:flex; flex-direction:column; gap:8px; max-width:360px; }
  .settings-form[hidden]{ display:none; }
  .settings-form input{
    background:var(--surface-2);
    border:1px solid var(--line);
    border-radius:var(--radius-pill);
    color:var(--text);
    font-size:14px;
    padding:8px 12px;
  }
  .settings-form input:focus{ border-color:var(--accent); }
  .settings-form button{
    align-self:flex-start;
    padding:8px 18px;
    background:var(--accent);
    color:var(--text);
    border:none;
    border-radius:var(--radius-pill);
    font-weight:700;
    font-size:13.5px;
    cursor:pointer;
  }
  .settings-form button:hover:not(:disabled){ opacity:.9; }
  .settings-hint{ font-size:12.5px; color:var(--text-faint); margin:10px 0; }
  .settings-list{ display:flex; flex-direction:column; }
  .settings-list-row{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:10px 0;
    border-bottom:1px solid var(--line-soft);
  }
  .settings-list-row:last-child{ border-bottom:none; }
  .settings-list-name{ font-size:13.5px; font-weight:700; }
  .settings-list-row button{
    background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-pill);
    color:var(--text); font-size:12.5px; padding:6px 10px; cursor:pointer; white-space:nowrap;
  }
  .settings-list-row button:hover:not(:disabled){ background:var(--accent-wash); border-color:var(--accent-dim); }
  .settings-danger-btn{
    background:none; border:1px solid var(--danger);
    color:var(--danger);
    border-radius:var(--radius-pill);
    padding:8px 18px;
    font-weight:700;
    font-size:13.5px;
    cursor:pointer;
  }
  .settings-danger-btn:hover:not(:disabled){ background:var(--danger); color:#fff; }

  /* ==================== 通知(#3) ==================== */
  .notification-item{
    display:flex; align-items:center; gap:12px;
    padding:14px 20px; border-bottom:1px solid var(--line-soft);
  }
  .notification-item.unread{ background:var(--accent-wash); }
  .notification-item .avatar{ width:36px; height:36px; flex-shrink:0; }
  .notification-body{ flex:1; min-width:0; font-size:14px; line-height:1.5; }
  .notification-body a{ color:var(--text); font-weight:600; }
  .notification-time{ font-size:12px; color:var(--text-faint); }
  .notification-status{ font-size:12px; color:var(--text-faint); }
  .notification-status.pending{ color:var(--warn); font-weight:600; }
  .notification-thumb{ width:48px; height:48px; object-fit:cover; border-radius:var(--radius); flex-shrink:0; }

  /* ==================== 目安箱 ==================== */
  .feedback-thread-text{ white-space:pre-wrap; word-break:break-word; font-size:14px; line-height:1.6; }
  .feedback-thread-screenshot{ max-width:100%; border-radius:var(--radius); display:block; }
  .feedback-message{ padding:10px 0; border-bottom:1px solid var(--line-soft); }
  .feedback-message:last-child{ border-bottom:none; }
  .feedback-message-who{ font-size:12.5px; font-weight:700; color:var(--text-dim); }
  .feedback-message-body{ font-size:14px; white-space:pre-wrap; word-break:break-word; margin-top:2px; }
  .feedback-message-time{ font-size:12px; color:var(--text-faint); margin-top:2px; }

  /* ==================== 称号(#5) ==================== */
  .user-profile-titles{ display:flex; flex-direction:column; gap:6px; margin-top:8px; }
  .user-title-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; }
  .user-title-row.is-hidden{ opacity:.5; }
  .user-title-name{ color:var(--text-dim); }