/* ══════════════════════════════════════════════════════════════════════════
   m.css — /m 모바일 전용 화면(2026-08-28 운영 지시). nexa.css 토큰 위에 얹힌다(뒤에 로드).
   원칙(ui-ux-pro-max 점검 반영): 터치 타깃 ≥44px·간격 ≥8px, 수직 스크롤 우선(가로 스크롤은
   칩·카드 레일만, 페이지 몸통 가로 스크롤 금지), 스티키 상단바는 본문 패딩으로 보상,
   NEXA 팔레트 유지 — 네이비(--primary #070f54) 면 + 검정 글자 램프, 그라데이션 금지
   (사진 스크림 한 겹 예외는 데스크톱과 동일 규칙).
   ══════════════════════════════════════════════════════════════════════════ */

html { -webkit-text-size-adjust: 100%; }
body.m-body {
    background: var(--bg-white);
    /* 하단 고정 내비(64px)+안전영역만큼 본문을 띄운다 — 마지막 콘텐츠가 내비에 가리지 않게 */
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    overscroll-behavior-y: none; /* 당겨서 새로고침 오발동 방지 */
}
.m-body a, .m-body button { touch-action: manipulation; } /* 300ms 탭 지연 제거 */

/* ── 상단 앱바 ─────────────────────────────────────────────────────────── */
.m-top {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; gap: 6px;
    height: 52px; padding: 0 6px 0 14px;
    background: var(--bg-white); border-bottom: 1px solid var(--border);
}
.m-top-logo { font-size: 19px; font-weight: 800; color: var(--text-900); text-decoration: none; letter-spacing: -0.3px; }
.m-top-back {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-left: -10px; border: 0; background: none;
    color: var(--text-900); text-decoration: none;
}
.m-top-title {
    flex: 1; min-width: 0; font-size: 17px; font-weight: 700; color: var(--text-900);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m-top-sp { flex: 1; }
.m-top-ic {
    position: relative; display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; color: var(--text-900); text-decoration: none; background: none; border: 0;
}
.m-top-ic svg { width: 22px; height: 22px; }
.m-top-badge {
    position: absolute; top: 6px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px;
    background: #ef4444; color: #fff; border-radius: 20px;
    font-size: 11px; font-weight: 700; line-height: 16px; text-align: center;
}
.m-top-login {
    display: inline-flex; align-items: center; height: 34px; margin-right: 8px; padding: 0 12px;
    background: var(--primary); color: #fff; border-radius: 8px;
    font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.m-top-ava {
    width: 30px; height: 30px; margin: 7px; border-radius: 50%; overflow: hidden;
    background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700; text-decoration: none;
}
.m-top-ava img { width: 100%; height: 100%; object-fit: cover; }

/* ── 검색 줄 ───────────────────────────────────────────────────────────── */
.m-search { padding: 10px 14px 4px; }
.m-search form { display: flex; align-items: center; height: 44px; background: var(--bg-gray); border-radius: 22px; padding: 0 4px 0 16px; }
.m-search input {
    flex: 1; min-width: 0; border: 0; background: none; font-size: 16px; color: var(--text-900); outline: none;
}
.m-search input::placeholder { color: var(--text-400); }
.m-search button {
    width: 36px; height: 36px; border: 0; border-radius: 50%;
    background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center;
}
.m-search button svg { width: 16px; height: 16px; }

/* ── 카테고리 칩 레일(사이드바 대체 — 가로 스크롤) ────────────────────── */
.m-chips {
    display: flex; gap: 8px; overflow-x: auto; padding: 8px 14px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.m-chips::-webkit-scrollbar { display: none; }
.m-chip {
    flex: 0 0 auto; display: inline-flex; align-items: center; height: 38px; padding: 0 15px;
    background: var(--bg-white); border: 1px solid var(--border); border-radius: 19px;
    font-size: 15px; font-weight: 600; color: var(--text-700); text-decoration: none; white-space: nowrap;
}
.m-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.m-chips-sub .m-chip { height: 34px; font-size: 14px; border-radius: 17px; }
.m-chips-sticky { position: sticky; top: 52px; z-index: 40; background: var(--bg-white); border-bottom: 1px solid var(--border); }
.m-chips-sticky .m-chips { padding-bottom: 10px; }

/* ── 하단 고정 내비 ────────────────────────────────────────────────────── */
.m-bottom {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: flex; height: calc(64px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--bg-white); border-top: 1px solid var(--border);
}
.m-bottom a, .m-bottom button {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    border: 0; background: none; text-decoration: none; color: var(--text-500); font-size: 12px; font-weight: 600;
}
.m-bottom svg { width: 23px; height: 23px; }
.m-bottom .active { color: var(--primary); font-weight: 800; }

/* ── 카테고리 바텀시트(사이드바 import) ────────────────────────────────── */
.m-sheet-dim { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.45); display: none; }
.m-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: none;
    max-height: 76vh; overflow-y: auto; overscroll-behavior: contain;
    background: var(--bg-white); border-radius: 16px 16px 0 0;
    padding: 8px 0 calc(12px + env(safe-area-inset-bottom, 0px));
}
.m-sheet.open, .m-sheet-dim.open { display: block; }
.m-sheet-grip { width: 42px; height: 4px; margin: 6px auto 2px; border-radius: 2px; background: var(--border); }
.m-sheet-hd {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 18px 6px; font-size: 17px; font-weight: 800; color: var(--text-900);
}
.m-sheet-close { width: 44px; height: 44px; margin-right: -10px; border: 0; background: none; font-size: 22px; color: var(--text-500); }
.m-sheet-row {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 50px; padding: 0 18px; text-decoration: none;
    font-size: 16px; font-weight: 600; color: var(--text-700);
}
.m-sheet-row:active { background: var(--bg-gray); }
.m-sheet-row.active { color: var(--primary); font-weight: 800; }
.m-sheet-row .cnt { color: var(--text-400); font-size: 14px; }
.m-sheet-div { height: 8px; background: var(--bg-page); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin: 6px 0; background: var(--bg-gray); }
.m-sheet-label { padding: 10px 18px 4px; font-size: 13px; font-weight: 700; color: var(--text-400); }

/* ── 섹션(홈) ─────────────────────────────────────────────────────────── */
.m-sec { padding: 22px 0 4px; }
.m-sec-hd { display: flex; align-items: baseline; justify-content: space-between; padding: 0 14px 10px; }
.m-sec-title { font-size: 18px; font-weight: 800; color: var(--text-900); }
.m-sec-sub { font-size: 13px; color: var(--text-500); margin-top: 2px; }
.m-sec-link { font-size: 14px; font-weight: 600; color: var(--text-500); text-decoration: none; white-space: nowrap; }

/* 가로 카드 레일 — 한 화면에 2.2장(다음 카드가 살짝 보여 스크롤 어포던스) */
.m-row {
    display: flex; gap: 10px; overflow-x: auto; padding: 0 14px 10px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
}
.m-row::-webkit-scrollbar { display: none; }
.m-row > * { flex: 0 0 44vw; max-width: 44vw; scroll-snap-align: start; }

/* ── 서비스 카드(모바일 공통) ──────────────────────────────────────────── */
.m-card { display: block; text-decoration: none; min-width: 0; }
/* 박스 비율 = 서비스 썸네일 공식 규격 — 2026-10-13 운영 지시로 1200×900(4:3, svcform 크롭 에디터 강제, 종전 1200×480 2.5:1) · 모서리 직각. 5:3이던 시절의
   위아래 빈 공간·블러 배경 레이어(img.bg 2장 로드)는 2026-09-02 제거(마크업은 mnav mcard). */
.m-card-thumb {
    position: relative; aspect-ratio: 4 / 3; border-radius: 0; overflow: hidden;
    background: var(--primary-soft); border: 1px solid var(--border);
}
.m-card-thumb img.fg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.m-card-thumb .noimg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--primary); }
.m-card-title {
    margin-top: 7px; font-size: 14.5px; font-weight: 600; color: var(--text-900); line-height: 1.35;
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.m-card-meta { margin-top: 4px; display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text-500); }
.m-card-meta .star { color: #f59e0b; display: inline-flex; }
.m-card-meta .star svg { width: 13px; height: 13px; }
.m-card-price { margin-top: 3px; font-size: 15px; font-weight: 800; color: var(--text-900); }
.m-card .ad-tag { position: absolute; top: 6px; left: 6px; z-index: 2; font-size: 10px; font-weight: 700; letter-spacing: .5px; color: #fff; background: rgba(0,0,0,.45); border-radius: 4px; padding: 2px 5px; }

/* 목록 2열 그리드 */
.m-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 10px; padding: 4px 14px 16px; }

/* ── 정렬/필터 줄 ─────────────────────────────────────────────────────── */
.m-sortbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px 2px; }
.m-sortbar .total { font-size: 14px; color: var(--text-500); }
.m-sortbar select, .m-filterbar select {
    height: 38px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px;
    background: var(--bg-white); font-size: 14px; font-weight: 600; color: var(--text-700);
}
.m-filterbar { display: flex; gap: 8px; overflow-x: auto; padding: 8px 14px 0; scrollbar-width: none; }
.m-filterbar::-webkit-scrollbar { display: none; }

/* ── 배너(히어로·슬롯) ─────────────────────────────────────────────────── */
.m-hero { position: relative; margin: 8px 14px 0; }
.m-hero-track {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px;
    scrollbar-width: none; border-radius: 12px;
}
.m-hero-track::-webkit-scrollbar { display: none; }
.m-hero-slide {
    /* scroll-snap-stop: 스와이프를 길게 해도 한 번에 한 장만 넘어간다(2026-08-28 4차) */
    flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; position: relative;
    aspect-ratio: 2.2 / 1; border-radius: 12px; overflow: hidden;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 16px; text-decoration: none; background-color: var(--primary);
    background-size: cover; background-position: center;
}
.m-hero-slide .t { font-size: 18px; font-weight: 800; color: #fff; line-height: 1.3; }
.m-hero-slide .s { font-size: 13px; color: rgba(255,255,255,.85); margin-top: 4px; }
.m-hero-dots { display: flex; justify-content: center; gap: 5px; margin-top: 8px; }
.m-hero-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--border); }
.m-hero-dots span.on { background: var(--primary); }

.m-sba { display: flex; flex-direction: column; gap: 8px; margin: 12px 14px 0; }
.m-sba-row {
    position: relative; display: flex; flex-direction: column; justify-content: center;
    min-height: 74px; border-radius: 10px; overflow: hidden; padding: 12px 14px;
    text-decoration: none; background-color: var(--primary); background-size: cover; background-position: center;
}
.m-sba-row .t { font-size: 15px; font-weight: 700; color: #fff; }
.m-sba-row .s { font-size: 12.5px; color: rgba(255,255,255,.85); margin-top: 2px;
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }

/* ── 상세 공통 ─────────────────────────────────────────────────────────── */
.m-detail { padding: 0 0 90px; } /* 하단 CTA 바 높이만큼 여유 */
.m-detail-pad { padding: 0 14px; }
.m-detail-thumb { position: relative; aspect-ratio: 4 / 3; background: var(--primary-soft); overflow: hidden; }
.m-detail-thumb img { width: 100%; height: 100%; object-fit: cover; }
.m-detail-h1 { font-size: 20px; font-weight: 800; color: var(--text-900); line-height: 1.35; margin: 10px 0 6px; }
.m-detail-summary { font-size: 15px; color: var(--text-500); line-height: 1.6; }
.m-detail-sec { margin-top: 26px; }
.m-detail-sec-t { font-size: 17px; font-weight: 800; color: var(--text-900); margin-bottom: 10px; }
.m-seller-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); text-decoration: none; }
.m-seller-ava { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.m-seller-ava img { width: 100%; height: 100%; object-fit: cover; }
.m-seller-name { font-size: 15px; font-weight: 700; color: var(--text-900); display: flex; align-items: center; gap: 4px; }
.m-seller-stats { font-size: 13px; color: var(--text-500); margin-top: 1px; }

/* 플랜 선택 */
.m-plans { display: flex; gap: 8px; margin: 14px 0 10px; }
.m-plans button {
    flex: 1; min-height: 44px; padding: 8px 4px; border: 1.5px solid var(--border); border-radius: 10px;
    background: var(--bg-white); font-size: 15px; font-weight: 700; color: var(--text-700);
}
.m-plans button.on { border-color: var(--primary); background: var(--primary-bg); color: var(--primary); }
.m-plan-price { font-size: 22px; font-weight: 800; color: var(--text-900); }
.m-plan-desc { font-size: 14px; color: var(--text-500); line-height: 1.55; margin-top: 4px; }

/* 하단 고정 CTA 바(상세) — 바텀 내비 대신 이 바가 앉는다 */
.m-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    display: flex; gap: 8px; align-items: center;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--bg-white); border-top: 1px solid var(--border);
}
.m-cta .btn-fav { width: 48px; height: 48px; flex: 0 0 48px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-white); margin: 0; padding: 0; }
.m-cta-secondary {
    flex: 1; height: 48px; display: flex; align-items: center; justify-content: center; gap: 6px;
    border: 1px solid var(--primary); border-radius: 10px; background: var(--bg-white);
    font-size: 14.5px; font-weight: 700; color: var(--primary); text-decoration: none;
    white-space: nowrap; padding: 0 6px;
}
.m-cta-primary {
    flex: 1.3; height: 48px; display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 10px; background: var(--primary);
    font-size: 16px; font-weight: 800; color: #fff; text-decoration: none; cursor: pointer;
}

/* ── 의뢰 카드(목록) ───────────────────────────────────────────────────── */
.m-prj-card {
    display: flex; gap: 12px; padding: 14px; margin: 0 14px 10px;
    border: 1px solid var(--border); border-radius: 12px; text-decoration: none; background: var(--bg-white);
}
.m-prj-thumb { width: 84px; height: 84px; flex-shrink: 0; border-radius: 10px; overflow: hidden; background: var(--primary-soft); display: flex; align-items: center; justify-content: center; color: var(--primary); }
.m-prj-thumb img { width: 100%; height: 100%; object-fit: cover; }
.m-prj-title { font-size: 15px; font-weight: 700; color: var(--text-900); line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.m-prj-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 5px; }
.m-prj-badges span { font-size: 11.5px; border-radius: 4px; padding: 2px 6px; font-weight: 600; }
.m-prj-budget { font-size: 15px; font-weight: 800; color: var(--text-900); margin-top: 5px; }
.m-prj-meta { font-size: 12.5px; color: var(--text-400); margin-top: 4px; }

/* ── 빈 상태·페이지네이션·풋터 ─────────────────────────────────────────── */
.m-empty { text-align: center; padding: 60px 20px; color: var(--text-400); }
.m-empty h3 { font-size: 17px; font-weight: 700; color: var(--text-700); margin: 10px 0 6px; }
.m-empty p { font-size: 14px; }
.m-pager { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 14px 0 22px; }
.m-pager a {
    min-width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--border); border-radius: 10px; color: var(--text-700);
    font-size: 16px; font-weight: 700; text-decoration: none; padding: 0 14px;
}
.m-pager a.disabled { opacity: .35; pointer-events: none; }
.m-pager .m-pager-info { font-size: 15px; color: var(--text-500); }
.m-footer { margin-top: 30px; padding: 22px 18px; background: var(--bg-gray); font-size: 13px; color: var(--text-500); line-height: 1.7; }
.m-footer a { color: var(--text-700); font-weight: 600; text-decoration: none; }
.m-footer .pcver { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--primary); }

/* 데스크톱 잔재 방어 — 폴백이 아닌 m 템플릿에서 혹시 섞여 들어온 부품 폭 제한 */
.m-body img { max-width: 100%; }
.m-body .rich-body img { height: auto; }

/* ══════════════════════════════════════════════════════════════════════════
   /m 2차(2026-08-28) — 데스크톱 본문 임포트 화면(.m-import)
   마이·크리에이터 센터·고객센터·인증·의뢰 폼은 데스크톱 content 프래그먼트를 그대로 가져와
   모바일 셸로 감싼다(m/{view}.html 얇은 래퍼). 여기 오버라이드가 모바일 표시를 맡는다:
   레일 여백 토큰(--px) 축소 → var(--px)를 쓰는 전 컨테이너가 한 번에 좁아진다.
   ══════════════════════════════════════════════════════════════════════════ */
.m-import { --px: 14px; }
.m-import main { padding-top: 6px; overflow-x: clip; }
/* 데스크톱 좌측 사이드바는 숨긴다 — /my·/seller 허브의 .m-menu(아래)가 그 역할 */
.m-import .my-side { display: none; }
.m-import .my-layout { display: block; }
.m-import .my-main { min-width: 0; }
/* 넓은 표는 본문 대신 표 자신이 가로 스크롤 — 페이지 몸통 가로 스크롤 금지 원칙 */
.m-import main table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; max-width: 100%; }
/* 인라인 2열 그리드(찜/최근 채팅 등)는 한 열로 */
.m-import main [style*="1fr 1fr"] { grid-template-columns: 1fr !important; }
/* 인라인 flex 줄(필터·툴바 등)은 폭이 모자라면 눌러 찌그러뜨리지 말고 줄바꿈 —
   공간이 충분한 줄에는 no-op(정산 셀렉트 3개+엑셀 버튼이 세로로 꺾이던 것 보정) */
.m-import main [style*="display:flex"] { flex-wrap: wrap; }
/* 터치 폭 확보 — 폼 요소 최소 높이(데스크톱 컴팩트 입력 보정) */
.m-import main input[type="text"], .m-import main input[type="search"], .m-import main input[type="email"],
.m-import main input[type="password"], .m-import main input[type="number"], .m-import main select { min-height: 44px; }
/* 2026-10-16 운영 지시(글자 정렬): 위 44px 로 선택 상자가 글자보다 높아지면 base-select(Chromium 135+ — inline-flex)는 글자·화살표를 위에 붙인다
   (서비스 관리 상태·정산/판매 통계 연도·월·상태 실측 5~6px 위). 세로 가운데로 — 네이티브 셀렉트(Safari·Firefox)는 원래 가운데라 무영향 */
.m-import main select { align-items: center; }

/* ── 상단 비즈 토글(모바일 셸 공통 — 데스크톱 .nav-biz-switch/.nav-biz-slider 재사용) ── */
.m-biz { display: flex; align-items: center; gap: 5px; flex-shrink: 0; margin-right: 2px; cursor: pointer; }
.m-biz-label { font-size: 12.5px; font-weight: 800; color: var(--text-500); user-select: none; }

/* ── 허브 메뉴(/my·/seller — 사이드바 대체 리스트, 바텀시트 행 스타일 재사용) ── */
.m-menu { margin-top: 20px; border-top: 8px solid var(--bg-gray); padding: 8px 0 4px; }
.m-menu-btn { width: 100%; background: none; border: 0; font-size: 16px; font-weight: 600; color: var(--text-700); cursor: pointer; font-family: inherit; }
.m-menu .my-side-badge { margin-right: 4px; }

/* ══════════════════════════════════════════════════════════════════════════
   /m 허브·섹션 레일(§39-2 재정정, 2026-08-28) — '사이드바를 맨 밑 메뉴로'는 운영 지적으로 폐기.
   허브(/my·/seller)는 프로필/현황 컴팩트 + 메뉴 리스트가 본문, 서브 화면은 상단 가로 칩 레일
   (.m-navchips — 마켓 카테고리 칩과 동일 패턴)로 섹션 간 이동한다.
   ══════════════════════════════════════════════════════════════════════════ */
.m-hub { padding: 4px 14px 8px; }
.m-hub-profile { display: flex; align-items: center; gap: 12px; padding: 14px 2px 12px; }
.m-hub-ava {
    width: 54px; height: 54px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
    background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 800;
}
.m-hub-ava img { width: 100%; height: 100%; object-fit: cover; }
.m-hub-name { font-size: 18px; font-weight: 800; color: var(--text-900); display: flex; align-items: center; gap: 5px; min-width: 0; }
.m-hub-mail { font-size: 13.5px; color: var(--text-500); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-hub-edit {
    margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; height: 38px; padding: 0 12px;
    border: 1px solid var(--primary); border-radius: 9px; color: var(--primary);
    font-size: 13.5px; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.m-hub-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.m-hub-stat {
    display: block; border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px;
    background: var(--bg-white); text-decoration: none;
}
.m-hub-stat .n { display: block; font-size: 22px; font-weight: 800; color: var(--text-900); line-height: 1.2; }
.m-hub-stat .n.hot { color: #ef4444; }
.m-hub-stat .l { display: block; font-size: 13px; color: var(--text-500); margin-top: 2px; }
.m-hub-alert {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin-top: 10px; padding: 13px 14px; border-radius: 12px;
    background: var(--primary-bg); border: 1px solid rgba(7,15,84,.18);
    color: var(--primary); font-size: 14px; font-weight: 700; text-decoration: none;
}
/* 허브 메뉴 — 본문 리스트(전폭으로 벌려 시트 행 스타일 재사용) */
.m-hub .m-menu { margin: 16px -14px 0; border-top: 8px solid var(--bg-gray); padding: 6px 0 0; }

/* 크리에이터 센터 허브 전용 */
.m-hub-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 0 4px; }
.m-hub-h1 { font-size: 21px; font-weight: 800; color: var(--text-900); }
.m-hub-sub { font-size: 13.5px; color: var(--text-500); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-hub-newbtn {
    flex-shrink: 0; display: inline-flex; align-items: center; height: 40px; padding: 0 13px;
    background: var(--primary); border-radius: 9px; color: #fff;
    font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.m-todo { display: flex; gap: 8px; overflow-x: auto; padding: 8px 0 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.m-todo::-webkit-scrollbar { display: none; }
.m-todo a {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 13px;
    background: var(--bg-gray); border: 1px solid var(--border); border-radius: 18px;
    font-size: 13.5px; font-weight: 600; color: var(--text-400); text-decoration: none; white-space: nowrap;
}
.m-todo a strong { font-weight: 800; }
.m-todo a.on-red { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.m-todo a.on-amber { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.m-todo a.on-navy { background: var(--primary-bg); color: var(--primary); border-color: rgba(7,15,84,.25); }
.m-payout { display: block; background: var(--primary); border-radius: 12px; padding: 15px 16px; text-decoration: none; }
.m-payout .l { display: block; font-size: 13.5px; color: rgba(255,255,255,.85); }
.m-payout .n { display: block; font-size: 26px; font-weight: 800; color: #fff; margin-top: 3px; }
.m-payout .go { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 700; color: #fff; border: 1px solid rgba(255,255,255,.5); border-radius: 8px; padding: 5px 10px; }

/* 섹션 칩 레일(서브 화면) — 2026-10-14 부터 마이·크리에이터 센터는 아래 .m-dd 드롭다운. .m-navchips 는 개발자 센터 레일(developer/layout)이 아직 쓴다 */
.m-navchips { border-bottom: 1px solid var(--border); }

/* ── 섹션·카테고리 드롭다운(2026-10-14 운영 지시 — 마이페이지·크리에이터 센터·AI 서비스·커뮤니티의 칩 레일을 셀렉트로) ──
   네이티브 <select>(휴대폰 OS 선택기·접근성·터치 44px), 값 = 이동할 주소. 글자는 검정 램프, 테두리만 네이비.
   화살표는 사이트 전역 맞춤 셀렉트(nexa.css appearance:base-select — Chromium 의 ::picker-icon)를 그대로 쓰고, base-select 가 없는 브라우저(Safari·Firefox)만
   네이티브 화살표를 지우고 우리 화살표(SVG 배경)를 그린다 — 둘을 겹쳐 그리면 화살표가 두 개 보인다(2026-10-14 실측). */
.m-dd { display: block; position: relative; min-width: 0; }
.m-dd-select {
    width: 100%; height: 44px; padding: 0 14px; border: 1px solid var(--border); border-radius: 10px;
    background: var(--bg-white); font-size: 15px; font-weight: 700; color: var(--text-900); font-family: inherit;
    align-items: center; cursor: pointer;
}
@supports not (appearance: base-select) {
    .m-dd-select {
        -webkit-appearance: none; appearance: none; padding-right: 40px;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23070f54' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
        background-repeat: no-repeat; background-position: right 12px center; background-size: 18px 18px;
    }
}
.m-dd-select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(7,15,84,.10); }
.m-dd-sticky { position: sticky; top: 52px; z-index: 40; background: var(--bg-white); border-bottom: 1px solid var(--border); padding: 8px 14px 10px; }
.m-dd-row { display: flex; flex-wrap: wrap; gap: 8px; }
.m-dd-row .m-dd { flex: 1 1 150px; }
.m-dd.cm-dd { margin: 0 0 12px; }
.m-import .cm-dd .m-dd-select { min-height: 44px; }

/* ══════════════════════════════════════════════════════════════════════════
   4차(2026-08-28) — 운영 피드백 15건 반영
   ══════════════════════════════════════════════════════════════════════════ */
/* ② 홈 카드 레일 왼쪽 여백 +4px(운영 지시 3~5px).
   scroll-padding: 스크롤 스냅(scroll-snap-align: start)은 카드를 스냅포트(패딩 박스) 왼쪽 끝에 맞추므로 padding-left 만으로는
   첫 카드가 로드 직후 scrollLeft=18 로 스냅돼 화면 왼쪽에 붙었다(2026-09-16 운영 지적, 폰 실측). 스냅포트에도 같은 여백을 준다. */
.m-row { padding-left: 18px; scroll-padding-left: 18px; scroll-padding-right: 14px; }
/* ③ 상단바 KR/EN 셀렉트 */
.m-lang {
    height: 32px; padding: 0 4px; margin-right: 2px; flex-shrink: 0;
    border: 1px solid var(--border); border-radius: 8px; background: var(--bg-white);
    font-size: 12.5px; font-weight: 700; color: var(--text-700);
}
/* ④ 채팅방 '← 목록' 링크 제거 — 상단바 뒤로가기가 그 역할 */
.m-chatroom .chat-back { display: none; }
/* ⑤ 채팅 목록 검색 줄 — 전폭 + 우측 검색 버튼(마크업은 my/chat.html chat-search-wrap) */
.m-import .chat-search-wrap { width: 100%; margin-left: 0; margin-top: 4px; display: flex; align-items: center; gap: 8px; }
.m-import .chat-search { flex: 1; min-width: 0; width: auto; margin-left: 0; min-height: 44px; }
.m-import .chat-search-btn { width: 44px; height: 44px; flex: 0 0 44px; border: 0; border-radius: 50%; background: var(--primary); display: inline-flex; align-items: center; justify-content: center; }
/* ⑥ (폐지 2026-09-15) '← 크리에이터 센터' 링크는 데스크톱 템플릿 8곳에서 아예 삭제됐다 — 모바일 숨김 규칙 불필요 */
/* ⑦ 결제(체크아웃) — 주문정보/결제금액 1열 스택, 금액 카드 sticky 해제, 하단 탭 없음 보정 */
.m-checkout { padding-bottom: 24px; }
.m-import main [style*="1fr 300px"] { grid-template-columns: 1fr !important; }
.m-checkout main [style*="position:sticky"] { position: static !important; }
/* ⑧ 구매내역 — 금액·상태·구매 확정/환불 버튼 왼쪽 정렬(훅은 my/orders.html).
   ⚠ !important 필수(5차 교정): 훅 요소들의 인라인 style(text-align:right 등)이 클래스 규칙을
   이겨 이 줄이 무효였다 — 인라인 스타일 훅을 덮을 땐 반드시 !important. */
.m-import .order-right { text-align: left !important; }
.m-import .order-actions { justify-content: flex-start !important; }
/* ⑨ 찜 카테고리 필터 — 2026-10-16 부터 드롭다운 3단(.fav-cat-form, nexa.css 가 좁은 화면 배치까지 가짐) — /m 전용 규칙 없음(종전 칩 레일 규칙 삭제) */
/* ⑩ 상세 CTA 하트 — htmx 교체 응답(데스크톱형 버튼: 아이콘+라벨)이 와도 아이콘 전용 48px 유지 */
.m-cta .btn-fav { font-size: 0; gap: 0; }
.m-cta .btn-fav svg, .m-cta .btn-fav .ic { width: 22px; height: 22px; }
/* ⑪ 광고 센터 '구매 전환' 블록 왼쪽 정렬(훅은 seller/ads.html) */
.m-import .adc-conv { text-align: left !important; }
.m-import .adc-conv .adc-kpi-note { max-width: none !important; }
/* ⑫ 등록 폼 선택 카드(과금 방식·가격 구조)·제출 줄 — 두 그룹 모두 세로 스택으로 통일 */
.m-import .form-choice-row { flex-direction: column; flex-wrap: nowrap; }
/* ⑭ 인라인 flex 라벨(라디오+문구) — 문구가 라디오 아래로 떨어지지 않게(줄바꿈은 문구 내부에서) */
.m-import main label[style*="display:flex"] { flex-wrap: nowrap; }
/* ⑮ 의뢰 등록/취소 버튼 — 폭 축소 + 상하·좌우 중앙 정렬(훅은 projects/new.html).
   5차(2026-09-02): 160px도 넓다는 피드백 → 120px(문구+여백이 들어가는 최소선). */
.m-import .prjn-actions { justify-content: center; }
.m-import .prjn-actions > * {
    flex: 0 1 120px !important; min-height: 48px; margin: 0 !important;
    padding-left: 10px !important; padding-right: 10px !important; white-space: nowrap;
    display: inline-flex; align-items: center; justify-content: center;
}

/* ══════════════════════════════════════════════════════════════════════════
   5차(2026-09-02) — 운영 피드백 후속 5건
   ══════════════════════════════════════════════════════════════════════════ */
/* ① 홈 섹션 머리글도 +4px — 4차 ②가 카드 레일(.m-row 18px)만 옮겨 섹션 왼쪽 라인(제목 14px)이
   그대로였고, 눈에 띄는 건 제목 쪽이라 "적용 안 됨"으로 보였다. 제목·부제를 카드와 같은 18px로. */
.m-sec-hd { padding-left: 18px; }
/* ② 구매내역 — 우측 열(금액·상태)이 오른쪽에 뜬 채 내부만 왼쪽 정렬돼 어색하던 것(4차 ⑧ 후속):
   카드 전체를 세로 스택으로 바꿔 날짜·제목·금액·상태·주문번호·링크·버튼이 전부 왼쪽 한 라인에 붙는다. */
.m-import .order-head { flex-direction: column; align-items: stretch !important; gap: 8px; }
.m-import .order-foot { flex-direction: column; align-items: flex-start !important; }
.m-import .order-acts { align-items: flex-start !important; }
.m-import .order-links { justify-content: flex-start !important; }

/* ── 채팅방(.m-chatroom) — 상단바 52px 아래를 대화창이 꽉 채운다(입력창이 하단) ── */
.m-chatroom { padding-bottom: 0; }
.m-chatroom main { padding: 0 !important; }
.m-chatroom .chat-shell { margin: 0; }
.m-chatroom .chat-page-wrap {
    margin: 0 !important; border: 0; border-radius: 0;
    height: calc(100vh - 52px);
    height: calc(100dvh - 52px);
}

/* ══════════════════════════════════════════════════════════════════════════
   PC 에서 모바일 버전 보기(2026-10-14 운영 지시) — 데스크톱 푸터 [모바일 버전으로 보기] = NEXA_VIEW=mobile 쿠키(MobileWebFilter).
   넓은 창에서는 휴대폰 폭(480px) 틀을 가운데 두고 바깥은 회색 — 고정 요소(하단 탭·상세 CTA·바텀시트)도 같은 폭·같은 가운데로,
   레일 카드의 vw 폭은 틀 폭 기준 px 로. 휴대폰(≤767px)에서는 아무것도 바뀌지 않는다.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
    html:has(> body.m-body) { background: var(--bg-gray); }
    body.m-body { max-width: 480px; margin: 0 auto; min-height: 100vh; box-shadow: 0 0 0 1px var(--border), 0 12px 40px rgba(7,15,84,.10); }
    .m-bottom, .m-cta, .m-sheet { left: 50%; right: auto; width: 100%; max-width: 480px; transform: translateX(-50%); }
    .m-row > * { flex-basis: 211px; max-width: 211px; }
}

/* ── 모바일 상세 공유 버튼(2026-10-14 운영 지시) — 아이콘만 40px, 토스트는 하단 CTA 바 위 ── */
.m-detail-h1-row { display: flex; align-items: flex-start; gap: 8px; }
.m-detail-h1-row .m-detail-h1 { flex: 1 1 auto; min-width: 0; }
.m-share { width: 40px; height: 40px; padding: 0; margin-top: 8px; justify-content: center; border-radius: 10px; }
.m-share .svc-share-label { display: none; }
.m-share .ic { font-size: 20px; }
.m-body .nexa-toast { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }

/* ── 모바일 카드 하단(2026-10-14 운영 지시, m.css v13) — 제목 / 크리에이터명+인증 마크 / 가격 / 별점 ── */
.m-card-seller { margin-top: 4px; display: flex; align-items: center; gap: 3px; min-width: 0; font-size: 12.5px; color: var(--text-500); line-height: 1.4; }
.m-card-seller-name { word-break: keep-all; overflow-wrap: anywhere; }
.m-card-free { color: var(--primary); }
.m-card-meta { margin-top: 2px; }

/* ── 한국어 줄바꿈(2026-10-14 운영 지시, m.css v14) — 전역 규칙은 nexa.css v144(body keep-all·break-word·pretty, 제목 balance, 입력 stable).
   모바일 카드·상세·의뢰 제목과 메타는 사용자 입력이라 띄어쓰기 없는 긴 문자열이 와도 칸을 밀지 않게 anywhere(flex/grid 칸의 min-width:auto 보호). ── */
.m-card-title, .m-detail-h1, .m-prj-title, .m-sec-title, .m-hub-h1, .m-hub-name, .m-sba-row .t, .m-sba-row .s { overflow-wrap: anywhere; }
/* 크리에이터 공개 프로필 머리(seller/public 임포트) — 아바타 | 정보 | 채팅 버튼 한 줄이 휴대폰에선 정보 칸을 눌러 소개문이 글자 단위로 쌓였다(2026-10-14 실측) → 줄바꿈 */
.m-import .spub-head { flex-wrap: wrap; gap: 16px; padding: 20px; }
.m-import .spub-info { flex: 1 1 200px; }
.m-import .spub-cta { flex: 1 1 100%; }
.m-import .spub-cta .btn-primary { width: 100%; }

/* 2026-10-14 운영 지시(2차): /m 마켓 카드 하단 = 크리에이터명 → 별점 → 가격(mnav mcard 순서), 색은 PC 목록·홈 카드와 같은 토큰(nexa.css :root) */
.m-card-seller { color: var(--ux-color-ink); }
.m-card-meta { margin-top: 2px; }
.m-card-price { margin-top: 2px; color: var(--text-muted); }

/* ══════════════════════════════════════════════════════════════════════════
   2026-10-15 운영 지시(m.css v16) — ① 커뮤니티 /m 한 줄([내 활동][글쓰기] · 정렬 드롭다운) ② 마이·크리에이터 센터 섹션 드롭다운 삭제(mnav mymenu/sellermenu 폐지)
   ③ 크리에이터 센터 표 → 카드 ④ 크리에이터 인증 안내·광고 신청 한 열
   ══════════════════════════════════════════════════════════════════════════ */
/* ① 커뮤니티 목록 한 줄 — 왼쪽 [내 활동][글쓰기](44px), 오른쪽 정렬 드롭다운(.m-dd — margin-left:auto 로 거리를 둔다). 검색 줄 아래·목록 위 */
.m-import .cm-mrow { display: flex; align-items: center; gap: 8px; width: 100%; margin: 2px 0 4px; }
.m-import .cm-mrow .cm-mine-link, .m-import .cm-mrow .cm-write { width: auto; flex: 0 0 auto; height: 44px; min-height: 44px; margin: 0; padding: 0 16px; font-size: 15px; line-height: 1; box-sizing: border-box; }
.m-import .cm-mrow .cm-sort-dd { flex: 0 1 150px; min-width: 116px; margin-left: auto; padding-left: 12px; }
/* ③ 표 → 카드(.my-main 안의 머리글 있는 표 = 크리에이터 센터 관리 표·광고 센터 표 — 개발자 센터·고객센터 표는 제외).
   thead 를 숨기고 행 = 카드, 셀 = "라벨 | 값" 한 줄(라벨은 mnav mfooter 스크립트가 thead 글자를 data-th 로 붙인다 — attr()).
   제목 칸(.m-tc-title)은 라벨 없이 굵게 첫 줄, 병합 칸(colspan)·라벨 없는 칸은 전폭. 인라인 style(여백·가운데 정렬·nowrap·max-width)을 덮으므로 !important.
   ⚠ :has(thead) 는 Chromium 105·Safari 15.4·Firefox 121 부터 — 그 전 브라우저는 종전 가로 스크롤 표(위 .m-import main table)로 남는다 */
.m-import .my-main table:has(thead) { display: block; width: 100%; max-width: 100%; min-width: 0 !important; white-space: normal; overflow: visible; }
.m-import .my-main table:has(thead) thead { display: none; }
.m-import .my-main table:has(thead) tbody { display: block; }
.m-import .my-main table:has(thead) tr { display: block; padding: 12px 14px; border-top: 1px solid var(--border) !important; border-bottom: 0 !important; background: var(--bg-white); }
.m-import .my-main table:has(thead) tbody tr:first-child { border-top: 0 !important; }
.m-import .my-main table:has(thead) tr[hidden] { display: none; }
.m-import .my-main table:has(thead) td {
    display: block; position: relative; min-height: 22px; padding: 3px 0 3px 96px !important; border: 0 !important;
    text-align: right !important; white-space: normal !important; width: auto !important; max-width: none !important; min-width: 0 !important;
    font-size: 15px; line-height: 1.5; color: var(--text-700); overflow-wrap: anywhere;
}
.m-import .my-main table:has(thead) td::before {
    content: attr(data-th); position: absolute; left: 0; top: 3px; width: 86px; text-align: left;
    font-size: 13px; font-weight: 600; color: var(--text-400); line-height: 1.6; white-space: normal;
}
.m-import .my-main table:has(thead) td:not([data-th]), .m-import .my-main table:has(thead) td[colspan] { padding-left: 0 !important; text-align: left !important; }
.m-import .my-main table:has(thead) td:not([data-th])::before, .m-import .my-main table:has(thead) td[colspan]::before { display: none; }
.m-import .my-main table:has(thead) td.m-tc-title { padding: 0 0 8px !important; text-align: left !important; font-size: 16px; font-weight: 700; color: var(--text-900); }
.m-import .my-main table:has(thead) td.m-tc-title::before { display: none; }
.m-import .my-main table:has(thead) .adc-ellip { display: inline; max-width: none; white-space: normal; }
/* 판매 주문: 처리 버튼은 값 자리(오른쪽)에 나란히, 환불 상세(.so-sub, 7칸 병합)는 전폭 */
.m-import .my-main table:has(thead) .so-act form { display: inline-block; }
.m-import .my-main table:has(thead) .so-btn { display: inline-block; width: auto; margin: 0 0 0 6px; padding: 7px 12px; }
.m-import .my-main table:has(thead) .so-sub td { padding: 0 !important; }
/* 포트폴리오 대표 이미지 칸 — 값 자리(오른쪽)에 */
.m-import .my-main table:has(thead) .pf-cell-thumb { margin: 0 0 0 auto; }
/* 광고 센터 지갑의 거래·환불 내역(.adc-table-compact — 머리글 없는 4칸): 2줄 카드 = 내역 | 금액 / 일시 | 잔액(상태 | 비고) */
.m-import .adc-table-compact { display: block; white-space: normal; }
.m-import .adc-table-compact tbody { display: block; }
.m-import .adc-table-compact tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--bg-gray); }
.m-import .adc-table-compact td { display: block; padding: 0 !important; width: auto !important; white-space: normal; text-align: left; font-size: 15px; overflow-wrap: anywhere; }
.m-import .adc-table-compact td:nth-child(1) { order: 3; font-size: 13px; }
.m-import .adc-table-compact td:nth-child(2) { order: 1; }
.m-import .adc-table-compact td:nth-child(3) { order: 2; text-align: right; white-space: nowrap; }
.m-import .adc-table-compact td:nth-child(4) { order: 4; text-align: right; font-size: 13px; }
/* ④ 크리에이터 인증 안내(support/cert-creator — certpg-* 훅): 히어로·2열 카드·절차 4칸 모두 한 열, 카드 여백 축소 */
.m-import .certpg-hero { grid-template-columns: 1fr !important; gap: 18px !important; padding: 24px 18px !important; }
.m-import .certpg-hero h1 { font-size: 26px !important; }
.m-import .certpg-2col, .m-import .certpg-steps, .m-import main [style*="repeat(2, 1fr)"] { grid-template-columns: 1fr !important; }
.m-import main [style*="padding:28px 32px"] { padding: 20px 18px !important; }
/* ④ 광고 신청(seller/ads-cpc): 상품 라디오 두 장 세로, 입력칸 전폭(종전 140~170px 고정 폭 → 한 열) */
.m-import .adc-type-row { flex-direction: column; }
.m-import .adc-apply-fields .adc-field { flex: 1 1 100% !important; align-items: stretch; text-align: left; }
.m-import .adc-apply-fields .adc-input { width: 100% !important; box-sizing: border-box; }
.m-import .adc-apply-fields > .adc-btn { width: 100%; }

/* ══════════════════════════════════════════════════════════════════════════
   2026-10-15 운영 지시 2차(m.css v17) — ① 서비스 관리 카드: 결제 방식 배지 오른쪽·요약 숨김 ② 옆으로 넘기는 레일(table.m-rail — 서비스 관리·판매 통계 3·포트폴리오·내 광고,
   .adc-card-grid 광고 상품 안내 4카드·.adc-cmp-grid CPC/배너 상단 비교 카드 2) + 점 표시(.m-rail-dots — mnav mfooter 스크립트) ③ 10개씩 페이저(table[data-m-page] —
   판매 주문·정산 내역, 같은 스크립트) ④ 포트폴리오 카드 대표 이미지 맨 위
   ══════════════════════════════════════════════════════════════════════════ */
/* ① 서비스 관리 — 결제 방식 배지는 제목 아래 오른쪽 끝(종전 가운데), 요약 설명은 휴대폰에서 숨김 */
.m-import #ssTable .ss-mline { justify-content: flex-end; margin-top: 6px; }
.m-import #ssTable .ss-summary { display: none; }
/* ② 표 레일 — tbody 가 가로 스크롤 상자, 행 = 카드 한 장(폭 = 상자 - 36px: 다음 카드가 살짝 보여 넘김 어포던스), 스냅은 한 장씩(scroll-snap-stop).
   페이지 몸통은 움직이지 않는다(tbody 만 스크롤, overscroll-behavior contain). 카드 안 셀은 위 카드 규칙(라벨 | 값) 그대로 */
.m-import .my-main table.m-rail:has(thead) tbody {
    display: flex; flex-wrap: nowrap; align-items: stretch; gap: 10px;
    overflow-x: auto; overscroll-behavior-x: contain; padding: 12px 14px;
    scroll-snap-type: x mandatory; scroll-padding: 0 14px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.m-import .my-main table.m-rail:has(thead) tbody::-webkit-scrollbar { display: none; }
.m-import .my-main table.m-rail:has(thead) tr {
    flex: 0 0 calc(100% - 36px); max-width: calc(100% - 36px); box-sizing: border-box;
    scroll-snap-align: start; scroll-snap-stop: always;
    padding: 14px; border: 1px solid var(--border) !important; border-radius: 12px; background: var(--bg-white);
}
.m-import .my-main table.m-rail:has(thead) tbody tr:first-child { border-top: 1px solid var(--border) !important; }
.m-import .my-main table.m-rail:has(thead) tbody tr:only-child { flex-basis: 100%; max-width: 100%; }
.m-import .my-main table.m-rail:has(thead) tr[hidden], .m-import .my-main table.m-rail:has(thead) tr.adv-off { display: none; }
/* 레일 점 — 홈 히어로(.m-hero-dots)와 같은 6px 점, 현재 장은 네이비 알약. 11장 이상은 "3 / 20" 숫자(mnav 스크립트).
   2026-10-16 후속: 점 줄 = [이전][점 .m-rail-pips][다음] — 넘김 버튼(44px 터치)이 줄 양옆에 들어와 줄 높이 44px */
.m-rail-dots { display: flex; justify-content: center; align-items: center; gap: 12px; min-height: 44px; padding: 0 14px 6px; }
.m-rail-dots[hidden] { display: none; }
.m-rail-pips { display: inline-flex; align-items: center; gap: 5px; }
.m-rail-pips > span { width: 6px; height: 6px; border-radius: 3px; background: var(--border); transition: width .15s, background-color .15s; }
.m-rail-pips > span.on { width: 16px; background: var(--primary); }
.m-rail-pips > .m-rail-n { width: auto; height: auto; border-radius: 0; background: none; font-size: 12px; font-weight: 600; color: var(--text-500); }
/* 광고 센터 카드 레일 — 광고 상품 안내 4카드(.adc-card-grid)·CPC/배너 상단 비교 카드(.adc-cmp-grid): 그리드 → 가로 한 줄, 본문 여백(--px)까지 물려 화면 끝에 닿는다.
   인라인 gap·그리드 열은 !important 로 덮는다. hover 미리보기 패널·탭(.adc-pv-*)은 레일에서 뺀다(intro 스크립트도 .m-import 면 비활성). 카드 리빌 지연은 레일에서 없앤다 */
.m-import .adc-card-grid, .m-import .adc-cmp-grid {
    display: flex !important; flex-wrap: nowrap; align-items: stretch; gap: 10px !important; grid-template-columns: none;
    overflow-x: auto; overscroll-behavior-x: contain; margin-left: calc(-1 * var(--px)); margin-right: calc(-1 * var(--px)); padding: 4px var(--px) 8px;
    scroll-snap-type: x mandatory; scroll-padding: 0 var(--px); scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.m-import .adc-card-grid::-webkit-scrollbar, .m-import .adc-cmp-grid::-webkit-scrollbar { display: none; }
.m-import .adc-card-grid > .adc-card, .m-import .adc-cmp-grid > .adc-cmp-card {
    flex: 0 0 calc(100% - 36px); box-sizing: border-box; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always;
}
.m-import .adc-card-grid > .adc-card.adc-reveal { opacity: 1; transform: none; transition-delay: 0s; }
.m-import .adc-card-grid > .adc-pv-tabs, .m-import .adc-card-grid > .adc-pv-panel { display: none !important; }
.m-import .adc-card-grid + .m-rail-dots, .m-import .adc-cmp-grid + .m-rail-dots { padding: 0 0 2px; margin-bottom: 10px; }
/* ③ 10개씩 페이저(table[data-m-page] — 판매 주문·정산 내역): 쪽 밖의 행은 숨김, 페이저는 표 상자 아래(.pagination 공용 모양, 터치 40px) */
.m-import .my-main tr.m-pg-off { display: none !important; }
.m-import .m-pager { padding: 14px 0 2px; gap: 6px; }
.m-import .m-pager .pg-btn { min-width: 40px; height: 40px; }
/* ④ 포트폴리오 레일 카드 — 대표 이미지는 라벨 없이 카드 맨 위 전폭(PC 96×60 과 같은 8:5 비율) */
.m-import .my-main table.m-rail:has(thead) td.pf-m-cover { padding: 0 0 10px !important; text-align: left !important; }
.m-import .my-main table.m-rail:has(thead) td.pf-m-cover::before { display: none; }
.m-import .my-main table.m-rail:has(thead) .pf-cell-thumb { width: 100%; height: auto; aspect-ratio: 8 / 5; margin: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   2026-10-16 운영 지시(m.css v18) — ① 레일 넘김 아이콘 + 효과(.m-rail-wrap/.m-rail-prev/.m-rail-next — mnav mfooter 스크립트가 레일을 감싸고 붙인다)
   ② 포트폴리오 카드 [수정][삭제] 44px 버튼(td.pf-m-actions)
   ══════════════════════════════════════════════════════════════════════════ */
/* ① (같은 날 후속: 버튼은 카드 위 absolute 에서 점 줄 양옆(static)으로 — 둘째 장부터 '이전' 원이 라벨 글자를 가렸다. 아래 left/right·top 규칙은 무효화)
   레일을 감싸는 상자(스크립트가 만든다) — 넘김 아이콘의 absolute 기준. 표 레일(.m-rail-wrap-table)은 흰 상자 안, 카드 묶음 레일(.m-rail-wrap-grid)은
   호스트가 본문 여백(--px)까지 물려 있어 아이콘도 그만큼 바깥(화면 끝 6px 안쪽)에 둔다. 아이콘 = 44px 터치 면 + 34px 흰 원(테두리·그림자) + 셰브론.
   다음 아이콘만 1.6초 간격으로 살짝 밀리는 넛지(옆으로 넘길 수 있다는 신호) — 모션 축소 설정이면 멈춤. 마지막 장(다음 없음)·첫 장(이전 없음)은 숨김([hidden]). */
.m-import .m-rail-wrap { position: relative; }
.m-import .m-rail-prev, .m-import .m-rail-next {
    position: absolute; top: 50%; z-index: 3; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center; color: var(--primary); transform: translateY(-50%);
    -webkit-tap-highlight-color: transparent;
}
/* 점 줄 안 배치(후속) — absolute 해제, 끝 장 버튼은 자리만(.is-off) */
.m-import .m-rail-dots > .m-rail-prev, .m-import .m-rail-dots > .m-rail-next { position: static; transform: none; flex: 0 0 44px; }
.m-import .m-rail-dots > .is-off { visibility: hidden; }
.m-import .m-rail-prev > span, .m-import .m-rail-next > span {
    display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; box-sizing: border-box;
    background: var(--bg-white); border: 1px solid var(--border); box-shadow: 0 2px 8px rgba(7, 15, 84, .14);
}
.m-import .m-rail-prev svg, .m-import .m-rail-next svg { width: 20px; height: 20px; display: block; }
.m-import .m-rail-next > span { animation: mRailNudge 1.6s ease-in-out infinite; }
.m-import .m-rail-prev:active > span, .m-import .m-rail-next:active > span { background: var(--primary-bg); }
@keyframes mRailNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .m-import .m-rail-next > span { animation: none; } }
/* ② 포트폴리오 카드 — 관리 칸은 라벨 없이 전폭, [수정](네이비 외곽선)·[삭제](빨간 외곽선, #dc2626 = .tbl-del-btn 글자색) 44px 버튼 반반.
   인라인 style(가운데 정렬·gap 12·링크 글자색)을 덮으므로 !important */
.m-import .my-main table.m-rail:has(thead) td.pf-m-actions { padding: 10px 0 0 !important; text-align: left !important; }
.m-import .my-main table.m-rail:has(thead) td.pf-m-actions::before { display: none; }
.m-import .pf-m-actions .pf-actions { display: flex; justify-content: stretch !important; align-items: stretch !important; gap: 8px !important; }
.m-import .pf-m-actions .pf-actions > a, .m-import .pf-m-actions .pf-actions > form { flex: 1 1 0; min-width: 0; margin: 0; }
.m-import .pf-m-actions .pf-actions > a, .m-import .pf-m-actions .pf-actions .tbl-del-btn {
    display: flex !important; align-items: center; justify-content: center; width: 100%; height: 44px; box-sizing: border-box;
    border-radius: 10px; font-size: 15px !important; font-weight: 700; line-height: 1 !important; text-decoration: none !important;
}
.m-import .pf-m-actions .pf-actions > a { border: 1px solid var(--primary); color: var(--primary) !important; background: var(--bg-white); }
.m-import .pf-m-actions .pf-actions .tbl-del-btn { border: 1px solid #fecaca; color: #dc2626; background: var(--bg-white); }
.m-import .pf-m-actions .pf-actions > a:active { background: var(--primary-bg); }
.m-import .pf-m-actions .pf-actions .tbl-del-btn:active { background: #fee2e2; }

/* ══════════════════════════════════════════════════════════════════════════
   2026-10-16 운영 지시 2차(m.css v19) — 판매 주문 '처리' 도움말: /m 은 표 머리글이 없으니(카드) 제목 옆 ? 버튼(.so-help-m)을 켠다. PC 는 th 의 ? 만
   ══════════════════════════════════════════════════════════════════════════ */
.m-import .so-help-m { display: inline-flex; margin-left: 8px; vertical-align: middle; }

/* ══════════════════════════════════════════════════════════════════════════
   2026-10-16 운영 지시(m.css v20) — 모바일 크리에이터 센터 '배경 모양이 있는 글자' 정렬
   ① 선택 상자 글자 세로 가운데(위 '터치 폭 확보' 규칙 아래 .m-import main select) ② 카드 칸 라벨 ↔ 값 첫 줄 기준선(아래) ③ 판매 주문 선택 탭 테두리(템플릿)
   ══════════════════════════════════════════════════════════════════════════ */
/* ② 카드 칸(td[data-th]) — 종전 라벨(::before)은 칸 맨 위(top:3px)에 절대 배치라, 값이 배지·버튼·선택 상자처럼 줄보다 높거나 글자가 크면
   라벨이 값보다 2~13px 위에 떴다(실측: 상태 배지 3~5px, 처리 버튼 7.6px, 서비스 상태 선택 상자 12.6px). mnav mfooter 스크립트가 값을 span.m-tc-v 로 감싸고
   칸에 .m-tc-kv 를 붙이면 칸을 flex 로 — 라벨(86px)과 값이 '첫 줄 글자 기준선'에 맞춰 선다(값이 여러 줄이면 라벨은 첫 줄과). 간격 10px·오른쪽 정렬은 종전과 같다.
   스크립트가 돌지 않으면(.m-tc-kv 없음) 종전 배치 그대로 */
.m-import .my-main table:has(thead) td.m-tc-kv { display: flex; align-items: baseline; gap: 10px; padding-left: 0 !important; }
.m-import .my-main table:has(thead) td.m-tc-kv::before { position: static; flex: 0 0 86px; }
.m-import .my-main table:has(thead) td.m-tc-kv > .m-tc-v { flex: 1 1 auto; min-width: 0; text-align: right; }