/* ============================================================
   SNS 피드 스타일 — kolive_new theme
   ============================================================ */

/* ── 래퍼 ──────────────────────────────────────────────────── */
.sns-wrap, .sns-layout-wrap {
    width: var(--container-width);
    max-width: 100%;
    margin: 0 auto;
    padding: 1rem 0;
    box-sizing: border-box;
}

/* ── 헤더 & 탭 ──────────────────────────────────────────────── */
.sns-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
    margin-bottom: 1.56rem;
    padding-bottom: 0.94rem;
    border-bottom: 1px solid #e2e8f0;
}
.sns-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}
.sns-tabs {
    display: flex;
    gap: 0.38rem;
}
.sns-tabs a {
    display: inline-block;
    padding: 0.38rem 1rem;
    border-radius: 1.25rem;
    font-size: 0.81rem;
    font-weight: 600;
    text-decoration: none;
    color: #64748b;
    background: #f1f5f9;
    transition: all .2s ease;
}
.sns-tabs a.active,
.sns-tabs a:hover {
    background: #2563eb;
    color: #fff;
}
.btn-write {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .38rem 1rem;
    background: #0f172a;
    color: #fff;
    border-radius: 1.25rem;
    font-size: .81rem;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s;
}
.btn-write:hover { background: #1e293b; color: #fff; }

/* ── 콘텐츠 그리드 ──────────────────────────────────────────── */
.sns-content {
    display: grid;
    grid-template-columns: 1fr 18.75rem;
    gap: 1.56rem;
    align-items: start;
}
@media (max-width: 860px) {
    .sns-content { grid-template-columns: 1fr; }
    .sns-sidebar  { display: none; }
}

/* ── 피드 목록 ──────────────────────────────────────────────── */
.sns-feed-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* ── 피드 목록 (모던 클린 카드 스타일) ───────────── */
.sns-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1.5rem 1.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    margin-bottom: 1rem;
}
.sns-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

/* 카드 헤더 */
.sns-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .85rem;
}
.user-profile {
    display: flex;
    align-items: center;
    gap: .75rem;
}
.user-profile img,
.user-profile .profile-link img {
    width: 2.75rem !important;
    height: 2.75rem !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 1px solid #e2e8f0;
    flex-shrink: 0;
    display: block;
}
.user-info { display: flex; flex-direction: column; }
.user-name  { font-size: .94rem; font-weight: 700; color: #0f172a; text-decoration: none; }
.user-name:hover { color: #2563eb; }
.post-time  { font-size: .75rem; color: #94a3b8; margin-top: .1rem; }

/* 본문 & 해시태그 분리 스타일 */
.post-text {
    font-size: 0.94rem;
    line-height: 1.65;
    color: #1e293b;
    margin: 0.25rem 0 0.5rem;
    word-break: break-word;
}
.post-text strong {
    font-weight: 700;
    color: #0f172a;
}
.sns-post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.38rem;
    margin: 0.38rem 0 0.75rem;
}
.sns-tag-chip {
    display: inline-flex;
    align-items: center;
    font-size: 0.78rem;
    font-weight: 600;
    color: #2563eb;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 1rem;
    padding: 0.15rem 0.55rem;
    text-decoration: none;
    transition: all 0.15s ease;
}
.sns-tag-chip:hover {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
}

/* 팔로우 버튼 */
.btn-follow {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
    padding: .31rem .88rem;
    font-size: .75rem;
    font-weight: 700;
    border-radius: 1.25rem;
    cursor: pointer;
    transition: all .2s ease;
    white-space: nowrap;
}
.btn-follow:hover { background: #2563eb; color: #fff; border-color: #2563eb; }
.btn-follow.following {
    background: #f1f5f9;
    color: #64748b;
    border-color: #cbd5e1;
}
.btn-follow.following:hover {
    background: #fee2e2;
    color: #dc2626;
    border-color: #fca5a5;
}

/* 카드 바디 */
.sns-card .card-body {
    font-size: .94rem;
    line-height: 1.65;
    color: #334155;
    margin-bottom: .75rem;
}
.post-text {
    margin: 0 0 .75rem;
    word-break: break-word;
}

/* ── 이미지 그리드 ──────────────────────────────────────────── */
.sns-img-grid {
    display: grid;
    gap: 3px;
    margin: .6rem 0 .8rem;
    border-radius: .5rem;
    overflow: hidden;
}
.sns-img-grid.count-1 { grid-template-columns: 1fr; }
.sns-img-grid.count-2 { grid-template-columns: 1fr 1fr; }
.sns-img-grid.count-3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.sns-img-grid.count-3 .sns-img-thumb:first-child { grid-row: span 2; }
.sns-img-grid.count-4 { grid-template-columns: 1fr 1fr; }
.sns-img-thumb {
    width: 100%;
    max-height: 320px;
    object-fit: cover;
    display: block;
    cursor: zoom-in;
    transition: opacity .2s;
}
.sns-img-thumb:hover { opacity: .92; }

/* ── 상품 카드 ──────────────────────────────────────────────── */
.commerce-card {
    display: flex;
    gap: .75rem;
    border: 1px solid #e2e8f0;
    border-radius: .6rem;
    padding: .75rem;
    margin-top: .75rem;
    background: #f8fafc;
}
.commerce-card > img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: .4rem;
    flex-shrink: 0;
}
.cm-info   { display: flex; flex-direction: column; justify-content: center; gap: .25rem; }
.cm-name   { font-size: .82rem; font-weight: 600; color: #1e293b; }
.cm-price  { font-size: .88rem; font-weight: 800; color: #dc2626; }
.cm-btn {
    display: inline-block;
    padding: .25rem .75rem;
    background: #0f172a;
    color: #fff;
    border-radius: .4rem;
    font-size: .72rem;
    text-decoration: none;
    width: fit-content;
}
.cm-btn:hover { background: #2563eb; color: #fff; }

/* ── 잠금 오버레이 ──────────────────────────────────────────── */
.lock-overlay {
    text-align: center;
    padding: 2rem 1.25rem;
    background: linear-gradient(to bottom, rgba(248,250,252,.3), rgba(248,250,252,.98));
    border-radius: .5rem;
}
.lock-overlay .fa-lock {
    font-size: 2rem;
    color: #94a3b8;
    display: block;
    margin-bottom: .5rem;
}
.lock-overlay p {
    color: #64748b;
    font-size: .88rem;
    margin: 0 0 .75rem;
}
.btn-subscribe {
    display: inline-block;
    padding: .38rem 1.25rem;
    background: #f59e0b;
    color: #fff;
    border-radius: 1.25rem;
    font-size: .81rem;
    font-weight: 700;
    text-decoration: none;
}

/* ── 액션 버튼 ──────────────────────────────────────────────── */
.sns-card .card-footer {
    display: flex;
    gap: .5rem;
    border-top: 1px solid #f1f5f9;
    padding-top: .65rem;
}
.btn-action {
    background: transparent;
    border: none;
    font-size: .81rem;
    color: #64748b;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .65rem;
    border-radius: .4rem;
    text-decoration: none;
    transition: all .15s;
}
.btn-action:hover  { background: #f1f5f9; color: #2563eb; }
.btn-action.liked  { color: #ef4444; }
.btn-action.liked .fa { color: #ef4444; }

/* ── SNS 상세 뷰 (트위터/스레드 스타일 클린 소셜 UI) ──────── */
.sns-view-wrap {
    width: var(--container-width);
    max-width: 100%;
    margin: 0 auto;
    padding: 1.5rem 0 3rem;
}
.sns-view-wrap .sns-content {
    display: grid;
    grid-template-columns: 1fr 17rem;
    gap: 2rem;
    align-items: start;
}
@media (max-width: 860px) {
    .sns-view-wrap .sns-content {
        grid-template-columns: 1fr;
    }
    .sns-view-wrap .sns-sidebar {
        display: none;
    }
}
.sns-view-main {
    width: 100%;
}
.view-topbar {
    display: flex;
    align-items: center;
    padding: 0.5rem 0 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #e2e8f0;
}
.btn-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: #475569;
    text-decoration: none;
    padding: 0.38rem 0.75rem;
    border-radius: 0.5rem;
    transition: background 0.15s, color 0.15s;
}
.btn-back:hover {
    background: #f1f5f9;
    color: #0f172a;
}
.sns-view-card {
    background: transparent;
    border: none;
    border-bottom: 1px solid #e2e8f0;
    padding: 0 0 1.5rem;
    margin-bottom: 1.5rem;
}
.sns-view-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}
.sns-view-card .user-profile > img {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #e2e8f0;
}
.sns-view-card .user-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    text-decoration: none;
}
.sns-view-card .post-time {
    font-size: 0.81rem;
    color: #64748b;
    margin-top: 0.15rem;
}
.sns-view-card .view-body {
    padding: 0.5rem 0 1rem;
}
.sns-view-card .post-text {
    font-size: 1.06rem;
    line-height: 1.75;
    color: #1e293b;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0 0 1.25rem;
}
.sns-view-card .card-footer {
    display: flex;
    gap: 1.25rem;
    border-top: 1px solid #f1f5f9;
    padding-top: 0.88rem;
    margin-top: 0.75rem;
}
.sns-view-card .btn-action {
    font-size: 0.94rem;
    color: #64748b;
    padding: 0.4rem 0.75rem;
    border-radius: 0.5rem;
}

/* 댓글 영역 */
.sns-comments {
    padding: 0.5rem 0;
}
.comment-title {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.comment-title span {
    color: #2563eb;
    font-weight: 800;
}
.comment-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 2rem;
    padding: 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
}
.comment-textarea {
    width: 100%;
    min-height: 4.5rem;
    padding: 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    font-size: 0.88rem;
    resize: vertical;
    box-sizing: border-box;
    font-family: inherit;
}
.comment-textarea:focus {
    border-color: #2563eb;
    outline: none;
}
.btn-comment-submit {
    align-self: flex-end;
    padding: 0.45rem 1.25rem;
    background: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.81rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-comment-submit:hover {
    background: #1d4ed8;
}
.comment-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.comment-item {
    display: flex;
    gap: 0.88rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f1f5f9;
}
.comment-avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #e2e8f0;
    flex-shrink: 0;
}
.comment-content-wrap {
    flex: 1;
}
.comment-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}
.comment-nick {
    font-size: 0.84rem;
    font-weight: 700;
    color: #0f172a;
}
.comment-time {
    font-size: 0.72rem;
    color: #94a3b8;
}
.comment-text {
    font-size: 0.88rem;
    line-height: 1.55;
    color: #334155;
}

/* ── 작성자 미니 프로필 (상세 뷰 사이드바) ───────────────── */
.author-mini-profile {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.88rem;
}
.author-mini-profile a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: inherit;
}
.author-mini-profile img {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e2e8f0;
}
.author-mini-profile strong {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
}
.author-mini-profile .btn-follow-block {
    width: 100%;
    padding: 0.5rem 1rem;
    font-size: 0.81rem;
    font-weight: 700;
    border-radius: 0.5rem;
    cursor: pointer;
    border: 1px solid #2563eb;
    background: #2563eb;
    color: #ffffff;
    transition: background 0.15s;
}
.author-mini-profile .btn-follow-block:hover {
    background: #1d4ed8;
}
.author-mini-profile .btn-follow-block.following {
    background: #f1f5f9;
    color: #475569;
    border-color: #cbd5e1;
}

/* ── 빈 피드 ──────────────────────────────────────────────── */
.sns-empty {
    background: #fff;
    border: 1px dashed #cbd5e1;
    border-radius: .85rem;
    padding: 3rem 1.25rem;
    text-align: center;
    color: #94a3b8;
    font-size: .88rem;
}
.sns-empty i {
    font-size: 2rem;
    color: #cbd5e1;
    display: block;
    margin-bottom: 0.5rem;
}

/* ── 사이드바 ──────────────────────────────────────────────── */
.sns-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: sticky;
    top: 80px;
}
.ranking-box,
.quick-menu-box {
    background: transparent;
    border: none;
    border-bottom: 1px solid #f1f5f9;
    border-radius: 0;
    padding: 0 0 1.25rem;
    box-shadow: none;
}
.ranking-box h3,
.quick-menu-box h3 {
    font-size: .94rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 .94rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid #f1f5f9;
}
.ranking-box ul,
.quick-menu-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}
.ranking-box li {
    font-size: .81rem;
    color: #334155;
}
.ranking-box .rank-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    color: inherit;
    text-decoration: none;
    transition: color 0.15s;
}
.ranking-box .rank-link:hover .rank-nick {
    color: #2563eb;
}
.rank-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #e2e8f0;
    flex-shrink: 0;
}
.rank-nick { flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.follow-count { font-size: .69rem; color: #94a3b8; white-space: nowrap; }

.quick-menu-box li a {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .82rem;
    color: #334155;
    text-decoration: none;
    padding: .3rem 0;
    transition: color .15s;
}
.quick-menu-box li a:hover { color: #2563eb; }
.quick-menu-box li a .fa { width: 1rem; text-align: center; color: #94a3b8; }

/* ── 글쓰기 폼 (sns/write.php) ──────────────────────────────── */
.sns-write-wrap {
    max-width: 50rem;
    margin: 0 auto;
    padding: 1.88rem 0.94rem;
}
.sns-write-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.88rem;
    padding: 1.56rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.sns-write-card .write-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sns-write-card .write-title a {
    font-size: 0.81rem;
    font-weight: 600;
    color: #475569;
    text-decoration: none;
}
.sns-write-card .write-title a:hover {
    color: #2563eb;
}
.sns-form-group {
    margin-bottom: 1.25rem;
}
.sns-form-group label {
    display: block;
    font-size: 0.88rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.44rem;
}
.sns-form-group .form-hint {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 0.31rem;
}
.sns-input {
    width: 100%;
    padding: 0.63rem 0.88rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    font-size: 0.88rem;
    color: #1e293b;
    background: #fff;
    box-sizing: border-box;
    transition: border-color .15s;
}
.sns-input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px #eff6ff;
}
.sns-select {
    width: 100%;
    padding: 0.63rem 0.88rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    font-size: 0.88rem;
    color: #1e293b;
    background: #fff;
    box-sizing: border-box;
}
.sns-select:focus {
    outline: none;
    border-color: #2563eb;
}

/* 마크다운 툴바 및 탭 */
.md-editor-box {
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    overflow: hidden;
    background: #fff;
}
.md-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 0.38rem 0.63rem;
    flex-wrap: wrap;
    gap: 0.31rem;
}
.md-tools {
    display: flex;
    gap: 0.25rem;
}
.md-tool-btn {
    background: transparent;
    border: none;
    padding: 0.31rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.81rem;
    color: #475569;
    cursor: pointer;
    transition: all .15s;
}
.md-tool-btn:hover {
    background: #e2e8f0;
    color: #0f172a;
}
.md-view-tabs {
    display: flex;
    gap: 0.25rem;
}
.md-tab-btn {
    background: transparent;
    border: 1px solid transparent;
    padding: 0.25rem 0.63rem;
    border-radius: 0.38rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
}
.md-tab-btn.active {
    background: #fff;
    border-color: #cbd5e1;
    color: #2563eb;
}
.sns-textarea {
    width: 100%;
    min-height: 14rem;
    padding: 0.88rem;
    border: none;
    font-size: 0.94rem;
    line-height: 1.6;
    color: #1e293b;
    box-sizing: border-box;
    resize: vertical;
    outline: none;
    font-family: inherit;
}
.md-preview-pane {
    display: none;
    min-height: 14rem;
    padding: 0.88rem;
    font-size: 0.94rem;
    line-height: 1.6;
    color: #334155;
    background: #fdfdfd;
    box-sizing: border-box;
    overflow-y: auto;
}
.md-preview-pane.active {
    display: block;
}

/* 이미지 업로드 영역 */
.sns-upload-area {
    border: 2px dashed #cbd5e1;
    border-radius: 0.5rem;
    padding: 1.25rem;
    text-align: center;
    background: #f8fafc;
    cursor: pointer;
    transition: all .2s;
}
.sns-upload-area:hover,
.sns-upload-area.dragover {
    border-color: #2563eb;
    background: #eff6ff;
}
.sns-upload-area .upload-icon {
    font-size: 1.75rem;
    color: #2563eb;
    margin-bottom: 0.38rem;
}
.sns-upload-area .upload-text {
    font-size: 0.88rem;
    font-weight: 600;
    color: #334155;
}
.sns-upload-area .upload-sub {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 0.25rem;
}
.sns-image-previews {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.63rem;
    margin-top: 0.88rem;
}
@media (max-width: 640px) {
    .sns-image-previews { grid-template-columns: repeat(2, 1fr); }
}
.sns-preview-item {
    position: relative;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    background: #f1f5f9;
    aspect-ratio: 1;
}
.sns-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.sns-preview-remove {
    position: absolute;
    top: 0.31rem;
    right: 0.31rem;
    width: 1.5rem;
    height: 1.5rem;
    background: rgba(15,23,42,0.75);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}
.sns-preview-remove:hover {
    background: #dc2626;
}
.sns-file-hidden {
    display: none;
}
.ranking-icon {
    color: #f59e0b;
    margin-right: 0.4rem;
}



/* 옵션 2단 그리드 */
.sns-grid-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 640px) {
    .sns-grid-options { grid-template-columns: 1fr; }
}

/* 하단 버튼 */
.sns-btn-wrap {
    display: flex;
    justify-content: flex-end;
    gap: 0.63rem;
    margin-top: 1.56rem;
    padding-top: 1.25rem;
    border-top: 1px solid #e2e8f0;
}
.sns-btn-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.63rem 1.25rem;
    border-radius: 0.5rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: #475569;
    background: #f1f5f9;
    text-decoration: none;
    transition: all .15s;
}
.sns-btn-cancel:hover {
    background: #e2e8f0;
    color: #0f172a;
}
.sns-btn-submit {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    padding: 0.63rem 1.5rem;
    border-radius: 0.5rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: #fff;
    background: #2563eb;
    border: none;
    cursor: pointer;
    transition: background .15s;
}
.sns-btn-submit:hover {
    background: #1d4ed8;
}

/* ── 카드 클릭 커서 ───────────────────────────────────────── */
.sns-card-clickable { cursor: pointer; }
.sns-card-clickable:hover { background: #f8fafc; }

/* ── 작성자 링크 ──────────────────────────────────────────── */
.profile-link { display: inline-flex; }
.profile-link img { transition: opacity .15s; }
.profile-link:hover img { opacity: .8; }
a.user-name {
    color: #0f172a;
    font-weight: 700;
    text-decoration: none;
    font-size: .95rem;
}
a.user-name:hover { color: #2563eb; }

/* ── 무한 스크롤 로딩 ─────────────────────────────────────── */
.sns-loading {
    text-align: center;
    padding: 1.2rem;
    color: #64748b;
    font-size: .9rem;
}
.sns-loading .fa-spinner { margin-right: .4rem; }

/* ── SNS View 상세 페이지 ────────────────────────────────── */
.sns-view-wrap .sns-content { display: flex; gap: 1.5rem; align-items: flex-start; }
.sns-view-main { flex: 1; min-width: 0; }
.view-topbar { margin-bottom: 1rem; }
#profile-scroll-trigger { height: 1px; }
.btn-back {
    display: inline-flex; align-items: center; gap: .4rem;
    color: #475569; text-decoration: none; font-size: .9rem;
    padding: .4rem .8rem; border-radius: .5rem;
    border: 1px solid #e2e8f0; transition: all .15s;
}
.btn-back:hover { background: #f1f5f9; color: #0f172a; }

.sns-view-card { margin-bottom: 0; }
.view-body { font-size: 1.05rem; line-height: 1.75; }
.view-body .post-text { white-space: pre-wrap; }

/* 댓글 섹션 */
.sns-comments { margin-top: 1.5rem; }
.comment-title {
    font-size: 1rem; font-weight: 700; color: #0f172a;
    padding-bottom: .6rem; border-bottom: 1px solid #e2e8f0;
    margin-bottom: 1rem;
}
.comment-title span { color: #2563eb; }
.comment-item {
    display: flex; gap: .8rem; padding: .8rem 0;
    border-bottom: 1px solid #f1f5f9;
}
.comment-item .profile-link img {
    width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
}
.comment-body { flex: 1; }
.comment-meta {
    display: flex; align-items: center; gap: .5rem;
    margin-bottom: .3rem; flex-wrap: wrap;
}
a.comment-nick { font-weight: 700; font-size: .88rem; color: #0f172a; text-decoration: none; }
a.comment-nick:hover { color: #2563eb; }
.comment-text { font-size: .9rem; color: #334155; white-space: pre-wrap; }
.btn-del-comment {
    font-size: .75rem; color: #94a3b8; background: none;
    border: none; cursor: pointer; padding: 0; margin-left: auto;
}
.btn-del-comment:hover { color: #ef4444; }

/* 댓글 폼 */
.comment-form {
    display: flex; gap: .8rem; align-items: flex-start;
    margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid #e2e8f0;
}
.comment-form > img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.comment-input-wrap { flex: 1; display: flex; flex-direction: column; gap: .5rem; }
#comment-input {
    width: 100%; border: 1px solid #e2e8f0; border-radius: .5rem;
    padding: .6rem .8rem; font-size: .9rem; resize: vertical;
    font-family: inherit;
}
#comment-input:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,.15); }
#btn-comment-submit {
    align-self: flex-end;
    background: #2563eb; color: #fff; border: none;
    padding: .5rem 1.2rem; border-radius: .5rem;
    font-size: .88rem; font-weight: 700; cursor: pointer; transition: background .15s;
}
#btn-comment-submit:hover { background: #1d4ed8; }
.comment-login-notice {
    margin-top: 1.2rem; padding: 1rem; background: #f8fafc;
    border-radius: .5rem; text-align: center; font-size: .9rem; color: #64748b;
}
.comment-login-notice a { color: #2563eb; }

/* 뷰 사이드바 */
.author-mini-profile {
    background: transparent; border: none;
    border-bottom: 1px solid #f1f5f9;
    border-radius: 0; padding: 0 0 1.25rem; text-align: center;
}
.author-mini-profile > a {
    display: flex; flex-direction: column; align-items: center;
    gap: .5rem; text-decoration: none; color: #0f172a;
}
.author-mini-profile img {
    width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
}
.author-mini-profile strong { font-size: 1rem; font-weight: 700; }
.btn-follow-block {
    display: block; width: 100%; margin-top: .8rem;
    padding: .55rem; border-radius: .5rem; border: 2px solid #2563eb;
    color: #2563eb; background: #fff; font-weight: 700; cursor: pointer;
    transition: all .15s;
}
.btn-follow-block.following { background: #2563eb; color: #fff; }
.btn-follow-block:hover { background: #2563eb; color: #fff; }
.btn-view-profile {
    display: block; margin-top: .6rem; font-size: .82rem;
    color: #64748b; text-decoration: none;
}
.btn-view-profile:hover { color: #2563eb; }

/* ── Profile 페이지 (design.md 표준 및 클린 포털 스타일) ────────── */
.sns-profile-wrap {
    padding-top: 0.5rem;
    padding-bottom: 3rem;
}
.sns-profile-top-nav {
    margin-bottom: 1.25rem;
}
.btn-back-feed {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: #475569;
    text-decoration: none;
    padding: 0.45rem 0.85rem;
    background: #f1f5f9;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}
.btn-back-feed:hover {
    background: #e2e8f0;
    color: #0f172a;
}
.profile-banner {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 2rem 2.25rem;
    margin-bottom: 1.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    box-sizing: border-box;
}
.profile-banner-inner {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}
.profile-avatar-wrap {
    flex-shrink: 0;
}
.profile-avatar-lg {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e2e8f0;
    display: block;
    background: #f8fafc;
}
.profile-info-main {
    flex: 1;
    min-width: 260px;
}
.profile-header-title-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.35rem;
}
.profile-nick {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    line-height: 1.2;
}
.profile-handle {
    font-size: 0.88rem;
    color: #64748b;
    font-weight: 500;
}
.profile-creator-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #2563eb;
    background: #eff6ff;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    border: 1px solid #bfdbfe;
}
.profile-bio {
    font-size: 0.92rem;
    color: #334155;
    margin: 0 0 1.25rem;
    line-height: 1.6;
}
.profile-bio-empty {
    color: #94a3b8;
    font-size: 0.85rem;
}
.profile-stats {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 1.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid #f1f5f9;
}
.pstat {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
}
.pstat-num {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
}
.pstat-label {
    font-size: 0.82rem;
    color: #64748b;
    font-weight: 500;
}
.profile-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    align-items: center;
}
.btn-follow-profile {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.4rem;
    border-radius: 6px;
    border: 1px solid #2563eb;
    color: #ffffff;
    background: #2563eb;
    font-weight: 700;
    cursor: pointer;
    font-size: 0.88rem;
    transition: background 0.15s, border-color 0.15s;
}
.btn-follow-profile:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
}
.btn-follow-profile.following {
    background: #f1f5f9;
    color: #334155;
    border-color: #cbd5e1;
}
.btn-follow-profile.following:hover {
    background: #e2e8f0;
}
.btn-profile-edit, .btn-write-sm {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.52rem 1.2rem;
    border-radius: 6px;
    background: #ffffff;
    color: #334155;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
    border: 1px solid #cbd5e1;
    transition: background 0.15s, border-color 0.15s;
}
.btn-profile-edit:hover, .btn-write-sm:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #0f172a;
}

@media (max-width: 640px) {
    .profile-banner {
        padding: 1.25rem 1rem;
        margin-bottom: 1.25rem;
    }
    .profile-banner-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    .profile-avatar-lg {
        width: 72px;
        height: 72px;
    }
    .profile-info-main {
        min-width: 100%;
        width: 100%;
    }
    .profile-stats {
        gap: 1rem;
        margin-bottom: 1rem;
    }
    .profile-actions {
        width: 100%;
    }
    .btn-follow-profile, .btn-profile-edit, .btn-write-sm {
        flex: 1;
        justify-content: center;
        text-align: center;
    }
}

/* 프로필 탭 네비게이션 */
.profile-nav-tabs {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 1.5rem;
    gap: 1.5rem;
}
.profile-tab-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.8rem 0.2rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: #64748b;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.profile-tab-item:hover, .profile-tab-item.active {
    color: #0f172a;
    border-bottom: 2px solid #2563eb;
}
.profile-tab-item.active .profile-tab-badge {
    background: #eff6ff;
    color: #2563eb;
}
.profile-tab-item .profile-tab-badge {
    background: #f1f5f9;
    color: #64748b;
    font-size: 0.78rem;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    font-weight: 700;
}

/* 마이샵 상품 그리드 */
.profile-shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.25rem;
}
.profile-shop-item {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    overflow: hidden;
    text-decoration: none;
    color: #0f172a;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease;
}
.profile-shop-item:hover {
    border-color: #2563eb;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.1);
    transform: translateY(-3px);
}
.psi-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #f8fafc;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.psi-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.profile-shop-item:hover .psi-thumb img {
    transform: scale(1.05);
}
.psi-body {
    padding: 0.88rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.psi-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 0.5rem 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.psi-price-wrap {
    margin-top: auto;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}
.psi-price {
    font-size: 1.06rem;
    font-weight: 800;
    color: #2563eb;
}
.psi-btn-buy {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.63rem;
    border-radius: 0.38rem;
    background: #2563eb;
    color: #ffffff;
}

/* 프로필 피드 그리드 */
.profile-feed-section {
    padding: 0;
}
.profile-feed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}
a.profile-feed-item {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    overflow: hidden;
    text-decoration: none;
    color: #0f172a;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
a.profile-feed-item:hover {
    border-color: #2563eb;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.08);
    transform: translateY(-2px);
}
.pfi-thumb {
    width: 100%;
    height: 180px;
    overflow: hidden;
    background: #f1f5f9;
}
.pfi-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.pfi-body {
    padding: 1.1rem 1.1rem 0.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.pfi-cat {
    display: inline-block;
    align-self: flex-start;
    font-size: 0.72rem;
    font-weight: 700;
    color: #2563eb;
    background: #eff6ff;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    margin-bottom: 0.45rem;
}
.pfi-subj {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.4;
    margin: 0 0 0.4rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pfi-text {
    flex: 1;
    font-size: 0.84rem;
    line-height: 1.55;
    color: #475569;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-all;
}
.pfi-meta {
    display: flex;
    gap: 0.8rem;
    align-items: center;
    padding: 0.5rem 1rem 0.9rem;
    font-size: 0.78rem;
    color: #94a3b8;
}
.pfi-time {
    margin-left: auto;
}

/* 엠프티 스테이트 */
.sns-profile-empty {
    padding: 4.5rem 1.5rem;
    text-align: center;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    margin: 1rem 0 2rem;
}
.sns-profile-empty .empty-icon {
    font-size: 2.5rem;
    color: #94a3b8;
    margin-bottom: 0.8rem;
}
.sns-profile-empty .empty-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #334155;
    margin: 0 0 0.35rem;
}
.sns-profile-empty .empty-desc {
    font-size: 0.88rem;
    color: #64748b;
    margin: 0 0 1.25rem;
}
.btn-empty-write {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 1.4rem;
    background: #2563eb;
    color: #ffffff;
    font-size: 0.88rem;
    font-weight: 700;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.15s;
}
.btn-empty-write:hover {
    background: #1d4ed8;
    color: #ffffff;
}

/* ── 마이페이지 SNS 활동 통계 바 (카드 4개 그리드) ───────────────── */
.sns-stats-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.88rem;
    margin-top: 1.25rem;
}
@media (max-width: 991px) {
    .sns-stats-bar {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 576px) {
    .sns-stats-bar {
        grid-template-columns: 1fr;
    }
}
.sns-stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.13rem 1.25rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.88rem;
    text-decoration: none;
    box-shadow: 0 0.25rem 0.75rem -0.13rem rgba(15, 23, 42, 0.05);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.sns-stat-card:hover {
    transform: translateY(-0.13rem);
    border-color: #bfdbfe;
    box-shadow: 0 0.5rem 1.25rem -0.25rem rgba(37, 99, 235, 0.12);
}
.sns-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    font-size: 1.38rem;
    flex-shrink: 0;
}
.sns-stat-icon.icon-feed {
    background: #eff6ff;
    color: #2563eb;
}
.sns-stat-icon.icon-heart {
    background: #fef2f2;
    color: #dc2626;
}
.sns-stat-icon.icon-comment {
    background: #e0f2fe;
    color: #0284c7;
}
.sns-stat-icon.icon-shop {
    background: #fef3c7;
    color: #d97706;
}
.sns-stat-info {
    flex: 1;
    min-width: 0;
}
.sns-stat-label {
    font-size: 0.81rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 0.13rem;
}
.sns-stat-value {
    font-size: 1.38rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
}
.sns-stat-unit {
    font-size: 0.88rem;
    font-weight: 600;
    color: #475569;
    margin-left: 0.13rem;
}
.sns-stat-arrow {
    font-size: 0.75rem;
    font-weight: 600;
    color: #2563eb;
    margin-left: auto;
    opacity: 0.7;
    transition: transform 0.15s ease, opacity 0.15s ease;
}
.sns-stat-card:hover .sns-stat-arrow {
    opacity: 1;
    transform: translateX(0.13rem);
}

/* ============================================================
   탑툰챗 레퍼런스 스타일 — SNS 반응형 고도화 레이아웃 (Phase 1)
   ============================================================ */

/* ── 3단 반응형 레이아웃 컨테이너 ─────────────────────────── */
.sns-layout-wrap {
    display: grid;
    grid-template-columns: 14rem minmax(0, 1fr) 18.75rem;
    gap: 1.5rem;
    max-width: 87.5rem;
    margin: 0 auto;
    padding: 1.5rem 1rem 5rem;
    align-items: start;
}
@media (max-width: 1200px) {
    .sns-layout-wrap {
        grid-template-columns: 13rem minmax(0, 1fr);
    }
    .sns-layout-wrap .sns-sidebar {
        display: none;
    }
}
@media (max-width: 900px) {
    .sns-layout-wrap {
        grid-template-columns: 4rem minmax(0, 1fr);
        gap: 1rem;
    }
    .sns-lnb-text,
    .sns-lnb-badge,
    .sns-lnb-title {
        display: none;
    }
    .sns-lnb-item {
        justify-content: center;
        padding: 0.75rem 0;
    }
    .sns-lnb-item i {
        font-size: 1.25rem;
        margin: 0;
    }
    .btn-lnb-write {
        padding: 0.75rem 0;
        justify-content: center;
    }
    .btn-lnb-write span {
        display: none;
    }
}
@media (max-width: 640px) {
    .sns-layout-wrap {
        display: block;
        padding: 0.75rem 0.63rem 5.5rem;
    }
    .sns-lnb {
        display: none;
    }
}

/* ── 좌측 LNB 네비게이션 ──────────────────────────────────── */
.sns-lnb {
    position: sticky;
    top: 5rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 1rem 0.75rem;
    box-shadow: 0 0.13rem 0.38rem rgba(15, 23, 42, 0.04);
}
.sns-lnb-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.38rem 0.63rem 0.63rem;
}
.sns-lnb-menu {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    list-style: none;
    padding: 0;
    margin: 0;
}
.sns-lnb-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.69rem 0.88rem;
    border-radius: 0.63rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: #475569;
    text-decoration: none;
    transition: all 0.15s ease;
}
.sns-lnb-item i {
    font-size: 1.06rem;
    width: 1.38rem;
    text-align: center;
    color: #64748b;
    transition: color 0.15s;
}
.sns-lnb-item:hover {
    background: #f1f5f9;
    color: #0f172a;
}
.sns-lnb-item:hover i {
    color: #2563eb;
}
.sns-lnb-item.active {
    background: #eff6ff;
    color: #2563eb;
    font-weight: 700;
}
.sns-lnb-item.active i {
    color: #2563eb;
}
.sns-lnb-badge {
    margin-left: auto;
    font-size: 0.69rem;
    font-weight: 700;
    padding: 0.13rem 0.5rem;
    border-radius: 1rem;
    background: #fef2f2;
    color: #dc2626;
}
.sns-lnb-divider {
    height: 1px;
    background: #e2e8f0;
    margin: 0.75rem 0;
}
.btn-lnb-write {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1rem;
    margin-top: 0.75rem;
    background: #2563eb;
    color: #ffffff;
    border-radius: 0.63rem;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s ease;
    box-shadow: 0 0.25rem 0.63rem rgba(37, 99, 235, 0.25);
}
.btn-lnb-write:hover {
    background: #1d4ed8;
    color: #ffffff;
}

/* ── 모바일 하단 고정 탭바 (h-16) ────────────────────────── */
.sns-mobile-bottom-bar {
    display: none;
}
@media (max-width: 640px) {
    .sns-mobile-bottom-bar {
        display: flex;
        align-items: center;
        justify-content: space-around;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 4rem;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-top: 1px solid #e2e8f0;
        z-index: 999;
        padding-bottom: env(safe-area-inset-bottom);
    }
    .sns-m-tab {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
        flex: 1;
        height: 100%;
        color: #64748b;
        text-decoration: none;
        font-size: 0.69rem;
        font-weight: 600;
        transition: color 0.15s;
    }
    .sns-m-tab i {
        font-size: 1.19rem;
    }
    .sns-m-tab.active,
    .sns-m-tab:hover {
        color: #2563eb;
    }
    .sns-m-tab.m-write {
        color: #2563eb;
    }
    .sns-m-tab.m-write i {
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 50%;
        background: #2563eb;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        margin-top: -0.5rem;
        box-shadow: 0 0.25rem 0.63rem rgba(37, 99, 235, 0.35);
    }
}

/* ── 상단 히어로 배너 (16:9 ~ 750:390) ────────────────────── */
.sns-hero-banner {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    margin-bottom: 1.25rem;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 50%, #0284c7 100%);
    color: #ffffff;
    padding: 1.75rem 2rem;
    box-shadow: 0 0.5rem 1.25rem -0.25rem rgba(15, 23, 42, 0.15);
}
@media (max-width: 640px) {
    .sns-hero-banner {
        padding: 1.25rem 1.25rem;
        border-radius: 0.75rem;
    }
}
.sns-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    padding: 0.25rem 0.63rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 0.75rem;
    font-weight: 700;
    color: #bfdbfe;
    margin-bottom: 0.63rem;
}
.sns-hero-title {
    font-size: 1.44rem;
    font-weight: 800;
    line-height: 1.3;
    margin: 0 0 0.38rem;
    color: #ffffff;
}
.sns-hero-sub {
    font-size: 0.88rem;
    color: #cbd5e1;
    margin: 0;
    line-height: 1.5;
}

/* ── 둥근 알약형 필터 칩 탭 바 ────────────────────────────── */
.sns-pill-tabs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    margin-bottom: 1.25rem;
    scrollbar-width: none;
}
.sns-pill-tabs::-webkit-scrollbar {
    display: none;
}
.sns-pill-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    padding: 0.5rem 1.13rem;
    border-radius: 2rem;
    font-size: 0.81rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    color: #475569;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    transition: all 0.15s ease;
}
.sns-pill-tab i {
    font-size: 0.88rem;
}
.sns-pill-tab:hover {
    border-color: #cbd5e1;
    color: #0f172a;
    background: #f8fafc;
}
.sns-pill-tab.active {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
    box-shadow: 0 0.25rem 0.63rem rgba(37, 99, 235, 0.2);
}
.sns-pill-tab.active i {
    color: #ffffff;
}

/* ── 릴스/숏폼 9:16 카드 그리드 ───────────────────────────── */
.sns-reels-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
@media (max-width: 1024px) {
    .sns-reels-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 640px) {
    .sns-reels-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.63rem;
    }
}
.sns-reel-card {
    position: relative;
    aspect-ratio: 9 / 16;
    border-radius: 0.88rem;
    overflow: hidden;
    background: #0f172a;
    text-decoration: none;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    display: block;
}
.sns-reel-card:hover {
    transform: translateY(-0.25rem);
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.2);
}
.sns-reel-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.sns-reel-card:hover .sns-reel-thumb {
    transform: scale(1.05);
}
.sns-reel-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.85) 100%);
    pointer-events: none;
}
.sns-reel-play-badge {
    position: absolute;
    top: 0.63rem;
    right: 0.63rem;
    width: 1.88rem;
    height: 1.88rem;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    backdrop-filter: blur(4px);
}
.sns-reel-views {
    position: absolute;
    top: 0.63rem;
    left: 0.63rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.38rem;
    background: rgba(0, 0, 0, 0.6);
    color: #ffffff;
    font-size: 0.69rem;
    font-weight: 700;
}
.sns-reel-info {
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    color: #ffffff;
    pointer-events: none;
}
.sns-reel-title {
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 0.38rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sns-reel-author {
    display: flex;
    align-items: center;
    gap: 0.38rem;
    font-size: 0.75rem;
    color: #e2e8f0;
}
.sns-reel-author img {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    object-fit: cover;
}

/* ── 랭킹 3:4 카드 그리드 ─────────────────────────────────── */
.sns-ranking-banner {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    margin-bottom: 1.25rem;
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 60%, #312e81 100%);
    color: #ffffff;
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sns-ranking-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
@media (max-width: 1024px) {
    .sns-ranking-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 640px) {
    .sns-ranking-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.63rem;
    }
}
.sns-rank-card {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: 0.88rem;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    text-decoration: none;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: block;
}
.sns-rank-card:hover {
    transform: translateY(-0.25rem);
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.12);
}
.sns-rank-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.sns-rank-card:hover .sns-rank-img {
    transform: scale(1.05);
}
.sns-rank-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0.88) 100%);
    pointer-events: none;
}
.sns-rank-num {
    position: absolute;
    bottom: 0.75rem;
    left: 0.75rem;
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1;
    color: #ffffff;
    letter-spacing: -0.05em;
    text-shadow: 0 0.13rem 0.38rem rgba(0, 0, 0, 0.5);
}
.sns-rank-num.rank-1 { color: #f59e0b; }
.sns-rank-num.rank-2 { color: #cbd5e1; }
.sns-rank-num.rank-3 { color: #fb923c; }

.sns-rank-content {
    position: absolute;
    bottom: 0.75rem;
    left: 3.25rem;
    right: 0.75rem;
    color: #ffffff;
    pointer-events: none;
}
.sns-rank-name {
    font-size: 0.94rem;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 0.19rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sns-rank-tags {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    font-size: 0.69rem;
    color: rgba(255, 255, 255, 0.75);
}
.sns-rank-tag-chip {
    background: rgba(255, 255, 255, 0.15);
    padding: 0.06rem 0.38rem;
    border-radius: 0.25rem;
}

/* ── 추가 유틸리티 ────────────────────────────────────────── */
.sns-scroll-trigger {
    height: 1px;
}
.sns-empty-feed {
    text-align: center;
    padding: 3.75rem 1.25rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.88rem;
    color: #94a3b8;
    grid-column: 1 / -1;
}
.sns-empty-feed i {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    display: block;
    color: #cbd5e1;
}
.sns-empty-feed p {
    font-size: 0.94rem;
    margin: 0;
}

/* ── 프로필 판매 상품 그리드 및 셀러 링크 ── */
.profile-shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.25rem;
    padding: 1rem 0;
}
.profile-shop-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.profile-shop-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    border-color: #0284c7;
}
.psc-thumb-wrap {
    position: relative;
    width: 100%;
    padding-top: 75%;
    background: #f8fafc;
    overflow: hidden;
}
.psc-thumb-wrap img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.psc-badge-market {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(2, 132, 199, 0.9);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
}
.psc-info {
    padding: 0.88rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.psc-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 0.35rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.psc-desc {
    font-size: 0.78rem;
    color: #64748b;
    margin: 0 0 0.5rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.psc-price-row {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.5rem;
    border-top: 1px dashed #f1f5f9;
}
.psc-price {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0284c7;
}
.psc-btn-buy {
    font-size: 0.78rem;
    font-weight: 700;
    color: #475569;
}
.sit_seller_link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #0284c7;
    text-decoration: none;
    font-size: 0.9rem;
}
.sit_seller_badge {
    background: #e0f2fe;
    color: #0369a1;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 6px;
}
.sit_seller_link:hover {
    text-decoration: underline;
}

/* SNS 프로필 네비게이션 액션 버튼 및 썸네일 빈 상태 */
.profile-nav-actions {
    margin-left: auto;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.profile-nav-btn {
    padding: 0.4rem 0.8rem;
    font-size: 0.81rem;
    color: #ffffff;
    border-radius: 0.38rem;
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.profile-nav-btn-dark {
    background: #0f172a;
}
.profile-nav-btn-primary {
    background: #2563eb;
}
.psi-thumb-empty {
    color: #94a3b8;
}