/* ======================================================================
   03-components.css | Components（Feed/Post/検索/ボタン/カルーセル/ライトボックス等）
====================================================================== */

/* ========== Feed & Post ================================================== */
.feed .post {
    position: relative;
    padding: var(--space-7);
    border-bottom: none;
}

.feed .post::after {
    content: "";
    display: block;
    height: 2px;
    margin: 16px 0px 0;
    background: var(--color-border);
}

.feed .post:last-child::after {
    content: none;
}

/* Post header */
.post header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.post header img {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-pill);
}

.post header strong {
    display: block;
    font-size: var(--fz-16);
}

.post header span {
    font-size: var(--fz-13);
    color: var(--color-muted);
}

.post p {
    font-size: var(--fz-16);
    line-height: 1.4;
}

/* 投稿全体クリック化（透過リンク） */
.post {
    position: relative;
}

/* 覆いリンクは z-index:1。上に来る要素（カルーセル等）が確実にクリックを取れるようにする */
.post-permalink {
    position: absolute;
    inset: 0;
    z-index: 1;
    cursor: pointer;
}

/* 覆いリンクより前面に出す要素（クリック可能に） */
.author-link,
.like-button,
.approval_button,
.post_cancel_button {
    position: relative;
    z-index: 2;
}

.pswp-gallery a {
  display: block;
}

/* Post header：タイトルを下に回しても崩れないように */
.post header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 0;
    /* タイトル側で余白を管理する */
    flex-wrap: wrap;
    /* タイトルを次の行に回せるように */
}

/* タイトルを「見出し」っぽくする */
.post-title {
    flex-basis: 100%;
    /* 1行占有してヘッダーの下に出す */
    margin: 6px 0 8px;
    padding-right: 8px;
    /* 受付ピルと当たらないよう少し余白 */
    font-size: 19px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.5;
    letter-spacing: 0.01em;
}

/* タイトル下に細い区切り線（左右ちょい内側） */
.post-title::after {
    content: "";
    display: block;
    margin: 6px 10px 0;
    /* ← 左右に“ちょっと”余白を空ける */
    height: 2px;
    background: rgba(255, 255, 255, 0.14);
    border-radius: 999px;
}

/* スマホでは少し控えめに */
@media (max-width: 950px) {
    .post-title {
        font-size: 17px;
        margin: 4px 0 6px;
    }

    .post-title::after {
        margin: 4px 8px 0;
    }
}

/* HOME専用：左ガター（Twitter風レイアウト） */
.post-home {
  padding-left: 26px;
}

/* header（アイコン部分）を左列に固定 */
.post-home header {
  padding-left: 4px;
}

/* 本文エリアを右列に */
.post-home .post_body {
  margin-left: 20px;
  padding-left: 12px; /* さらに内側余白 */
}


/* ========== Buttons ====================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    font-size: var(--fz-14);
    color: #fff;
    text-decoration: none;
    background: #151515;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.btn.ghost {
    background: #111;
}

.btn.danger {
    background: #2b2b2b;
}

/* CTA系 */
.apply-btn {
    padding: 12px 20px;
    font-size: var(--fz-16);
    color: #fff;
    background: var(--color-primary);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background .2s ease;
}

.apply-btn:hover {
    background: var(--color-hover);
}

.apply-btn.unfollow {
    background: #777;
}

.apply-btn.unfollow:hover {
    background: #555;
}

.apply-inline.is-before,
.apply-inline.is-before:hover,
.apply-inline.is-before:focus {
    background: #b0b5bb !important;
    color: #111 !important;
    border-color: rgba(0, 0, 0, .2) !important;
    cursor: default !important;
    pointer-events: none !important;
}

/* Icon-like buttons */
.like-button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--fz-18);
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
}

/* ========== Forms（検索フォーム） ====================================== */
.search-form,
.mobile-search {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #222;
    border-radius: var(--radius-pill);
}

.search-form,
.mobile-search,
.header-search {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
}

.search-form {
    max-width: 350px;
    width: 100%;
}

.mobile-search {
    max-width: 130px;
    width: 100%;
}

.search-form input,
.mobile-search input {
    flex: 1;
    padding: 4px 0;
    font-size: var(--fz-14);
    color: var(--color-text);
    background: transparent;
    border: none;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}

/* ボタンの白背景をなくす */
.search-form button,
.mobile-search button,
.header-search .search-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}

/* アイコン色とホバー */
.search-form i,
.mobile-search i,
.header-search i {
    font-size: 16px;
    line-height: 1;
    color: var(--color-muted-2);
}

.search-form button:hover i,
.mobile-search button:hover i,
.header-search .search-button:hover i {
    color: #fff;
}

/* Safari の検索キャンセル×（type="search" 使用時のみ） */
input[type="search"]::-webkit-search-cancel-button {
    appearance: none;
    -webkit-appearance: none;
    display: none;
}

/* ========== Author link ================================================== */
.author-link {
    display: flex;
    align-items: center;
    gap: 12px;
    color: inherit;
    text-decoration: none;
}

.author-link:hover {
    opacity: .9;
}

/* アバターはクリック透過（リンク本体にイベントを通す） */
.author-link img.no-lightbox {
    pointer-events: none;
}

/* ========== 画像表示（サイズ制御、横スクロールUI、表示調整） ============== */
.post-images {
  position: relative;
  z-index: 5;
  width: 100%;
  margin-top: 10px;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.post-images-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

.post-image {
  min-width: 100%;
  object-fit: cover;
  scroll-snap-align: center;
  max-height: 420px;
}

.post-images.is-single .post-image {
  max-height: 500px;
}

/* ========== Back bar（post/univ_page） ================================= */
.back-bar {
    position: sticky;
    top: 0;
    z-index: 2147483647;
    /* ← MAX級 */
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}

.back-bar button {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fz-16);
    font-weight: 600;
    color: #fff;
    background: none;
    border: none;
    cursor: pointer;
}

.back-bar button:hover {
    opacity: .8;
}

.back-bar h1 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

/* ========== Section chip（共通見出しバッジ） ========================== */
.section-chip,
.likes-only-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 12px 16px;
    padding: 8px 12px;
    font-weight: 700;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
}

/* ========== 右サイド「お知らせ」ブロック（PC用） ==================== */
.sidebar-right section {
    display: flex;
    flex-direction: column;
    max-height: 100%;
    padding: 16px;
    overflow-y: auto;
    background: #16181c;
    border-radius: var(--radius-lg);
    box-sizing: border-box;
}

.sidebar-right h2 {
    position: sticky;
    top: -16px;
    z-index: 1;
    margin: 0 -16px 12px;
    padding: 16px;
    font-size: var(--fz-20);
    font-weight: 600;
    background: #16181c;
    border-bottom: 1px solid var(--color-border);
}

.sidebar-right ul,
.sidebar-right .notification-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar-right #state-list ul {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar-right li,
.sidebar-right .notification-list>li {
    display: block;
    padding-bottom: 6px;
    font-size: var(--fz-14);
    color: #d9d9d9;
    line-height: 1.5;
    border-bottom: 1px solid var(--color-border);
}

.sidebar-right li:last-child,
.sidebar-right .notification-list>li:last-child {
    border-bottom: none;
}

.sidebar-right .notification-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.sidebar-right .notification-text {
    flex: 1;
    min-width: 0;

    display: flex;
    flex-direction: column; /* 子要素を縦並びに */
    text-decoration: none;
    font-weight: 500;
    color: var(--color-text);

    /* 折り返し可能に変更 */
    white-space: nowrap;
    overflow: hidden;
}

/* タイトル部分（1行） */
.sidebar-right .notification-text span:nth-child(1) {
    white-space: nowrap;       /* タイトルは1行固定 */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 本文部分（最大3行） */
.sidebar-right .notification-text span:nth-child(2) {
    font-size: 0.85em;          /* 小さめ文字 */
    color: #aaa;                /* グレー文字 */
    display: -webkit-box;       /* Webkit系で行数制限 */
    -webkit-line-clamp: 3;      /* 最大3行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;     /* 長い単語も折り返す */
}

.sidebar-right .notification-text:hover {
    text-decoration: underline;
}

.sidebar-right .notification-date {
    flex: 0 0 auto;
    margin-left: 12px;
    font-size: var(--fz-12);
    color: #777;
    white-space: nowrap;
}


.sidebar-right .status-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    font-weight: 500;
    color: var(--color-text);
}


.sidebar-right .status-text {
    display: flex;
    justify-content: space-between;
    padding-left: 16px;

    color: #aaa;                /* グレー文字 */
}

.sidebar-right .status_link :hover {
  color: #afafaf;                /* グレー文字 */
  text-decoration: underline;
}

/* 右カラム内の検索（ある場合） */
.sidebar-right .search-filter {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #16181c;
    border-radius: var(--radius-lg);
}

.sidebar-right .search-bar-pc {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sidebar-right .search-input,
.sidebar-right .category-select {
    flex: 1;
    padding: 10px 12px;
    font-size: var(--fz-15);
    color: var(--color-text);
    background: #222;
    border: none;
    border-radius: var(--radius-pill);
    outline: none;
}

/* お知らせ切り替えバー（管理者用） */
.sidebar-right .sw_news {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--color-bg);
}

.sidebar-right .sw_news-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--color-border);
  padding: 0 12px;
  overflow-x: auto;
	height:48px;
}

.sidebar-right .sw_news-tab {
  flex: 1 0 33.33%;
  display: grid;
  place-items: center;
  height: 46px;
  font-weight: 700;
  color: #dfe3e7;
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
}

.sidebar-right .sw_news-tab[aria-selected="true"] {
  color: #fff;
}

.sidebar-right .sw_news-tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 3px;
  border-radius: 3px;
  background: #fff;
}


/* ========== モバイルの通知ベル見た目統一 ============================ */
.icon-button,
.bell-button-mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    color: var(--color-text);
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.icon-button:hover,
.bell-button-mobile:hover {
    background: #333;
}

.bell-button-mobile i {
    font-size: 18px;
    line-height: 1;
}

/* ===============================
   申込ピル（地味×おしゃれ版）
================================ */

.apply-inline,
.apply-inline:link,
.apply-inline:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 18px;
  min-width: 80px;

  border-radius: 9999px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none;

  margin-left: auto;
  position: relative;
  z-index: 3;

  border: 1px solid transparent;
  transition: background .2s ease, color .2s ease, transform .15s ease;
}

/* ===== 受付中（落ち着いたブルー） ===== */
.apply-inline[href*="apply.php"] {
  background: #1e3a5f;              /* 濃いネイビー */
  color: #dbeafe;                   /* 淡いブルー文字 */
  border-color: #2c4f7c;
}

.apply-inline[href*="apply.php"]:hover {
  background: #254a78;
  transform: translateY(-1px);
}

/* ===== 準備中（青グレー・任せろ枠） ===== */
.apply-inline.is-prep {
  background: #2a2f36;
  color: #cbd5e1;
  border-color: #3a3f46;
  cursor: default;
  pointer-events: none;
}

/* ===== 締切済（ダークグレー） ===== */
.apply-inline.is-closed {
  background: #1f1f1f;
  color: #9ca3af;
  border-color: #333;
  cursor: default;
  pointer-events: none;
}

/* 共通：押せない感を少し出す */
.apply-inline.is-prep,
.apply-inline.is-closed {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}

/* ==== Like Button — X風アニメーション（追記） ========================== */
:root {
    --like-pink: #e0245e;
    --like-pink-2: #ff4f7a;
}

.like-button {
    position: relative;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 9999px;
    transition: transform .08s ease, background .2s ease, color .2s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.like-button i {
    line-height: 1;
    transition: transform .2s ease, color .2s ease, text-shadow .2s ease;
}

/* 押下時の小さな沈み込み */
.like-button:active {
    transform: scale(.98);
}

/* いいね済み状態 */
.like-button.is-liked {
    color: var(--like-pink);
}

.like-button.is-liked i {
    color: var(--like-pink);
    text-shadow: 0 0 12px rgba(224, 36, 94, .35);
}

/* “ポップ”の拡大縮小 */
@keyframes like-pop {
    0% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.25);
    }

    60% {
        transform: scale(.92);
    }

    100% {
        transform: scale(1);
    }
}

.like-button.is-popping i {
    animation: like-pop 420ms cubic-bezier(.34, 1.56, .64, 1) both;
}

/* バーストの土台（JSで子要素を差し込む） */
.like-burst,
.like-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    pointer-events: none;
    z-index: 1;
}

/* 放射ドット */
.like-burst-dot {
    position: absolute;
    left: 0;
    top: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--like-pink);
    transform: translate(-50%, -50%) rotate(var(--a)) translate(0) scale(.4);
    opacity: .9;
    animation: like-burst 520ms ease-out forwards;
    will-change: transform, opacity;
}

.like-burst-dot:nth-child(odd) {
    background: var(--like-pink-2);
}

@keyframes like-burst {
    50% {
        transform: translate(-50%, -50%) rotate(var(--a)) translate(16px) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) rotate(var(--a)) translate(28px) scale(.1);
        opacity: 0;
    }
}

/* リング波紋 */
.like-ring {
    width: 12px;
    height: 12px;
    border: 2px solid var(--like-pink);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(.5);
    opacity: .65;
    animation: like-ring 520ms ease-out forwards;
    box-shadow: 0 0 18px rgba(224, 36, 94, .35), inset 0 0 10px rgba(224, 36, 94, .15);
}

@keyframes like-ring {
    80% {
        transform: translate(-50%, -50%) scale(1.65);
        opacity: .15;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.9);
        opacity: 0;
    }
}

/* カウントだけ軽く弾ませる */
@keyframes like-count-bump {
    0% {
        transform: translateY(0);
    }

    30% {
        transform: translateY(-20%);
    }

    60% {
        transform: translateY(6%);
    }

    100% {
        transform: translateY(0);
    }
}

.like-count.is-bumping {
    display: inline-block;
    animation: like-count-bump 360ms cubic-bezier(.34, 1.56, .64, 1);
}

/* ホバーの軽い背景（ダークで視認性UP） */
.like-button:hover {
    background: rgba(255, 255, 255, .06);
}

.like-button.is-liked:hover {
    background: rgba(224, 36, 94, .12);
}

/* ==== Like Button：完全黒背景・囲いなし =========================== */
.like-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: #000 !important;
    /* ← 常に黒背景 */
    border: none !important;
    /* ← 枠線を完全に削除 */
    outline: none !important;
    /* ← フォーカス時の白線も消す */
    border-radius: 9999px;
    color: #71767b;
    font-size: var(--fz-16);
    cursor: pointer;
    transition: transform .1s ease;
    user-select: none;
}

/* アイコン */
.like-button i {
    color: inherit;
    transition: color .2s ease, transform .2s ease;
}

/* 押下（クリック）時のわずかなアニメーション */
.like-button:active {
    transform: scale(0.96);
}

/* いいね済み状態（is-liked） */
.like-button.is-liked {
    background: #000 !important;
    /* ← 押した後も黒背景を維持 */
    color: #e0245e;
    /* ← アイコンと数字をピンクに */
}

/* hover時も一切色を変えない */
.like-button:hover,
.like-button.is-liked:hover {
    background: #000 !important;
    color: inherit;
}

/* 無効化状態でも黒背景維持 */
.like-button[disabled] {
    background: #000 !important;
    opacity: 0.6;
    cursor: not-allowed;
}

/* ====== PCのみ：右サイドバーを縦いっぱいにして中だけスクロール ====== */
@media (min-width: 951px) {

    /* サイドバー本体：縦いっぱい固定 */
    .sidebar-right {
        position: sticky;
        top: 0;
        /* 固定ヘッダーがあるなら実高に合わせて例: 60px */
        align-self: start;
        height: 100vh;
        max-height: 100vh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        /* 内部でスクロール */
    }

    /* 上に検索フォームがある場合でも占有しすぎないよう固定 */
    .sidebar-right>.search-form {
        flex: 0 0 auto;
        margin-bottom: 12px;
    }

    /* お知らせブロックを残り全域へ */
    .sidebar-right>.notifications {
        flex: 1 1 auto;
        /* 残りの高さを全て使う */
        min-height: 0;
        /* 内部スクロールに必須 */
        display: flex;
        flex-direction: column;
        background: #16181c;
        /* 既存色を維持 */
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        padding: 0 16px 16px;
    }

    /* 見出しはstickyで上に固定 */
    .sidebar-right>.notifications>h2 {
        position: sticky;
        top: 0;
        z-index: 1;
        margin: 0 -16px 12px;
        padding: 16px;
        background: #16181c;
        /* 既存色を維持 */
        border-bottom: 1px solid var(--color-border);
        border-top-left-radius: var(--radius-lg);
        border-top-right-radius: var(--radius-lg);
    }

    /* リスト本体を内部スクロール */
    .sidebar-right>.notifications>ul {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        /* 通知が多いほどここがスクロール */
        padding-right: 4px;
        /* スクロールバー分の余白 */
        max-height: none;
        /* 高さ制限を解除 */
    }

    /* 行の余白・区切り微調整（任意） */
    .sidebar-right .notifications li.notification-item {
        padding: 10px 0;
        border-bottom: 1px solid var(--color-border);
    }

    .sidebar-right .notifications li.status-item {
        padding: 8px 2px 0;
        border-bottom: none;
    }

    .sidebar-right .notifications li.status-text {
        padding: 0;
        border-bottom: none;
    }

    .sidebar-right .notifications li.status-text span {
        margin-left: 16px; /* 左にスペースを作る */
    }

    .sidebar-right .notifications li.notification-item:last-child {
        border-bottom: none;
    }

    /* スクロールバー（WebKit系の見た目だけ調整） */
    .sidebar-right>.notifications>ul::-webkit-scrollbar {
        width: 8px;
    }

    .sidebar-right>.notifications>ul::-webkit-scrollbar-thumb {
        background: #2a2f36;
        border-radius: 8px;
    }

    .sidebar-right>.notifications>ul::-webkit-scrollbar-track {
        background: transparent;
    }
}

/* ★ 大学名＋都道府県の1行 */
.author-line1 {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ★ 大学名の横に出す都道府県ラベル */
.univ-pref {
    font-size: var(--fz-12);
    color: var(--color-muted-2);
    padding: 2px 8px;
    border-radius: 9999px;
    border: 1px solid var(--color-border);
    white-space: nowrap;
}

/* URLリンク：青色＋下線 */
.auto-link {
    color: #0066ff !important;
    text-decoration: underline !important;
    word-break: break-all;
    cursor: pointer;
}

.auto-link:hover {
    opacity: 0.8;
}



/* ===========================
   投稿オーバーレイ（post.php風）
   main と同じ横幅で、PCは上下全画面、
   モバイルはヘッダー〜フッターの間だけ覆う
   =========================== */

.post-overlay {
    position: fixed;
    /* PC では上下を完全に覆う */
    top: 0;
    bottom: 0;

    /* 左右は JS で .main の rect に合わせる（left / width を上書き） */
    left: 0;
    width: auto;

    z-index: 40;
    display: none;
    /* is-open で表示 */
}

.post-overlay.is-open {
    display: block;
}

/* 背景（ライトボックス感は消す） */
.post-overlay-backdrop {
    position: absolute;
    inset: 0;
    background: transparent;
}

/* post.php の中身が入るパネル部分 */
.post-overlay-panel {
    position: absolute;
    inset: 0;
    background: #000;
    /* main と同じ背景 */
    overflow-y: auto;
    /* 詳細画面はここをスクロール */
    /* 余計な flex 中央寄せはやめる → main と同じレイアウトに */
    display: block;
}

/* 実際に post の back-bar + feed が入る領域 */
.post-overlay-body {
    width: 100%;
    max-width: none;
    /* main と同じく全幅つかう */
    margin: 0;
    padding: 0;
    /* ← これで左右の余白を完全にゼロに */
    box-sizing: border-box;
}

/* ローディング文言 */
.post-overlay-loading {
    text-align: center;
    padding: 40px 0;
    color: #ccc;
}

/* オーバーレイ表示中は main 自体をスクロール不可にする */
.main.has-post-overlay {
    overflow: hidden;
}

/* ===== スマホ（モバイルヘッダー/フッターを生かす） ===== */
@media (max-width: 950px) {
    .post p {
        font-size: var(--fz-13-5);
        line-height: 1.4;
    }

    .post-overlay {
        /* ヘッダーとフッターの間だけを覆う */
        top: var(--mobile-header-h);
        bottom: var(--mobile-footer-h);
    }

    .post-overlay-panel {
        inset: 0;
    }

    .post-overlay-body {
        max-width: 100%;
        padding: 0;
        /* ここも余白なし */
    }
}




/* ==========================================================
   LIGHT THEME FIX (Right sidebar / Post / Like / Apply)
   貼る場所：03-components.css の末尾（推奨）
========================================================== */
:root[data-theme="light"]{
  --like-muted: #64748b;
  --like-bg-hover: rgba(15,23,42,.06);
  --like-bg-liked: rgba(224,36,94,.10);

  --line-light: rgba(15,23,42,.12);
  --title-light: #0f172a;
}

/* ===============================
   右バー「お知らせ」欄（黒固定の打ち消し）
   =============================== */
:root[data-theme="light"] .sidebar-right section,
:root[data-theme="light"] .sidebar-right .search-filter,
:root[data-theme="light"] .sidebar-right > .notifications{
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-border) !important;
}

:root[data-theme="light"] .sidebar-right h2,
:root[data-theme="light"] .sidebar-right > .notifications > h2{
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  border-bottom: 1px solid var(--color-border) !important;
}

:root[data-theme="light"] .sidebar-right li,
:root[data-theme="light"] .sidebar-right .notification-list > li,
:root[data-theme="light"] .sidebar-right .notifications li.notification-item{
  border-bottom: 1px solid var(--line-light) !important;
  color: var(--color-text) !important;
}

:root[data-theme="light"] .sidebar-right .notification-text{
  color: var(--color-text) !important;
}

:root[data-theme="light"] .sidebar-right .notification-date{
  color: #94a3b8 !important;
}


:root[data-theme="light"] .sw_news-tab {
  color: var(--color-muted);
}

:root[data-theme="light"] .sw_news-tab[aria-selected="true"] {
  color: var(--color-text);
}

:root[data-theme="light"] .sw-news-tab[aria-selected="true"]::after {
  background: var(--color-text);
}


/* ===============================
   投稿内（白背景で文字/線が沈む問題）
   =============================== */
:root[data-theme="light"] .post-title{
  color: var(--title-light) !important;
}
:root[data-theme="light"] .post-title::after{
  background: var(--line-light) !important;
}

:root[data-theme="light"] .feed .post::after{
  background: var(--line-light) !important;
}

:root[data-theme="light"] .post header span,
:root[data-theme="light"] .post footer{
  color: #64748b !important;
}

/* オーバーレイ（post.php風）も黒固定を解除 */
:root[data-theme="light"] .post-overlay-panel{
  background: var(--color-bg) !important;
}
:root[data-theme="light"] .post-overlay-loading{
  color: #64748b !important;
}

/* ===============================
   いいねボタン周辺（黒ベタ固定をライト対応）
   =============================== */
:root[data-theme="light"] .like-button{
  background: transparent !important;
  color: var(--like-muted) !important;
}

:root[data-theme="light"] .like-button:hover{
  background: var(--like-bg-hover) !important;
}

:root[data-theme="light"] .like-button.is-liked{
  background: transparent !important;
  color: var(--like-pink) !important;
}
:root[data-theme="light"] .like-button.is-liked:hover{
  background: var(--like-bg-liked) !important;
}

/* ===============================
   受付ボタン（申込ピル）
   - 受付中：青
   - 準備中：落ち着いたグレー
   - 締切済：薄グレー
   =============================== */

/* 受付中（apply.phpリンク） */
:root[data-theme="light"] .apply-inline[href*="apply.php"],
:root[data-theme="light"] .apply-btn{
  background: #2563eb !important;
  color: #ffffff !important;
  border: 1px solid #1d4ed8 !important;
}
:root[data-theme="light"] .apply-inline[href*="apply.php"]:hover,
:root[data-theme="light"] .apply-btn:hover{
  background: #1d4ed8 !important;
}

/* 準備中（落ち着いたトーン） */
:root[data-theme="light"] .apply-inline.is-prep{
  background: #e2e8f0 !important;
  color: #475569 !important;
  border-color: #cbd5e1 !important;
  box-shadow: inset 0 0 0 1px rgba(15,23,42,.03) !important;
}

/* 締切済（さらに控えめ） */
:root[data-theme="light"] .apply-inline.is-closed,
:root[data-theme="light"] .apply-inline.is-closed:hover,
:root[data-theme="light"] .apply-inline.is-closed:focus{
  background: #e5e7eb !important;
  color: #64748b !important;
  border-color: #cbd5e1 !important;
  box-shadow: none !important;
}

/* ===============================
   カルーセル背景（ライトで変に暗い/浮くのを調整）
   =============================== */
:root[data-theme="light"] .carousel{
  background: #f1f5f9 !important;
}
:root[data-theme="light"] .carousel-nav{
  background: rgba(15,23,42,.18) !important;
}
:root[data-theme="light"] .carousel-nav:hover{
  background: rgba(15,23,42,.28) !important;
}
:root[data-theme="light"] .carousel-dots button{
  background: rgba(15,23,42,.22) !important;
}
:root[data-theme="light"] .carousel-dots button.is-active{
  background: rgba(15,23,42,.55) !important;
}





/* ==========================================================
   LIGHT: Back bar（戻るボタン）見えない問題を全ページで修正
   貼る場所：03-components.css 末尾（推奨）
========================================================== */
:root[data-theme="light"] .back-bar{
  background: var(--color-surface) !important;
  border-bottom: 1px solid var(--color-border) !important;
}

/* 戻るボタン文字・タイトル文字を暗く */
:root[data-theme="light"] .back-bar button,
:root[data-theme="light"] .back-bar h1{
  color: #0f172a !important; /* 濃い文字 */
}

/* アイコン(i)も暗く（font-awesome等） */
:root[data-theme="light"] .back-bar i{
  color: #0f172a !important;
}

/* hover：薄いグレー背景で“押せる感” */
:root[data-theme="light"] .back-bar button{
  padding: 8px 10px;
  border-radius: 10px;
}
:root[data-theme="light"] .back-bar button:hover{
  opacity: 1 !important;
  background: rgba(15, 23, 42, 0.06);
}

/* キーボード操作のフォーカスも見えるように */
:root[data-theme="light"] .back-bar button:focus-visible{
  outline: 2px solid rgba(37, 99, 235, 0.45);
  outline-offset: 2px;
}










/* ==========================================================
   LIGHT MODE UPGRADE (Feed / Cards / Buttons)
   貼る場所：03-components.css の末尾
========================================================== */
:root[data-theme="light"]{
  /* 02-layout 側が無くても動くよう保険 */
  --lt-bg: #f6f7fb;
  --lt-surface: #ffffff;
  --lt-surface-2: #f1f5f9;
  --lt-border: rgba(15,23,42,.10);
  --lt-border-2: rgba(15,23,42,.14);
  --lt-text: #0f172a;
  --lt-muted: #64748b;
  --lt-primary: #2563eb;
  --lt-primary-soft: rgba(37,99,235,.12);
  --lt-shadow-sm: 0 1px 2px rgba(15,23,42,.05);
  --lt-shadow-md: 0 12px 30px rgba(15,23,42,.10);
}

/* =========================
   投稿：区切り線から“カード”へ
   ========================= */
:root[data-theme="light"] .feed .post{
  background: var(--lt-surface) !important;
  border: 1px solid var(--lt-border) !important;
  border-radius: 16px;
  box-shadow: var(--lt-shadow-sm);
  margin: 12px 12px;
  padding: 16px !important;
}
@media (min-width: 951px){
  :root[data-theme="light"] .feed .post{
    margin: 14px 16px;
    border-radius: 18px;
  }
}

/* 既存の下線（post::after）をライトでは薄く＆短く */
:root[data-theme="light"] .feed .post::after{
  height: 1px !important;
  margin: 14px 0 0 !important;
  background: rgba(15,23,42,.08) !important;
  border-radius: 999px;
}

/* タイトル：黒ベタ感→読みやすい濃紺＋線は薄く */
:root[data-theme="light"] .post-title{
  color: var(--lt-text) !important;
}
:root[data-theme="light"] .post-title::after{
  background: rgba(15,23,42,.10) !important;
}

/* 投稿本文/補助テキスト */
:root[data-theme="light"] .post p{
  color: var(--lt-text) !important;
}
:root[data-theme="light"] .post header span,
:root[data-theme="light"] .post footer{
  color: var(--lt-muted) !important;
}

/* アバター枠が白で埋もれる場合の保険 */
:root[data-theme="light"] .post header img{
  box-shadow: 0 0 0 1px rgba(15,23,42,.10);
}

/* =========================
   右サイド（お知らせ）：カード感
   ========================= */
:root[data-theme="light"] .sidebar-right section,
:root[data-theme="light"] .sidebar-right .search-filter,
:root[data-theme="light"] .sidebar-right > .notifications{
  background: var(--lt-surface) !important;
  border: 1px solid var(--lt-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--lt-shadow-sm);
}
:root[data-theme="light"] .sidebar-right h2,
:root[data-theme="light"] .sidebar-right > .notifications > h2{
  background: transparent !important;
  color: var(--lt-text) !important;
  border-bottom: 1px solid rgba(15,23,42,.08) !important;
}

/* 通知リンク：青を使って“会社っぽさ”を出す */
:root[data-theme="light"] .sidebar-right .notification-text{
  color: #1d4ed8 !important;
  font-weight: 600;
}
:root[data-theme="light"] .sidebar-right .notification-text:hover{
  text-decoration: none !important;
  opacity: .85;
}
:root[data-theme="light"] .sidebar-right .notification-date{
  color: #94a3b8 !important;
}

/* =========================
   ボタン類：白黒すぎ改善
   ========================= */
:root[data-theme="light"] .btn{
  background: rgba(15,23,42,.04) !important;
  border: 1px solid var(--lt-border) !important;
  color: var(--lt-text) !important;
}
:root[data-theme="light"] .btn:hover{
  background: rgba(15,23,42,.06) !important;
}
:root[data-theme="light"] .btn.ghost{
  background: transparent !important;
}

/* いいね：ライトで“黒ベタ”を完全にやめて、上品なホバー */
:root[data-theme="light"] .like-button{
  background: transparent !important;
  color: var(--lt-muted) !important;
}
:root[data-theme="light"] .like-button:hover{
  background: rgba(15,23,42,.05) !important;
}
:root[data-theme="light"] .like-button.is-liked{
  color: var(--like-pink) !important;
}
:root[data-theme="light"] .like-button.is-liked:hover{
  background: rgba(224,36,94,.10) !important;
}

/* =========================
   申込ピル：会社っぽく “青/グレー”で統一
   ========================= */
:root[data-theme="light"] .apply-inline[href*="apply.php"],
:root[data-theme="light"] .apply-btn{
  background: var(--lt-primary) !important;
  color: #fff !important;
  border: 1px solid rgba(29,78,216,.55) !important;
  box-shadow: 0 8px 20px rgba(37,99,235,.18);
}
:root[data-theme="light"] .apply-inline[href*="apply.php"]:hover,
:root[data-theme="light"] .apply-btn:hover{
  background: #1d4ed8 !important;
}

/* 準備中：白黒すぎ→青グレー寄り */
:root[data-theme="light"] .apply-inline.is-prep{
  background: #e8eef6 !important;
  color: #475569 !important;
  border-color: rgba(71,85,105,.25) !important;
}

/* 締切：薄いグレー（でも読みやすく） */
:root[data-theme="light"] .apply-inline.is-closed{
  background: #eef2f7 !important;
  color: #64748b !important;
  border-color: rgba(100,116,139,.22) !important;
}

/* =========================
   カルーセル：ライトで浮きすぎない
   ========================= */
:root[data-theme="light"] .carousel{
  background: var(--lt-surface-2) !important;
  border: 1px solid var(--lt-border) !important;
  box-shadow: var(--lt-shadow-sm);
}
:root[data-theme="light"] .carousel-nav{
  background: rgba(15,23,42,.22) !important;
}
:root[data-theme="light"] .carousel-nav:hover{
  background: rgba(15,23,42,.32) !important;
}

/* =========================
   戻るバー：ライトで“上品な固定バー”
   ========================= */
:root[data-theme="light"] .back-bar{
  background: rgba(255,255,255,.88) !important;
  border-bottom: 1px solid var(--lt-border) !important;
  backdrop-filter: blur(12px) saturate(1.2);
}
:root[data-theme="light"] .back-bar button,
:root[data-theme="light"] .back-bar h1,
:root[data-theme="light"] .back-bar i{
  color: var(--lt-text) !important;
}
:root[data-theme="light"] .back-bar button:hover{
  background: rgba(15,23,42,.06) !important;
  opacity: 1 !important;
}

/* =========================
   URLリンク：青を“落ち着いた会社色”に
   ========================= */
:root[data-theme="light"] .auto-link{
  color: #1d4ed8 !important;
}























/* ==========================================================
   LIGHT MODE (Corporate / airy) — Final override
   貼る場所：03-components.css の一番下（最下行）
========================================================== */
:root[data-theme="light"]{
  /* ベース */
  --lt-bg: #f6f7fb;
  --lt-surface: #ffffff;
  --lt-surface-2: #f1f5f9;
  --lt-border: rgba(15,23,42,.10);
  --lt-text: #0f172a;
  --lt-muted: #64748b;

  /* “会社っぽい青” */
  --lt-primary: #2563eb;
  --lt-primary-hover: #1d4ed8;

  /* 影：薄く・広く */
  --lt-shadow-sm: 0 1px 2px rgba(15,23,42,.05);
  --lt-shadow-md: 0 10px 28px rgba(15,23,42,.10);
}

/* ===== 背景の空気感（白黒ベタをやめる） ===== */
:root[data-theme="light"] body{
  background: var(--lt-bg) !important;
  color: var(--lt-text) !important;
}

/* ===== 3カラムの土台 ===== */
:root[data-theme="light"] .sidebar,
:root[data-theme="light"] .main,
:root[data-theme="light"] .sidebar-right{
  background: transparent !important;
}

/* 左サイド：白カード＋薄影 */
:root[data-theme="light"] .sidebar{
  background: var(--lt-surface) !important;
  border-right: 1px solid var(--lt-border) !important;
  box-shadow: var(--lt-shadow-sm);
}

/* 中央：境界線を薄く */
:root[data-theme="light"] .main{
  border-inline: 1px solid var(--lt-border) !important;
}

/* 右サイド：カード化（黒固定を殺す） */
:root[data-theme="light"] .sidebar-right section,
:root[data-theme="light"] .sidebar-right .search-filter,
:root[data-theme="light"] .sidebar-right > .notifications{
  background: var(--lt-surface) !important;
  border: 1px solid var(--lt-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--lt-shadow-sm);
  color: var(--lt-text) !important;
}
:root[data-theme="light"] .sidebar-right h2,
:root[data-theme="light"] .sidebar-right > .notifications > h2{
  background: transparent !important;
  color: var(--lt-text) !important;
  border-bottom: 1px solid rgba(15,23,42,.08) !important;
}

/* ===== 投稿：線区切り → カード（最重要） ===== */
:root[data-theme="light"] .feed .post{
  background: var(--lt-surface) !important;
  border: 1px solid var(--lt-border) !important;
  border-radius: 18px;
  box-shadow: var(--lt-shadow-sm);
  margin: 14px 14px;
  padding: 16px !important;
}
:root[data-theme="light"] .feed .post::after{
  height: 1px !important;
  margin: 14px 0 0 !important;
  background: rgba(15,23,42,.07) !important;
}

/* タイトル・テキスト */
:root[data-theme="light"] .post-title{
  color: var(--lt-text) !important;
}
:root[data-theme="light"] .post-title::after{
  background: rgba(15,23,42,.10) !important;
}
:root[data-theme="light"] .post p{
  color: var(--lt-text) !important;
}
:root[data-theme="light"] .post header span{
  color: var(--lt-muted) !important;
}

/* ===== 検索フォーム：白背景でも沈まない ===== */
:root[data-theme="light"] .search-form,
:root[data-theme="light"] .mobile-search,
:root[data-theme="light"] .header-search{
  background: rgba(15,23,42,.04) !important;
  border: 1px solid var(--lt-border) !important;
}
:root[data-theme="light"] .search-form i,
:root[data-theme="light"] .mobile-search i,
:root[data-theme="light"] .header-search i{
  color: var(--lt-muted) !important;
}

/* ===== 申込ボタン / 受付ピル ===== */
:root[data-theme="light"] .apply-btn,
:root[data-theme="light"] .apply-inline[href*="apply.php"]{
  background: var(--lt-primary) !important;
  color: #fff !important;
  border: 1px solid rgba(29,78,216,.50) !important;
  box-shadow: 0 10px 22px rgba(37,99,235,.18);
}
:root[data-theme="light"] .apply-btn:hover,
:root[data-theme="light"] .apply-inline[href*="apply.php"]:hover{
  background: var(--lt-primary-hover) !important;
}
:root[data-theme="light"] .apply-inline.is-prep{
  background: #e8eef6 !important;
  color: #475569 !important;
  border-color: rgba(71,85,105,.25) !important;
}
:root[data-theme="light"] .apply-inline.is-closed{
  background: #eef2f7 !important;
  color: #64748b !important;
  border-color: rgba(100,116,139,.20) !important;
}

/* ===== いいね：黒固定を排除 ===== */
:root[data-theme="light"] .like-button{
  background: transparent !important;
  color: var(--lt-muted) !important;
}
:root[data-theme="light"] .like-button:hover{
  background: rgba(15,23,42,.05) !important;
}
:root[data-theme="light"] .like-button.is-liked{
  color: #e0245e !important;
}
:root[data-theme="light"] .like-button.is-liked:hover{
  background: rgba(224,36,94,.10) !important;
}

/* ===== モバイルヘッダー/フッター：ガラス感 ===== */
:root[data-theme="light"] .header-mobile{
  background: rgba(255,255,255,.88) !important;
  border-bottom: 1px solid var(--lt-border) !important;
  backdrop-filter: blur(12px) saturate(1.2);
}
:root[data-theme="light"] .footer-mobile{
  background: rgba(255,255,255,.90) !important;
  border-top: 1px solid var(--lt-border) !important;
  backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: 0 -10px 30px rgba(15,23,42,.06);
}
:root[data-theme="light"] .footer-link{
  color: var(--lt-muted) !important;
}
:root[data-theme="light"] .footer-link.active{
  color: var(--lt-primary) !important;
}

/* ===== 戻るバー：上品固定バー ===== */
:root[data-theme="light"] .back-bar{
  background: rgba(255,255,255,.90) !important;
  border-bottom: 1px solid var(--lt-border) !important;
  backdrop-filter: blur(12px) saturate(1.2);
}
:root[data-theme="light"] .back-bar button,
:root[data-theme="light"] .back-bar h1,
:root[data-theme="light"] .back-bar i{
  color: var(--lt-text) !important;
}






/* ==========================================================
   LIGHT: Feed を “カード囲い” から “リスト＋区切り線” に戻す
   貼る場所：03-components.css の一番末尾（いちばん下）
========================================================== */

/* main を “白い紙面” にする（投稿の背景を統一） */
:root[data-theme="light"] .main{
  background: var(--color-surface) !important;
}

/* 投稿カード化（背景/枠/影/角丸/外側余白）を全部潰す */
:root[data-theme="light"] .feed .post{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 16px !important; /* ダークと同じ“気持ちいい”余白だけ残す */
}

/* 区切り線は “薄く・左右少し内側” で会社っぽく */
:root[data-theme="light"] .feed .post::after{
  content: "" !important;
  display: block !important;
  height: 1px !important;
  margin: 16px 12px 0 !important;
  background: rgba(15,23,42,.10) !important;
  border-radius: 999px;
}

/* タイトル下の線もライト用に薄く */
:root[data-theme="light"] .post-title::after{
  background: rgba(15,23,42,.10) !important;
}

/* 文字色の最終保険（薄くなりがち問題を潰す） */
:root[data-theme="light"] .post p,
:root[data-theme="light"] .post header strong{
  color: var(--color-text) !important;
}
:root[data-theme="light"] .post header span,
:root[data-theme="light"] .post footer{
  color: rgba(15,23,42,.55) !important;
}