/* =============================================================
 * UIリニューアル — 60 SNSモード（/sns 系・まとめパネル）
 * テーマは「緑」。既存 theme-styles.blade.php の緑（#0d9488 系）に合わせる。
 * 金・ハート色・ポイント訴求の装飾は持ち込まない。👍 は「いいね」と呼ばない。
 * 全セレクタは body.ui-r 配下。
 * ============================================================= */

body.ui-r {
    /* ---- SNS緑（theme-styles の既存色から） ---- */
    --ui-sns-900: #0b4f4a;
    --ui-sns-800: #0f6b63;
    --ui-sns-700: #0b7f75;
    --ui-sns: #0d9488;
    --ui-sns-hi: #14b8a6;
    --ui-sns-lite: #2dd4bf;
    --ui-sns-glow: #5eead4;
    --ui-sns-bg: #f0fbf8;
    --ui-sns-pale: #e0f2ee;
    --ui-sns-pale-2: #e6f7f5;
    --ui-sns-line: #c7e8de;
    --ui-sns-ink: #1e3a5f;
    --ui-sns-ink-2: #6b8e9a;
    --ui-sns-grad: linear-gradient(135deg, #2dd4bf 0%, #14b8a6 45%, #0d9488 100%);
    --ui-sns-btn: linear-gradient(180deg, #34dcc5 0%, #14b8a6 45%, #0d9488 100%);
    --ui-sns-btn-hover: linear-gradient(180deg, #5eead4 0%, #22c7b3 45%, #11a294 100%);
    --ui-sns-shadow-1: 0 1px 2px rgba(11, 79, 74, .06), 0 4px 14px rgba(13, 148, 136, .08);
    --ui-sns-shadow-2: 0 2px 4px rgba(11, 79, 74, .06), 0 14px 34px rgba(13, 148, 136, .16);
    --ui-sns-cta-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 6px 18px rgba(13, 148, 136, .35);
}

/* SNSページ（通知ページの .un-container は対象外）を判定するための共通セレクタ:
   .content:has(> .sns-theme > .sns-container, > .sns-theme > .sns-create-container) */

/* =============================================================
 * ロゴ帯と外枠を緑に（SNSページだけ）
 * ============================================================= */
body.ui-r main.container-fluid > .row:has(> .content > .sns-theme > .sns-container),
body.ui-r main.container-fluid > .row:has(> .content > .sns-theme > .sns-create-container) {
    background-color: var(--ui-sns-700);
    background-image:
        radial-gradient(120% 60% at 50% -8%, rgba(204, 255, 244, .42) 0%, rgba(150, 240, 220, .14) 38%, rgba(150, 240, 220, 0) 62%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='48' viewBox='0 0 160 48'%3E%3Cpath d='M0 24c20 0 20-10 40-10s20 10 40 10 20-10 40-10 20 10 40 10' fill='none' stroke='%23ffffff' stroke-opacity='.09' stroke-width='1.4'/%3E%3Cpath d='M0 44c20 0 20-8 40-8s20 8 40 8 20-8 40-8 20 8 40 8' fill='none' stroke='%23053a36' stroke-opacity='.10' stroke-width='1.2'/%3E%3C/svg%3E"),
        linear-gradient(180deg, #19b3a3 0%, #0f9a8c 30%, #0b7f75 70%, #0b6a62 100%);
    background-repeat: no-repeat, repeat, no-repeat;
    background-size: 100% 1400px, 160px 48px, 100% 100%;
}
body.ui-r .content:has(> .sns-theme > .sns-container) .top-ct > a::before,
body.ui-r .content:has(> .sns-theme > .sns-create-container) .top-ct > a::before {
    background: radial-gradient(closest-side, rgba(220, 255, 247, .5), rgba(220, 255, 247, 0));
}
body.ui-r .content:has(> .sns-theme > .sns-container) .top-ct > a > img,
body.ui-r .content:has(> .sns-theme > .sns-create-container) .top-ct > a > img {
    filter: drop-shadow(0 8px 18px rgba(3, 50, 46, .45));
}

/* メイン領域：ロゴ帯の上にシートが乗る見た目 */
body.ui-r .sns-theme:has(> .sns-container),
body.ui-r .sns-theme:has(> .sns-create-container) {
    position: relative;
    background:
        radial-gradient(90% 260px at 50% 0, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0)),
        var(--ui-sns-bg);
    border-radius: 28px 28px 0 0;
    box-shadow: 0 -10px 30px rgba(3, 50, 46, .18), inset 0 1px 0 rgba(255, 255, 255, .9);
    padding-top: 22px;
    color: var(--ui-sns-ink);
}
body.ui-r .sns-theme .sns-container,
body.ui-r .sns-theme .sns-create-container {
    max-width: 660px;
    padding: 0 16px;
}

/* =============================================================
 * ヘッダー（タイトル＋投稿CTA）
 * ============================================================= */
body.ui-r .sns-theme .sns-header {
    padding: 6px 0 14px;
    border-bottom: 0;
    gap: 12px;
}
body.ui-r .sns-theme .sns-header h1 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .02em;
    color: var(--ui-sns-ink);
    line-height: 1.35;
    min-width: 0;
}
/* 「その場で」を表すライブ感のある緑の点（装飾） */
body.ui-r .sns-theme .sns-header h1::before {
    content: "";
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ui-sns-hi);
    box-shadow: 0 0 0 4px rgba(20, 184, 166, .18);
    animation: ui-sns-live 2.4s var(--ui-ease) infinite;
}
@keyframes ui-sns-live {
    0%, 100% { box-shadow: 0 0 0 4px rgba(20, 184, 166, .18); }
    50% { box-shadow: 0 0 0 8px rgba(20, 184, 166, 0); }
}

/* 緑の大きなCTA（フィードの「投稿する」・ガイドの「SNSモードへ」） */
body.ui-r .sns-theme .sns-header .sns-new-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 24px 0 18px;
    border-radius: var(--ui-r-pill);
    background: var(--ui-sns-btn);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .04em;
    box-shadow: var(--ui-sns-cta-shadow);
    transition: transform var(--ui-dur-2) var(--ui-ease), box-shadow var(--ui-dur-2) var(--ui-ease);
    white-space: nowrap;
}
body.ui-r .sns-theme .sns-header .sns-new-btn[href*="/sns/create"]::before {
    content: "";
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background:
        linear-gradient(#0d9488, #0d9488) center / 10px 2px no-repeat,
        linear-gradient(#0d9488, #0d9488) center / 2px 10px no-repeat,
        #fff;
    box-shadow: 0 1px 2px rgba(3, 50, 46, .25);
}
body.ui-r .sns-theme .sns-header .sns-new-btn:hover {
    background: var(--ui-sns-btn-hover);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 10px 26px rgba(13, 148, 136, .42);
}
body.ui-r .sns-theme .sns-header .sns-new-btn:active {
    transform: translateY(0) scale(.97);
}

/* 使い方リンク（インラインstyleの div 内） */
body.ui-r .sns-theme .sns-container > div > a[href*="/sns/guide"] {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 14px;
    border-radius: var(--ui-r-pill);
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--ui-sns-line);
    font-weight: 700;
    text-decoration: none;
}
body.ui-r .sns-theme .sns-container > div > a[href*="/sns/guide"]:hover {
    background: var(--ui-sns-pale-2);
}
/* 「← SNSフィードに戻る」（ユーザー絞り込み時） */
body.ui-r .sns-theme .sns-container > div > a[href$="/sns"] {
    font-weight: 700;
}

/* 使い方動画の枠（インラインstyleのため !important） */
body.ui-r .sns-theme .sns-container > div[style*="56.25%"] {
    border-radius: 20px !important;
    margin: 10px 0 18px !important;
    box-shadow: 0 2px 4px rgba(3, 50, 46, .08), 0 14px 34px rgba(3, 50, 46, .18);
}

/* =============================================================
 * タブ（セグメント型）
 * ============================================================= */
body.ui-r .sns-theme .sns-tabs {
    gap: 4px;
    padding: 5px;
    margin: 0 0 16px;
    border: 0;
    border-radius: var(--ui-r-pill);
    background: rgba(224, 242, 238, .92);
    box-shadow: inset 0 1px 2px rgba(11, 79, 74, .08);
    top: 8px;
    -webkit-backdrop-filter: saturate(1.4) blur(8px);
    backdrop-filter: saturate(1.4) blur(8px);
}
body.ui-r .sns-theme .sns-tabs a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 12px;
    border-radius: var(--ui-r-pill);
    border-bottom: 0;
    color: var(--ui-sns-ink-2);
    font-size: 15px;
    transition: background var(--ui-dur-2) var(--ui-ease), color var(--ui-dur-2) var(--ui-ease), box-shadow var(--ui-dur-2) var(--ui-ease);
}
body.ui-r .sns-theme .sns-tabs a:hover {
    color: var(--ui-sns-800);
    background: rgba(255, 255, 255, .55);
}
body.ui-r .sns-theme .sns-tabs a.active {
    border-bottom: 0;
    background: #fff;
    color: var(--ui-sns);
    box-shadow: 0 1px 2px rgba(11, 79, 74, .10), 0 4px 12px rgba(13, 148, 136, .14);
}

/* =============================================================
 * フィード：時系列の細いライン（カードの間をつなぐ）
 * ============================================================= */
body.ui-r .sns-theme .sns-feed .sns-item {
    position: relative;
    margin: 0 0 18px;
}
body.ui-r .sns-theme .sns-feed .sns-item + .sns-item::before {
    content: "";
    position: absolute;
    left: 38px;
    top: -19px;
    width: 2px;
    height: 20px;
    border-radius: 2px;
    background: linear-gradient(180deg, rgba(13, 148, 136, .15), rgba(13, 148, 136, .55));
    pointer-events: none;
}

/* =============================================================
 * 投稿カード
 * ============================================================= */
body.ui-r .sns-theme .sns-item {
    background: #fff;
    border: 1px solid rgba(199, 232, 222, .7);
    border-radius: 22px;
    padding: 16px 16px 12px;
    box-shadow: var(--ui-hl-top), var(--ui-sns-shadow-1);
    transition: transform var(--ui-dur-3) var(--ui-ease), box-shadow var(--ui-dur-3) var(--ui-ease);
}
@media (hover: hover) {
    body.ui-r .sns-theme .sns-feed .sns-item:hover {
        transform: translateY(-2px);
        box-shadow: var(--ui-hl-top), var(--ui-sns-shadow-2);
    }
}
body.ui-r .sns-theme .sns-item__head {
    gap: 12px;
    margin-bottom: 12px;
}
body.ui-r .sns-theme .sns-item__avatar {
    flex: 0 0 auto;
    display: block;
    padding: 2px;
    border-radius: 50%;
    background: var(--ui-sns-grad);
    box-shadow: 0 2px 8px rgba(13, 148, 136, .25);
    line-height: 0;
}
body.ui-r .sns-theme .sns-item__avatar img {
    width: 44px;
    height: 44px;
    border: 2px solid #fff;
    display: block;
}
body.ui-r .sns-theme .sns-item__meta {
    margin-left: 0;
    min-width: 0;
    line-height: 1.35;
}
body.ui-r .sns-theme .sns-item__name {
    font-size: 15px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.ui-r .sns-theme .sns-item__name a {
    color: var(--ui-sns-ink);
}
body.ui-r .sns-theme .sns-item__name a:hover {
    color: var(--ui-sns);
}
body.ui-r .sns-theme .sns-item__handle {
    font-size: 12px;
    font-weight: 500;
    color: var(--ui-sns-ink-2);
}
body.ui-r .sns-theme .sns-item__time {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 500;
    color: var(--ui-sns-ink-2);
}
body.ui-r .sns-theme .sns-item__time::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ui-sns-lite);
}
body.ui-r .sns-theme .sns-item__merged-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 12px;
    font-size: 12px;
    background: var(--ui-sns-pale-2);
    box-shadow: inset 0 0 0 1px rgba(13, 148, 136, .25);
}

/* 写真：角丸＋元の比率のまま（ガイドに「切り抜かれず比率のまま表示」とあるため cover にしない） */
body.ui-r .sns-theme .sns-item__images {
    gap: 4px;
    margin: 4px 0 10px;
    border-radius: 16px;
    background: var(--ui-sns-pale);
    box-shadow: inset 0 0 0 1px rgba(11, 79, 74, .06);
}
body.ui-r .sns-theme .sns-item__image-wrap {
    overflow: hidden;
}
body.ui-r .sns-theme .sns-item__image-wrap img {
    transition: transform .5s var(--ui-ease);
}
@media (hover: hover) {
    body.ui-r .sns-theme .sns-item__image-wrap:hover img {
        transform: scale(1.03);
    }
}

/* キャプション・場所 */
body.ui-r .sns-theme .sns-item__caption {
    font-size: 15px;
    line-height: 1.75;
    padding: 2px 2px 8px;
    color: var(--ui-sns-ink);
    overflow-wrap: anywhere;
}
body.ui-r .sns-theme .sns-item__caption a:hover {
    color: var(--ui-sns-800);
}
body.ui-r .sns-theme .sns-item__location {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    margin: 0 0 6px;
    padding: 4px 12px;
    border-radius: var(--ui-r-pill);
    background: var(--ui-sns-bg);
    box-shadow: inset 0 0 0 1px var(--ui-sns-line);
    font-size: 12px;
    font-weight: 700;
    color: var(--ui-sns-800);
}

/* アクションバー */
body.ui-r .sns-theme .sns-item__actions {
    gap: 10px;
    padding: 12px 0 2px;
    margin-top: 6px;
    border-top: 1px solid rgba(199, 232, 222, .7);
}
body.ui-r .sns-theme .sns-item__action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 14px;
    border-radius: var(--ui-r-pill);
    font-size: 14px;
    font-weight: 700;
    color: var(--ui-sns-ink-2);
    background: var(--ui-sns-bg);
    box-shadow: inset 0 0 0 1px rgba(199, 232, 222, .9);
    line-height: 1;
    transition: background var(--ui-dur-1) var(--ui-ease), color var(--ui-dur-1) var(--ui-ease), transform var(--ui-dur-1) var(--ui-ease), box-shadow var(--ui-dur-1) var(--ui-ease);
}
body.ui-r .sns-theme a.sns-item__action:hover {
    background: var(--ui-sns-pale);
    color: var(--ui-sns-ink);
}
/* 👍 ボタン（押せるもの） */
body.ui-r .sns-theme .sns-item__action.sns-like-btn {
    min-height: 40px;
    padding: 0 18px;
    border: 0;
    background: #fff;
    color: var(--ui-sns);
    box-shadow: inset 0 0 0 1.5px var(--ui-sns);
    font-size: 15px;
}
body.ui-r .sns-theme .sns-item__action.sns-like-btn:hover {
    background: var(--ui-sns-pale-2);
    color: var(--ui-sns-700);
}
body.ui-r .sns-theme .sns-item__action.sns-like-btn:active {
    transform: scale(.94);
}
body.ui-r .sns-theme .sns-item__action.sns-like-btn.is-liked {
    background: var(--ui-sns-btn);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 4px 12px rgba(13, 148, 136, .3);
}
body.ui-r .sns-theme .sns-item__action.sns-like-btn.is-liked:hover {
    background: var(--ui-sns-btn-hover);
    color: #fff;
}
body.ui-r .sns-theme .sns-like-icon {
    font-size: 16px;
}
/* 削除（自分の投稿のみ）は右端に控えめに */
body.ui-r .sns-theme .sns-item__action.sns-delete-btn {
    margin-left: auto;
    background: transparent;
    font-weight: 500;
}
body.ui-r .sns-theme .sns-item__action.sns-delete-btn:hover {
    background: #fff0f3;
    color: #be123c;
}

/* 空状態 */
body.ui-r .sns-theme .sns-empty {
    border-radius: 22px;
    border: 1px dashed var(--ui-sns-line);
    box-shadow: var(--ui-sns-shadow-1);
    font-weight: 700;
}

/* ページ送り */
body.ui-r .sns-theme .sns-pagination {
    padding: 8px 0 20px;
}
body.ui-r .sns-theme .sns-pagination ul.pagination {
    gap: 6px;
    margin: 0;
}
body.ui-r .sns-theme .sns-pagination .page-link,
body.ui-r .sns-theme .sns-pagination .page-item span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 14px;
    border-radius: var(--ui-r-pill) !important;
    border: 0;
    box-shadow: inset 0 0 0 1px var(--ui-sns-line), var(--ui-sns-shadow-1);
    font-weight: 700;
    font-size: 14px;
}
body.ui-r .sns-theme .sns-pagination .page-item.active .page-link,
body.ui-r .sns-theme .sns-pagination .page-item.active span {
    background: var(--ui-sns-btn);
    color: #fff;
    box-shadow: var(--ui-sns-cta-shadow);
}
body.ui-r .sns-theme .sns-pagination .page-item.disabled span {
    opacity: .55;
}

/* =============================================================
 * 投稿詳細（/sns/posts/{id}）
 * ============================================================= */
body.ui-r .sns-theme .sns-back {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 16px;
    margin-bottom: 12px;
    border-radius: var(--ui-r-pill);
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--ui-sns-line), var(--ui-sns-shadow-1);
    font-weight: 700;
}
body.ui-r .sns-theme .sns-back:hover {
    background: var(--ui-sns-pale-2);
    color: var(--ui-sns-700);
}
body.ui-r .sns-theme .sns-container > .sns-item {
    margin: 0 0 16px;
}
body.ui-r .sns-theme .sns-comments {
    padding: 18px 16px 16px;
    margin-bottom: 16px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid rgba(199, 232, 222, .7);
    box-shadow: var(--ui-hl-top), var(--ui-sns-shadow-1);
}
body.ui-r .sns-theme .sns-comments__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 800;
}
body.ui-r .sns-theme .sns-comments__title::before {
    content: "";
    width: 4px;
    height: 18px;
    border-radius: 2px;
    background: var(--ui-sns-grad);
}
body.ui-r .sns-theme .sns-comment {
    border-top-color: rgba(199, 232, 222, .7);
}
body.ui-r .sns-theme .sns-comment__reply {
    border-left: 3px solid var(--ui-sns-line);
    border-top: 0;
    border-radius: 0 12px 12px 0;
    background: var(--ui-sns-bg);
    padding: 10px 12px;
}
body.ui-r .sns-theme .sns-comments__empty {
    padding: 14px;
    text-align: center;
    border-radius: 14px;
    background: var(--ui-sns-bg);
}
body.ui-r .sns-theme .sns-comment-form textarea {
    padding: 12px 14px;
    border-radius: 16px;
    border-color: var(--ui-sns-line);
    font-size: 15px;
    min-height: 72px;
    transition: border-color var(--ui-dur-1) var(--ui-ease), box-shadow var(--ui-dur-1) var(--ui-ease);
}
body.ui-r .sns-theme .sns-comment-form textarea:focus {
    border-color: var(--ui-sns);
    box-shadow: 0 0 0 4px rgba(13, 148, 136, .16);
}
body.ui-r .sns-theme .sns-comment-form button[type="submit"],
body.ui-r .sns-theme .sns-comment-form > button:not([type="button"]) {
    min-height: 44px;
    padding: 0 28px;
    background: var(--ui-sns-btn);
    box-shadow: var(--ui-sns-cta-shadow);
    transition: transform var(--ui-dur-2) var(--ui-ease), box-shadow var(--ui-dur-2) var(--ui-ease);
}
body.ui-r .sns-theme .sns-comment-form button[type="submit"]:hover,
body.ui-r .sns-theme .sns-comment-form > button:not([type="button"]):hover {
    background: var(--ui-sns-btn-hover);
    transform: translateY(-1px);
}

/* =============================================================
 * 投稿作成（/sns/create）
 * ============================================================= */
body.ui-r .sns-theme .sns-create-container h1 {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 6px;
    margin-bottom: 18px;
    font-size: 22px;
    font-weight: 800;
}
body.ui-r .sns-theme .sns-create-container h1::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ui-sns-hi);
    box-shadow: 0 0 0 4px rgba(20, 184, 166, .18);
    animation: ui-sns-live 2.4s var(--ui-ease) infinite;
}
body.ui-r .sns-theme .sns-form__section {
    margin-bottom: 20px;
}
body.ui-r .sns-theme .sns-form__label {
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 10px;
}

/* 写真選択（label[for=sns-file-input]）を大きく押しやすく。input の動作はそのまま */
body.ui-r .sns-theme .sns-form__drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 200px;
    padding: 24px 20px;
    border: 2px dashed rgba(13, 148, 136, .45);
    border-radius: 24px;
    background:
        radial-gradient(120% 90% at 50% 0, rgba(94, 234, 212, .22), rgba(94, 234, 212, 0) 70%),
        #fff;
    color: var(--ui-sns-800);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
    box-shadow: var(--ui-sns-shadow-1);
    transition: border-color var(--ui-dur-2) var(--ui-ease), background var(--ui-dur-2) var(--ui-ease), transform var(--ui-dur-2) var(--ui-ease), box-shadow var(--ui-dur-2) var(--ui-ease);
    -webkit-tap-highlight-color: transparent;
}
/* カメラのアイコン（装飾） */
body.ui-r .sns-theme .sns-form__drop::before {
    content: "";
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5A2.5 2.5 0 0 1 6.5 6h1.6l1.3-1.8A1.5 1.5 0 0 1 10.6 3.6h2.8a1.5 1.5 0 0 1 1.2.6L15.9 6h1.6A2.5 2.5 0 0 1 20 8.5v8A2.5 2.5 0 0 1 17.5 19h-11A2.5 2.5 0 0 1 4 16.5z'/%3E%3Ccircle cx='12' cy='12.3' r='3.4'/%3E%3C/svg%3E") center / 34px no-repeat,
        var(--ui-sns-btn);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 0 8px rgba(20, 184, 166, .12), 0 8px 22px rgba(13, 148, 136, .35);
    transition: transform var(--ui-dur-3) var(--ui-ease-spring);
}
body.ui-r .sns-theme .sns-form__drop:hover,
body.ui-r .sns-theme .sns-form__drop.is-dragover {
    border-color: var(--ui-sns);
    background:
        radial-gradient(120% 90% at 50% 0, rgba(94, 234, 212, .32), rgba(94, 234, 212, 0) 70%),
        var(--ui-sns-pale-2);
    color: var(--ui-sns-700);
    box-shadow: var(--ui-sns-shadow-2);
}
body.ui-r .sns-theme .sns-form__drop:hover::before,
body.ui-r .sns-theme .sns-form__drop.is-dragover::before {
    transform: scale(1.06);
}
body.ui-r .sns-theme .sns-form__drop:active {
    transform: scale(.985);
}
body.ui-r .sns-theme .sns-upload-progress:not(:empty) {
    display: inline-block;
    margin-top: 10px;
    padding: 4px 12px;
    border-radius: var(--ui-r-pill);
    background: var(--ui-sns-pale-2);
    color: var(--ui-sns-700);
    font-weight: 700;
}
/* 選択済みサムネ */
body.ui-r .sns-theme .sns-form__thumbs {
    gap: 10px;
    margin-top: 12px;
}
body.ui-r .sns-theme .sns-thumb {
    width: 104px;
    height: 104px;
    border-radius: 16px;
    border: 0;
    box-shadow: 0 0 0 2px #fff, 0 4px 14px rgba(11, 79, 74, .18);
}
body.ui-r .sns-theme .sns-thumb__del {
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    line-height: 26px;
    font-size: 16px;
    background: rgba(11, 40, 38, .72);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .85);
}

/* キャプション */
body.ui-r .sns-theme .sns-form__caption {
    padding: 14px 16px;
    border-radius: 18px;
    border-color: var(--ui-sns-line);
    font-size: 16px;
    line-height: 1.7;
    min-height: 120px;
    box-shadow: var(--ui-sns-shadow-1);
    transition: border-color var(--ui-dur-1) var(--ui-ease), box-shadow var(--ui-dur-1) var(--ui-ease);
}
body.ui-r .sns-theme .sns-form__caption:focus {
    border-color: var(--ui-sns);
    box-shadow: 0 0 0 4px rgba(13, 148, 136, .16);
}
body.ui-r .sns-theme .sns-form__hint {
    text-align: right;
    font-family: var(--ui-font-display);
    font-weight: 500;
}

/* 詳細（折りたたみ） */
body.ui-r .sns-theme details.sns-form__details {
    padding: 0 16px;
    border-radius: 18px;
    border-color: var(--ui-sns-line);
    box-shadow: var(--ui-sns-shadow-1);
}
body.ui-r .sns-theme details.sns-form__details summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    list-style: none;
    font-size: 15px;
}
body.ui-r .sns-theme details.sns-form__details summary::-webkit-details-marker {
    display: none;
}
body.ui-r .sns-theme details.sns-form__details summary::before {
    content: "";
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d9488' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / 14px no-repeat,
        var(--ui-sns-pale-2);
    transition: transform var(--ui-dur-2) var(--ui-ease);
}
body.ui-r .sns-theme details.sns-form__details[open] summary::before {
    transform: rotate(90deg);
}
body.ui-r .sns-theme details.sns-form__details .sns-form__details-body {
    padding: 4px 0 14px;
    border-top: 1px solid rgba(199, 232, 222, .7);
    padding-top: 14px;
}
body.ui-r .sns-theme .sns-form__row select,
body.ui-r .sns-theme .sns-form__row input[type="date"],
body.ui-r .sns-theme .sns-form__fish-row select,
body.ui-r .sns-theme .sns-form__fish-row input[type="number"] {
    min-height: 46px;
    border-radius: 12px;
    border-color: var(--ui-sns-line);
    font-size: 15px;
}
body.ui-r .sns-theme .sns-form__row select:focus,
body.ui-r .sns-theme .sns-form__row input[type="date"]:focus,
body.ui-r .sns-theme .sns-form__fish-row select:focus,
body.ui-r .sns-theme .sns-form__fish-row input[type="number"]:focus {
    outline: none;
    border-color: var(--ui-sns);
    box-shadow: 0 0 0 4px rgba(13, 148, 136, .16);
}
/* appearance:none で矢印が消えているので緑の矢印を付ける */
body.ui-r .sns-theme .sns-form__row select,
body.ui-r .sns-theme .sns-form__fish-row select {
    padding-right: 38px;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d9488' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
}
body.ui-r .sns-theme .sns-form__row select:disabled {
    background-color: var(--ui-sns-bg);
    color: var(--ui-sns-ink-2);
    opacity: .75;
}
body.ui-r .sns-theme .sns-form__fish-row button {
    min-width: 44px;
    min-height: 44px;
    border-radius: 12px;
}
body.ui-r .sns-theme .sns-form__add-fish {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 14px;
    border-radius: var(--ui-r-pill);
    background: var(--ui-sns-pale-2);
    font-weight: 700;
    font-size: 14px;
}

/* 投稿ボタン（緑の大きなCTA） */
body.ui-r .sns-theme .sns-form__submit {
    min-height: 58px;
    padding: 0 20px;
    border-radius: var(--ui-r-pill);
    background: var(--ui-sns-btn);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: .08em;
    box-shadow: var(--ui-sns-cta-shadow);
    transition: transform var(--ui-dur-2) var(--ui-ease), box-shadow var(--ui-dur-2) var(--ui-ease), opacity var(--ui-dur-2) var(--ui-ease);
}
body.ui-r .sns-theme .sns-form__submit:hover:not(:disabled) {
    background: var(--ui-sns-btn-hover);
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 12px 28px rgba(13, 148, 136, .42);
}
body.ui-r .sns-theme .sns-form__submit:active:not(:disabled) {
    transform: scale(.98);
}
body.ui-r .sns-theme .sns-form__submit:disabled {
    opacity: .45;
}
body.ui-r .sns-theme .sns-form__note {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 16px;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(199, 232, 222, .8);
}
body.ui-r .sns-theme .sns-error {
    border-radius: 14px;
}

/* =============================================================
 * 使い方ガイド（/sns/guide）— ページ内 <style> より強い詳細度で
 * ============================================================= */
body.ui-r .sns-theme .sg .sg-lead {
    padding: 16px 18px;
    margin: 6px 0 12px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(94, 234, 212, .22), rgba(255, 255, 255, .7));
    box-shadow: inset 0 0 0 1px rgba(199, 232, 222, .9);
}
body.ui-r .sns-theme .sg .sg-toc,
body.ui-r .sns-theme .sg .sg-sec {
    border-radius: 22px;
    border: 1px solid rgba(199, 232, 222, .7);
    box-shadow: var(--ui-hl-top), var(--ui-sns-shadow-1);
}
body.ui-r .sns-theme .sg .sg-toc ol {
    padding-left: 1.6em;
}
body.ui-r .sns-theme .sg .sg-toc li {
    padding: 3px 0;
}
body.ui-r .sns-theme .sg .sg-toc li::marker {
    color: var(--ui-sns);
    font-family: var(--ui-font-display);
    font-weight: 700;
}
body.ui-r .sns-theme .sg .sg-sec {
    padding: 20px 20px 10px;
}
body.ui-r .sns-theme .sg .sg-sec h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 19px;
    font-weight: 800;
    border-bottom: 1px solid rgba(199, 232, 222, .9);
    padding-bottom: 12px;
}
body.ui-r .sns-theme .sg .sg-sec h2::before {
    content: "";
    flex: 0 0 auto;
    width: 5px;
    height: 22px;
    border-radius: 3px;
    background: var(--ui-sns-grad);
}
body.ui-r .sns-theme .sg .sg-table {
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--ui-sns-line);
    border-radius: 14px;
    overflow: hidden;
}
body.ui-r .sns-theme .sg .sg-table th,
body.ui-r .sns-theme .sg .sg-table td {
    border: 0;
    border-bottom: 1px solid var(--ui-sns-pale);
    border-right: 1px solid var(--ui-sns-pale);
}
body.ui-r .sns-theme .sg .sg-table tr > :last-child {
    border-right: 0;
}
body.ui-r .sns-theme .sg .sg-table tbody tr:last-child > * {
    border-bottom: 0;
}
body.ui-r .sns-theme .sg .sg-steps > li::before {
    background: var(--ui-sns-btn);
    box-shadow: 0 3px 8px rgba(13, 148, 136, .3);
    font-family: var(--ui-font-display);
}
body.ui-r .sns-theme .sg .sg-ui {
    border-radius: 8px;
}
body.ui-r .sns-theme .sg .sg-alert,
body.ui-r .sns-theme .sg .sg-tip {
    border-radius: 14px;
}
body.ui-r .sns-theme .sg .sg-cta .sns-new-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 28px;
    background: var(--ui-sns-btn);
    box-shadow: var(--ui-sns-cta-shadow);
    transition: transform var(--ui-dur-2) var(--ui-ease), box-shadow var(--ui-dur-2) var(--ui-ease);
}
body.ui-r .sns-theme .sg .sg-cta .sns-new-btn:hover {
    transform: translateY(-2px);
}
body.ui-r .sns-theme .sg .sg-cta .sns-new-btn.sg-sub {
    background: #fff;
    box-shadow: inset 0 0 0 2px var(--ui-sns);
    border: 0;
}

/* =============================================================
 * SNS投稿のまとめパネル（ブログ投稿画面内・partials/merge-panel）
 * ============================================================= */
body.ui-r .sns-merge-open-btn {
    min-height: 48px;
    padding: 0 24px;
    background: var(--ui-sns-btn);
    box-shadow: var(--ui-sns-cta-shadow);
}
body.ui-r .sns-merge-open-btn:hover:not(:disabled) {
    background: var(--ui-sns-btn-hover);
}
body.ui-r .sns-merge-open-btn.is-open {
    background: var(--ui-sns-900);
}
body.ui-r .sns-merge-panel {
    margin-top: 14px;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid var(--ui-sns-line);
    background:
        radial-gradient(100% 140px at 50% 0, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0)),
        var(--ui-sns-bg);
    box-shadow: var(--ui-hl-top), var(--ui-sns-shadow-2);
}
body.ui-r .sns-merge-panel .sns-merge-panel__header {
    color: var(--ui-sns-ink);
    margin-bottom: 12px;
}
body.ui-r .sns-merge-panel .sns-merge-panel__header > strong {
    font-weight: 800;
}
body.ui-r .sns-merge-panel .sns-merge-panel__empty {
    padding: 28px 18px;
    border-radius: 16px;
    box-shadow: inset 0 0 0 1px var(--ui-sns-line);
    line-height: 1.8;
}
body.ui-r .sns-merge-panel .sns-merge-panel__list {
    padding: 2px;
}
body.ui-r .sns-merge-panel .sns-merge-panel__item {
    margin: 0 0 10px;
    padding: 10px 12px;
    border-radius: 16px;
    border: 1px solid rgba(199, 232, 222, .8);
    box-shadow: var(--ui-sns-shadow-1);
    transition: border-color var(--ui-dur-1) var(--ui-ease), box-shadow var(--ui-dur-1) var(--ui-ease), background var(--ui-dur-1) var(--ui-ease);
}
body.ui-r .sns-merge-panel .sns-merge-panel__item:has(.sns-merge-check:checked) {
    border-color: var(--ui-sns);
    background: linear-gradient(90deg, var(--ui-sns-pale-2), #fff 60%);
    box-shadow: inset 0 0 0 1px var(--ui-sns), 0 4px 14px rgba(13, 148, 136, .14);
}
body.ui-r .sns-merge-panel .sns-merge-panel__item input[type="checkbox"] {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-top: 25px;
    accent-color: var(--ui-sns);
}
body.ui-r .sns-merge-panel .sns-merge-panel__thumb {
    width: 76px;
    height: 76px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(11, 79, 74, .15);
}
body.ui-r .sns-merge-panel .sns-merge-panel__badge {
    border-radius: var(--ui-r-pill);
    padding: 1px 8px;
}
body.ui-r .sns-merge-panel .sns-merge-panel__actions {
    flex-wrap: wrap;
    border-top-color: rgba(199, 232, 222, .9);
}
body.ui-r .sns-merge-panel .sns-merge-panel__insert {
    min-height: 46px;
    padding: 0 24px;
    background: var(--ui-sns-btn);
    box-shadow: var(--ui-sns-cta-shadow);
}
body.ui-r .sns-merge-panel .sns-merge-panel__insert:disabled {
    box-shadow: none;
}
body.ui-r .sns-merge-panel .sns-merge-panel__close {
    min-height: 46px;
    padding: 0 22px;
    font-weight: 700;
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--ui-sns-line);
}
body.ui-r .sns-merge-preview {
    border-radius: 18px;
    border-color: rgba(13, 148, 136, .5);
    padding: 14px;
}
body.ui-r .sns-merge-preview .sns-merge-preview__item {
    border-radius: var(--ui-r-pill);
    padding: 4px 12px 4px 4px;
}
body.ui-r .sns-merge-preview .sns-merge-preview__item img {
    border-radius: 50%;
}

/* =============================================================
 * スマホ
 * ============================================================= */
@media (max-width: 767px) {
    body.ui-r .sns-theme:has(> .sns-container),
    body.ui-r .sns-theme:has(> .sns-create-container) {
        border-radius: 24px 24px 0 0;
        padding-top: 18px;
        padding-bottom: calc(var(--ui-sp-nav-h, 60px) + 40px);
    }
    body.ui-r .sns-theme .sns-container,
    body.ui-r .sns-theme .sns-create-container {
        padding: 0 12px;
    }
    body.ui-r .sns-theme .sns-header h1 {
        font-size: 19px;
    }
    body.ui-r .sns-theme .sns-header .sns-new-btn {
        min-height: 46px;
        padding: 0 18px 0 14px;
        font-size: 14px;
    }
    body.ui-r .sns-theme .sns-item {
        border-radius: 20px;
        padding: 14px 14px 10px;
    }
    body.ui-r .sns-theme .sns-feed .sns-item {
        margin: 0 0 16px;
    }
    body.ui-r .sns-theme .sns-feed .sns-item + .sns-item::before {
        left: 36px;
        top: -17px;
        height: 18px;
    }
    body.ui-r .sns-theme .sns-item__images {
        border-radius: 14px;
    }
    body.ui-r .sns-theme .sns-form__drop {
        min-height: 220px;
    }
    body.ui-r .sns-theme .sg .sg-sec {
        padding: 16px 14px 8px;
        border-radius: 20px;
    }
    body.ui-r .sns-theme .sg .sg-table {
        display: block;
        overflow-x: auto;
    }
}

/* =============================================================
 * 動きを減らす設定
 * ============================================================= */
@media (prefers-reduced-motion: reduce) {
    body.ui-r .sns-theme .sns-header h1::before,
    body.ui-r .sns-theme .sns-create-container h1::before {
        animation: none;
    }
    body.ui-r .sns-theme .sns-item,
    body.ui-r .sns-theme .sns-item__image-wrap img,
    body.ui-r .sns-theme .sns-item__action,
    body.ui-r .sns-theme .sns-header .sns-new-btn,
    body.ui-r .sns-theme .sns-form__drop,
    body.ui-r .sns-theme .sns-form__drop::before,
    body.ui-r .sns-theme .sns-form__submit,
    body.ui-r .sns-theme details.sns-form__details summary::before,
    body.ui-r .sns-merge-panel .sns-merge-panel__item {
        transition: none;
    }
    body.ui-r .sns-theme .sns-feed .sns-item:hover,
    body.ui-r .sns-theme .sns-item__image-wrap:hover img,
    body.ui-r .sns-theme .sns-form__drop:active {
        transform: none;
    }
}

/* まとめパネル：ヒント内の日付 strong が見出し用の display:block を拾って改行される既存の崩れを直す */
body.ui-r .sns-merge-panel .sns-merge-panel__hint strong {
    display: inline;
    font-size: inherit;
    margin: 0;
    color: var(--ui-sns-700);
}