/* ===== /m 인스타그램 스타일 모바일 전용 앱 (파일럿) - 기존 사이트 CSS와 독립적으로 관리 ===== */
:root {
    --m-accent: #453CC4;
    --m-brand: #FF7A1A;
    --m-ink: #1E1A33;
    --m-ink-soft: #9a99a6;
    --m-ink-mid: #5a5966;
    --m-border: #F0F0F3;
    --m-bg: #EDEDF3;
    --m-green: #0A8F5B;
    /* 본사이트 뱃지 마크업을 그대로 재사용하기 위한 변수명 별칭 */
    --color-brand: #FF7A1A;
    --color-accent: #453CC4;
}

/* ===== 본사이트에서 그대로 가져온 인증 뱃지/상태 pill (base.css / portfolio.css 원본과 동일) ===== */
.cert-badge-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: #1E293B;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    flex-shrink: 0;
}
.cert-badge-sm-license {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.dah-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    font-weight: 700;
    font-size: 0.82rem;
    padding: 8px 14px;
    border-radius: 999px;
}
.dah-status-pill-hiring {
    background: #E9F7EF;
    color: #2BB673;
    border: 1px solid #2BB673;
}
.dah-status-pill-seeking {
    background: #FFF1E6;
    color: var(--color-brand);
    border: 1px solid var(--color-brand);
}
.dah-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
}
.dah-status-dot-hiring { background: #2BB673; }
.dah-status-dot-seeking { background: var(--color-brand); }

html {
    overscroll-behavior-y: contain;
}
body.m-body {
    margin: 0;
    background: var(--m-bg);
    font-family: 'Pretendard', -apple-system, sans-serif;
    color: var(--m-ink);
    /* 화면 맨 위에서 아래로 당기면 브라우저/웹뷰 기본 풀투리프레시(새로고침)가 떠서
       작성 중이던 폼(사진 선택, 글 작성 등)이 전부 날아가는 문제 방지 - 피드만 예외 허용 */
    overscroll-behavior-y: contain;
}
body.m-body.m-allow-pull-refresh {
    overscroll-behavior-y: auto;
}
.m-shell {
    width: 100%;
    min-height: 100vh;
    background: #fff;
    display: flex;
    flex-direction: column;
    padding-bottom: 70px;
}

/* ---- 상단바 ---- */
.m-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--m-border);
}
.m-topbar-logo {
    display: flex;
    align-items: center;
    gap: 6px;
    font: 800 21px/1 'Pretendard';
    color: var(--m-brand);
    letter-spacing: -0.02em;
    text-decoration: none;
}
.m-topbar-spacer { flex: 1; }
.m-topbar-web-link {
    flex-shrink: 0;
    font: 600 12px/1 'Pretendard';
    color: var(--m-ink-soft);
    border: 1px solid var(--m-border);
    border-radius: 999px;
    padding: 7px 11px;
    margin-right: 6px;
    text-decoration: none;
    white-space: nowrap;
}
.m-topbar-icon {
    display: flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    color: var(--m-ink);
    position: relative;
}
.m-topbar-dot {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #FF3B30;
    border: 1.5px solid #fff;
}

/* ---- 베스트샵 상단 홍보 배너 ---- */
.m-promo-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 16px 0;
    padding: 10px 10px 10px 14px;
    border-radius: 999px;
    background: var(--m-brand);
    color: #fff;
    text-decoration: none;
}
.m-promo-banner-icon {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.m-promo-banner-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.m-promo-banner-text-sub {
    font: 500 11px/1.2 'Pretendard';
    opacity: 0.92;
}
.m-promo-banner-text-main {
    font: 800 14px/1.2 'Pretendard';
    white-space: nowrap;
}
.m-promo-banner-cta {
    flex-shrink: 0;
    background: #fff;
    color: var(--m-brand);
    font: 700 12px/1 'Pretendard';
    padding: 10px 14px;
    border-radius: 999px;
    white-space: nowrap;
}

/* ---- 제품 리뷰 상세 (/m/review/) - 작은 정사각 썸네일 + 제목/제품칩/날짜 가로 카드 ---- */
.m-rv-card {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
}
.m-rv-thumb {
    position: relative;
    width: 84px;
    height: 84px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--m-bg);
    flex-shrink: 0;
    cursor: pointer;
}
.m-rv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.m-rv-info { min-width: 0; display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.m-rv-title { font: 800 15px/1.3 'Pretendard'; color: var(--m-ink); }
.m-rv-rating { color: var(--m-brand); font-weight: 700; }
.m-rv-date { font-size: 0.74rem; color: var(--m-ink-soft); }

/* ---- 기업 소개 상세 (/m/shop/) ---- */
.m-cd-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
}
.m-cd-logo {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: var(--m-bg) center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: var(--m-accent);
    flex-shrink: 0;
}
.m-cd-name-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.m-cd-name { font: 800 17px/1.3 'Pretendard'; color: var(--m-ink); }
.m-cd-tagline { padding: 0 16px; font-size: 0.85rem; color: var(--m-ink-soft); margin-top: -8px; margin-bottom: 10px; }
.m-cd-chip-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 12px; }
.m-cd-chip {
    font: 600 11.5px/1 'Pretendard';
    color: var(--m-accent);
    background: #ECEAFB;
    padding: 6px 10px;
    border-radius: 999px;
}
.m-cd-region-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font: 500 11.5px/1 'Pretendard';
    color: var(--m-ink-soft);
    background: var(--m-bg);
    padding: 6px 10px;
    border-radius: 999px;
}
.m-cd-section {
    padding: 14px 16px;
    border-top: 1px solid var(--m-border);
}
.m-cd-section-title { font: 800 14.5px/1.3 'Pretendard'; color: var(--m-ink); margin-bottom: 10px; }
.m-cd-section-text { font: 400 13.5px/1.6 'Pretendard'; color: var(--m-ink); white-space: pre-wrap; }
.m-cd-section-text p { margin: 0; }
.m-cd-section-text img {
    display: block;
    /* summernote가 본문 저장 시 <img style="width: NNpx"> 인라인을 박아넣어서 !important로 덮어써야 한다 */
    width: calc(100% + 32px) !important;
    max-width: none;
    height: auto !important;
    margin: 8px -16px;
}
.m-cd-info-row { display: flex; gap: 10px; margin-bottom: 10px; font-size: 0.85rem; }
.m-cd-info-label { color: var(--m-ink-soft); font-size: 0.72rem; margin-bottom: 2px; }
.m-cd-info-value { color: var(--m-ink); }
.m-cd-works-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.m-cd-works-grid > a { min-width: 0; }
.m-cd-work-thumb {
    aspect-ratio: 4/5;
    border-radius: 10px;
    overflow: hidden;
    background: var(--m-bg);
    margin-bottom: 6px;
}
.m-cd-work-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.m-cd-work-title {
    font: 600 12.5px/1.3 'Pretendard';
    color: var(--m-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.m-section-title {
    font: 800 16px/1.3 'Pretendard';
    color: var(--m-ink);
    margin: 16px 16px 4px;
}

/* ---- 스토리 (구직중/채용중) ---- */
.m-story-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 14px 16px 12px;
    cursor: grab;
}
.m-story-scroll::-webkit-scrollbar { display: none; }
.m-story-scroll.dragging { cursor: grabbing; user-select: none; }
.m-story-item {
    flex-shrink: 0;
    width: 104px;
    text-align: center;
    color: inherit;
    text-decoration: none;
    display: block;
}
/* ---- 주목받는 샵·아티스트 가로 스크롤 (웹 메인과 동일한 데이터, 타이틀 없이 손가락 스와이프) ---- */
.m-spotlight-scroll {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 14px 16px;
    cursor: grab;
}
.m-spotlight-scroll::-webkit-scrollbar { display: none; }
.m-spotlight-scroll.dragging { cursor: grabbing; user-select: none; }
.m-spotlight-item {
    flex: 0 0 150px;
    min-width: 0;
    scroll-snap-align: start;
    color: inherit;
    text-decoration: none;
    display: block;
}
.m-spotlight-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 4/5;
    overflow: hidden;
    border-radius: 0;
    background: var(--m-bg);
    margin-bottom: 8px;
}
.m-spotlight-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.m-spotlight-category {
    font-size: 0.72rem;
    color: var(--m-ink-soft);
    margin-bottom: 4px;
}
.m-spotlight-title {
    font-weight: 700;
    font-size: 0.86rem;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.m-spotlight-thumb-square { aspect-ratio: 1/1; }
.m-spotlight-shop-row {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}
.m-spotlight-shop-logo {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--m-bg);
    flex-shrink: 0;
}
.m-spotlight-shop-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.m-spotlight-shop-sub {
    font-size: 0.72rem;
    color: var(--m-ink-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- 포트폴리오 별점 높은제품 - 가로 스크롤 로우 카드 ---- */
.m-rated-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 10px 16px 14px;
    cursor: grab;
}
.m-rated-scroll::-webkit-scrollbar { display: none; }
.m-rated-scroll.dragging { cursor: grabbing; user-select: none; }
.m-rated-card {
    flex: 0 0 260px;
    min-width: 0;
    display: flex;
    gap: 12px;
    align-items: center;
    color: inherit;
    text-decoration: none;
}
.m-rated-thumb {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--m-bg);
    flex-shrink: 0;
}
.m-rated-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.m-rated-body { min-width: 0; }
.m-rated-author {
    font-size: 0.7rem;
    color: var(--m-ink-soft);
    margin-bottom: 3px;
}
.m-rated-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.m-rated-name {
    font-weight: 700;
    font-size: 0.86rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.m-rated-rating {
    font-weight: 700;
    font-size: 0.78rem;
    color: var(--m-brand);
    flex-shrink: 0;
}
.m-rated-review {
    font-size: 0.74rem;
    color: var(--m-ink-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 2px;
}

/* 데스크탑 스타일로 교체하면서 잠깐 주석 처리 - 그라데이션 링 버전으로 되돌리고 싶으면 이 블록 살리고 아래 새 블록만 지우면 됨
.m-story-ring {
    position: relative;
    width: 82px;
    height: 82px;
    margin: 0 auto;
    border-radius: 999px;
    padding: 2.5px;
    box-sizing: border-box;
}
.m-story-ring-seeking { background: linear-gradient(135deg, var(--m-brand) 0%, #EAEAEF 55%); }
.m-story-ring-hiring { background: linear-gradient(135deg, var(--m-green) 0%, #EAEAEF 55%); }
.m-story-avatar {
    width: 100%;
    height: 100%;
    border-radius: 999px;
    border: 2.5px solid #fff;
    box-sizing: border-box;
    object-fit: cover;
    background: #ECEAFB;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--m-accent);
}
.m-story-badge {
    position: absolute;
    right: -4px;
    bottom: -3px;
    font: 700 8.5px/1 'Pretendard';
    color: #fff;
    padding: 3px 5px;
    border-radius: 6px;
    border: 1.5px solid #fff;
    white-space: nowrap;
}
.m-story-badge-seeking { background: var(--m-brand); }
.m-story-badge-hiring { background: var(--m-green); }
*/

/* ===== 데스크탑(pf-active-*)과 같은 스타일 - 그라데이션 링 대신 플레인 아바타 + 하단 중앙 뱃지 ===== */
.m-story-avatar-wrap {
    position: relative;
    width: 104px;
    height: 104px;
    margin: 0 auto;
    border-radius: 999px;
    box-shadow: 0 6px 14px -4px rgba(35,33,43,0.18);
}
.m-story-avatar-img,
.m-story-avatar-fallback {
    width: 100%;
    height: 100%;
    border-radius: 999px;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--m-bg);
    color: var(--m-ink-soft);
    font-weight: 700;
    font-size: 1.4rem;
}
.m-story-status-badge {
    position: absolute;
    left: 50%;
    bottom: -9px;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    color: #fff;
    border: 3px solid #fff;
}
.m-story-status-badge-seeking { background: var(--m-brand); }
.m-story-status-badge-hiring { background: var(--m-green); }
.m-story-field {
    font: 600 11px/1.3 'Pretendard';
    color: #3a3946;
    margin-top: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.m-story-more-circle {
    width: 104px;
    height: 104px;
    margin: 0 auto;
    border-radius: 999px;
    border: 1.5px dashed #C2C1CC;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background: #FAFAFC;
    font-size: 22px;
    color: var(--m-ink-soft);
}

/* ---- 포스트 (포트폴리오) ---- */
.m-post {
    padding-bottom: 14px;
}
.m-post-header-row {
    display: flex;
    align-items: center;
    background: #F4F4F6;
    padding: 12px 10px 10px 16px;
}
.m-post-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}
.m-post-more-wrap { position: relative; flex-shrink: 0; }
.m-post-more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    color: var(--m-ink-soft);
    font-size: 1.2rem;
    font-weight: 700;
    background: none;
    border: none;
    cursor: pointer;
}
.m-post-more-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 150px;
    background: #fff;
    border: 1px solid var(--m-border);
    border-radius: 12px;
    box-shadow: 0 8px 24px -8px rgba(35,33,43,.25);
    overflow: hidden;
    padding: 6px;
    z-index: 60;
}
.m-post-more-menu.open { display: flex; flex-direction: column; gap: 2px; }
.m-post-more-menu button,
.m-post-more-menu a {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border-radius: 8px;
    font: 600 13px/1 'Pretendard';
    color: var(--m-ink);
    border: none;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
}
.m-post-more-menu button:active,
.m-post-more-menu a:active { background: var(--m-bg); }
.m-post-more-danger { color: #E0447A !important; }
.m-post-avatar-wrap { position: relative; width: 36px; height: 36px; flex-shrink: 0; }
.m-post-avatar, .m-post-avatar-fallback {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    object-fit: cover;
    background: #ECEAFB;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--m-accent);
}
.m-post-info { flex: 1; min-width: 0; }
.m-post-name-row { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.m-post-name { font: 700 14px/1.2 'Pretendard'; }
.m-post-meta { font: 400 11.5px/1.3 'Pretendard'; color: var(--m-ink-soft); margin-top: 2px; }

.m-post-image {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #ECEAFB;
    overflow: hidden;
}
.m-post-image-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}
.m-post-image-slide-active { display: block; }
/* 리뷰 상세 - 피드처럼 정사각형으로 자르지 않고 원본 와이드 비율 그대로 보여준다 */
.m-post-image-wide { aspect-ratio: auto; }
.m-post-image-wide .m-post-image-slide { position: static; width: 100%; height: auto; object-fit: contain; }
.m-post-image-count {
    position: absolute;
    right: 12px;
    top: 12px;
    font: 600 11px/1 'IBM Plex Mono', monospace;
    color: #fff;
    background: rgba(30, 26, 51, .55);
    padding: 5px 8px;
    border-radius: 999px;
    z-index: 2;
}
.m-post-image-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: none;
    background: rgba(255, 255, 255, .85);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(30, 26, 51, .18);
    z-index: 2;
    padding: 0;
}
.m-post-image-nav-prev { left: 8px; }
.m-post-image-nav-next { right: 8px; }
.m-post-image-dots {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    display: flex;
    gap: 4px;
    z-index: 2;
}
.m-post-image-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .45);
}
.m-post-image-dot-active { background: #fff; }

.m-post-actions { display: flex; align-items: center; gap: 16px; padding: 11px 16px 8px; }
.m-post-action-btn { display: flex; align-items: center; gap: 5px; cursor: pointer; background: none; border: none; padding: 0; font: inherit; }
.m-post-action-count { font: 700 13px/1 'Pretendard'; color: var(--m-ink); }
.m-post-actions-spacer { flex: 1; }

.m-post-body { padding: 0 16px; }
.m-post-title { font: 700 14.5px/1.4 'Pretendard'; color: var(--m-ink); margin-bottom: 3px; }
.m-post-caption { font: 400 13.5px/1.5 'Pretendard'; color: #3a3946; white-space: pre-wrap; }
.m-post-caption p { margin: 0; }
.m-post-caption img {
    display: block;
    /* summernote가 본문에 저장할 때 <img style="width: 698.4px"> 식으로 인라인 width를 박아넣기 때문에
       외부 스타일시트 규칙은 우선순위가 낮아 무시된다 - !important로 강제 덮어써야 한다. */
    width: calc(100% + 32px) !important;
    max-width: none;
    height: auto !important;
    margin: 0 -16px;
}
/* summernote 에디터(리뷰/기업소개 작성) 자체 내용 영역 - 사진을 올리면 원본 픽셀 크기 그대로
   삽입되면서 에디터 폭을 넘겨 가로 스크롤이 생기던 것을 고침 */
.note-editable img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
}
.m-post-caption-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.m-post-caption-more {
    display: inline-block;
    color: var(--m-ink-soft);
    font: 600 12.5px/1 'Pretendard';
    cursor: pointer;
    margin-top: 4px;
}
.m-post-products { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.m-post-product-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font: 600 11.5px/1 'Pretendard';
    color: var(--m-accent);
    background: #ECEAFB;
    padding: 5px 9px;
    border-radius: 7px;
    cursor: pointer;
}
.m-post-product-rating { font: 700 11px/1 'Pretendard'; color: var(--m-brand); }
.m-post-product-chip-active {
    background: var(--m-accent);
    color: #fff;
}
.m-post-product-chip-active .m-post-product-rating { color: #FFD37A; }
.m-post-product-review-box {
    font-size: 0.82rem;
    color: var(--m-ink);
    background: #ECEAFB;
    border-radius: 10px;
    padding: 10px 12px;
    margin-top: 8px;
    line-height: 1.6;
}
.m-post-product-reviewer {
    color: var(--m-accent);
    font-weight: 700;
    margin-right: 2px;
}
.m-post-product-more {
    display: inline-flex;
    align-items: center;
    font: 600 11.5px/1 'Pretendard';
    color: var(--m-ink-soft);
    padding: 5px 2px;
    cursor: pointer;
}
.m-post-submeta { display: flex; align-items: center; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.m-post-submeta-item { display: inline-flex; align-items: center; gap: 4px; font: 500 11.5px/1 'Pretendard'; color: #8a8896; }

/* ---- 하단 탭바 ---- */
.m-app-download-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 54px;
    z-index: 49;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--m-brand);
    color: #fff;
    padding: 9px 16px;
    text-decoration: none;
}
.m-app-download-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.m-app-download-text {
    flex: 1;
    min-width: 0;
    font: 600 12.5px/1.3 'Pretendard';
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.m-app-download-cta {
    flex-shrink: 0;
    background: #fff;
    color: var(--m-brand);
    font: 700 11.5px/1 'Pretendard';
    padding: 7px 11px;
    border-radius: 999px;
    white-space: nowrap;
}
body.in-app-webview .m-app-download-banner { display: none; }

.m-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--m-border);
    padding: 10px 0;
    z-index: 50;
}
/* 대화방처럼 입력창이 화면 하단을 써야 하는 곳에서는 탭바를 고정시키지 않고 자연스럽게 그 위에 쌓는다 */
.m-tabbar-inline {
    flex-shrink: 0;
}
.m-tabbar-inline .m-tabbar {
    position: static;
    max-width: none;
    margin: 0;
    padding: 6px 0 8px;
}
.m-tab {
    flex: 1;
    display: flex;
    justify-content: center;
    color: #3a3946;
    text-decoration: none;
    position: relative;
}
.m-tab-active { color: var(--m-accent); }
.m-tab-upload-pill {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--m-accent);
    color: #fff;
    padding: 7px 12px;
    border-radius: 999px;
}
.m-tab-upload-label { font: 700 12px/1 'Pretendard'; white-space: nowrap; }
.m-tab-dot {
    position: absolute;
    top: -2px;
    right: calc(50% - 14px);
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #FF3B30;
    border: 1.5px solid #fff;
}
.m-tab-profile-avatar {
    width: 27px;
    height: 27px;
    border-radius: 999px;
    border: 2px solid var(--m-border);
    box-sizing: border-box;
    display: block;
    object-fit: cover;
}
.m-tab-profile-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #DCD6F5, #B9B2E8);
    color: #fff;
    font: 700 12px/1 'Pretendard';
}

.m-empty {
    padding: 60px 20px;
    text-align: center;
    color: var(--m-ink-soft);
    font-size: 0.92rem;
}

/* ---- 댓글 바텀시트 ---- */
.m-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(30, 26, 51, .4);
    z-index: 90;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}
.m-sheet-backdrop.m-sheet-open {
    opacity: 1;
    pointer-events: auto;
}
.m-sheet {
    position: fixed;
    left: 50%;
    bottom: 0;
    width: 100%;
    transform: translate(-50%, 100%);
    background: #fff;
    border-radius: 20px 20px 0 0;
    z-index: 91;
    display: flex;
    flex-direction: column;
    max-height: 78vh;
    transition: transform .25s ease;
    box-shadow: 0 -12px 30px rgba(30, 26, 51, .18);
}
.m-sheet.m-sheet-open {
    transform: translate(-50%, 0);
}
.m-sheet-handle {
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: #E2E2E8;
    margin: 10px auto 4px;
    flex-shrink: 0;
}
.m-sheet-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 10px 16px 14px;
    font: 700 15px/1 'Pretendard';
    color: var(--m-ink);
    border-bottom: 1px solid var(--m-border);
}
.m-sheet-close {
    position: absolute;
    right: 14px;
    top: 6px;
    display: flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.m-sheet-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 16px;
}
.m-sheet-empty {
    padding: 30px 0;
    text-align: center;
    color: var(--m-ink-soft);
    font-size: 0.88rem;
}
.m-comment-row {
    display: flex;
    gap: 10px;
    padding: 10px 0;
}
.m-comment-row-reply {
    padding-left: 34px;
}
.m-comment-avatar,
.m-comment-avatar-fallback {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    object-fit: cover;
    flex-shrink: 0;
    background: #ECEAFB;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--m-accent);
}
.m-comment-body { flex: 1; min-width: 0; }
.m-comment-head { display: flex; align-items: baseline; gap: 8px; }
.m-comment-user { font: 700 13px/1 'Pretendard'; color: var(--m-ink); }
.m-comment-time { font: 400 11px/1 'Pretendard'; color: var(--m-ink-soft); }
.m-comment-content { font: 400 13.5px/1.5 'Pretendard'; color: #3a3946; margin-top: 3px; }

.m-sheet-input-row {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--m-border);
}
.m-sheet-input-avatar,
.m-sheet-input-avatar-fallback {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    object-fit: cover;
    flex-shrink: 0;
    background: #ECEAFB;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.78rem;
    color: var(--m-accent);
}
.m-sheet-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: var(--m-bg);
    border-radius: 999px;
    padding: 9px 14px;
    font: 400 13.5px/1 'Pretendard';
    color: var(--m-ink);
}
.m-sheet-post-btn {
    border: none;
    background: none;
    color: var(--m-accent);
    font: 700 13.5px/1 'Pretendard';
    cursor: pointer;
    padding: 6px 4px;
    flex-shrink: 0;
}
.m-sheet-login-link {
    display: block;
    width: 100%;
    text-align: center;
    color: var(--m-ink-soft);
    font-size: 0.85rem;
    text-decoration: none;
}

/* ===== 업로드 화면 ===== */
.m-shell-noTabbar { padding-bottom: 0; }
.m-upload-error {
    padding: 10px 16px;
    background: #FDECEA;
    color: #E0472C;
    font: 600 13px/1.4 'Pretendard';
}
.m-upload-step { display: flex; flex-direction: column; min-height: 100vh; padding-bottom: 70px; box-sizing: border-box; }
.m-upload-topbar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--m-border);
}
.m-upload-topbar-btn {
    display: flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    font: 400 22px/1 'Pretendard';
    color: #5a5966;
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: none;
}
.m-upload-topbar-title { flex: 1; text-align: center; font: 700 16px/1 'Pretendard'; color: var(--m-ink); }
.m-upload-topbar-next,
.m-upload-topbar-submit {
    width: 28px;
    text-align: right;
    border: none;
    background: none;
    font: 700 14px/1 'Pretendard';
    color: var(--m-accent);
    cursor: pointer;
    padding: 0;
    white-space: nowrap;
    width: auto;
}
.m-upload-topbar-next:disabled { color: #C2C1CC; cursor: not-allowed; }

.m-upload-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-height: 306px;
    background: var(--m-bg);
    cursor: pointer;
    overflow: hidden;
}
.m-upload-hero-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.m-upload-hero-empty {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #8a8896;
    font: 600 12.5px/1 'Pretendard';
}
.m-upload-photo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
}
.m-upload-add-tile,
.m-upload-thumb {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--m-bg);
    cursor: pointer;
}
.m-upload-add-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #8a8896;
    font: 600 11px/1 'Pretendard';
}
.m-upload-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.m-upload-thumb-primary img { outline: 2px solid var(--m-accent); outline-offset: -2px; }
.m-upload-thumb-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: var(--m-accent);
    color: #fff;
    font: 700 11px/18px 'Pretendard';
    text-align: center;
}
.m-upload-thumb-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: rgba(30, 26, 51, .55);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 400 14px/1 'Pretendard';
    cursor: pointer;
}
.m-upload-hint {
    padding: 12px 16px;
    color: var(--m-ink-soft);
    font-size: 0.82rem;
    text-align: center;
}
.m-upload-inline-error {
    background: #FDECEA;
    color: #E0472C;
    font: 600 12.5px/1.4 'Pretendard';
    padding: 10px 14px;
    border-radius: 10px;
    margin-bottom: 14px;
}

/* ---- 2단계: 사진 보정 ---- */
.m-upload-edit-preview-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-height: 400px;
    background: var(--m-bg);
    overflow: hidden;
    flex-shrink: 0;
}
.m-upload-edit-preview { width: 100%; height: 100%; object-fit: cover; display: block; }
.m-upload-edit-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: rgba(30, 26, 51, .4);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.m-upload-edit-nav-prev { left: 10px; }
.m-upload-edit-nav-next { right: 10px; }
.m-upload-edit-body { flex: 1; overflow-y: auto; padding: 16px; box-sizing: border-box; }
.m-upload-filter-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-bottom: 20px; }
.m-upload-filter-row::-webkit-scrollbar { display: none; }
.m-upload-filter-item { flex-shrink: 0; text-align: center; cursor: pointer; }
.m-upload-filter-swatch {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    border: 2px solid transparent;
    box-sizing: border-box;
}
.m-upload-filter-swatch-active { border-color: var(--m-accent); }
.m-upload-filter-name { font: 500 10.5px/1.6 'Pretendard'; color: #8a8896; margin-top: 2px; }
.m-upload-adjust-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.m-upload-adjust-label { width: 40px; flex-shrink: 0; font: 600 12px/1 'Pretendard'; color: #5a5966; }
.m-upload-adjust-slider {
    flex: 1;
    accent-color: var(--m-accent);
    height: 4px;
}

.m-upload-form-body { padding: 16px; flex: 1; overflow-y: auto; }
.m-upload-field-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.m-upload-field-boxed {
    padding: 12px 14px;
    background: #F8F8FA;
    border-radius: 12px;
}
.m-upload-field-icon {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: #ECEAFB;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.m-upload-field-label { font: 600 13px/1 'Pretendard'; color: #5a5966; flex-shrink: 0; }
.m-upload-chip-row { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: 1; }
.m-upload-chip-row::-webkit-scrollbar { display: none; }
.m-upload-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 13px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--m-border);
    font: 600 12.5px/1 'Pretendard';
    color: #5a5966;
    cursor: pointer;
    white-space: nowrap;
}
.m-upload-chip-active { background: var(--m-accent); border-color: var(--m-accent); color: #fff; }

.m-upload-title-input {
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--m-border);
    padding: 10px 2px;
    font: 700 15px/1.3 'Pretendard';
    color: var(--m-ink);
    outline: none;
    box-sizing: border-box;
    margin-bottom: 14px;
    background: transparent;
}
.m-upload-date-input {
    flex: 1;
    border: 1px solid var(--m-border);
    border-radius: 999px;
    height: 30px;
    padding: 0 12px;
    font: 600 12.5px/1 'Pretendard';
    color: #3a3946;
    background: #fff;
    outline: none;
}
.m-upload-caption-input {
    width: 100%;
    border: none;
    margin-top: 4px;
    font: 400 14px/1.6 'Pretendard';
    color: #3a3946;
    outline: none;
    resize: vertical;
    box-sizing: border-box;
    background: transparent;
}

.m-upload-event-box { padding: 16px 0; border-top: 1px solid var(--m-border); margin-top: 6px; }
.m-upload-event-head { font: 800 15px/1.2 'Pretendard'; color: var(--m-ink); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.m-upload-event-count { font: 700 11.5px/1 'Pretendard'; color: var(--m-accent); background: #ECEAFB; padding: 4px 10px; border-radius: 999px; }
.m-upload-event-optin {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 14px;
    background: var(--m-brand-soft, #FFF1E6);
    border-radius: 12px;
    cursor: pointer;
    font: 400 13px/1.5 'Pretendard';
    color: var(--m-ink);
}
.m-upload-event-optin input { margin-top: 3px; }
.m-upload-event-sub { font: 400 12px/1.5 'Pretendard'; color: var(--m-ink-soft); }
.m-upload-event-contact { margin-top: 10px; }
.m-upload-event-input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--m-border);
    border-radius: 10px;
    padding: 12px 14px;
    font: 500 13px/1 'Pretendard';
    color: var(--m-ink);
    margin-bottom: 8px;
    outline: none;
}
.m-upload-event-consent { font: 400 11px/1.5 'Pretendard'; color: var(--m-ink-soft); margin: 4px 0 0; }

.m-upload-section { padding: 16px 0; border-top: 1px solid var(--m-border); margin-top: 6px; }
.m-upload-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.m-upload-section-title { font: 800 15px/1.2 'Pretendard'; color: var(--m-ink); }
.m-upload-section-sub { font: 400 12.5px/1.5 'Pretendard'; color: var(--m-ink-soft); margin-bottom: 12px; }
.m-upload-add-product-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font: 700 12.5px/1 'Pretendard';
    color: var(--m-accent);
    background: #fff;
    border: 1.5px solid #CFCBF3;
    padding: 8px 13px;
    border-radius: 999px;
    cursor: pointer;
}
.m-upload-product-row {
    border: 1px solid var(--m-border);
    border-radius: 14px;
    padding: 14px;
    background: #fff;
    margin-bottom: 10px;
}
.m-upload-product-top { display: flex; align-items: center; gap: 10px; }
.m-upload-product-name {
    flex: 1;
    min-width: 0;
    height: 38px;
    padding: 0 12px;
    background: var(--m-bg);
    border: 1px solid transparent;
    border-radius: 9px;
    font: 600 13.5px/1 'Pretendard';
    color: var(--m-ink);
    outline: none;
    box-sizing: border-box;
}
.m-upload-stars { display: flex; gap: 3px; flex-shrink: 0; }
.m-upload-star { font: 400 19px/1 'Pretendard'; color: #D8D7E0; cursor: pointer; }
.m-upload-star-active { color: var(--m-brand); }
.m-upload-product-remove {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #B6B5C0;
    font: 400 15px/1 'Pretendard';
    cursor: pointer;
}
.m-upload-product-review {
    width: 100%;
    min-height: 40px;
    resize: none;
    padding: 10px 12px;
    margin-top: 10px;
    background: var(--m-bg);
    border: 1px solid transparent;
    border-radius: 9px;
    font: 400 13px/1.6 'Pretendard';
    color: #5a5966;
    outline: none;
    box-sizing: border-box;
}

.m-upload-link-row { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.m-upload-link-row::-webkit-scrollbar { display: none; }
.m-upload-link-thumb {
    position: relative;
    flex-shrink: 0;
    width: 76px;
    height: 76px;
    border-radius: 10px;
    background-color: var(--m-bg);
    background-size: cover;
    background-position: center;
    cursor: pointer;
    opacity: .55;
}
.m-upload-link-thumb-selected { opacity: 1; box-shadow: 0 0 0 2px var(--m-accent); }
.m-upload-link-check {
    position: absolute;
    right: 5px;
    top: 5px;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: var(--m-accent);
    display: none;
    align-items: center;
    justify-content: center;
}
.m-upload-link-thumb-selected .m-upload-link-check { display: flex; }

/* ===== 탐색(검색) 화면 ===== */
.m-explore-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--m-border);
}
.m-explore-search-form { flex: 1; }
.m-explore-search-form {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 13px;
    background: #F2F2F5;
    border-radius: 11px;
    color: var(--m-ink-soft);
}
.m-explore-search-icon { font: 500 14px/1 'IBM Plex Mono', monospace; }
.m-explore-search-input {
    flex: 1;
    border: none;
    background: none;
    outline: none;
    font: 400 14px/1 'Pretendard';
    color: var(--m-ink);
}
.m-explore-chip-row {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 10px 16px;
    border-bottom: 1px solid var(--m-border);
}
.m-explore-chip-row::-webkit-scrollbar { display: none; }
.m-explore-chip-row .m-upload-chip { text-decoration: none; }
.m-explore-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
}
.m-explore-tile {
    position: relative;
    aspect-ratio: 1 / 1;
    background-color: var(--m-bg);
    background-size: cover;
    background-position: center;
    display: block;
}
.m-explore-tile-likes {
    position: absolute;
    left: 7px;
    bottom: 7px;
    font: 600 10px/1 'Pretendard';
    color: #fff;
    background: rgba(30, 26, 51, .5);
    padding: 4px 7px;
    border-radius: 6px;
}

/* ===== 프로필 화면 ===== */
.m-profile-top { display: flex; align-items: center; gap: 20px; padding: 18px 16px 4px; }
.m-profile-avatar-wrap { position: relative; width: 80px; height: 80px; flex-shrink: 0; }
.m-profile-avatar,
.m-profile-avatar-fallback {
    width: 80px;
    height: 80px;
    border-radius: 999px;
    object-fit: cover;
    background: linear-gradient(135deg, #453CC4, #FF7A1A);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font: 700 1.8rem/1 'Pretendard';
}
.m-profile-avatar-badge { position: absolute; right: 0; bottom: 0; display: flex; }
.m-profile-stats { flex: 1; display: flex; text-align: center; }
.m-profile-stat { flex: 1; display: block; text-decoration: none; color: inherit; }
.m-profile-stat-value { font: 800 17px/1 'Pretendard'; color: var(--m-ink); }
.m-profile-stat-label { font: 400 12px/1.6 'Pretendard'; color: #8a8896; }

.m-profile-info { padding: 12px 16px 0; }
.m-profile-name-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.m-profile-name { font: 700 15px/1.3 'Pretendard'; color: var(--m-ink); }
.m-profile-status-pill {
    font: 600 10.5px/1 'Pretendard';
    padding: 4px 7px;
    border-radius: 6px;
}
.m-profile-status-seeking { color: var(--m-brand); background: #FFF1E6; }
.m-profile-status-hiring { color: var(--m-green); background: #E2F6ED; }
.m-profile-meta-text { font: 400 12px/1 'Pretendard'; color: var(--m-ink-soft); }
.m-profile-badge-list { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; margin-top: 8px; }
.m-profile-verify-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font: 600 11.5px/1 'Pretendard';
    padding: 7px 10px;
    border-radius: 7px;
}
.m-profile-verify-badge-green { color: var(--m-green); background: #E2F6ED; }
.m-profile-verify-badge-orange { color: var(--m-brand); background: #FFF1E6; }
.m-profile-verify-badge-sub { font-weight: 400; opacity: .75; }
.m-profile-bio { font: 400 13px/1.6 'Pretendard'; color: #5a5966; margin-top: 8px; }
.m-profile-tag-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.m-profile-tag {
    font: 600 11px/1 'Pretendard';
    color: var(--m-accent);
    background: #ECEAFB;
    padding: 6px 9px;
    border-radius: 999px;
}
.m-profile-tag-region { color: #5a5966; background: var(--m-bg); }

.m-profile-action-row { display: flex; gap: 8px; padding: 14px 16px; }
.m-profile-action-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    background: #F2F2F5;
    color: var(--m-ink);
    border: none;
    border-radius: 10px;
    font: 700 13px/1 'Pretendard';
    cursor: pointer;
    text-decoration: none;
}
.m-profile-action-btn-primary { background: var(--m-accent); color: #fff; width: 100%; }
.m-profile-action-btn-disabled { background: var(--m-bg); color: var(--m-ink-soft); cursor: not-allowed; }

.m-profile-tabs { display: flex; border-top: 1px solid var(--m-border); border-bottom: 1px solid var(--m-border); }
.m-profile-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 11px 0 9px;
    color: var(--m-ink-soft);
    font: 600 11px/1 'Pretendard';
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.m-profile-tab-active { color: var(--m-ink); border-bottom-color: var(--m-ink); }

.m-product-use-list { display: flex; flex-direction: column; }
.m-product-use-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--m-border);
    text-decoration: none;
    color: inherit;
}
.m-product-use-thumb {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    background-color: var(--m-bg);
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}
.m-product-use-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.m-product-use-name {
    font: 700 13px/1.3 'Pretendard';
    color: var(--m-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.m-product-use-meta { font: 400 11.5px/1.3 'Pretendard'; color: var(--m-ink-soft); }

/* ===== 쪽지함 목록 ===== */
.m-chat-unread-tag { font: 600 12px/1 'Pretendard'; color: var(--m-accent); margin-left: 4px; }
.m-chat-list { display: flex; flex-direction: column; }
.m-chat-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    border-bottom: 1px solid #F6F6F9;
    text-decoration: none;
    color: inherit;
}
.m-chat-row-avatar,
.m-chat-row-avatar-fallback {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    object-fit: cover;
    flex-shrink: 0;
    background: #ECEAFB;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 1.1rem/1 'Pretendard';
    color: var(--m-accent);
}
.m-chat-row-info { flex: 1; min-width: 0; }
.m-chat-row-name-row { display: flex; align-items: center; gap: 6px; }
.m-chat-row-name { font: 700 14px/1.2 'Pretendard'; color: var(--m-ink); }
.m-chat-row-last {
    font: 400 13px/1.4 'Pretendard';
    color: #8a8896;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.m-chat-row-side { text-align: right; flex-shrink: 0; }
.m-chat-row-time { font: 400 11px/1 'Pretendard'; color: #b6b5c0; }
.m-chat-row-unread {
    display: inline-flex;
    min-width: 19px;
    height: 19px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--m-accent);
    color: #fff;
    font: 700 11px/1 'Pretendard';
    margin-top: 6px;
    padding: 0 5px;
}

/* ===== 대화방 ===== */
.m-chat-room-shell { height: 100vh; }
.m-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.m-chat-bubble-row { display: flex; }
.m-chat-bubble-row-mine { justify-content: flex-end; }
.m-chat-bubble {
    max-width: 75%;
    padding: 10px 14px;
    border-radius: 16px 16px 16px 4px;
    background: var(--m-bg);
    color: var(--m-ink);
    font: 400 13.5px/1.5 'Pretendard';
    white-space: pre-wrap;
    word-break: break-word;
}
.m-chat-bubble-mine {
    background: var(--m-accent);
    color: #fff;
    border-radius: 16px 16px 4px 16px;
}
.m-chat-input-row {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--m-border);
}
.m-chat-input {
    flex: 1;
    border: none;
    outline: none;
    background: var(--m-bg);
    border-radius: 999px;
    padding: 10px 16px;
    font: 400 13.5px/1 'Pretendard';
    color: var(--m-ink);
}
.m-chat-send-btn {
    border: none;
    background: var(--m-accent);
    color: #fff;
    font: 700 13px/1 'Pretendard';
    padding: 10px 16px;
    border-radius: 999px;
    cursor: pointer;
}

/* ===== 내 정보(설정) ===== */
.m-settings-body { padding: 18px 16px 40px; }
.m-settings-header { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.m-settings-avatar,
.m-settings-avatar-fallback {
    width: 60px;
    height: 60px;
    border-radius: 999px;
    object-fit: cover;
    flex-shrink: 0;
    background: linear-gradient(135deg, #F5D6E4, #E8B2CC);
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 1.4rem/1 'Pretendard';
    color: #fff;
}
.m-settings-header-name-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.m-settings-header-name { font: 800 17px/1.2 'Pretendard'; color: var(--m-ink); }
.m-settings-header-meta { font: 400 12.5px/1.4 'Pretendard'; color: var(--m-ink-soft); margin-top: 4px; }

.m-settings-section-title { font: 800 15px/1 'Pretendard'; color: var(--m-ink); margin-bottom: 12px; }
.m-settings-section-head { display: flex; align-items: center; margin-bottom: 12px; }
.m-settings-section-head .m-settings-section-title { margin-bottom: 0; flex: 1; }
.m-settings-section-desc { font: 400 12px/1.5 'Pretendard'; color: var(--m-ink-soft); margin-bottom: 12px; margin-top: -6px; }
.m-settings-edit-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font: 700 12.5px/1 'Pretendard';
    color: var(--m-accent);
    border: 1.5px solid #CFCBF3;
    padding: 8px 14px;
    border-radius: 999px;
    text-decoration: none;
}

.m-settings-toggle-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #F8F8FA;
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 24px;
}
.m-settings-toggle-title { font: 700 14px/1.2 'Pretendard'; color: var(--m-ink); }
.m-settings-toggle-desc { font: 400 12px/1.5 'Pretendard'; color: var(--m-ink-soft); margin-top: 4px; }
.m-toggle-switch {
    flex-shrink: 0;
    width: 44px;
    height: 26px;
    border-radius: 999px;
    background: #D8D7E0;
    padding: 3px;
    box-sizing: border-box;
    cursor: pointer;
    transition: background .15s;
}
.m-toggle-switch-on { background: var(--m-accent); }
.m-toggle-knob {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: #fff;
    transition: transform .15s;
}
.m-toggle-switch-on .m-toggle-knob { transform: translateX(18px); }

.m-settings-info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 24px; }
.m-settings-info-card { background: var(--m-bg); border-radius: 12px; padding: 12px 14px; }
.m-settings-info-label { font: 500 11px/1 'Pretendard'; color: var(--m-ink-soft); margin-bottom: 5px; }
.m-settings-info-value { font: 700 14px/1.3 'Pretendard'; color: var(--m-ink); }
.m-settings-info-value a { color: var(--m-accent); }

.m-settings-empty-text { font: 400 13px/1.5 'Pretendard'; color: var(--m-ink-soft); }
.m-settings-license-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.m-settings-license-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #F8F8FA;
    border-radius: 12px;
    padding: 14px;
}
.m-settings-license-icon,
.m-settings-company-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #FFF1E6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
}
.m-settings-license-name-row { display: flex; align-items: center; gap: 6px; }
.m-settings-license-name { font: 700 13.5px/1.2 'Pretendard'; color: var(--m-ink); }
.m-settings-license-verified {
    font: 700 10px/1 'Pretendard';
    color: var(--m-green);
    background: #E2F6ED;
    padding: 4px 6px;
    border-radius: 5px;
}
.m-settings-license-meta { font: 400 11.5px/1.4 'Pretendard'; color: var(--m-ink-soft); margin-top: 3px; }
.m-settings-license-remove {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #E2E2E8;
    color: var(--m-ink-soft);
    font: 400 13px/1 'Pretendard';
    cursor: pointer;
}
.m-settings-add-link {
    display: inline-block;
    font: 600 12.5px/1 'Pretendard';
    color: var(--m-accent);
    margin-bottom: 24px;
    text-decoration: none;
}
.m-settings-add-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 52px;
    border: 2px dashed var(--m-border);
    border-radius: 10px;
    color: var(--m-ink-soft);
    font: 600 13.5px/1 'Pretendard';
    text-decoration: none;
    margin-bottom: 24px;
}

.m-settings-company-card { border: 1px solid #D9F0E4; border-radius: 14px; overflow: hidden; margin-bottom: 24px; }
.m-settings-company-top { display: flex; align-items: center; gap: 12px; background: #EFFAF4; padding: 14px; }
.m-settings-company-icon { background: var(--m-green); color: #fff; }
.m-settings-company-detail { padding: 14px; font: 400 13px/1.9 'Pretendard'; color: #3a3946; }

.m-settings-cta-row { display: flex; align-items: center; gap: 12px; }
.m-settings-cta-icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #E9F7EF;
}
.m-settings-cta-info { flex: 1; min-width: 0; }
.m-settings-cta-title { margin: 0; font: 700 13.5px/1.3 'Pretendard'; color: var(--m-ink); }
.m-settings-cta-desc { margin: 3px 0 0; font: 400 11.5px/1.5 'Pretendard'; color: var(--m-ink-soft); }
.m-settings-cta-btn {
    flex-shrink: 0;
    background: #2BB673;
    color: #E9F7EF;
    font: 700 12px/1 'Pretendard';
    padding: 10px 14px;
    border-radius: 999px;
    white-space: nowrap;
    text-decoration: none;
}
.m-settings-danger-btn {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 16px;
    border: 1.5px solid #F3C1B8;
    background: none;
    color: #E0472C;
    border-radius: 999px;
    font: 700 12.5px/1 'Pretendard';
    cursor: pointer;
}

.m-settings-footer { margin-top: 24px; display: flex; align-items: center; justify-content: space-between; }
.m-settings-logout-btn {
    border: none;
    background: none;
    color: var(--m-ink-soft);
    font: 600 13px/1 'Pretendard';
    cursor: pointer;
    padding: 0;
}
.m-settings-withdraw-btn {
    border: none;
    background: none;
    color: var(--m-ink-soft);
    font: 500 12.5px/1 'Pretendard';
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
}

.m-post-batch-sentinel { height: 1px; }

/* ===== 프로필 리스트 (구직중/채용중 더보기) ===== */
.m-people-list { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.m-people-row {
    border: 1px solid var(--m-border);
    border-radius: 16px;
    padding: 16px;
    background: #fff;
}
.m-people-row-top {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: inherit;
    margin-bottom: 12px;
}
.m-people-avatar,
.m-people-avatar-fallback {
    width: 60px;
    height: 60px;
    border-radius: 999px;
    object-fit: cover;
    flex-shrink: 0;
    background: #ECEAFB;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 1.3rem/1 'Pretendard';
    color: var(--m-accent);
}
.m-people-info { flex: 1; min-width: 0; }
.m-people-name { font: 700 16px/1.3 'Pretendard'; color: var(--m-ink); margin-bottom: 3px; }
.m-people-meta { font: 400 12.5px/1.5 'Pretendard'; color: var(--m-ink-soft); }
.m-people-badge-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.m-people-badge {
    font: 600 11.5px/1 'Pretendard';
    padding: 7px 11px;
    border-radius: 999px;
    background: var(--m-bg);
    color: #5a5966;
}
.m-people-badge-license { background: #E2F6ED; color: var(--m-green); }
.m-people-badge-company { background: #ECEAFB; color: var(--m-accent); }
.m-people-side { display: flex; align-items: center; gap: 8px; }
.m-people-side .m-profile-status-pill { flex-shrink: 0; }
.m-people-side .m-profile-action-btn { flex: 1; height: 42px; }

/* ===== 사진 크게 보기 (라이트박스) - 데스크탑(pf-lightbox)과 동일한 느낌으로 이식 ===== */
.m-lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 500;
    background: rgba(20,18,26,0.92);
    align-items: center;
    justify-content: center;
}
.m-lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #fff;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    z-index: 1;
}
.m-lightbox-counter {
    position: absolute;
    top: 24px;
    left: 20px;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    opacity: 0.85;
}
.m-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    color: #fff;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.m-lightbox-nav-prev { left: 12px; }
.m-lightbox-nav-next { right: 12px; }
.m-lightbox-img {
    max-width: 92vw;
    max-height: 86vh;
    border-radius: 10px;
    object-fit: contain;
}