/* ============================================================ seller.css — AI셀러봇 판매사 화면 디자인 토큰 + 컴포넌트 대상: src/front (Express + Handlebars + jQuery) main.hbs 에서 bootstrap.min.css 뒤에 로드한다. ============================================================ */ @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"); :root { /* 무채색 */ --ink: #191F28; /* 본문 강조, 기본 버튼 배경 */ --sub: #4E5968; /* 보조 텍스트 */ --muted: #6B7684; /* 설명 텍스트 */ --faint: #8B95A1; /* 라벨, 날짜 */ --bg: #F7F8F9; /* 페이지 배경 */ --surface: #FFFFFF; /* 카드 배경 */ --fill: #F1F3F5; /* 세컨더리 버튼/선택 배경 */ --border: #E5E8EB; /* 카드 보더 */ --border-soft: #F1F3F5; /* 행 구분선 */ --border-strong: #D9DCE0;/* 입력/버튼 보더 */ /* 상태색 (최소 사용) */ --green: #0E8A45; --green-bg: #EAF6EF; /* 완료/자동관리/연동중 */ --red: #D6403A; --red-bg: #FDF3F2; --red-border: #F3D6D4; /* 오류/용량 임박 */ --amber: #B8860B; --amber-bg: #FBF3E0; /* 대기중 */ --blue: #3161D1; --blue-bg: #E8F0FE; /* 작업중, 링크 */ /* 마켓 브랜드 도트 */ --dot-smartstore: #03C75A; --dot-coupang: #F0563A; --dot-gmarket: #00BF3C; --dot-elevenst: #FF0038; --dot-auction: #E62E2E; --dot-toss: #3182F6; --radius-card: 12px; --radius-btn: 8px; --radius-pill: 20px; } body.seller-v2 { margin: 0; font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 13px; line-height: 1.5; background: var(--bg); color: var(--ink); min-width: 0; } .seller-v2 a { color: var(--blue); text-decoration: none; } .seller-v2 a:hover { color: #254CAB; text-decoration: none; } .seller-v2 * { box-sizing: border-box; } .seller-v2 h1, .seller-v2 h2, .seller-v2 h3, .seller-v2 h4 { font-family: inherit; color: var(--ink); margin: 0; } /* 레거시 테마(style.css) 잔재 무력화 — 광고 등록 등 구화면 호환용 */ .seller-v2 #page-wrapper { margin-left: 0; padding: 0; background: transparent; min-height: 0; } .seller-v2 .white-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 18px; } /* ---------- 상단 네비 (데스크탑) ---------- */ .sv-topnav { display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 24px; background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; } .sv-topnav .nav-left { display: flex; align-items: center; gap: 28px; min-width: 0; } .sv-topnav .nav-brand { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .sv-topnav .nav-brand img { height: 22px; width: auto; } .sv-topnav .nav-brand span { font-size: 16px; font-weight: 800; color: var(--ink); white-space: nowrap; } .sv-topnav .nav-links { display: flex; gap: 4px; font-size: 14px; font-weight: 600; } .sv-topnav .nav-links a { padding: 8px 12px; border-radius: var(--radius-btn); color: var(--muted); white-space: nowrap; } .sv-topnav .nav-links a:hover { background: var(--bg); color: var(--sub); } .sv-topnav .nav-links a.active { background: var(--fill); color: var(--ink); } .sv-topnav .nav-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .sv-topnav .nav-user { font-size: 13px; color: var(--muted); white-space: nowrap; } .sv-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; text-transform: uppercase; } .sv-back { font-size: 14px; font-weight: 600; color: var(--muted); white-space: nowrap; } .sv-back:hover { color: var(--ink); } /* ---------- 하단 탭 (모바일) ---------- */ .sv-bottomtabs { display: none; border-top: 1px solid var(--border); background: var(--surface); position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; } .sv-bottomtabs a { flex: 1; text-align: center; padding: 8px 0 12px; font-size: 11px; font-weight: 500; color: var(--faint); min-height: 44px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; } .sv-bottomtabs a.active { font-weight: 700; color: var(--ink); } .sv-bottomtabs svg { width: 18px; height: 18px; display: block; } /* ---------- 페이지 셸 ---------- */ .sv-main { min-height: calc(100vh - 56px); display: flex; flex-direction: column; } .sv-page { flex: 1; width: 100%; max-width: 1320px; margin: 0 auto; padding: 22px 26px 60px; display: flex; flex-direction: column; gap: 14px; } .sv-page-md { max-width: 1100px; } .sv-page-sm { max-width: 760px; } .sv-page-xs { max-width: 720px; } .sv-page-full { max-width: none; padding: 0; } .sv-page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .sv-page-head .titles { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; min-width: 0; } .sv-title { font-size: 20px; font-weight: 800; color: var(--ink); } .sv-subtitle { font-size: 13px; color: var(--faint); } .sv-head-actions { display: flex; gap: 8px; flex-shrink: 0; } #announcement-banners { width: 100%; max-width: 1320px; margin: 14px auto 0; padding: 0 26px; } #announcement-banners:empty { margin: 0; } /* ---------- 카드 ---------- */ .sv-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); } .sv-card-clip { overflow: hidden; } .sv-card-pad { padding: 18px; } .sv-card-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border-soft); font-size: 14px; font-weight: 700; color: var(--ink); } .sv-card-title { font-size: 14px; font-weight: 700; color: var(--ink); } .sv-note { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 14px 18px; font-size: 12px; color: var(--muted); line-height: 1.7; } .sv-note b { color: var(--ink); } .sv-inline-note { background: var(--bg); border-radius: var(--radius-btn); padding: 10px 12px; font-size: 12px; color: var(--muted); line-height: 1.6; } /* ---------- 버튼 ---------- */ .sv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; border-radius: var(--radius-btn); font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; border: none; min-height: 36px; box-sizing: border-box; white-space: nowrap; text-decoration: none; } .sv-btn:focus { outline: none; } .sv-btn-primary { background: var(--ink); color: #fff; } .sv-btn-primary:hover, .sv-btn-primary:focus { background: #333D4B; color: #fff; } .sv-btn-outline { background: var(--surface); border: 1px solid var(--border-strong); color: #333D4B; } .sv-btn-outline:hover, .sv-btn-outline:focus { background: var(--bg); color: #333D4B; } .sv-btn-ghost { background: var(--fill); color: var(--ink); } .sv-btn-ghost:hover, .sv-btn-ghost:focus { background: #E7EAED; color: var(--ink); } .sv-btn-danger { background: var(--red); color: #fff; } .sv-btn-danger:hover, .sv-btn-danger:focus { background: #BE342F; color: #fff; } .sv-btn-danger-outline { background: var(--surface); border: 1px solid #E8C5C3; color: var(--red); } .sv-btn-danger-outline:hover, .sv-btn-danger-outline:focus { background: var(--red-bg); color: var(--red); } .sv-btn-sm { padding: 5px 12px; min-height: 30px; font-size: 12px; } .sv-btn-block { width: 100%; } .sv-btn[disabled] { opacity: .5; cursor: default; } /* a 태그 버튼: .seller-v2 a { color: var(--blue) } 가 버튼 글자색을 이기지 않게 특이도를 맞춘다. */ .seller-v2 a.sv-btn-primary, .seller-v2 a.sv-btn-primary:hover, .seller-v2 a.sv-btn-primary:focus, .seller-v2 a.sv-btn-danger, .seller-v2 a.sv-btn-danger:hover, .seller-v2 a.sv-btn-danger:focus { color: #fff; } .seller-v2 a.sv-btn-outline, .seller-v2 a.sv-btn-outline:hover, .seller-v2 a.sv-btn-outline:focus { color: #333D4B; } .seller-v2 a.sv-btn-ghost, .seller-v2 a.sv-btn-ghost:hover, .seller-v2 a.sv-btn-ghost:focus { color: var(--ink); } .seller-v2 a.sv-btn-danger-outline, .seller-v2 a.sv-btn-danger-outline:hover, .seller-v2 a.sv-btn-danger-outline:focus { color: var(--red); } @media (max-width: 767px) { .sv-btn { min-height: 44px; } .sv-btn-sm { min-height: 32px; } } /* ---------- 상태 뱃지 ---------- */ .sv-pill { display: inline-block; padding: 4px 9px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; white-space: nowrap; text-align: center; } .sv-pill-auto { background: var(--green-bg); color: var(--green); } /* 자동 관리 */ .sv-pill-manual { background: var(--fill); color: var(--sub); } /* 수동 운영 */ .sv-pill-paused { background: var(--fill); color: var(--faint); } /* 연동중지 */ .sv-pill-error { background: var(--red-bg); color: var(--red); } /* 오류 */ .sv-pill-waiting { background: var(--amber-bg); color: var(--amber); } /* 대기중 */ .sv-pill-running { background: var(--blue-bg); color: var(--blue); } /* 작업중 */ .sv-pill-done { background: var(--green-bg); color: var(--green); } /* 작업완료 */ .sv-fg-auto, .sv-fg-done { color: var(--green); } .sv-fg-manual { color: var(--sub); } .sv-fg-paused { color: var(--faint); } .sv-fg-error { color: var(--red); } .sv-fg-waiting { color: var(--amber); } .sv-fg-running { color: var(--blue); } /* ---------- 마켓 도트 (오류 표시 등 색 점 용도) ---------- */ .sv-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--faint); } .sv-dot-sm { width: 8px; height: 8px; } .sv-dot-lg { width: 11px; height: 11px; } .sv-dot-SF { background: var(--dot-smartstore); } .sv-dot-COUPANG { background: var(--dot-coupang); } .sv-dot-GMARKET { background: var(--dot-gmarket); } .sv-dot-ELEVENST { background: var(--dot-elevenst); } .sv-dot-AUCTION { background: var(--dot-auction); } .sv-dot-TOSS { background: var(--dot-toss); } /* ---------- 마켓 로고 (마켓명·스토어명 옆 아이콘) ---------- */ .sv-logo { display: inline-block; flex-shrink: 0; width: 18px; height: 18px; background-size: contain; background-repeat: no-repeat; background-position: center; } .sv-logo-sm { width: 16px; height: 16px; } .sv-logo-lg { width: 24px; height: 24px; } .sv-logo-SF { background-image: url("/images/smartstore-logo.png"); } .sv-logo-COUPANG { background-image: url("/images/coupang-logo.png"); } .sv-logo-GMARKET { background-image: url("/images/gmarket-logo.png"); } .sv-logo-ELEVENST { background-image: url("/images/elevenst-logo.png"); } .sv-logo-AUCTION { background-image: url("/images/auction-logo.png"); } .sv-logo-TOSS { background-image: url("/images/toss-logo.png"); } .sv-logo-GSSHOP { background-image: url("/files/gsshop_logo.png"); } /* ---------- 용량 바 ---------- */ .sv-capbar { height: 6px; border-radius: 3px; background: var(--fill); overflow: hidden; } .sv-capbar > div { height: 100%; border-radius: 3px; background: var(--ink); } .sv-capbar.danger > div { background: var(--red); } /* 95% 이상 */ .sv-capbar-lg { height: 8px; border-radius: 4px; } .sv-capbar-xs { height: 4px; border-radius: 2px; background: #EAECEF; } /* ---------- 입력 ---------- */ .sv-input, .sv-select, .sv-textarea { padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-btn); font-size: 14px; font-family: inherit; background: var(--surface); color: var(--ink); box-sizing: border-box; max-width: 100%; } .sv-select { height: auto; } .sv-textarea { resize: vertical; line-height: 1.6; } .sv-input:focus, .sv-select:focus, .sv-textarea:focus { outline: none; border-color: var(--ink); box-shadow: none; } .sv-input[readonly] { background: var(--bg); color: var(--muted); } .sv-input-sm, .sv-select-sm { padding: 8px 12px; font-size: 13px; } .sv-label { display: block; font-size: 12px; font-weight: 700; color: var(--sub); margin-bottom: 5px; } .sv-label-faint { font-size: 11px; font-weight: 700; color: var(--faint); } .sv-hint { font-size: 12px; color: var(--faint); line-height: 1.5; } .sv-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .sv-field-row { display: flex; gap: 8px; align-items: center; } .sv-form { display: flex; flex-direction: column; gap: 14px; } .sv-form-actions { display: flex; justify-content: flex-end; gap: 8px; } /* ---------- 툴바(필터 카드) ---------- */ .sv-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 12px 16px; } .sv-toolbar-bottom { align-items: flex-end; padding: 14px 16px; } .sv-toolbar .spacer { margin-left: auto; } .sv-count { font-size: 12px; color: var(--faint); } .sv-count b { color: var(--ink); } /* ---------- 토글 ---------- */ .sv-toggle { display: inline-block; width: 44px; height: 24px; background: #C9CDD2; border-radius: 12px; position: relative; cursor: pointer; transition: background .2s; flex-shrink: 0; } .sv-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: left .2s; } .sv-toggle.on { background: var(--ink); } .sv-toggle.on::after { left: 23px; } .sv-toggle-wrap { display: flex; align-items: center; gap: 10px; cursor: pointer; } /* ---------- 데이터 그리드 ---------- */ .sv-grid { display: grid; grid-template-columns: var(--cols); gap: 12px; align-items: center; } .sv-thead { padding: 10px 18px; font-size: 11px; font-weight: 700; color: var(--faint); letter-spacing: .4px; border-bottom: 1px solid var(--border); } .sv-row { padding: 12px 18px; border-bottom: 1px solid var(--border-soft); font-size: 13px; color: #333D4B; } .sv-row:last-child { border-bottom: none; } .sv-row:hover { background: var(--bg); } .sv-num { font-variant-numeric: tabular-nums; } .sv-ta-r { text-align: right; } .sv-meta { font-size: 12px; color: var(--faint); } .sv-strong { font-weight: 600; color: var(--ink); } .sv-empty { padding: 48px 16px; text-align: center; font-size: 14px; color: var(--faint); } .sv-cell-2 { display: flex; flex-direction: column; min-width: 0; } .sv-cell-2 .t { font-size: 13px; font-weight: 700; color: var(--ink); } .sv-cell-2 .s { font-size: 11px; color: var(--faint); } /* 모바일: 그리드 행 → 라벨/값 카드 */ @media (max-width: 767px) { .sv-grid.sv-thead { display: none; } .sv-grid.sv-row { display: block; border: 1px solid var(--border); border-radius: var(--radius-card); margin: 0 0 8px; padding: 12px 14px; background: var(--surface); } .sv-grid.sv-row:hover { background: var(--surface); } .sv-grid.sv-row > * { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 3px 0; text-align: left; } .sv-grid.sv-row > *[data-label]::before { content: attr(data-label); color: var(--faint); font-size: 12px; font-weight: 600; flex-shrink: 0; } .sv-grid.sv-row > *:empty { display: none; } .sv-rows-mobile-plain { padding: 0 !important; border: none !important; background: transparent !important; } } /* ---------- 오류 배너 ---------- */ .sv-error-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--red-bg); border: 1px solid var(--red-border); border-radius: 10px; padding: 12px 16px; font-size: 13px; font-weight: 700; color: var(--red); } /* ---------- 페이지네이션 ---------- */ .sv-pagination { display: flex; justify-content: center; gap: 6px; font-size: 13px; color: var(--muted); flex-wrap: wrap; } .sv-pagination a { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 34px; padding: 6px 10px; border-radius: 7px; color: var(--muted); font-weight: 600; } .sv-pagination a:hover { background: var(--fill); color: var(--ink); } .sv-pagination a.active { background: var(--ink); color: #fff; font-weight: 700; } /* ---------- 로딩 ---------- */ /* display:block 유지 — 기존 스크립트가 $("#dim").show() 로 여닫는다(jQuery show 는 block 복원). */ .sv-loading { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 2147483647; background: rgba(25, 31, 40, .35); display: none; } .sv-loading.is-visible { display: block; } .sv-spinner { position: absolute; top: 50%; left: 50%; margin: -17px 0 0 -17px; width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: sv-spin .8s linear infinite; } @keyframes sv-spin { to { transform: rotate(360deg); } } /* ---------- 마켓계정: 마스터-디테일 ---------- */ .sv-ma { display: flex; align-items: stretch; min-height: calc(100vh - 56px); } .sv-ma-rail { width: 310px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--border); padding: 14px 12px; display: flex; flex-direction: column; gap: 4px; } .sv-ma-rail-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 6px 8px; } .sv-ma-rail-head .sum { font-size: 13px; font-weight: 700; color: var(--ink); } .sv-ma-group { display: flex; flex-direction: column; } .sv-ma-group-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px; border-radius: 9px; cursor: pointer; } .sv-ma-group-row:hover { background: var(--bg); } .sv-ma-group-row .left { display: flex; align-items: center; gap: 9px; min-width: 0; } .sv-ma-group-row .chev { color: var(--faint); font-size: 11px; width: 10px; flex-shrink: 0; } .sv-ma-group-row .name { font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; } .sv-ma-group-row .cnt { font-size: 12px; font-weight: 600; color: var(--faint); } .sv-ma-group-row .err { width: 6px; height: 6px; border-radius: 50%; background: var(--red); flex-shrink: 0; } .sv-ma-group-row .sum { font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; } .sv-ma-acct { display: flex; flex-direction: column; gap: 6px; margin-left: 26px; margin-bottom: 2px; padding: 9px 12px; border-radius: 9px; border: 1px solid transparent; cursor: pointer; } .sv-ma-acct:hover { background: var(--bg); } .sv-ma-acct.selected { background: var(--fill); border-color: var(--border-strong); } .sv-ma-acct .top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .sv-ma-acct .store { font-size: 13px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sv-ma-acct .st { font-size: 11px; font-weight: 700; flex-shrink: 0; } .sv-ma-acct .bar { display: flex; align-items: center; gap: 8px; } .sv-ma-acct .bar .sv-capbar-xs { flex: 1; } .sv-ma-acct .pct { font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; } .sv-ma-detail { flex: 1; min-width: 0; padding: 22px 26px 60px; display: flex; flex-direction: column; gap: 14px; } /* 데스크탑에서는 없는 셈 치고, 모바일에서만 하나의 카드로 합친다. */ .sv-ma-summary { display: contents; } .sv-ma-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .sv-ma-head .left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; } .sv-ma-head .store { font-size: 20px; font-weight: 800; color: var(--ink); } .sv-ma-head .mkt { font-size: 13px; color: var(--faint); } .sv-ma-cards { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; } .sv-ma-cards > .sv-card { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; } .sv-ma-cards .k { font-size: 12px; color: var(--muted); } .sv-ma-cap { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .sv-ma-cap .cur { font-size: 28px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.1; } .sv-ma-cap .max { font-size: 14px; color: var(--faint); } .sv-ma-capmsg { font-size: 12px; font-weight: 600; color: var(--faint); } .sv-ma-capmsg.danger { color: var(--red); } .sv-ma-task { font-size: 18px; font-weight: 800; color: var(--ink); } .sv-ma-state { font-size: 15px; font-weight: 800; } .sv-ma-statedesc { font-size: 12px; color: var(--faint); line-height: 1.5; } .sv-ma-actions { display: flex; flex-direction: column; gap: 6px; } /* 레일 310px 를 빼면 태블릿 폭에서 3열이 눌린다. 용량만 한 줄 쓰고 나머지 2열. */ @media (min-width: 768px) and (max-width: 1100px) { .sv-ma-cards { grid-template-columns: 1fr 1fr; } .sv-ma-cards > .sv-card:first-child { grid-column: 1 / -1; } } .sv-kv-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; } .sv-kv { padding: 14px 18px; display: flex; flex-direction: column; gap: 4px; min-width: 0; border-top: 1px solid var(--border-soft); border-right: 1px solid var(--border-soft); } .sv-kv-grid > .sv-kv:nth-child(-n + 3) { border-top: none; } .sv-kv-grid > .sv-kv:nth-child(3n) { border-right: none; } .sv-kv .k { font-size: 11px; color: var(--faint); } .sv-kv .v { font-size: 14px; font-weight: 600; color: var(--ink); word-break: break-all; } /* 마켓 칩 (모바일 마켓 전환) */ .sv-ma-chips { display: none; gap: 8px; padding: 12px 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .sv-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 7px 12px; font-size: 12px; font-weight: 700; color: var(--ink); white-space: nowrap; min-height: 32px; box-sizing: border-box; cursor: pointer; } .sv-chip.selected { background: var(--ink); border-color: var(--ink); color: #fff; } .sv-ma-mlist { display: none; flex-direction: column; gap: 8px; padding: 0 16px 8px; } .sv-ma-mcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; } .sv-ma-mcard.selected { border-color: var(--ink); } /* sticky 아님 — 상단 네비(56px sticky)와 겹치고, 짧은 레일 안에서는 어차피 고정되지 않는다. */ .sv-ma-mhead { display: none; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; background: var(--surface); border-bottom: 1px solid var(--border); } .sv-ma-mhead .t { font-size: 17px; font-weight: 800; color: var(--ink); } @media (max-width: 767px) { .sv-ma { display: block; min-height: 0; } .sv-ma-rail { width: auto; border-right: none; border-bottom: 1px solid var(--border); padding: 0 0 12px; gap: 0; } .sv-ma-rail-head { display: none; } .sv-ma-tree { display: none; } .sv-ma-chips { display: flex; } .sv-ma-mlist { display: flex; } .sv-ma-mhead { display: flex; } .sv-ma-detail { padding: 12px 16px 24px; gap: 10px; } /* 헤더 + 오류배너 + 요약 3종을 카드 하나로 합친다(카드가 4개로 흩어지는 문제). */ .sv-ma-summary { display: flex; flex-direction: column; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 14px 16px; } .sv-ma-cards { grid-template-columns: 1fr; gap: 10px; } .sv-ma-summary > .sv-ma-cards > .sv-card { border: none; border-radius: 0; padding: 0; gap: 6px; } .sv-ma-summary > .sv-ma-cards > .sv-card + .sv-card { border-top: 1px solid var(--border-soft); padding-top: 10px; } /* 토글이 다음 줄로 밀리지 않게. 마켓명은 위 칩에 이미 있으므로 숨긴다. */ .sv-ma-head { gap: 8px; flex-wrap: nowrap; } .sv-ma-head .left { flex-wrap: nowrap; overflow: hidden; } .sv-ma-head .store { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sv-ma-head .mkt { display: none; } .sv-ma-head .sv-toggle-wrap { gap: 8px; flex-shrink: 0; } .sv-ma-cap .cur { font-size: 24px; } .sv-ma-task { font-size: 16px; } /* 상세정보는 라벨/값 한 줄(세로로 쌓으면 6줄이 화면 하나를 먹는다). */ .sv-kv-grid { grid-template-columns: 1fr; } .sv-kv { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 16px; border-right: none; border-top: 1px solid var(--border-soft); } .sv-kv-grid > .sv-kv:first-child { border-top: none; } .sv-kv .k { font-size: 12px; flex-shrink: 0; } .sv-kv .v { font-size: 13px; text-align: right; } .sv-ma-actions { flex-direction: row; } .sv-ma-actions > .sv-btn { flex: 1; } /* 좁은 폭에서 문구가 버튼에 눌려 3줄이 되므로 세로로 쌓는다. */ .sv-error-banner { flex-direction: column; align-items: stretch; gap: 10px; font-size: 12px; padding: 12px 14px; } .sv-error-banner > .sv-btn { width: 100%; } } /* ---------- 계정 추가: 마켓 카드 / 스텝 ---------- */ .sv-market-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .sv-market-card { background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius-card); padding: 16px 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; cursor: pointer; min-height: 88px; box-sizing: border-box; } .sv-market-card:hover { border-color: #B0B8C1; } .sv-market-card.selected { border-color: var(--ink); } /* 마켓 로고는 정사각형 아이콘(=마켓계정 화면 로고와 동일 세트)이라 높이·너비를 같게 둔다. */ .sv-market-card img { width: 44px; height: 44px; object-fit: contain; } .sv-market-card .name { font-size: 13px; font-weight: 700; color: var(--ink); } .sv-section { display: flex; flex-direction: column; gap: 10px; } .sv-section > .sv-section-title { font-size: 14px; font-weight: 700; color: var(--ink); } .sv-section-title .sub { font-weight: 500; color: var(--faint); font-size: 12px; } .sv-step { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border-soft); } .sv-step:last-of-type { border-bottom: none; } .sv-step .ico { width: 22px; height: 22px; border-radius: 50%; background: var(--fill); color: var(--faint); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; } .sv-step .lbl { font-size: 13px; color: var(--faint); } .sv-step.active .ico { background: var(--ink); color: #fff; } .sv-step.active .lbl { color: var(--ink); } .sv-step.done .ico { background: var(--green-bg); color: var(--green); } .sv-step.done .lbl { color: var(--ink); } .sv-step.fail .ico { background: var(--red-bg); color: var(--red); } .sv-step.fail .lbl { color: var(--red); } .sv-check { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--sub); cursor: pointer; } .sv-check input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--ink); flex-shrink: 0; } /* ---------- 라디오 카드 (상품관리 방식) ---------- */ .sv-radio-cards { display: flex; gap: 8px; } .sv-radio-card { flex: 1; border: 2px solid var(--border); border-radius: 10px; padding: 12px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; background: var(--surface); } .sv-radio-card.selected { border-color: var(--ink); } .sv-radio-card .t { font-size: 14px; font-weight: 700; color: var(--ink); } .sv-radio-card .d { font-size: 12px; color: var(--muted); line-height: 1.5; } @media (max-width: 767px) { .sv-radio-cards { flex-direction: column; } } /* ---------- 카테고리 아코디언 ---------- */ .sv-cat-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; min-height: 44px; } .sv-cat-head input { width: 17px; height: 17px; margin: 0; accent-color: var(--ink); flex-shrink: 0; } .sv-cat-head .name { font-size: 14px; font-weight: 700; color: var(--ink); flex: 1; min-width: 0; } .sv-cat-head .name .sel { font-weight: 500; color: var(--faint); font-size: 12px; } .sv-cat-head .chev { color: var(--faint); font-size: 12px; white-space: nowrap; } .sv-cat-body { display: none; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 0 16px 14px; } .sv-cat-group.open .sv-cat-body { display: grid; } .sv-catchip { display: flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid #EAECEF; border-radius: var(--radius-btn); padding: 8px 12px; min-height: 36px; box-sizing: border-box; cursor: pointer; } .sv-catchip input { width: 14px; height: 14px; margin: 0; accent-color: var(--ink); flex-shrink: 0; } .sv-catchip span { font-size: 12px; color: #333D4B; font-weight: 500; line-height: 1.3; word-break: keep-all; } @media (max-width: 767px) { .sv-cat-body { grid-template-columns: 1fr 1fr; padding: 0 14px 12px; } .sv-catchip { min-height: 44px; padding: 10px 12px; } } /* ---------- 모달 (공지 팝업 등) ---------- */ body.sv-modal-open { overflow: hidden; } /* left/top/width/height 로 배치 — inset 은 구형 웹뷰 미지원. */ .sv-modal { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 2147483646; background: rgba(25, 31, 40, .45); display: flex; align-items: center; justify-content: center; padding: 28px 20px; box-sizing: border-box; } .sv-modal-dialog { display: flex; flex-direction: column; overflow: hidden; width: 100%; max-width: 760px; max-height: 100%; background: var(--surface); border-radius: 16px; box-shadow: 0 16px 48px rgba(25, 31, 40, .22); } /* 중요도 색은 헤더 전면이 아니라 상단 4px 띠로만 — 본문 가독성을 해치지 않는다. */ .sv-modal-accent { height: 4px; flex-shrink: 0; background: var(--ink); } .sv-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 28px 16px; flex-shrink: 0; } .sv-modal-head .t { font-size: 19px; font-weight: 800; color: var(--ink); line-height: 1.45; word-break: keep-all; overflow-wrap: break-word; min-width: 0; } .sv-modal-close { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; border: none; background: transparent; color: var(--faint); font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; } .sv-modal-close:hover, .sv-modal-close:focus { background: var(--fill); color: var(--ink); outline: none; } .sv-modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 28px 24px; } .sv-modal-foot { flex-shrink: 0; display: flex; justify-content: flex-end; gap: 8px; padding: 14px 28px 18px; border-top: 1px solid var(--border-soft); background: var(--surface); } /* ---------- 본문 리치 텍스트 (공지 마크다운 렌더 결과) ---------- */ /* .seller-v2 h1~h4 { margin:0 } 와 bootstrap 기본값을 되돌린다 — 선택자 2단계로 특이도 확보. */ .seller-v2 .sv-rich { font-size: 14px; line-height: 1.75; color: #333D4B; word-break: keep-all; overflow-wrap: break-word; } .seller-v2 .sv-rich > *:first-child { margin-top: 0; } .seller-v2 .sv-rich > *:last-child { margin-bottom: 0; } .seller-v2 .sv-rich h2 { font-size: 17px; font-weight: 800; color: var(--ink); line-height: 1.45; margin: 26px 0 10px; } .seller-v2 .sv-rich h3 { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.5; margin: 20px 0 8px; } .seller-v2 .sv-rich h4 { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.5; margin: 16px 0 6px; } .seller-v2 .sv-rich p { margin: 0 0 12px; } .seller-v2 .sv-rich ul, .seller-v2 .sv-rich ol { margin: 0 0 12px; padding-left: 20px; } .seller-v2 .sv-rich ul { list-style: disc outside; } .seller-v2 .sv-rich ol { list-style: decimal outside; } .seller-v2 .sv-rich li { margin: 3px 0; } .seller-v2 .sv-rich strong, .seller-v2 .sv-rich b { font-weight: 700; color: var(--ink); } .seller-v2 .sv-rich a { color: var(--blue); text-decoration: underline; } /* 배너용 1줄 축약 — 문단이 줄바꿈을 만들면 띠가 깨진다. */ .seller-v2 .sv-rich-inline { font-size: 13px; line-height: 1.5; } .seller-v2 .sv-rich-inline p, .seller-v2 .sv-rich-inline h2, .seller-v2 .sv-rich-inline h3, .seller-v2 .sv-rich-inline h4 { display: inline; font-size: inherit; font-weight: inherit; margin: 0; } .seller-v2 .sv-rich-inline ul, .seller-v2 .sv-rich-inline ol { display: inline; padding: 0; margin: 0; list-style: none; } .seller-v2 .sv-rich-inline li { display: inline; margin: 0; } .seller-v2 .sv-rich-inline li + li::before { content: " · "; color: var(--faint); } .seller-v2 .sv-rich-inline > * + *::before { content: " · "; color: var(--faint); } /* 블록끼리 붙어버리는 것 방지 */ .seller-v2 .sv-rich-inline br { display: none; } /* ---------- 공지 배너 ---------- */ .sv-ann-banner { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--ink); border-radius: var(--radius-card); padding: 11px 14px; margin-bottom: 10px; } .sv-ann-banner .ttl { font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; } .sv-ann-banner .txt { flex: 1; min-width: 0; color: var(--sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sv-ann-banner .sv-modal-close { width: 26px; height: 26px; font-size: 13px; } @media (max-width: 767px) { .sv-modal { padding: 14px 12px; } .sv-modal-dialog { border-radius: 14px; } .sv-modal-head { padding: 18px 18px 12px; } .sv-modal-head .t { font-size: 17px; } .sv-modal-body { padding: 4px 18px 20px; } .sv-modal-foot { padding: 12px 18px 16px; } .sv-modal-foot > .sv-btn { flex: 1; } .seller-v2 .sv-rich { font-size: 13.5px; } .sv-ann-banner { align-items: flex-start; } .sv-ann-banner .ttl { white-space: normal; } .sv-ann-banner .txt { white-space: normal; } } /* ---------- 공지 목록/상세 ---------- */ /* 행 전체가 라 링크색(.seller-v2 a)에 글자색이 먹힌다 — 앵커 규칙은 .seller-v2 a.x 로 이긴다. */ .sv-ann-grid { --cols: 64px 76px 1fr 100px; } .seller-v2 a.sv-ann-row, .seller-v2 a.sv-ann-row:hover { color: #333D4B; } .sv-ann-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .sv-ann-cell .t { font-size: 13px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sv-ann-preview { font-size: 12px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sv-ann-new { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 4px; background: var(--red-bg); color: var(--red); font-size: 10px; font-weight: 800; } /* 상단 고정 행 — 유효 고정(기간 내)일 때만 붙는다. 기간이 끝나면 일반 행으로 내려간다. */ .sv-row-pinned { background: var(--amber-bg); } .sv-row-pinned:hover { background: #F7ECD5; } .sv-ann-pin { font-size: 11px; font-weight: 800; color: var(--amber); } .sv-ann-detail-head { display: flex; flex-direction: column; gap: 6px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--border-soft); } .sv-ann-detail-title { font-size: 18px; font-weight: 800; line-height: 1.45; } .sv-ann-detail-body { min-height: 60px; } .sv-ann-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; } .sv-ann-nav > * { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); } .sv-ann-nav .d { font-size: 11px; font-weight: 700; color: var(--faint); } .sv-ann-nav .t { font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sv-ann-nav a:hover { background: var(--bg); } .sv-ann-nav .off .t { color: var(--faint); } /* 상단 벨(상시 진입점) + 안 읽은 개수 뱃지 */ .seller-v2 a.sv-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; color: var(--muted); } .seller-v2 a.sv-bell:hover, .seller-v2 a.sv-bell.active { background: var(--fill); color: var(--ink); } .sv-bell svg { width: 19px; height: 19px; display: block; } .sv-bell-badge { position: absolute; top: 1px; right: 0; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; background: var(--red); color: #fff; font-size: 10px; font-weight: 800; line-height: 15px; text-align: center; } @media (max-width: 767px) { /* 모바일 카드 행에서도 제목/미리보기는 세로로 쌓는다(공통 규칙이 flex row 로 덮는 것 복구). */ .sv-grid.sv-row.sv-ann-row > .sv-ann-cell { flex-direction: column; align-items: flex-start; } .sv-ann-cell .t, .sv-ann-preview { white-space: normal; } .sv-ann-nav { grid-template-columns: 1fr; } .sv-ann-detail-title { font-size: 16px; } } /* ---------- 반응형 공통 ---------- */ .sv-only-mobile { display: none; } @media (max-width: 767px) { .sv-topnav .nav-links { display: none; } .sv-topnav { padding: 0 16px; } .sv-bottomtabs { display: flex; } .sv-main { padding-bottom: 66px; } .sv-page { padding: 12px 16px 24px; } #announcement-banners { padding: 0 16px; margin-top: 12px; } .sv-page-head { align-items: flex-start; } .sv-title { font-size: 17px; } .sv-only-mobile { display: block; } .sv-only-desktop { display: none !important; } .sv-toolbar { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; } .sv-toolbar.wrap-mobile { flex-wrap: wrap; overflow: visible; } .sv-toolbar .spacer { margin-left: 0; } /* 검색 폼(등록상품)은 좁은 폭에서 필드·버튼을 한 줄씩 꽉 채운다. */ .sv-toolbar-bottom > .sv-field, .sv-toolbar-bottom > .sv-field > .sv-input, .sv-toolbar-bottom > .sv-field > .sv-select, .sv-toolbar-bottom > .sv-btn { width: 100%; min-width: 0 !important; } .sv-toolbar-bottom > .sv-count { padding-bottom: 0 !important; } /* 카테고리 툴바의 실행 버튼도 한 줄 차지 */ .sv-toolbar.wrap-mobile > .sv-select { width: 100%; min-width: 0 !important; } .sv-toolbar.wrap-mobile > .sv-btn-primary { width: 100%; } }