/* ===========================================================================
   SNS 디자이너 프로필 모바일 토큰
   - 모바일 우선 정보 위계 재설계 (2026-04-28)
   ===========================================================================*/
:root {
    --rb-sns-touch-min: 44px;
    --rb-sns-touch-tab: 48px;
    --rb-sns-radius-card: 14px;
    --rb-sns-pad-card: 24px;
    --rb-sns-pad-card-sm: 16px;
    --rb-sns-pad-card-xs: 12px;
    --rb-sns-gap-grid: 4px;
    --rb-sns-gap-grid-sm: 2px;
}

/* ===========================================================================
   SNS 디자이너 프로필 (rb/sns/profile.php)
   ===========================================================================*/
.sns-profile-layout {
    max-width: 940px;
    margin: 0 auto;
    padding: 16px 16px 80px;
    box-sizing: border-box;
    color: #1f2329;
}
.sns-profile-layout *,
.sns-profile-layout *::before,
.sns-profile-layout *::after { box-sizing: border-box; }

.sns-profile-header {
    background: #fff;
    border: 1px solid #e6e8eb;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 16px;
}
.sns-profile-cover {
    height: 180px;
    background: linear-gradient(135deg, #ffd2b8 0%, #ff7a00 50%, #ff4d6d 100%);
    background-size: cover;
}
.sns-profile-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0 24px;
    margin-top: -56px;
}
.sns-profile-avatar {
    width: 128px; height: 128px;
    border-radius: 50%;
    background: #f3f4f6;
    overflow: hidden;
    border: 4px solid #fff;
    display: flex; align-items: center; justify-content: center;
    color: #c0c4ca; font-size: 48px;
    flex: 0 0 auto;
}
.sns-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sns-profile-actions {
    display: flex; gap: 8px;
    margin-bottom: 12px;
}
.sns-profile-btn {
    padding: 9px 18px;
    border-radius: 999px;
    font-size: 14px; font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid transparent;
    display: inline-flex; align-items: center; gap: 6px;
}
.sns-profile-btn-primary {
    background: #1f2329; color: #fff;
}
.sns-profile-btn-primary:hover { background: #000; }
.sns-profile-btn-primary.is-following {
    background: #f6f7f9; color: #1f2329;
    border-color: #d8dbdf;
}
.sns-profile-btn-secondary {
    background: #fff; color: #1f2329;
    border-color: #d8dbdf;
}
.sns-profile-btn-secondary:hover { background: #f6f7f9; }

.sns-profile-info {
    padding: 16px 24px 24px;
}
.sns-profile-name {
    font-size: 22px; font-weight: 700;
    margin: 0 0 4px;
    color: #1f2329;
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.sns-profile-salon {
    font-size: 14px; color: #4b5159;
    margin: 0 0 8px;
}
.sns-profile-bio {
    font-size: 14px; line-height: 1.6;
    color: #1f2329;
    margin: 8px 0 12px;
    white-space: pre-wrap;
}
.sns-profile-stats {
    list-style: none; padding: 0; margin: 0;
    display: flex; gap: 24px;
    color: #8a8f95;
    font-size: 14px;
}
.sns-profile-stats li strong {
    color: #1f2329; font-weight: 700;
    margin-right: 4px;
}

.sns-profile-tabs {
    display: flex; gap: 24px;
    border-bottom: 1px solid #e6e8eb;
    background: #fff;
    padding: 0 16px;
    border-radius: 14px 14px 0 0;
    margin-bottom: 0;
}
.sns-profile-tab {
    display: inline-block;
    padding: 14px 4px;
    color: #8a8f95;
    font-size: 14px; font-weight: 500;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.sns-profile-tab:hover { color: #1f2329; }
.sns-profile-tab.active {
    color: #1f2329;
    font-weight: 700;
    border-bottom-color: #ff7a00;
}

.sns-profile-content {
    background: #fff;
    border: 1px solid #e6e8eb;
    border-top: 0;
    border-radius: 0 0 14px 14px;
    padding: 16px;
    min-height: 200px;
}

.sns-profile-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}
.sns-profile-thumb {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #000;
    text-decoration: none;
    color: #fff;
}
.sns-profile-thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .2s;
}
.sns-profile-thumb:hover img { transform: scale(1.04); }
.sns-profile-thumb-text {
    position: absolute; inset: 0;
    background: #f6f7f9;
    color: #4b5159;
    display: flex; align-items: center; justify-content: center;
    padding: 12px;
    font-size: 12px;
    text-align: center;
    line-height: 1.4;
}
.sns-profile-thumb-overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.4);
    color: #fff;
    display: none;
    align-items: center; justify-content: center;
    gap: 16px;
    font-size: 14px; font-weight: 600;
    pointer-events: none;
}
.sns-profile-thumb:hover .sns-profile-thumb-overlay { display: flex; }
.sns-profile-thumb-overlay span { display: inline-flex; align-items: center; gap: 5px; }
.sns-profile-thumb-overlay svg {
    width: 17px; height: 17px; display: block;
    stroke: currentColor; fill: none; stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round;
}

.sns-profile-empty {
    padding: 60px 16px;
    text-align: center;
    color: #8a8f95;
    font-size: 14px;
}

.sns-profile-info-dl {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 12px 16px;
    margin: 0;
    padding: 12px 8px;
    font-size: 14px;
}
.sns-profile-info-dl dt { color: #8a8f95; }
.sns-profile-info-dl dd { color: #1f2329; margin: 0; }
.sns-profile-info-dl dd a { color: #0072e0; }

/* ----- 모바일 600px 이하: 정보 위계 재설계 ----- */
@media (max-width: 600px) {
    .sns-profile-layout {
        padding: 12px 12px 32px;
    }
    .sns-profile-header {
        margin-bottom: 12px;
    }
    .sns-profile-cover { height: 100px; }
    .sns-profile-top {
        margin-top: -32px;
        padding: 0 16px;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .sns-profile-avatar {
        width: 96px; height: 96px;
        font-size: 36px;
        border-width: 3px;
    }
    .sns-profile-info {
        padding: 12px 16px 18px;
    }
    .sns-profile-name {
        font-size: 20px;
        gap: 4px;
    }
    .sns-profile-salon { font-size: 13px; margin-bottom: 6px; }
    .sns-profile-bio { font-size: 14px; margin: 6px 0 14px; }

    /* CTA(팔로우/메시지) 풀폭 한 줄, 터치 타겟 44px+ */
    .sns-profile-actions {
        margin: 12px 0 0;
        width: 100%;
        gap: 8px;
    }
    .sns-profile-actions .sns-profile-btn {
        flex: 1;
        min-height: var(--rb-sns-touch-min);
        padding: 12px 16px;
        justify-content: center;
        font-size: 14px;
    }

    /* 통계: 3-셀 균등 그리드(게시물/팔로워/팔로잉) */
    .sns-profile-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
        margin-top: 4px;
        padding: 12px 0 0;
        border-top: 1px solid #eef0f3;
        text-align: center;
        font-size: 12px;
        color: #6b7079;
    }
    .sns-profile-stats li {
        display: flex; flex-direction: column-reverse;
        gap: 2px;
        line-height: 1.2;
    }
    .sns-profile-stats li + li {
        border-left: 1px solid #eef0f3;
    }
    .sns-profile-stats li strong {
        margin: 0;
        color: #1f2329;
        font-size: 17px;
        font-weight: 800;
    }

    /* 탭: 풀폭 균등 + 터치 타겟 48px */
    .sns-profile-tabs {
        gap: 0;
        padding: 0;
        border-radius: 12px 12px 0 0;
    }
    .sns-profile-tab {
        flex: 1;
        text-align: center;
        padding: 0;
        min-height: var(--rb-sns-touch-tab);
        line-height: var(--rb-sns-touch-tab);
        font-size: 14px;
    }

    .sns-profile-content {
        padding: 12px;
        border-radius: 0 0 12px 12px;
    }

    /* 그리드: 600px 단계는 3열 유지 (480px 이하에서 2열로) */
    .sns-profile-grid { gap: 2px; }

    /* 정보 dl: 라벨 너비 축소 */
    .sns-profile-info-dl {
        grid-template-columns: 88px 1fr;
        font-size: 13px;
        gap: 10px 12px;
    }
}

/* ----- 작은 폰 480px 이하 ----- */
@media (max-width: 480px) {
    .sns-profile-cover { height: 84px; }
    .sns-profile-top { margin-top: -28px; }
    .sns-profile-avatar {
        width: 84px; height: 84px;
        font-size: 32px;
    }
    .sns-profile-name { font-size: 19px; }
    .sns-profile-stats li strong { font-size: 16px; }

    /* 그리드 2열로 — 썸네일이 충분히 커서 식별 가능 */
    .sns-profile-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 3px;
    }

    /* 정보 dl: 1열로 (라벨 위, 값 아래) */
    .sns-profile-info-dl {
        grid-template-columns: 1fr;
        gap: 4px 0;
        padding: 4px 0;
    }
    .sns-profile-info-dl dt {
        font-size: 12px;
        margin-top: 8px;
    }
    .sns-profile-info-dl dt:first-child { margin-top: 0; }
    .sns-profile-info-dl dd {
        font-size: 14px;
        margin-bottom: 4px;
    }
}

/* ----- 극소 360px 이하 ----- */
@media (max-width: 360px) {
    .sns-profile-layout { padding: 10px 10px 24px; }
    .sns-profile-cover { height: 76px; }
    .sns-profile-top { padding: 0 14px; }
    .sns-profile-info { padding: 10px 14px 16px; }
    .sns-profile-avatar { width: 76px; height: 76px; font-size: 30px; }
    .sns-profile-name { font-size: 18px; }
    .sns-profile-actions .sns-profile-btn {
        padding: 12px 10px;
        font-size: 13px;
    }
    .sns-profile-stats li strong { font-size: 15px; }
    .sns-profile-tab { font-size: 13px; }
    .sns-profile-content { padding: 10px; }
}

/* ----- 피드 로딩/에러 박스 (profile.php SPA 로딩용) ----- */
.sns-feed-loading,
.sns-feed-error {
    padding: 80px 16px;
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
}
.sns-feed-loading { color: #8a8f95; }
.sns-feed-error   { color: #ef4444; }
@media (max-width: 600px) {
    .sns-feed-loading,
    .sns-feed-error { padding: 48px 16px; font-size: 13px; }
}

/* ===========================================================================
   SNS 서브 네비게이션 (피드 / 디자이너 찾기 / 메시지)
   ===========================================================================*/
.sns-subnav {
    max-width: 1024px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    gap: 24px;
    border-bottom: 1px solid #e6e8eb;
    background: #fff;
    box-sizing: border-box;
}
.sns-subnav-item {
    display: inline-block;
    padding: 14px 4px;
    color: #8a8f95;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.sns-subnav-item:hover { color: #1f2329; }
.sns-subnav-item.active {
    color: #1f2329;
    font-weight: 700;
    border-bottom-color: #ff7a00;
}

/* ===========================================================================
   디자이너 찾기 (find.php)
   ===========================================================================*/
.sns-find-layout {
    max-width: 1024px;
    margin: 0 auto;
    padding: 24px 16px 80px;
    box-sizing: border-box;
    color: #1f2329;
}
.sns-find-layout *,
.sns-find-layout *::before,
.sns-find-layout *::after { box-sizing: border-box; }

.sns-find-header { margin-bottom: 24px; }
.sns-find-title {
    font-size: 22px; font-weight: 700;
    margin: 16px 0 16px;
    color: #1f2329;
}
.sns-find-search-row {
    display: grid;
    grid-template-columns: 1fr 200px auto;
    gap: 8px;
}
.sns-find-input {
    border: 1px solid #d8dbdf;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    color: #1f2329;
    outline: none;
    background: #fff;
}
.sns-find-input:focus { border-color: #1f2329; }
.sns-find-submit {
    background: #1f2329; color: #fff;
    border: none; border-radius: 10px;
    padding: 10px 20px;
    font-size: 14px; font-weight: 600;
    cursor: pointer;
}
.sns-find-submit:hover { background: #000; }

.sns-find-section { margin-bottom: 32px; }
.sns-find-section-title {
    font-size: 16px; font-weight: 700;
    margin: 0 0 12px;
    color: #1f2329;
}
.sns-find-count { color: #8a8f95; font-weight: 500; font-size: 14px; }

.sns-find-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.sns-find-tag {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    background: #f6f7f9;
    border: 1px solid #e6e8eb;
    border-radius: 999px;
    font-size: 13px;
    color: #1f2329;
    text-decoration: none;
}
.sns-find-tag:hover { background: #eaeef3; }
.sns-find-tag span { color: #8a8f95; font-size: 12px; }

.sns-find-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.sns-find-card {
    background: #fff;
    border: 1px solid #e6e8eb;
    border-radius: 14px;
    padding: 20px 16px;
    text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.sns-find-avatar {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: #f3f4f6;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    color: #c0c4ca; font-size: 28px;
    text-decoration: none;
    flex: 0 0 auto;
}
.sns-find-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sns-find-name {
    font-size: 15px; font-weight: 700;
    color: #1f2329;
    text-decoration: none;
}
.sns-find-name:hover { text-decoration: underline; }
.sns-find-meta { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.sns-find-salon { font-size: 13px; color: #4b5159; margin: 4px 0 0; }
.sns-find-followers { font-size: 12px; color: #8a8f95; margin: 0; }
.sns-find-followers strong { color: #1f2329; font-weight: 600; }
.sns-find-follow {
    width: 100%;
    margin-top: 8px;
    padding: 8px 14px;
    background: #fff;
    color: #1f2329;
    border: 1px solid #d8dbdf;
    border-radius: 999px;
    font-size: 13px; font-weight: 500;
    cursor: pointer;
}
.sns-find-follow:hover { background: #f6f7f9; }
.sns-find-follow.is-following { background: #f6f7f9; color: #4b5159; }

.sns-find-empty {
    padding: 40px 0; text-align: center;
    color: #8a8f95; font-size: 14px;
}

@media (max-width: 600px) {
    .sns-subnav { padding: 0 12px; gap: 16px; }
    .sns-find-search-row {
        grid-template-columns: 1fr;
    }
    .sns-find-grid { grid-template-columns: repeat(2, 1fr); }
    .sns-find-avatar { width: 56px; height: 56px; }
}

/* ===========================================================================
   SNS 피드 스킨 — 2컬럼 레이아웃
   ===========================================================================*/

.sns-feed-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 24px;
    max-width: 1024px;
    margin: 0 auto;
    padding: 24px 16px 80px;
    box-sizing: border-box;
    align-items: start;
    color: #1f2329;
}
.sns-feed-layout *,
.sns-feed-layout *::before,
.sns-feed-layout *::after { box-sizing: border-box; }

/* ───── 좌측 프로필 카드 ───── */
.sns-left { position: sticky; top: 24px; }

.sns-profile-card {
    background: #fff;
    border: 1px solid #e6e8eb;
    border-radius: 14px;
    padding: 24px 20px;
    text-align: center;
    position: relative;
}
.sns-profile-card .sns-edit-btn {
    position: absolute; top: 12px; right: 12px;
    width: 28px; height: 28px;
    background: transparent; border: none; cursor: pointer;
    color: #8a8f95;
}
.sns-profile-card .sns-edit-btn:hover { color: #1f2329; }
.sns-profile-card .sns-avatar {
    width: 84px; height: 84px; border-radius: 50%;
    margin: 0 auto 12px; background: #f3f4f6;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    color: #c0c4ca; font-size: 36px;
}
.sns-profile-card .sns-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sns-profile-card .sns-name {
    font-size: 16px; font-weight: 700; color: #1f2329;
    margin: 0 0 6px;
}
.sns-profile-card .sns-bio {
    font-size: 13px; color: #4b5159;
    margin: -2px 0 8px;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: keep-all;
}
.sns-profile-card .sns-counts {
    font-size: 13px; color: #8a8f95;
    margin: 0 0 14px;
}
.sns-profile-card .sns-counts strong { color: #1f2329; font-weight: 600; }
.sns-profile-card .sns-divider {
    border: none; border-top: 1px solid #f0f1f3;
    margin: 14px 0;
}
.sns-profile-card .sns-meta {
    font-size: 13px; color: #4b5159; margin: 0 0 4px;
}
.sns-profile-card .sns-meta-position {
    font-size: 13px; color: #8a8f95;
}
.sns-profile-card .sns-mypost {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 13px; color: #4b5159;
    padding: 8px 10px;
    margin: 0 -10px;
    border-radius: 8px;
    text-decoration: none;
    transition: background .15s;
}
.sns-profile-card .sns-mypost:hover { background: #f6f7f9; color: #1f2329; }
.sns-profile-card .sns-mypost strong { color: #1f2329; font-weight: 600; margin-left: auto; }
.sns-profile-card .sns-mypost::after {
    content: '›';
    color: #b0b5bb;
    font-size: 16px;
    margin-left: 6px;
}
.sns-profile-card .sns-compose-cta {
    display: block; width: 100%;
    margin-top: 14px;
    background: #1f2329;
    color: #fff;
    border: none; border-radius: 10px;
    font-size: 14px; font-weight: 600;
    padding: 12px 16px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background .15s;
}
.sns-profile-card .sns-compose-cta:hover { background: #000; }
.sns-profile-card .sns-login-cta {
    display: block; width: 100%;
    background: #1f2329; color: #fff;
    border: none; border-radius: 10px;
    font-size: 14px; font-weight: 600;
    padding: 12px 16px; cursor: pointer;
    text-align: center; text-decoration: none;
}

/* ───── 메인 피드 ───── */
.sns-center { min-width: 0; }

.sns-feed-tabs {
    display: flex;
    gap: 4px;
    background: #fff;
    border: 1px solid #e6e8eb;
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 16px;
}
.sns-feed-tabs button {
    flex: 1;
    background: transparent; border: none;
    padding: 10px 12px; font-size: 14px; font-weight: 500;
    color: #8a8f95;
    cursor: pointer;
    border-radius: 8px;
    transition: all .15s;
}
.sns-feed-tabs button.active {
    background: #f6f7f9;
    color: #1f2329; font-weight: 600;
}
.sns-feed-tabs button:hover { color: #1f2329; }

.sns-feed-list { list-style: none; padding: 0; margin: 0; }

/* ───── 피드 카드 ───── */
.sns-card {
    background: #fff;
    border: 1px solid #e6e8eb;
    border-radius: 14px;
    margin-bottom: 12px;
    overflow: hidden;
}

.sns-card-header {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 20px 12px;
}
.sns-card-header .sns-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--hw-line, #ECECF1);
    box-sizing: border-box;
    overflow: hidden; flex: 0 0 auto;
    background: #f3f4f6;
    display: flex; align-items: center; justify-content: center;
    color: #c0c4ca; font-size: 18px;
}
.sns-card-header .sns-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sns-card-header .sns-card-meta { flex: 1; min-width: 0; }
.sns-card-header .sns-card-name-row {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.sns-card-header .sns-card-name {
    font-size: 14px; font-weight: 700; color: #1f2329;
    text-decoration: none;
}
.sns-card-header .sns-card-name:hover { text-decoration: underline; }
.sns-card-header .sns-card-time {
    font-size: 12px; color: #8a8f95;
}
/* 조회수 — 텍스트 '뷰' 대신 라인 아이콘 (rb_icon('view')) */
.sns-card-header .sns-card-views {
    display: inline-flex; align-items: center; gap: 4px;
}
.sns-card-header .sns-card-views svg {
    width: 14px; height: 14px; display: block;
    stroke: currentColor; fill: none; stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round;
}
.sns-card-header .sns-card-position {
    font-size: 12px; color: #4b5159; margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sns-card-header .sns-card-bio {
    font-size: 13px; color: #4b5159; margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    line-height: 1.45;
}
.sns-card-header .sns-follow-btn {
    margin-left: auto;
    background: #fff;
    color: #1f2329;
    border: 1px solid #d8dbdf;
    padding: 6px 12px;
    font-size: 13px; font-weight: 500;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
}
.sns-card-header .sns-follow-btn:hover { background: #f6f7f9; }
.sns-card-header .sns-follow-btn.is-following {
    background: #f6f7f9; color: #4b5159;
}
.sns-card-header .sns-card-more {
    background: transparent; border: none; color: #8a8f95;
    width: 28px; height: 28px; cursor: pointer;
    font-size: 18px; line-height: 1;
    margin-left: 4px;
    border-radius: 50%;
}
.sns-card-header .sns-card-more:hover { background: #f6f7f9; color: #1f2329; }
.sns-card-more-wrap { position: relative; margin-left: 4px; }
.sns-card-more-menu {
    position: absolute; top: calc(100% + 4px); right: 0;
    min-width: 140px;
    background: #fff;
    border: 1px solid #e6e8eb;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    z-index: 100;
    padding: 6px;
    display: flex; flex-direction: column;
}
.sns-card-more-menu[hidden] { display: none; }
.sns-card-more-menu .sns-menu-item {
    display: block; width: 100%;
    background: transparent; border: none;
    padding: 9px 12px;
    font-size: 14px;
    color: #1f2329;
    text-align: left;
    text-decoration: none;
    border-radius: 6px;
    cursor: pointer;
}
.sns-card-more-menu .sns-menu-item:hover { background: #f6f7f9; }
.sns-card-more-menu .sns-menu-delete { color: #e9445d; }
.sns-card-more-menu .sns-menu-report { color: #e9445d; }

/* 배지 */
.sns-badge {
    display: inline-block;
    padding: 2px 6px;
    font-size: 11px; font-weight: 600;
    border-radius: 4px;
    line-height: 1.2;
    vertical-align: middle;
}
.sns-badge-designer { background: #e6f4ff; color: #0072e0; }
.sns-badge-student  { background: #e8f7ee; color: #1c8e3a; }
.sns-badge-corporate { background: #fff3df; color: #b27200; }
.sns-badge-user      { background: #f3e8ff; color: #6b21a8; }
.sns-badge-level {
    background: #f0f1f3; color: #4b5159;
    font-weight: 500;
}

.sns-card-body { padding: 0 20px 12px; }
.sns-card-text {
    font-size: 14px; line-height: 1.55; color: #1f2329;
    margin: 0; white-space: pre-wrap;
    overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical;
}
.sns-card-text .sns-tag {
    color: #0072e0; text-decoration: none; font-weight: 500;
}
.sns-card-text .sns-tag:hover { text-decoration: underline; }
.sns-card-text .sns-mention {
    color: #0072e0; text-decoration: none; font-weight: 500;
}
.sns-card-text .sns-mention:hover { text-decoration: underline; }

.sns-card-readmore {
    display: inline-block;
    color: #8a8f95;
    font-size: 13px;
    margin-top: 4px;
    text-decoration: none;
}
.sns-card-readmore:hover { color: #1f2329; }

.sns-card-media {
    background: #000;
    position: relative;
}
.sns-card-media .sns-media-stage {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.sns-card-media img,
.sns-card-media video {
    width: 100%; height: 100%; object-fit: contain;
    display: block;
}
.sns-card-media .sns-ai-mark {
    position: absolute; top: 10px; right: 10px;
    background: rgba(0,0,0,0.6); color: #fff;
    font-size: 11px; padding: 4px 8px; border-radius: 999px;
    pointer-events: none;
}
.sns-card-media .sns-media-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(0,0,0,0.5); color: #fff;
    border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
}
.sns-card-media .sns-media-nav.prev { left: 10px; }
.sns-card-media .sns-media-nav.next { right: 10px; }
.sns-card-media .sns-media-nav:disabled { opacity: 0; pointer-events: none; }
.sns-card-media .sns-media-dots {
    position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 6px;
}
.sns-card-media .sns-media-dots span {
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(255,255,255,0.5);
    transition: all .2s;
}
.sns-card-media .sns-media-dots span.on {
    background: #fff; transform: scale(1.3);
}

.sns-card-counts {
    padding: 12px 20px 0;
    font-size: 12px; color: #8a8f95;
    display: flex; gap: 8px;
}
.sns-card-counts span::before {
    content: '·'; padding: 0 4px; color: #c0c4ca;
}
.sns-card-counts span:first-child::before { content: ''; padding: 0; }

.sns-card-actions {
    display: flex;
    border-top: 1px solid #f0f1f3;
    margin: 12px 20px 0;
    padding: 4px 0;
}
.sns-card-actions button,
.sns-card-actions a {
    background: transparent; border: none;
    padding: 12px 8px;
    font-size: 14px; color: #4b5159;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px;
    text-decoration: none;
    border-radius: 8px;
    transition: background .12s;
}
.sns-card-actions button:hover,
.sns-card-actions a:hover { background: #f6f7f9; }
/* 좋아요·댓글은 좌측 묶음, 공유는 우측 끝 */
.sns-card-actions .sns-share-btn { margin-left: auto; }
.sns-card-actions button.liked { color: var(--hw-grape-700, #6A3CEF); font-weight: 600; }
/* 라인 아이콘 — rb.hairconsult_bbs 상세 액션바(.hcv-act svg)와 동일 스펙 */
.sns-card-actions svg {
    width: 20px; height: 20px; display: block;
    stroke: currentColor; fill: none; stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round;
}

/* 로딩/끝 */
.sns-feed-loading,
.sns-feed-end {
    text-align: center; padding: 24px; color: #8a8f95;
    font-size: 13px;
}
.sns-feed-end { padding: 32px 24px 8px; }

.sns-empty {
    background: #fff;
    border: 1px solid #e6e8eb;
    border-radius: 14px;
    padding: 60px 20px;
    text-align: center;
    color: #8a8f95;
    font-size: 14px;
}

/* 글쓰기 진입 카드 (작성기 모달은 다음 단계) */
.sns-composer-entry {
    background: #fff;
    border: 1px solid #e6e8eb;
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 12px;
    display: flex; align-items: center; gap: 12px;
    cursor: pointer;
    transition: border-color .15s;
}
.sns-composer-entry:hover { border-color: #c8ccd1; }
.sns-composer-entry .sns-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: #f3f4f6; flex: 0 0 auto;
    overflow: hidden;
}
.sns-composer-entry .sns-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sns-composer-entry .sns-composer-text {
    flex: 1;
    color: #8a8f95; font-size: 14px;
}

/* ───── 모바일 ───── */
@media (max-width: 900px) {
    .sns-feed-layout {
        grid-template-columns: 1fr;
        padding: 12px 0 80px;
        gap: 12px;
    }
    /* 모바일에서는 본인 프로필 카드(좌측 사이드)를 숨김 — 헤더에 이미 동일 정보 노출 */
    .sns-left { display: none; }
    .sns-center { padding: 0 0; }
    .sns-card { border-radius: 0; border-left: 0; border-right: 0; margin-bottom: 8px; }
    .sns-feed-tabs { border-radius: 0; border-left: 0; border-right: 0; margin-bottom: 8px; }
    .sns-composer-entry { border-radius: 0; border-left: 0; border-right: 0; }
}

/* ===========================================================================
   상세 페이지 (view.skin.php)
   ===========================================================================*/
/* v2: SNS 피드/상세는 상단 탭바 제거 후 바로 콘텐츠 → .sub 프레임 기본 상단 여백(70~100px) 축소 */
.sub:has(.sns-view-layout),
.sub:has(.sns-feed-layout) { padding-top: 24px; }
@media (max-width: 1024px) {
    /* 전역 custom.css의 .sub{padding-top:50px!important}(≤1024)를 상세/목록에서 오버라이드 */
    .sub:has(.sns-view-layout) { padding-top: 10px !important; }
    .sub:has(.sns-feed-layout) { padding-top: 8px; }
    /* 720 중앙정렬 여백 제거 → 태블릿·좁은 폭에서 '목록으로'·카드 좌우/상단 여백 축소 */
    .sns-view-layout { max-width: none !important; padding: 8px 12px; }
}
.sns-view-layout {
    max-width: 940px;
    margin: 0 auto;
    padding: 16px;
    box-sizing: border-box;
    color: #1f2329;
}
.sns-view-layout *,
.sns-view-layout *::before,
.sns-view-layout *::after { box-sizing: border-box; }

.sns-view-back { margin-bottom: 12px; }
.sns-view-back-btn {
    display: inline-flex; align-items: center; gap: 6px;
    color: #4b5159;
    text-decoration: none;
    font-size: 14px;
    padding: 6px 10px 6px 0;
    border-radius: 8px;
}
.sns-view-back-btn:hover { background: #f6f7f9; color: #1f2329; }

.sns-view-card.sns-card { margin-bottom: 16px; }

/* 상세 액션바 — 구분선 없이, 아이콘 상하 여백을 줄여 미디어에 가깝게 */
.sns-view-card .sns-card-actions {
    border-top: 0;
    margin: 6px 20px 4px;
    padding: 0;
}
.sns-view-card .sns-card-actions button,
.sns-view-card .sns-card-actions a { padding: 9px 8px; }

.sns-view-body { padding: 0 24px 16px; }
.sns-view-text {
    font-size: 15px;
    line-height: 1.7;
    color: #1f2329;
    white-space: normal;
    word-wrap: break-word;
}
.sns-view-text .sns-tag,
.sns-view-text .sns-mention {
    color: #0072e0; text-decoration: none; font-weight: 500;
}
.sns-view-text .sns-tag:hover,
.sns-view-text .sns-mention:hover { text-decoration: underline; }

.sns-view-media {
    background: #000;
}
.sns-view-media-item {
    position: relative;
    width: 100%;
    background: #000;
    display: flex; align-items: center; justify-content: center;
    border-bottom: 1px solid #000;
}
.sns-view-media-item:last-child { border-bottom: 0; }
.sns-view-media-item img,
.sns-view-media-item video {
    width: 100%;
    max-height: 80vh;
    object-fit: contain;
    display: block;
}
.sns-view-media-item .sns-ai-mark {
    position: absolute; top: 10px; right: 10px;
    background: rgba(0,0,0,0.65); color: #fff;
    font-size: 11px; padding: 4px 8px; border-radius: 999px;
    pointer-events: none;
}

.sns-view-comments {
    background: #fff;
    border: 1px solid #e6e8eb;
    border-radius: 14px;
    padding: 16px 20px;
    margin-bottom: 60px;
}

/* ────── 댓글 (view_comment.skin.php) ────── */
.sns-cmt-section { padding-bottom: 8px; }
.sns-cmt-head {
    font-size: 14px; color: #1f2329;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f1f3;
    margin-bottom: 6px;
}
.sns-cmt-head strong { font-weight: 700; margin-right: 4px; }
.sns-cmt-total { color: #4b5159; font-weight: 600; }

.sns-cmt-list { list-style: none; margin: 0; padding: 0; }
.sns-cmt-item {
    display: flex; gap: 10px;
    padding: 14px 0;
    border-bottom: 1px solid #f6f7f9;
}
.sns-cmt-item:last-child { border-bottom: 0; }
.sns-cmt-item.is-reply {
    margin-left: 32px;
    border-left: 2px solid #f0f1f3;
    padding-left: 12px;
}
.sns-cmt-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid var(--hw-line, #ECECF1);
    box-sizing: border-box;
    background: #f3f4f6;
    overflow: hidden;
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    color: #c0c4ca; font-size: 14px;
    text-decoration: none;
}
.sns-cmt-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sns-cmt-body { flex: 1; min-width: 0; }
.sns-cmt-meta {
    display: flex; align-items: center; gap: 4px;
    margin-bottom: 4px;
    font-size: 13px;
}
.sns-cmt-name {
    font-weight: 700; color: #1f2329;
    text-decoration: none;
}
.sns-cmt-name:hover { text-decoration: underline; }
.sns-cmt-time { color: #8a8f95; font-size: 12px; }
.sns-cmt-secret {
    font-size: 11px; color: #8a8f95;
    background: #f6f7f9; padding: 2px 6px;
    border-radius: 4px;
}
.sns-cmt-content {
    font-size: 14px; line-height: 1.55;
    color: #1f2329;
    word-wrap: break-word;
    white-space: pre-wrap;
    text-align: left;
    text-indent: 0;
    padding: 0; margin: 0;
}
.sns-cmt-content p { margin: 0; }
.sns-cmt-actions {
    display: flex; gap: 12px;
    margin-top: 6px;
    font-size: 12px;
}
.sns-cmt-action {
    background: transparent; border: none;
    color: #8a8f95; cursor: pointer;
    padding: 2px 0;
    font-size: 12px;
    text-decoration: none;
}
.sns-cmt-action:hover { color: #1f2329; }
.sns-cmt-del { color: #e9445d; }
.sns-cmt-del:hover { color: #c33148; }
.sns-cmt-form-slot:not(:empty) { display: block; margin-top: 12px; }

.sns-cmt-empty {
    padding: 14px 0 16px;
    text-align: center;
    color: #8a8f95;
    font-size: 14px;
}

/* 작성 폼 */
.sns-cmt-form-wrap {
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid #f0f1f3;
}
.sns-cmt-form {
    display: flex; gap: 10px;
    align-items: flex-start;
}
.sns-cmt-avatar-self { margin-top: 4px; }
.sns-cmt-form-body { flex: 1; min-width: 0; }
.sns-cmt-guest-row {
    display: flex; gap: 6px; margin-bottom: 6px;
}
.sns-cmt-guest-input {
    flex: 1;
    border: 1px solid #d8dbdf;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
}
.sns-cmt-form-body textarea {
    width: 100%;
    min-height: 60px;
    border: 1px solid #d8dbdf;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.5;
    resize: none;
    outline: none;
    color: #1f2329;
    font-family: inherit;
    box-sizing: border-box;
}
.sns-cmt-form-body textarea:focus { border-color: #1f2329; }
.sns-cmt-form-footer {
    display: flex; align-items: center; gap: 10px;
    margin-top: 8px;
}
.sns-cmt-counter { font-size: 12px; color: #8a8f95; }
.sns-cmt-form-flex { flex: 1; }
/* 비밀댓글 — 전역 form.min.css 가 input[type=checkbox]{display:none} 로 감추므로
   :checked 상태를 커스텀 박스(span)로 그린다. (:checked 는 display:none 에도 적용됨) */
.sns-cmt-secret-label {
    font-size: 12px; color: #4b5159;
    display: inline-flex; align-items: center; gap: 6px;
    cursor: pointer;
    -webkit-user-select: none; user-select: none;
}
.sns-cmt-secret-box {
    display: inline-block !important;
    width: 16px; height: 16px; flex: 0 0 16px;
    border: 1px solid #c0c4ca; border-radius: 4px;
    background: #fff; position: relative; box-sizing: border-box;
    transition: background .12s, border-color .12s;
}
.sns-cmt-secret-box::after {
    content: ''; position: absolute; left: 4px; top: 1px;
    width: 4px; height: 8px;
    border: solid #fff; border-width: 0 2px 2px 0;
    transform: rotate(45deg); opacity: 0;
}
.sns-cmt-secret-label input:checked + .sns-cmt-secret-box {
    background: var(--hw-grape-700, #6A3CEF);
    border-color: var(--hw-grape-700, #6A3CEF);
}
.sns-cmt-secret-label input:checked + .sns-cmt-secret-box::after { opacity: 1; }
.sns-cmt-secret-label:hover .sns-cmt-secret-box { border-color: var(--hw-grape-600, #7B5CEA); }
.sns-cmt-submit {
    background: #1f2329; color: #fff;
    border: none; border-radius: 8px;
    padding: 7px 16px;
    font-size: 13px; font-weight: 600;
    cursor: pointer;
}
.sns-cmt-submit:hover:not(:disabled) { background: #000; }
.sns-cmt-submit:disabled { background: #c0c4ca; cursor: not-allowed; }
.sns-cmt-captcha { margin-top: 8px; }

@media (max-width: 600px) {
    .sns-cmt-item.is-reply { margin-left: 16px; }
}

@media (max-width: 600px) {
    .sns-view-layout { padding: 0; }
    .sns-view-back { padding: 2px 0; margin-bottom: 0; }
    /* 카드 하단선 + 댓글 상단선이 액션 아이콘 바로 밑에 이중으로 겹침 → 제거하고 흰 면을 이어붙임
       (댓글 영역 구분은 .sns-cmt-head 의 자체 구분선이 담당) */
    .sns-view-card.sns-card { border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; margin-bottom: 0; }
    .sns-view-body { padding: 0 16px 12px; }
    .sns-view-comments { border-radius: 0; border-left: 0; border-right: 0; border-top: 0; margin: 0; }
}

/* ===========================================================================
   작성 모달 (write.skin.php)
   ===========================================================================*/
.sns-write-overlay {
    position: fixed; inset: 0;
    background: rgba(15, 17, 22, 0.55);
    display: flex; align-items: center; justify-content: center;
    padding: 20px; box-sizing: border-box;
    z-index: 9999;
}
.sns-write-modal {
    background: #fff;
    border-radius: 16px;
    width: 100%; max-width: 560px;
    max-height: calc(100vh - 40px);
    display: flex; flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    color: #1f2329;
    box-sizing: border-box;
}
.sns-write-modal *,
.sns-write-modal *::before,
.sns-write-modal *::after { box-sizing: border-box; }

.sns-write-header {
    display: flex; align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f1f3;
}
.sns-write-close {
    background: transparent; border: none; cursor: pointer;
    color: #1f2329;
    width: 32px; height: 32px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px;
}
.sns-write-close:hover { background: #f6f7f9; }
.sns-write-title {
    flex: 1;
    font-size: 16px; font-weight: 700;
    margin: 0 0 0 8px;
    color: #1f2329;
}
.sns-write-spacer { width: 32px; }

.sns-write-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
}

.sns-write-author {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 14px;
}
.sns-write-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: #f3f4f6;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    color: #c0c4ca; font-size: 18px;
    flex: 0 0 auto;
}
.sns-write-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sns-write-author-meta { display: flex; flex-direction: column; min-width: 0; }
.sns-write-author-meta strong { font-size: 14px; font-weight: 700; color: #1f2329; }
.sns-write-author-meta span { font-size: 12px; color: #8a8f95; margin-top: 2px; }

.sns-write-textarea {
    width: 100%;
    min-height: 240px;
    max-height: 360px;
    border: none;
    resize: none;
    font-size: 15px;
    line-height: 1.6;
    padding: 8px 0;
    outline: none;
    color: #1f2329;
    background: transparent;
    font-family: inherit;
}
.sns-write-textarea::placeholder { color: #c0c4ca; }

.sns-write-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
    margin-top: 16px;
}
.sns-write-thumbs:empty { display: none; }
.sns-thumb-item {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    background: #f3f4f6;
}
.sns-thumb-item img,
.sns-thumb-item video {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.sns-thumb-file {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #8a8f95; font-size: 12px; font-weight: 700;
}
.sns-thumb-del {
    position: absolute; top: 4px; right: 4px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: none; cursor: pointer;
    font-size: 14px; line-height: 1;
    padding: 0;
    display: flex; align-items: center; justify-content: center;
}
.sns-thumb-del:hover { background: rgba(0, 0, 0, 0.8); }

/* AI 보정 진입 ✨ 버튼 (썸네일 좌상단) */
.sns-thumb-ai {
    position: absolute; top: 4px; left: 4px;
    background: rgba(255, 122, 0, 0.95);
    color: #fff;
    border: none; cursor: pointer;
    border-radius: 999px;
    padding: 3px 8px;
    font-size: 12px; line-height: 1;
    font-weight: 600;
}
.sns-thumb-ai:hover { background: #ff7a00; }
.sns-thumb-aimark {
    position: absolute; bottom: 4px; right: 4px;
    background: rgba(0,0,0,0.6); color: #fff;
    font-size: 11px; padding: 2px 6px;
    border-radius: 999px;
    pointer-events: none;
}

/* AI 보정 모달 + 비교 슬라이더 */
.sns-enh-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}
.sns-enh-modal {
    background: #fff;
    border-radius: 14px;
    width: 100%; max-width: 720px;
    max-height: calc(100vh - 40px);
    overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    color: #1f2329;
    box-sizing: border-box;
}
.sns-enh-modal *,
.sns-enh-modal *::before,
.sns-enh-modal *::after { box-sizing: border-box; }

.sns-enh-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #f0f1f3;
}
.sns-enh-title { font-size: 15px; font-weight: 700; color: #1f2329; }
.sns-enh-close {
    background: transparent; border: none;
    width: 28px; height: 28px;
    font-size: 20px; line-height: 1;
    cursor: pointer; color: #4b5159;
    border-radius: 6px;
}
.sns-enh-close:hover { background: #f6f7f9; color: #1f2329; }

.sns-enh-modes {
    display: flex; gap: 6px;
    padding: 12px 18px 8px;
    overflow-x: auto;
}
.sns-enh-mode {
    background: #f6f7f9; color: #4b5159;
    border: 1px solid transparent;
    padding: 7px 14px; font-size: 13px; font-weight: 500;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
}
.sns-enh-mode:hover { background: #eaeef3; color: #1f2329; }
.sns-enh-mode.active {
    background: #1f2329;
    color: #fff;
    border-color: #1f2329;
}

.sns-enh-slider {
    position: relative;
    margin: 0 18px;
    overflow: hidden;
    background: #000;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    user-select: none;
    cursor: ew-resize;
}
.sns-enh-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
}
.sns-enh-img-enh {
    clip-path: inset(0 0 0 50%);
}
.sns-enh-handle {
    position: absolute; top: 0; bottom: 0;
    left: 50%;
    width: 3px;
    background: #fff;
    transform: translateX(-50%);
    pointer-events: none;
}
.sns-enh-handle::before,
.sns-enh-handle::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 32px; height: 32px;
    margin-top: -16px; margin-left: -16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.sns-enh-handle::after {
    width: 14px; height: 14px;
    margin-top: -7px; margin-left: -7px;
    background: #1f2329;
}
.sns-enh-label {
    position: absolute; top: 10px;
    background: rgba(0,0,0,0.6); color: #fff;
    padding: 4px 8px; border-radius: 4px;
    font-size: 11px; font-weight: 600;
    pointer-events: none;
}
.sns-enh-label-orig { left: 10px; }
.sns-enh-label-enh  { right: 10px; }

.sns-enh-status {
    text-align: center;
    color: #8a8f95;
    font-size: 13px;
    padding: 10px 18px 4px;
}

.sns-enh-actions {
    display: flex; gap: 8px;
    padding: 10px 18px 16px;
    justify-content: flex-end;
    border-top: 1px solid #f0f1f3;
    margin-top: 8px;
}
.sns-enh-btn {
    padding: 9px 18px;
    border-radius: 8px;
    font-size: 14px; font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
}
.sns-enh-keep {
    background: #fff; color: #4b5159;
    border-color: #d8dbdf;
}
.sns-enh-keep:hover { background: #f6f7f9; color: #1f2329; }
.sns-enh-again {
    background: #fff; color: #4b5159;
    border-color: #d8dbdf;
}
.sns-enh-again:hover:not(:disabled) { background: #f6f7f9; color: #1f2329; }
.sns-enh-apply {
    background: #ff7a00; color: #fff;
}
.sns-enh-apply:hover:not(:disabled) { background: #e56e00; }
.sns-enh-btn:disabled { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 600px) {
    .sns-enh-overlay { padding: 0; }
    .sns-enh-modal { border-radius: 0; max-width: 100%; max-height: 100vh; height: 100vh; }
    .sns-enh-actions { flex-wrap: wrap; }
    .sns-enh-btn { flex: 1 1 30%; }
}

.sns-write-footer {
    display: flex; align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid #f0f1f3;
}
.sns-write-photo-btn {
    display: inline-flex; align-items: center; gap: 6px;
    color: #4b5159;
    cursor: pointer;
    font-size: 14px;
    padding: 6px 8px;
    border-radius: 8px;
    background: none; border: 0; appearance: none; -webkit-appearance: none; font-family: inherit;
}
.sns-write-photo-btn:hover { background: #f6f7f9; color: #1f2329; }
.sns-write-photo-btn span { font-weight: 500; }
.sns-write-counter {
    font-size: 13px;
    color: #8a8f95;
}
.sns-write-flex { flex: 1; }
.sns-write-cancel {
    background: #fff;
    border: 1px solid #d8dbdf;
    color: #1f2329;
    border-radius: 8px;
    padding: 8px 18px;
    font-size: 14px; font-weight: 500;
    cursor: pointer;
}
.sns-write-cancel:hover { background: #f6f7f9; }
.sns-write-submit {
    background: #1f2329;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 9px 22px;
    font-size: 14px; font-weight: 600;
    cursor: pointer;
}
.sns-write-submit:hover:not(:disabled) { background: #000; }
.sns-write-submit:disabled {
    background: #e6e8eb;
    color: #a3a8af;
    cursor: not-allowed;
}

@media (max-width: 600px) {
    /* iOS WebView/PWA safe-area 처리 — 노치/홈 인디케이터에 헤더·푸터 가리지 않도록 */
    .sns-write-overlay {
        padding: 0;
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .sns-write-modal {
        border-radius: 0;
        max-width: 100%;
        max-height: 100vh;
        height: 100vh;
        /* dvh 지원 브라우저는 동적 viewport 사용 (iOS Safari 주소창 변화 대응) */
        max-height: 100dvh;
        height: 100dvh;
    }
    /* overlay에 패딩이 들어간 경우 modal은 그 안의 가용 영역(100%) 채움 */
    .sns-write-overlay .sns-write-modal {
        max-height: 100%;
        height: 100%;
    }
    .sns-write-body { padding: 16px; }
    .sns-write-footer {
        padding: 12px 16px;
        flex-wrap: wrap;
    }
    .sns-write-header {
        padding: 12px 14px;
    }
}

/* ===========================================================================
   메시지 (memo.php) — Remember 스타일 2-column
   ===========================================================================*/
.sns-memo-layout {
    max-width: 1024px;
    margin: 0 auto;
    padding: 24px 16px 80px;
    box-sizing: border-box;
    color: #1f2329;
}
.sns-memo-layout *,
.sns-memo-layout *::before,
.sns-memo-layout *::after { box-sizing: border-box; }

.sns-memo-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 20px;
    align-items: start;
    margin-top: 24px;
}

.sns-memo-aside {
    background: #fff;
    border: 1px solid #e6e8eb;
    border-radius: 14px;
    padding: 20px;
}
.sns-memo-aside-title {
    font-size: 18px; font-weight: 700;
    margin: 0 0 8px;
    color: #1f2329;
}
.sns-memo-aside-desc {
    font-size: 13px; color: #8a8f95;
    line-height: 1.5;
    margin: 0 0 16px;
}
.sns-memo-aside-nav {
    display: flex; flex-direction: column;
    gap: 4px;
}
.sns-memo-aside-link {
    display: block;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 14px; font-weight: 500;
    color: #4b5159;
    text-decoration: none;
}
.sns-memo-aside-link:hover { background: #f6f7f9; color: #1f2329; }
.sns-memo-aside-link.active {
    background: #fff5ec;
    border-color: #ffd9b8;
    color: #ff7a00;
    font-weight: 700;
}
.sns-memo-aside-link-cta {
    margin-top: 8px;
    text-align: center;
    background: #1f2329;
    color: #fff;
    border-color: #1f2329;
}
.sns-memo-aside-link-cta:hover { background: #000; color: #fff; }

.sns-memo-main {
    background: #fff;
    border: 1px solid #e6e8eb;
    border-radius: 14px;
    padding: 24px;
    min-height: 480px;
}
.sns-memo-main-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f1f3;
    margin-bottom: 8px;
}
.sns-memo-main-title {
    font-size: 16px; font-weight: 700;
    margin: 0;
    color: #1f2329;
    display: flex; align-items: center; gap: 8px;
}
.sns-memo-count {
    font-size: 13px; font-weight: 500; color: #8a8f95;
}
.sns-memo-syslink {
    background: none; border: none;
    color: #8a8f95; font-size: 13px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
}
.sns-memo-syslink:hover { background: #f6f7f9; color: #1f2329; }

.sns-memo-list {
    list-style: none;
    margin: 0; padding: 0;
}
.sns-memo-item {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 14px 4px;
    border-bottom: 1px solid #f0f1f3;
    transition: background 0.15s;
}
.sns-memo-item:hover { background: #fafbfc; }
.sns-memo-item:last-child { border-bottom: none; }

.sns-memo-item.is-unread { background: #fffaf3; }
.sns-memo-item.is-unread:hover { background: #fff5ec; }

.sns-memo-item-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: #f3f4f6;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    color: #c0c4ca; font-size: 18px; font-weight: 700;
    text-decoration: none;
    flex: 0 0 auto;
}
.sns-memo-item-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sns-memo-item-avatar-sys {
    background: linear-gradient(135deg, #6c5ce7, #a78bfa);
    color: #fff; width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
}
.sns-memo-item.is-system .sns-memo-item-name { color: #6c5ce7; }

.sns-memo-item-body {
    min-width: 0;
    text-decoration: none;
    color: inherit;
    display: block;
}
.sns-memo-item-row {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 4px;
}
.sns-memo-item-name {
    font-size: 14px; font-weight: 700;
    color: #1f2329;
}
.sns-memo-item-badge {
    font-size: 10px; font-weight: 700;
    color: #fff;
    background: #ff7a00;
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1;
}
.sns-memo-item-time {
    margin-left: auto;
    font-size: 12px;
    color: #8a8f95;
}
.sns-memo-item-preview {
    margin: 0;
    font-size: 13px;
    color: #4b5159;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.4;
}
.sns-memo-item-del {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    color: #c0c4ca;
    text-decoration: none;
    font-size: 18px;
    line-height: 1;
}
.sns-memo-item-del:hover { background: #f6f7f9; color: #1f2329; }

.sns-memo-empty {
    display: flex; flex-direction: column; align-items: center;
    padding: 80px 20px;
    text-align: center;
    border-bottom: none !important;
}
.sns-memo-empty:hover { background: transparent !important; }
.sns-memo-empty-icon {
    width: 64px; height: 64px;
    display: flex; align-items: center; justify-content: center;
    background: #f6f7f9;
    color: #c0c4ca;
    border-radius: 50%;
    font-size: 28px;
    margin-bottom: 16px;
}
.sns-memo-empty-title {
    font-size: 16px; font-weight: 700;
    color: #4b5159;
    margin: 0 0 8px;
}
.sns-memo-empty-desc {
    font-size: 13px; color: #8a8f95;
    line-height: 1.5;
    margin: 0 0 20px;
}
.sns-memo-empty-cta {
    display: inline-block;
    padding: 10px 20px;
    background: #1f2329;
    color: #fff;
    border-radius: 999px;
    font-size: 13px; font-weight: 600;
    text-decoration: none;
}
.sns-memo-empty-cta:hover { background: #000; color: #fff; }

.sns-memo-paging {
    margin-top: 20px;
    text-align: center;
}
.sns-memo-paging .pg_wrap { padding: 0; }

.sns-memo-foot-info {
    margin: 16px 0 0;
    padding-top: 16px;
    border-top: 1px solid #f0f1f3;
    font-size: 12px;
    color: #8a8f95;
    text-align: center;
}
.sns-memo-foot-info strong { color: #1f2329; }

@media (max-width: 900px) {
    .sns-memo-grid {
        grid-template-columns: 1fr;
    }
    .sns-memo-aside { order: 2; }
    .sns-memo-main { order: 1; }
}

@media (max-width: 600px) {
    .sns-memo-layout { padding: 12px 12px 60px; }
    .sns-memo-main { padding: 16px; min-height: 320px; }
    .sns-memo-aside { padding: 16px; }
    .sns-memo-item { grid-template-columns: 40px 1fr auto; gap: 10px; padding: 12px 0; }
    .sns-memo-item-avatar { width: 40px; height: 40px; }
    .sns-memo-empty { padding: 48px 16px; }
}

/* ===========================================================================
   쪽지 보내기 모달 (Remember 스타일)
   ===========================================================================*/
.sns-memo-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(15, 18, 22, 0.55);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999;
    padding: 20px;
    box-sizing: border-box;
}
.sns-memo-modal-overlay[hidden] { display: none; }
.sns-memo-modal-overlay *,
.sns-memo-modal-overlay *::before,
.sns-memo-modal-overlay *::after { box-sizing: border-box; }
.sns-memo-modal-overlay [hidden] { display: none !important; }

.sns-memo-modal {
    background: #fff;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.18);
    display: flex; flex-direction: column;
    overflow: hidden;
    animation: snsMemoIn 0.18s ease-out;
}
@keyframes snsMemoIn {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.sns-memo-modal-head {
    position: relative;
    padding: 22px 24px 18px;
    border-bottom: 1px solid #f0f1f3;
}
.sns-memo-modal-title {
    font-size: 18px; font-weight: 700;
    color: #1f2329;
    margin: 0;
}
.sns-memo-modal-x {
    position: absolute;
    top: 12px; right: 12px;
    width: 36px; height: 36px;
    border: none; background: transparent;
    font-size: 22px; line-height: 1;
    color: #8a8f95;
    cursor: pointer;
    border-radius: 50%;
}
.sns-memo-modal-x:hover { background: #f6f7f9; color: #1f2329; }

.sns-memo-modal-body {
    padding: 20px 24px;
    overflow-y: auto;
    flex: 1;
}
.sns-memo-modal-sec { margin-bottom: 22px; }
.sns-memo-modal-sec:last-child { margin-bottom: 0; }
.sns-memo-modal-label {
    font-size: 14px; font-weight: 700;
    color: #1f2329;
    margin: 0 0 12px;
}

.sns-memo-modal-recv {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 0;
}
.sns-memo-modal-recv-avatar {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: #f3f4f6 center/cover no-repeat;
    color: #c0c4ca; font-weight: 700; font-size: 22px;
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
    overflow: hidden;
}
.sns-memo-modal-recv-avatar.has-img span { display: none; }
.sns-memo-modal-recv-info {
    flex: 1; min-width: 0;
}
.sns-memo-modal-recv-name {
    font-size: 16px; font-weight: 700;
    color: #1f2329;
    line-height: 1.3;
    margin-bottom: 2px;
}
.sns-memo-modal-recv-meta {
    font-size: 13px; color: #8a8f95;
    line-height: 1.4;
}
.sns-memo-modal-recv-clear {
    background: none; border: 1px solid #d8dbdf;
    color: #4b5159;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    cursor: pointer;
}
.sns-memo-modal-recv-clear:hover { background: #f6f7f9; }

.sns-memo-modal-recv-input { margin-top: 8px; }
.sns-memo-modal-input {
    width: 100%;
    border: 1px solid #d8dbdf;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 14px;
    color: #1f2329;
    outline: none;
    background: #fff;
}
.sns-memo-modal-input:focus { border-color: #1f2329; }

.sns-memo-modal-textwrap {
    border: 1px solid #d8dbdf;
    border-radius: 12px;
    background: #fff;
    transition: border-color 0.15s;
}
.sns-memo-modal-textwrap:focus-within { border-color: #1f2329; }
.sns-memo-modal-textwrap textarea {
    width: 100%;
    border: none;
    padding: 14px 16px 0;
    font-size: 14px;
    line-height: 1.55;
    color: #1f2329;
    resize: vertical;
    min-height: 200px;
    outline: none;
    background: transparent;
    font-family: inherit;
}
.sns-memo-modal-textwrap textarea::placeholder { color: #b0b4ba; }
/* 전역 CSS 의 textarea 테두리·radius·파란 box-shadow 제거 — 테두리 1줄만(래퍼 border) 유지 */
.sns-memo-modal-textwrap textarea,
.sns-memo-modal-textwrap textarea:focus { box-shadow: none !important; border: 0 !important; border-radius: 0 !important; }
.sns-memo-modal-input,
.sns-memo-modal-input:focus { box-shadow: none !important; }
.sns-memo-modal-meta {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 16px 12px;
    font-size: 12px;
    color: #8a8f95;
    border-top: 1px solid #eef0f2;
}
.sns-memo-modal-counter strong,
.sns-memo-modal-counter #sns_memo_count { color: #1f2329; font-weight: 600; }

.sns-memo-modal-pointbar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 24px;
    background: #f6f7f9;
    font-size: 13px;
    color: #4b5159;
    border-top: 1px solid #eef0f2;
}
.sns-memo-modal-pointbar strong { color: #1f2329; }
.sns-memo-modal-pointcost { color: #8a8f95; }

.sns-memo-modal-footer {
    display: flex; gap: 8px; justify-content: flex-end;
    padding: 14px 24px;
    border-top: 1px solid #f0f1f3;
}
.sns-memo-modal-btn {
    padding: 10px 22px;
    border-radius: 10px;
    font-size: 14px; font-weight: 600;
    cursor: pointer;
    border: 1px solid #d8dbdf;
    background: #fff;
    color: #1f2329;
}
.sns-memo-modal-btn:hover { background: #f6f7f9; }
.sns-memo-modal-btn-send {
    background: #c8cad0;
    color: #fff;
    border-color: #c8cad0;
}
.sns-memo-modal-btn-send:not(:disabled) {
    background: #1f2329;
    border-color: #1f2329;
    color: #fff;
}
.sns-memo-modal-btn-send:not(:disabled):hover { background: #000; border-color: #000; }
.sns-memo-modal-btn-send:disabled { cursor: not-allowed; }

@media (max-width: 600px) {
    /* 풀스크린(100vh) → 카드형 레이어 팝업: iOS 100vh 로 footer 가 화면 밖으로 밀리던 문제 해결 */
    .sns-memo-modal-overlay { padding: 14px; align-items: center; }
    .sns-memo-modal {
        max-width: 100%;
        max-height: calc(100dvh - 28px);
        height: auto;
        border-radius: 16px;
    }
    .sns-memo-modal-head { padding: 18px 20px 14px; }
    .sns-memo-modal-body { padding: 16px 20px; }
    .sns-memo-modal-footer { padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); }
    .sns-memo-modal-pointbar { padding: 10px 20px; }
    /* 모바일에선 입력창을 조금 낮춰 헤더·footer 가 함께 보이도록 */
    .sns-memo-modal-textwrap textarea { min-height: 150px; }
}

/* ===========================================================================
   쪽지 보기 모달
   ===========================================================================*/
.sns-memo-view-modal { max-width: 560px; }

.sns-memo-view-from {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 0 18px;
    border-bottom: 1px solid #f0f1f3;
    margin-bottom: 18px;
}
.sns-memo-view-from .sns-memo-modal-recv-avatar { width: 48px; height: 48px; font-size: 18px; }
.sns-memo-view-from-info { flex: 1; min-width: 0; }
.sns-memo-view-from-name {
    font-size: 16px; font-weight: 700;
    color: #1f2329;
    line-height: 1.3;
}
.sns-memo-view-from-meta {
    font-size: 13px; color: #8a8f95;
    margin-top: 2px;
}
.sns-memo-view-time {
    font-size: 12px; color: #8a8f95;
    flex: 0 0 auto;
}

.sns-memo-view-content {
    min-height: 160px;
}
.sns-memo-view-loading,
.sns-memo-view-error {
    padding: 40px 0;
    text-align: center;
    color: #8a8f95;
    font-size: 14px;
}
.sns-memo-view-error { color: #d04848; }
.sns-memo-view-text {
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 14px;
    line-height: 1.7;
    color: #1f2329;
}

.sns-memo-view-spacer { flex: 1; }
.sns-memo-view-del {
    color: #d04848;
    border-color: #f3d6d6;
}
.sns-memo-view-del:hover { background: #fdf3f3; color: #b03333; }

/* memo 리스트 항목의 button 화 — 기존 a 스타일 그대로 적용 */
.sns-memo-item-open {
    background: none; border: none;
    padding: 0; margin: 0;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
}
.sns-memo-item-body.sns-memo-item-open {
    display: block;
    width: 100%;
}
.sns-memo-item-avatar.sns-memo-item-open {
    display: flex; align-items: center; justify-content: center;
}
.sns-memo-item-del {
    background: none; border: none;
    cursor: pointer;
    font: inherit;
}

/* ===========================================================================
   SNS 디자이너 프로필 사이드바 (마이페이지 메뉴)
   본인 프로필을 볼 때만 좌측에 표시
   ===========================================================================*/
.sns-profile-layout-with-side {
    max-width: 1180px;
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 24px;
    align-items: flex-start;
}
.sns-profile-layout-with-side .sns-profile-main {
    min-width: 0;
}

.sns-profile-side {
    position: sticky;
    top: 80px;
    background: #fff;
    border: 1px solid #e6e8eb;
    border-radius: 14px;
    padding: 8px 0;
    overflow: hidden;
}
.sns-profile-side-group {
    padding: 12px 8px;
}
.sns-profile-side-group + .sns-profile-side-group {
    border-top: 1px solid #f0f1f3;
}
.sns-profile-side-title {
    margin: 0 0 6px;
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 700;
    color: #1f2329;
    letter-spacing: -0.2px;
}
.sns-profile-side-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sns-profile-side-list a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    color: #4b5159;
    font-size: 14px;
    text-decoration: none;
    border-radius: 8px;
    margin: 2px 4px;
    transition: background .15s ease, color .15s ease;
}
.sns-profile-side-list a:hover {
    background: #f6f7f9;
    color: #1f2329;
}
.sns-profile-side-list a.active {
    background: #fff5ec;
    color: #ff7a00;
    font-weight: 700;
}
.sns-profile-side-count {
    color: #8a8f95;
    font-size: 12px;
    font-weight: 500;
}
.sns-profile-side-list a.active .sns-profile-side-count {
    color: #ff9947;
}
.sns-profile-side-ext {
    font-style: normal;
    color: #b0b4b9;
    font-size: 12px;
    margin-left: 6px;
}

/* ----- 1024px 이하: 사이드바를 가로 스크롤 칩으로 변환 ----- */
@media (max-width: 1024px) {
    .sns-profile-layout-with-side {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .sns-profile-side {
        position: static;
        top: auto;
        padding: 8px 10px;
        border-radius: 12px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        display: flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
    }
    .sns-profile-side::-webkit-scrollbar { display: none; }
    .sns-profile-side-group {
        flex-shrink: 0;
        padding: 0;
    }
    .sns-profile-side-group + .sns-profile-side-group {
        border-top: 0;
        padding-left: 6px;
        margin-left: 2px;
        border-left: 1px solid #eef0f3;
    }
    .sns-profile-side-title {
        display: none;
    }
    .sns-profile-side-list {
        display: inline-flex;
        gap: 6px;
        flex-wrap: nowrap;
        align-items: center;
    }
    .sns-profile-side-list li { flex-shrink: 0; }
    .sns-profile-side-list a {
        margin: 0;
        padding: 9px 14px;
        border-radius: 999px;
        background: #f6f7f9;
        font-size: 13px;
        font-weight: 600;
        color: #4b5159;
        white-space: nowrap;
        min-height: 38px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }
    .sns-profile-side-list a:hover {
        background: #eef0f3;
    }
    .sns-profile-side-list a.active {
        background: #fff5ec;
        color: #ff7a00;
    }
    .sns-profile-side-count {
        font-size: 12px;
    }
}
@media (max-width: 600px) {
    .sns-profile-layout-with-side {
        gap: 10px;
    }
    .sns-profile-side {
        padding: 6px 8px;
        border-radius: 10px;
    }
    .sns-profile-side-list a {
        padding: 8px 12px;
        font-size: 12px;
        min-height: 36px;
    }
}

/* ===========================================================================
   본인 프로필 - 통합 뷰
   ===========================================================================*/

/* ----- Hero 카드 (다크 그라디언트) ----- */
.sns-profile-hero {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    color: #fff;
    margin-bottom: 16px;
    border: 1px solid #1f2329;
}
.sns-profile-hero-bg {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, #0c0c0e 0%, #1a1a1d 35%, #2c2c30 70%, #3a3a3e 100%);
    z-index: 0;
}
.sns-profile-hero-bg::after {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 85% 85%, rgba(255,122,0,0.12) 0%, transparent 35%),
        radial-gradient(circle at 15% 0%,  rgba(122,78,254,0.10) 0%, transparent 30%);
}
.sns-profile-hero-body {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    padding: 28px 28px 24px;
    min-height: 240px;
}
.sns-profile-hero-text {
    display: flex; flex-direction: column;
    min-width: 0;
}
.sns-profile-hero-name {
    margin: 0 0 6px;
    font-size: 28px; font-weight: 800;
    color: #fff;
    letter-spacing: -0.5px;
    display: inline-flex; align-items: center; gap: 8px;
    word-break: break-all;
}
.sns-profile-hero-edit-icon,
.sns-profile-hero-settings-icon {
    color: rgba(255,255,255,0.7);
    display: inline-flex; align-items: center;
    text-decoration: none;
    transition: color .15s ease;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}
.sns-profile-hero-edit-icon:hover,
.sns-profile-hero-settings-icon:hover { color: #fff; }
.sns-profile-hero-settings-icon { margin-left: 2px; display: none; }
@media (max-width: 600px) {
    .sns-profile-hero-settings-icon { display: inline-flex; }
}
.sns-profile-hero-bio-wrap {
    margin: 0 0 16px;
    display: flex;
}
button.sns-profile-hero-bio,
.sns-profile-hero-bio {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    font: inherit;
    text-align: left;
    font-size: 14px; line-height: 1.6;
    color: rgba(255,255,255,0.85);
    white-space: pre-wrap;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    max-width: 100%;
}
button.sns-profile-hero-bio:focus { outline: none; }
button.sns-profile-hero-bio:focus-visible { outline: 2px solid rgba(255,255,255,0.5); outline-offset: 3px; border-radius: 4px; }
.sns-profile-hero-bio-text {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 480px;
}
.sns-profile-hero-bio-pen {
    color: rgba(255,255,255,0.55);
    flex-shrink: 0;
    transition: color .15s ease;
}
.sns-profile-hero-bio-filled:hover { color: #fff; }
.sns-profile-hero-bio-filled:hover .sns-profile-hero-bio-pen { color: #fff; }
.sns-profile-hero-bio-empty {
    color: rgba(255,255,255,0.55);
}
.sns-profile-hero-bio-empty:hover { color: rgba(255,255,255,0.85); }
.sns-profile-hero-bio-empty .plus {
    font-size: 16px; font-weight: 600;
    color: rgba(255,255,255,0.7);
    margin-left: 2px;
}
.sns-profile-hero-company {
    margin: 0 0 auto;
}
.sns-profile-hero-company-name {
    margin: 0 0 2px;
    font-size: 16px; font-weight: 700;
    color: #fff;
}
.sns-profile-hero-company-meta {
    margin: 0;
    font-size: 14px;
    color: rgba(255,255,255,0.7);
    line-height: 1.5;
}
.sns-profile-hero-stats {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    display: flex; align-items: center; gap: 10px;
    font-size: 13px;
    color: rgba(255,255,255,0.75);
}
.sns-profile-hero-stats strong {
    color: #fff;
    font-weight: 700;
    margin-left: 4px;
}
.sns-profile-hero-stats .sep {
    color: rgba(255,255,255,0.3);
}
.sns-profile-hero-avatar-wrap {
    position: relative;
    width: 130px; height: 130px;
    align-self: end;
}
.sns-profile-hero-avatar {
    width: 100%; height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: #f3f4f6;
    border: 4px solid rgba(255,255,255,0.92);
    display: flex; align-items: center; justify-content: center;
}
.sns-profile-hero-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sns-profile-hero-avatar-fallback {
    color: #c0c4ca; font-size: 48px;
}
.sns-profile-hero-avatar-cam {
    position: absolute;
    right: 4px; bottom: 4px;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(0,0,0,0.7);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
    border: 2px solid #fff;
    transition: background .15s ease;
}
.sns-profile-hero-avatar-cam:hover { background: #000; }
button.sns-profile-hero-avatar-cam { padding: 0; cursor: pointer; }
button.sns-profile-hero-avatar-cam:disabled { opacity: .55; cursor: progress; }
button.sns-profile-hero-edit-icon {
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    font: inherit;
}
button.sns-profile-hero-edit-icon:focus { outline: none; }
button.sns-profile-hero-edit-icon:focus-visible {
    outline: 2px solid rgba(255,255,255,0.5);
    outline-offset: 3px;
    border-radius: 4px;
}
.sns-profile-actionbar.sns-profile-actionbar-minimal {
    justify-content: flex-end;
}

/* ----- 액션바 ----- */
.sns-profile-actionbar {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.sns-profile-actionbar-icon {
    width: 36px; height: 36px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #d8dbdf;
    color: #4b5159;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.sns-profile-actionbar-icon:hover { background: #f6f7f9; border-color: #c1c5cb; }
.sns-profile-actionbar-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px;
    height: 36px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #d8dbdf;
    color: #1f2329;
    font-size: 14px; font-weight: 600;
    text-decoration: none;
    line-height: 1;
    transition: background .15s ease;
}
.sns-profile-actionbar-btn:hover { background: #f6f7f9; }
.sns-profile-actionbar-btn-ai {
    color: #4f46e5;
    border-color: #c7d2fe;
}
.sns-profile-actionbar-btn-ai:hover {
    background: #eef2ff;
    border-color: #a5b4fc;
}
.sns-profile-actionbar-ai-spark {
    color: #7c3aed;
    font-size: 14px;
}
.sns-profile-actionbar-updated {
    margin-left: auto;
    font-size: 13px;
    color: #8a8f95;
}

/* ----- 프로필 완성하기 ----- */
.sns-profile-complete {
    background: #fff;
    border: 1px solid #e6e8eb;
    border-radius: 14px;
    padding: 18px 18px 20px;
    margin-bottom: 16px;
}
.sns-profile-complete-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
}
.sns-profile-complete-header h3 {
    margin: 0;
    font-size: 16px; font-weight: 700;
    color: #1f2329;
}
.sns-profile-complete-remain {
    font-size: 13px;
    color: #ff7a00;
    font-weight: 600;
}
.sns-profile-complete-bar {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
}
.sns-profile-complete-bar-cell {
    flex: 1;
    height: 6px;
    background: #f0f1f3;
    border-radius: 3px;
}
.sns-profile-complete-bar-cell.on { background: #ff7a00; }

.sns-profile-complete-track {
    position: relative;
    display: flex;
    align-items: center;
}
.sns-profile-complete-arrow {
    flex: 0 0 28px;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(0,0,0,0.45);
    color: #fff;
    border: none;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    position: absolute;
    top: 50%; transform: translateY(-50%);
    z-index: 2;
    transition: background .15s ease;
}
.sns-profile-complete-arrow:hover { background: rgba(0,0,0,0.65); }
.sns-profile-complete-arrow-prev { left: -6px; }
.sns-profile-complete-arrow-next { right: -6px; }
.sns-profile-complete-cards {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 4px 24px;
    scrollbar-width: none;
}
.sns-profile-complete-cards::-webkit-scrollbar { display: none; }

.sns-profile-complete-card {
    flex: 0 0 180px;
    background: #fff;
    border: 1px solid #e6e8eb;
    border-radius: 12px;
    padding: 18px 14px 14px;
    text-align: center;
    text-decoration: none;
    color: #1f2329;
    display: flex; flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.sns-profile-complete-card:hover {
    border-color: #ff7a00;
    box-shadow: 0 6px 18px rgba(255,122,0,0.12);
}
.sns-profile-complete-icon {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: #f6f7f9;
    color: #1f2329;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 4px;
}
.sns-profile-complete-card-title {
    margin: 0;
    font-size: 14px; font-weight: 700;
    color: #1f2329;
}
.sns-profile-complete-card-desc {
    margin: 0;
    font-size: 12px;
    color: #8a8f95;
    line-height: 1.45;
    min-height: 32px;
}
.sns-profile-complete-card-cta {
    display: inline-block;
    margin-top: 4px;
    padding: 6px 14px;
    border: 1px solid #d8dbdf;
    border-radius: 999px;
    color: #1f2329;
    font-size: 12px; font-weight: 600;
    background: #fff;
}
.sns-profile-complete-card:hover .sns-profile-complete-card-cta {
    border-color: #ff7a00;
    color: #ff7a00;
}

/* ----- 정보 블록 (소개/경력/포트폴리오) ----- */
.sns-profile-block {
    background: #fff;
    border: 1px solid #e6e8eb;
    border-radius: 14px;
    padding: 18px 22px 22px;
    margin-bottom: 16px;
}
.sns-profile-block-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f1f3;
}
.sns-profile-block-header h3 {
    margin: 0;
    font-size: 17px; font-weight: 700;
    color: #1f2329;
    display: inline-flex; align-items: center; gap: 8px;
}
.sns-profile-block-badge {
    display: inline-block;
    padding: 2px 8px;
    background: #fff5ec;
    color: #ff7a00;
    border-radius: 999px;
    font-size: 11px; font-weight: 700;
    letter-spacing: 0;
}
.sns-profile-block-edit {
    padding: 6px 14px;
    border: 1px solid #d8dbdf;
    border-radius: 8px;
    color: #1f2329;
    font-size: 13px; font-weight: 600;
    text-decoration: none;
    background: #fff;
    transition: background .15s ease;
}
.sns-profile-block-edit:hover { background: #f6f7f9; }

.sns-profile-block-body {
    color: #1f2329;
    font-size: 14px;
    line-height: 1.65;
}
.sns-profile-block-text { margin: 0; white-space: pre-wrap; }
.sns-profile-block-empty {
    margin: 0;
    padding: 24px 0;
    color: #b0b4b9;
    text-align: center;
    background: #fafbfc;
    border-radius: 10px;
    font-size: 13px;
}
.sns-profile-block-more {
    margin: 14px 0 0;
    text-align: center;
}
.sns-profile-block-more a {
    color: #4b5159;
    font-size: 13px;
    text-decoration: none;
}
.sns-profile-block-more a:hover { color: #1f2329; }

/* ----- 경력 리스트 ----- */
.sns-profile-career-total {
    margin: 0 0 16px;
    font-size: 14px;
    color: #4b5159;
}
.sns-profile-career-total strong {
    color: #ff7a00;
    font-weight: 700;
    font-size: 15px;
    margin-left: 6px;
}
.sns-profile-career-list {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
}
.sns-profile-career-item {
    display: flex;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid #f6f7f9;
}
.sns-profile-career-item:last-child { border-bottom: 0; }
.sns-profile-career-icon {
    flex: 0 0 36px;
    width: 36px; height: 36px;
    border-radius: 8px;
    background: #f6f7f9;
    color: #4b5159;
    display: flex; align-items: center; justify-content: center;
}
.sns-profile-career-text { flex: 1; min-width: 0; }
.sns-profile-career-company {
    margin: 0 0 2px;
    font-size: 15px; font-weight: 700;
    color: #1f2329;
}
.sns-profile-career-meta {
    margin: 0 0 2px;
    font-size: 13px;
    color: #4b5159;
}
.sns-profile-career-period {
    margin: 0;
    font-size: 13px;
    color: #8a8f95;
}
.sns-profile-career-dur { color: #b0b4b9; }

/* ----- AI 초안 작성하기 버튼 ----- */
.sns-profile-ai-cta {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 16px;
    border: 1px solid #c7d2fe;
    border-radius: 999px;
    background: #fff;
    color: #4f46e5;
    font-size: 13px; font-weight: 600;
    text-decoration: none;
    transition: background .15s ease;
}
.sns-profile-ai-cta:hover { background: #eef2ff; border-color: #a5b4fc; }
.sns-profile-ai-cta-spark { color: #7c3aed; font-size: 13px; }

/* ----- 본인 프로필 모바일 768px 이하: 좌(아바타) - 우(텍스트 3줄) 구조 ----- */
@media (max-width: 768px) {
    .sns-profile-hero-body {
        grid-template-columns: 76px 1fr;
        grid-template-rows: auto;
        padding: 18px 16px 16px;
        min-height: auto;
        gap: 14px;
        align-items: start;
    }
    /* 아바타는 1열, 텍스트는 2열로 명시 (DOM 순서가 텍스트→아바타이므로 강제 배치) */
    .sns-profile-hero-avatar-wrap {
        grid-column: 1;
        grid-row: 1;
        width: 76px; height: 76px;
        margin-top: 0;
        align-self: start;
        order: 0;
    }
    .sns-profile-hero-text {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
    }
    .sns-profile-hero-name {
        font-size: 22px;
        margin-bottom: 4px;
        word-break: normal;
        overflow-wrap: anywhere;
    }
    .sns-profile-hero-avatar { border-width: 3px; }
    .sns-profile-hero-avatar-fallback { font-size: 28px; }
    .sns-profile-hero-avatar-cam {
        width: 26px; height: 26px;
        right: -2px; bottom: -2px;
    }

    /* 통계/빠른액션을 hero 풀폭으로 끌어내기 (76px 아바타 + 14px gap = 90px) */
    .sns-profile-hero-stats {
        margin-left: -90px;
    }

    .sns-profile-actionbar-updated {
        margin-left: 0;
        flex-basis: 100%;
        order: 99;
    }
    .sns-profile-complete-card { flex-basis: 160px; }
    .sns-profile-block { padding: 16px 16px 18px; }
}

/* ----- 본인 프로필 모바일 600px 이하: 정보 위계 정리 ----- */
@media (max-width: 600px) {
    .sns-profile-hero {
        margin-bottom: 12px;
        border-radius: 14px;
    }
    .sns-profile-hero-body {
        padding: 20px 16px 16px;
        gap: 12px;
    }
    .sns-profile-hero-name {
        font-size: 21px;
        margin-bottom: 4px;
    }
    .sns-profile-hero-bio-wrap { margin: 0 0 10px; }
    .sns-profile-hero-bio,
    button.sns-profile-hero-bio { font-size: 13px; line-height: 1.5; }
    .sns-profile-hero-bio-text {
        white-space: normal;
        max-width: 100%;
        overflow-wrap: anywhere;
    }
    .sns-profile-hero-company-name { font-size: 15px; }
    .sns-profile-hero-company-meta { font-size: 13px; }

    /* 통계 행: sep 숨기고 3개만 균등 — 빠른액션은 다음 줄 */
    .sns-profile-hero-stats {
        flex-wrap: wrap;
        margin-top: 14px;
        margin-left: -84px; /* 600px: 아바타 72px + gap 12px = 84px */
        padding-top: 12px;
        border-top: 1px solid rgba(255,255,255,0.12);
        gap: 4px 14px;
        font-size: 12px;
    }
    .sns-profile-hero-stats > li {
        display: inline-flex;
        align-items: baseline;
        gap: 4px;
    }
    .sns-profile-hero-stats .sep { display: none; }
    .sns-profile-hero-stats strong {
        margin-left: 0;
        font-size: 15px;
    }
    .sns-profile-hero-quick-actions {
        flex-basis: 100%;
        display: flex;
        gap: 8px;
        margin-top: 8px;
        padding-top: 10px;
        border-top: 1px solid rgba(255,255,255,0.10);
    }
    .sns-profile-hero-quick-actions .sns-profile-hero-quickbtn {
        flex: 1;
        min-height: 38px;
        justify-content: center;
    }

    /* 아바타: 좌측 정렬, hero 박스 위로 튀어나가지 않도록 margin-top 0 */
    .sns-profile-hero-body {
        grid-template-columns: 72px 1fr;
        gap: 12px;
    }
    .sns-profile-hero-avatar-wrap {
        width: 72px; height: 72px;
        margin-top: 0;
    }
    .sns-profile-hero-avatar-fallback { font-size: 28px; }

    /* 액션바: 작은 화면에서 줄바꿈 자연스럽게 */
    .sns-profile-actionbar { margin-bottom: 12px; gap: 6px; }
    .sns-profile-actionbar-updated { font-size: 12px; }

    /* 본인 프로필 블록(소개/포트폴리오) 모바일 정리 */
    .sns-profile-block {
        padding: 14px 14px 16px;
        border-radius: 12px;
        margin-bottom: 12px;
    }
    .sns-profile-block-header {
        margin-bottom: 10px;
        padding-bottom: 10px;
    }
    .sns-profile-block-header h3 { font-size: 16px; }
    .sns-profile-block-edit {
        padding: 8px 12px;
        font-size: 12px;
        min-height: 36px;
        display: inline-flex;
        align-items: center;
    }
    .sns-profile-block-body { font-size: 13.5px; line-height: 1.6; }

    /* 본인 프로필 그리드 — 모바일에서는 2열로 (썸네일 식별성 우선) */
    .sns-profile-block .sns-profile-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 3px;
    }

    /* 프로필 완성하기 카드 모바일 정렬 */
    .sns-profile-complete { padding: 14px 14px 16px; border-radius: 12px; }
    .sns-profile-complete-card { flex: 0 0 150px; padding: 14px 12px 12px; }
}

/* ----- 본인 프로필 모바일 480px 이하 ----- */
@media (max-width: 480px) {
    .sns-profile-hero-body {
        grid-template-columns: 64px 1fr;
        padding: 16px 14px 14px;
        gap: 10px;
    }
    .sns-profile-hero-name { font-size: 19px; }
    .sns-profile-hero-avatar-wrap {
        width: 64px; height: 64px;
        margin-top: 0;
    }
    .sns-profile-hero-avatar-fallback { font-size: 26px; }
    .sns-profile-hero-stats {
        margin-left: -74px; /* 480px: 64 + 10 */
    }
    .sns-profile-hero-stats strong { font-size: 14px; }
    .sns-profile-hero-quick-actions .sns-profile-hero-quickbtn { font-size: 12px; }
    .sns-profile-block { padding: 12px 12px 14px; }
    .sns-profile-block-header h3 { font-size: 15px; }
}

/* ----- 본인 프로필 모바일 360px 이하 ----- */
@media (max-width: 360px) {
    .sns-profile-hero-body {
        grid-template-columns: 56px 1fr;
        padding: 14px 12px 12px;
        gap: 10px;
    }
    .sns-profile-hero-name { font-size: 18px; }
    .sns-profile-hero-avatar-wrap {
        width: 56px; height: 56px;
        margin-top: 0;
    }
    .sns-profile-hero-avatar-fallback { font-size: 22px; }
    .sns-profile-hero-stats {
        margin-left: -66px; /* 360px: 56 + 10 */
    }
    .sns-profile-block { padding: 12px 10px 12px; }
}

/* ================================================================
 * 프로필 인라인 편집 모달 (소개 편집)
 * ================================================================ */
.sns-profile-edit-modal[hidden] { display: none !important; }
.sns-profile-edit-modal {
    position: fixed; inset: 0;
    z-index: 9000;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.sns-profile-edit-modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(15, 17, 21, 0.55);
    backdrop-filter: blur(2px);
}
.sns-profile-edit-modal-dialog {
    position: relative;
    width: 100%;
    max-width: 640px;
    max-height: calc(100vh - 48px);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    display: flex; flex-direction: column;
    overflow: hidden;
}
.sns-profile-edit-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid #f0f1f3;
}
.sns-profile-edit-modal-header h2 {
    margin: 0;
    font-size: 18px; font-weight: 700; color: #1f2329;
}
.sns-profile-edit-modal-close {
    border: 0; background: transparent;
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px;
    color: #4b5159;
    cursor: pointer;
}
.sns-profile-edit-modal-close:hover { background: #f6f7f9; color: #1f2329; }
.sns-profile-edit-modal-body {
    padding: 22px 24px 4px;
    overflow-y: auto;
    flex: 1 1 auto;
}
.sns-profile-edit-modal-section-title {
    margin: 0 0 16px;
    font-size: 17px; font-weight: 700; color: #1f2329;
}
.sns-profile-edit-modal-label {
    margin: 0 0 4px;
    font-size: 14px; font-weight: 600; color: #1f2329;
}
.sns-profile-edit-modal-help {
    margin: 0 0 10px;
    font-size: 13px; color: #6b7079;
}
.sns-profile-edit-modal-textarea {
    width: 100%;
    min-height: 220px;
    padding: 14px 16px;
    border: 1px solid #d8dbdf;
    border-radius: 10px;
    font-size: 14px; line-height: 1.6;
    color: #1f2329;
    resize: vertical;
    box-sizing: border-box;
    font-family: inherit;
    background: #fff;
}
.sns-profile-edit-modal-textarea:focus {
    outline: none;
    border-color: #ff7a00;
    box-shadow: 0 0 0 3px rgba(255,122,0,.12);
}
.sns-profile-edit-modal-textarea-single {
    min-height: 0;
    height: 48px;
    resize: none;
    line-height: 1.4;
}
.sns-profile-edit-modal-counter {
    margin: 8px 0 0;
    font-size: 12px; color: #8a8f95;
    text-align: right;
}
.sns-profile-edit-modal-counter[hidden] { display: none; }
.sns-profile-edit-modal-label[hidden] { display: none; }
.sns-profile-edit-modal-notice {
    margin: 14px 0 18px;
    font-size: 12px; color: #8a8f95;
}
.sns-profile-edit-modal-notice[hidden] { display: none; }
.sns-profile-edit-modal-guide {
    margin: 14px 0 4px;
    padding: 14px 16px;
    background: #eef3fb;
    border-radius: 10px;
    color: #1f2329;
}
.sns-profile-edit-modal-guide[hidden] { display: none; }
.sns-profile-edit-modal-guide-title {
    margin: 0 0 8px;
    font-size: 13px; font-weight: 700;
}
.sns-profile-edit-modal-guide-list {
    margin: 0; padding: 0 0 0 18px;
    color: #4b5159;
    font-size: 13px; line-height: 1.6;
}
.sns-profile-edit-modal-guide-list li { margin: 0 0 4px; }
.sns-profile-edit-modal-guide-list li:last-child { margin-bottom: 0; }
.sns-profile-edit-modal-btn-primary:disabled {
    background: #d8dbdf;
    color: #fff;
    cursor: not-allowed;
}
.sns-profile-edit-modal-btn-primary:disabled:hover { background: #d8dbdf; }
.sns-profile-edit-modal-footer {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 14px 24px;
    border-top: 1px solid #f0f1f3;
    background: #fff;
}
.sns-profile-edit-modal-btn {
    padding: 10px 22px;
    border-radius: 10px;
    font-size: 14px; font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.sns-profile-edit-modal-btn-ghost {
    background: #fff;
    border-color: #d8dbdf;
    color: #1f2329;
}
.sns-profile-edit-modal-btn-ghost:hover { background: #f6f7f9; }
.sns-profile-edit-modal-btn-primary {
    background: #1f2329;
    color: #fff;
}
.sns-profile-edit-modal-btn-primary:hover { background: #000; }
.sns-profile-edit-modal-btn:disabled { opacity: .55; cursor: progress; }

/* 편집 버튼이 button 으로 바뀌어도 a 와 동일 스타일을 유지 */
button.sns-profile-block-edit { font-family: inherit; cursor: pointer; }

@media (max-width: 600px) {
    .sns-profile-edit-modal { padding: 0; }
    .sns-profile-edit-modal-dialog {
        max-width: none;
        max-height: 100vh;
        height: 100vh;
        border-radius: 0;
    }
    .sns-profile-edit-modal-header { padding: 14px 16px; }
    .sns-profile-edit-modal-body { padding: 18px 16px 4px; }
    .sns-profile-edit-modal-footer { padding: 12px 16px; }
    .sns-profile-edit-modal-textarea { min-height: 180px; }
}