/* ========================================================================= D102 Atelier — Design System (v2 · Aqua) 시그니처 브랜드 = 아쿠아 틸 #4abcc7. Apple HIG 톤(미니멀·고대비) + 절제된 다색 럭셔리 팔레트. 상세 규칙은 저장소 루트 DESIGN-SYSTEM.md 참고. 폰트(Pretendard)는 index.html 에서 미리 연결·로드해요. ⚠️ 색은 항상 시맨틱 토큰으로. 하드코딩 hex 금지(캔버스 보고 이미지만 예외). ========================================================================= */ :root { /* --- canvas / surface --- */ --canvas: #f4f6f7; --surface: #ffffff; --surface-2: #fafcfd; --surface-sunken: #eef2f3; --hairline: rgba(15, 42, 46, 0.10); --hairline-strong: rgba(15, 42, 46, 0.18); /* --- text --- */ --ink: #16232a; /* 잉크: 순수 검정 금지, 살짝 틸 기운 짙은 슬레이트 */ --ink-2: rgba(22, 35, 42, 0.58); --ink-3: rgba(22, 35, 42, 0.42); --ink-on-accent: #ffffff; /* 🔴 '선택된 칩 위 글자' 전용. --ink-on-accent 를 그대로 쓰면 다크에서 밝은 청록(#4fc3ce) 위 흰 글씨가 되어 **2.09:1** 밖에 안 나와요(SSOT §5 는 4.5:1). 다크에선 어두운 잉크로 뒤집어요(7.98:1). ⚠️ --ink-on-accent 자체를 다크에서 바꾸면 안 돼요 — 그 토큰은 --warn 배지·딥네이비 오버레이처럼 **어두운 배경 위**에서도 쓰여서 거기선 흰 글씨가 맞아요(18곳 중 2곳). 그래서 칩 전용 토큰을 둡니다. */ --ink-on-chip: var(--ink-on-accent); /* --- brand: AQUA TEAL (#4abcc7) — 시그니처 --- */ --brand: #4abcc7; /* 하이라이트·인디케이터·틴트·차트 (밝은 시그니처) */ --brand-deep: #0d8695; /* 텍스트·아이콘용 진한 브랜드(밝은 배경 대비) */ --brand-bright: #63cdd8; /* 다크 배경용 밝은 브랜드 */ --accent: #0d8695; /* 주 인터랙티브(버튼 채움·링크) — 흰 글씨 대비 확보 */ --accent-hover: #0a6f7c; --accent-tint: rgba(74, 188, 199, 0.13); --accent-tint-strong: rgba(74, 188, 199, 0.22); /* --- 절제된 다색 럭셔리 보조(데이터 구분·강조에만, 넓은 면적 금지) --- */ --lux-navy: #123842; /* 표 헤더·깊은 강조(딥 틸-네이비) */ --lux-navy-2: #0d2a32; --lux-gold: #c19a4e; /* 주얼리 문맥의 은은한 골드 보조 */ --lux-coral: #e0755f; /* 보색 포인트(희소하게) */ --lux-violet: #7a6bd8; /* 데이터 4번째 계열 */ /* --- 하위호환: 기존 --gold* 는 브랜드 틸로 매핑(점진 이관) --- */ --gold: var(--accent); --gold-hover: var(--accent-hover); --gold-bright: var(--brand-bright); --gold-tint: var(--accent-tint); --gold-tint-strong: var(--accent-tint-strong); /* --- semantic --- */ --silver: #6e7d82; --silver-tint: rgba(110, 125, 130, 0.12); --pos: #1f8f5f; /* 재고 있음/양수 */ --warn: #c2410c; /* 재고 없음/발주 */ --warn-tint: rgba(194, 65, 12, 0.1); --danger: #c4314b; --danger-tint: rgba(196, 49, 75, 0.12); --sat: #2f6dd0; /* 토요일·정보 파랑(일=danger와 짝) */ /* --- type --- */ --font: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Segoe UI", "Malgun Gothic", system-ui, sans-serif; /* --- radius system (고정): 입력 10 · 카드 14 · 피처 18 · 버튼/뱃지 pill · 썸네일 12 --- */ --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --gap-section: 24px; /* 섹션 사이 여백(DESIGN-SYSTEM §3). .stack 이 이 값을 써요 */ --r-xl: 22px; --r-pill: 980px; /* --- shadow: 배경 색조로 틴트, 최소화 (hover에서만 들림) --- */ --shadow-card: 0 1px 2px rgba(18, 56, 66, 0.06); --shadow-hover: 0 6px 22px rgba(18, 56, 66, 0.11); --shadow-pop: 0 12px 44px rgba(18, 56, 66, 0.17); --shadow-gold: 0 3px 14px rgba(13, 134, 149, 0.28); /* 하위호환(액센트 그림자) */ --shadow-accent: 0 3px 14px rgba(13, 134, 149, 0.28); /* --- layout --- */ --nav-w: 248px; --maxw: 1320px; /* --- motion --- */ --ease: cubic-bezier(0.25, 0.1, 0.25, 1); --ease-spring: cubic-bezier(0.2, 0.7, 0.2, 1); --fast: 0.15s; --std: 0.28s; /* --- 글자 크기(폰트) 배율 — fontscale.js가 세팅. md(1)이 기본이라 미설정 시 현행 동일 --- */ --fz: 1; } /* 글자 크기 조절: 문서 전체를 배율만큼 비율 그대로 확대(px 앱이라 글자만 키우면 깨져서 zoom 사용). :root(documentElement)에 걸어 #app 콘텐츠·모달/스크림/토스트/전광판(body 직속 fixed)까지 함께 커져요. zoom은 레이아웃 확대일 뿐 뷰포트 크기는 안 바꿔서 max-width 미디어쿼리는 그대로 동작해요. md=1일 때 계산상 무변화라 회귀 0. */ :root { zoom: var(--fz, 1); } /* 다크 테마 — 수동 토글(html[data-theme="dark"]). 기본은 라이트. StyleSeed: 순수 검정(#000) 금지 · 카드는 페이지보다 밝게 · 다크에선 그림자 대신 경계선이 분리를 담당 · 상태색은 한 단계 밝게. */ :root[data-theme="dark"] { --canvas: #10161a; /* 페이지 배경: 순수 검정 금지, 짙은 틸-슬레이트 */ --surface: #182025; /* 카드는 페이지보다 항상 밝게 */ --surface-2: #1e282e; --surface-sunken: #131b1f; --hairline: rgba(120, 210, 220, 0.12); --hairline-strong: rgba(120, 210, 220, 0.22); --ink: #e7edee; --ink-2: rgba(231, 237, 238, 0.64); --ink-3: rgba(231, 237, 238, 0.44); --brand: #57c6d1; --brand-deep: #4fc3ce; --brand-bright: #7ad8e2; --accent: #4fc3ce; /* 다크에선 밝은 틸(대비 확보) */ --accent-hover: #6bd2db; --accent-tint: rgba(74, 188, 199, 0.18); --accent-tint-strong: rgba(74, 188, 199, 0.28); --lux-navy: #16323a; --lux-navy-2: #0f2027; --ink-on-chip: var(--lux-navy-2); /* 밝은 청록 칩 위에서 읽히도록 뒤집어요(7.98:1) */ --lux-gold: #d8b46a; --lux-coral: #ef8b76; --lux-violet: #9b8ee8; --silver: #a7b1b5; --silver-tint: rgba(167, 177, 181, 0.16); --pos: #4ccb90; /* 상태색: 다크에서 한 단계 밝게(대비 확보) */ --warn: #f0894e; --warn-tint: rgba(240, 137, 78, 0.14); --danger: #f06a82; --danger-tint: rgba(240, 106, 130, 0.16); --sat: #5b8fe0; /* 다크에서 한 단계 밝게 */ --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35); /* 절제: 경계선이 분리를 담당 */ --shadow-hover: 0 8px 26px rgba(0, 0, 0, 0.5); --shadow-pop: 0 16px 48px rgba(0, 0, 0, 0.62); --shadow-gold: 0 3px 16px rgba(79, 195, 206, 0.30); --shadow-accent: 0 3px 16px rgba(79, 195, 206, 0.30); } /* ========================= base ========================= */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font); background: var(--canvas); color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; letter-spacing: -0.01em; line-height: 1.47; } h1, h2, h3, h4 { margin: 0; letter-spacing: -0.02em; line-height: 1.12; font-weight: 650; } a { color: var(--gold); text-decoration: none; } button { font-family: inherit; } /* 🔴 네이티브 체크박스·라디오는 브라우저 기본 **파랑**으로 그려져요. D102 팔레트에 없는 색이 화면에 섞이는 자리라(SSOT §1.4 '액션 색은 오직 틸'), 여기서 한 번에 브랜드 색으로 맞춰요. 마크업을 안 건드리니 앱 전역 19곳이 함께 정리돼요. */ input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); } img { display: block; max-width: 100%; } ::selection { background: var(--gold-tint-strong); } /* scrollbar */ *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--hairline-strong); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; } /* ========================= app layout ========================= */ .app { display: grid; grid-template-columns: var(--nav-w) 1fr; min-height: 100dvh; } /* --- sidebar (PC) --- */ .sidebar { position: sticky; top: 0; align-self: start; height: 100dvh; background: var(--surface); border-right: 1px solid var(--hairline); display: flex; flex-direction: column; padding: 20px 14px; gap: 3px; } .brand { display: flex; align-items: center; gap: 11px; padding: 6px 10px 20px; } .brand-mark { width: 34px; height: 34px; border-radius: 10px; flex: none; background: linear-gradient(145deg, var(--gold-bright), var(--gold)); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 16px; box-shadow: var(--shadow-gold); } .brand-name { font-weight: 750; font-size: 17px; letter-spacing: -0.02em; } .brand-sub { font-size: 11px; color: var(--ink-3); letter-spacing: 0.02em; } .nav-group-label { font-size: 11px; font-weight: 600; color: var(--ink-3); padding: 14px 12px 6px; letter-spacing: 0.04em; } /* 접이식 그룹('관리') — 라벨을 눌러 항목을 접어 세로 공간을 확보(하단 프로필 유지). 접힘 상태는 기기에 기억 */ .nav-group { display: flex; flex-direction: column; gap: inherit; } .nav-group-items { display: flex; flex-direction: column; gap: inherit; } .nav-group.collapsed .nav-group-items { display: none; } .nav-group-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; border: none; background: none; cursor: pointer; text-align: left; font-family: inherit; transition: color var(--fast); } .nav-group-toggle:hover { color: var(--ink-2); } .nav-group-caret { display: inline-flex; flex: none; color: var(--ink-3); transition: transform var(--std); } .nav-group.collapsed .nav-group-caret { transform: rotate(-90deg); } .nav-item { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: var(--r-sm); color: var(--ink-2); font-size: 14.5px; font-weight: 550; cursor: pointer; border: none; background: none; width: 100%; text-align: left; transition: background var(--fast), color var(--fast); } .nav-item:hover { background: var(--surface-sunken); color: var(--ink); } .nav-item.active { background: var(--gold-tint); color: var(--gold); } .nav-item .ico { width: 19px; text-align: center; font-size: 16px; flex: none; } .nav-item .badge-count { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--ink-3); } .nav-item.active .badge-count { color: var(--gold); } /* 새 메뉴 표시 — 배경 앰비언트 펄스는 제거(메뉴에 어중간한 배경 잔상이 남던 문제). 배경 강조는 hover·active(현재 메뉴)에서만. '새 기능'은 우측 'NEW' 배지로만 알려요. */ .nav-item .nav-new { margin-left: auto; font-size: 9.5px; font-weight: 800; letter-spacing: 0.04em; color: #fff; background: var(--gold); padding: 1px 6px; border-radius: var(--r-pill); animation: navNewPulse 1.6s ease-in-out infinite; } @keyframes navNewPulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 var(--gold-tint-strong); } 50% { transform: scale(1.08); box-shadow: 0 0 0 4px transparent; } } /* 적립금 지급 요청 — 미처리 신청 알림 배지(빨강 펄스). 메뉴 열면 사라짐 */ .nav-item .nav-alert { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); font-size: 11px; font-weight: 800; color: #fff; background: var(--danger); display: inline-flex; align-items: center; justify-content: center; line-height: 1; box-shadow: 0 0 0 0 rgba(196, 49, 75, 0.5); animation: navAlertPulse 1.4s ease-in-out infinite; } @keyframes navAlertPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(196, 49, 75, 0.5); } 50% { box-shadow: 0 0 0 5px rgba(196, 49, 75, 0); } } @media (prefers-reduced-motion: reduce) { .nav-item.nav-flash, .nav-item .nav-new, .nav-item .nav-alert { animation: none; } } .sidebar-foot { margin-top: auto; padding: 12px 12px 0; font-size: 11px; color: var(--ink-3); border-top: 1px solid var(--hairline); } /* 푸터 프로필 — 큰 아바타(왼쪽) + (Lv·이름 / 관리자) */ .foot-profile { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; min-width: 0; } .foot-avatar { flex: none; width: 60px; height: 60px; } .foot-avatar .foot-av-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .foot-avatar .avatar-initial { font-size: 24px; } .foot-pinfo { min-width: 0; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; } .foot-pname { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; } .foot-uname { font-weight: 700; font-size: 15px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .foot-admin { padding: 1px 8px; } .foot-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .foot-logout { flex: none; padding: 4px 10px; } /* 사이드바가 어떤 화면 높이에서도 스크롤 없이 전부(하단 프로필까지) 보이도록 — 높이가 낮을수록 간격을 점진 압축. 메뉴가 16개라 1080p(브라우저 inner ~937px)에선 기본 간격으로는 foot가 잘려서, 높이별로 좁혀요. */ @media (max-height: 1024px) { .sidebar { padding: 14px 12px; gap: 2px; } .brand { padding: 4px 10px 12px; } .nav-group-label { padding: 9px 12px 4px; font-size: 10.5px; } .nav-item { padding: 6px 12px; font-size: 14px; } .sidebar-foot { padding: 8px 12px 0; } } @media (max-height: 860px) { .sidebar { padding: 11px 12px; } .brand { padding: 2px 10px 9px; } .brand-mark { width: 30px; height: 30px; font-size: 15px; } .nav-group-label { padding: 7px 12px 3px; } .nav-item { padding: 5px 12px; font-size: 13.5px; } .nav-item .ico { font-size: 15px; } .sidebar-foot .foot-profile { margin-bottom: 6px !important; } .foot-avatar { width: 50px; height: 50px; } .foot-avatar .avatar-initial { font-size: 20px; } .foot-uname { font-size: 14px; } } @media (max-height: 740px) { .nav-item { padding: 3px 12px; gap: 9px; } .nav-group-label { padding: 4px 12px 2px; } /* 가장 좁을 땐 아바타를 줄이고 제품수만 숨겨 공간 확보 — 프로필·로그아웃은 유지 */ .foot-avatar { width: 40px; height: 40px; } .foot-avatar .avatar-initial { font-size: 17px; } .foot-meta .foot-count { display: none; } } /* --- main --- */ .main { min-width: 0; display: flex; flex-direction: column; } .topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; row-gap: 10px; /* standalone(PWA)에서 상단바가 iOS 상태바 밑에 가리지 않게 노치 안전영역만큼 위 여백 확보(브라우저·PC=0). */ padding: calc(14px + env(safe-area-inset-top, 0px)) 28px 14px; background: color-mix(in srgb, var(--canvas) 78%, transparent); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--hairline); } .topbar-main { display: flex; align-items: center; gap: 14px; flex: 1 1 auto; min-width: 0; } .topbar-title { flex: 1 1 auto; min-width: 0; } .topbar h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar .sub { color: var(--ink-3); font-size: 13px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar > .row:empty { display: none; } .view { padding: 24px 28px 96px; max-width: var(--maxw); width: 100%; margin: 0 auto; } /* 전체화면 인증 화면(로그인·닉네임·승인대기) 공통 래퍼 — 카드를 안전영역 안에서 중앙 정렬. ⚠️ standalone(iOS PWA)에선 100dvh가 상태바만큼 넘쳐 카드가 아래로 밀림 → 안정 뷰포트 svh 사용. min-height는 지원 안 되는 단위를 건너뛰도록 vh→dvh→svh 순으로 겹쳐 선언(구형 폴백). */ .auth-fill { min-height: 100vh; min-height: 100dvh; min-height: 100svh; box-sizing: border-box; display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px)); } /* ========================= components ========================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid transparent; border-radius: var(--r-pill); cursor: pointer; font-size: 14px; font-weight: 600; padding: 9px 18px; line-height: 1; background: var(--surface-sunken); color: var(--ink); transition: all var(--fast); white-space: nowrap; } .btn:hover { background: var(--hairline); } .btn:active { transform: scale(0.97); } .btn-primary { background: var(--gold); color: #fff; box-shadow: var(--shadow-gold); } .btn-primary:hover { background: var(--gold-hover); } .btn-ghost { background: transparent; } .btn-ghost:hover { background: var(--surface-sunken); } .btn-outline { background: transparent; border-color: var(--hairline-strong); } .btn-sm { padding: 6px 12px; font-size: 13px; } .btn-lg { padding: 12px 22px; font-size: 15px; font-weight: 700; } .btn-icon { padding: 8px; width: 36px; height: 36px; border-radius: 50%; } .theme-toggle { font-size: 17px; line-height: 1; } /* 탑라인 즐겨찾기 별 — 끄면 외곽선만, 켜면 아쿠아 채움 */ .fav-star { color: var(--ink-3); } .fav-star svg { fill: none; transition: fill var(--fast), color var(--fast); } .fav-star:hover { color: var(--accent); } .fav-star.on { color: var(--accent); } .fav-star.on svg { fill: currentColor; } .btn[disabled] { opacity: 0.4; pointer-events: none; } /* 글자 크기 조절 — [가−][가+] 미니멀 컨트롤. 테마토글과 같은 높이(36), 두 글자용으로만 살짝 넓게 */ .fz-control { display: inline-flex; align-items: center; gap: 2px; } .fz-btn { width: auto; min-width: 36px; padding: 0 8px; gap: 1px; color: var(--ink-2); line-height: 1; } .fz-btn:hover { color: var(--accent); } .fz-btn .fz-ga { font-size: 13px; font-weight: 600; } .fz-btn .fz-sign { font-size: 15px; font-weight: 700; } .input, .select, textarea.input { width: 100%; border: 1px solid var(--hairline-strong); background: var(--surface); color: var(--ink); border-radius: var(--r-sm); padding: 10px 13px; font-size: 14px; font-family: inherit; transition: border var(--fast), box-shadow var(--fast); outline: none; } .input:focus, .select:focus, textarea.input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-tint); } .search { position: relative; } .search .input { padding-left: 38px; border-radius: var(--r-pill); } .search .s-ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-3); font-size: 15px; } label.field { display: block; } label.field > .lab { font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin: 0 0 5px 2px; } .card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow-card); } .card-pad { padding: 20px; } .badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 650; padding: 3px 9px; border-radius: var(--r-pill); background: var(--surface-sunken); color: var(--ink-2); white-space: nowrap; } .badge.gold { background: var(--gold-tint); color: var(--gold); } .badge.silver { background: var(--silver-tint); color: var(--silver); } .badge.pos { background: rgba(31, 143, 78, 0.12); color: var(--pos); } .badge.warn { background: var(--warn-tint); color: var(--warn); } .badge.line { background: transparent; border: 1px solid var(--hairline-strong); } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--r-pill); border: 1px solid var(--hairline-strong); background: var(--surface); color: var(--ink-2); font-size: 13px; font-weight: 600; cursor: pointer; transition: all var(--fast); } .chip:hover { border-color: var(--gold); color: var(--ink); } .chip.on { background: var(--gold); border-color: var(--gold); color: var(--ink-on-chip); } .chip.pr-mk-off { opacity: 0.45; text-decoration: line-through; } /* 폐점 매장 pill — 기본은 흐림+취소선(off), 켜면 정상 강조(.chip.on 색 그대로) */ .chip.closed { opacity: 0.5; text-decoration: line-through; } .chip.closed.on { opacity: 1; text-decoration: none; } .toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; } .chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } /* product grid (도감) */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; } .prod { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden; cursor: pointer; transition: transform var(--std) var(--ease-spring), box-shadow var(--std), border-color var(--fast); display: flex; flex-direction: column; } .prod:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--hairline-strong); } .prod-thumb { aspect-ratio: 1; background: var(--surface-sunken); position: relative; overflow: hidden; } .prod-thumb img { width: 100%; height: 100%; object-fit: cover; } /* 단종 제품 — 카드 내용만 흐리게, 뱃지는 또렷하게 */ .prod { position: relative; } .prod.discontinued .prod-thumb, .prod.discontinued .prod-body { opacity: 0.42; } /* ── 도감 hero 검색 ── 페이지의 핵심 행동(검색)을 상단 중앙 큰 입력칸으로. PC: 최대 720px 중앙 / 모바일: 풀폭. 골드 포커스 링, 우측 clear 버튼. */ .cat-hero { width: 100%; max-width: 720px; margin: 0 auto 22px; padding: 0 4px; } .cat-hero-box { position: relative; display: flex; align-items: center; background: var(--surface); border: 1.5px solid var(--hairline); border-radius: 14px; transition: border-color var(--fast), box-shadow var(--fast); } .cat-hero-box:focus-within { border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold-tint); } .cat-hero-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--ink-3); display: inline-flex; pointer-events: none; } .cat-hero-box:focus-within .cat-hero-icon { color: var(--gold); } .cat-hero-input { flex: 1 1 auto; min-width: 0; padding: 14px 48px 14px 48px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); background: transparent; border: none; outline: none; } .cat-hero-input::placeholder { color: var(--ink-3); font-weight: 500; } .cat-hero-input::-webkit-search-cancel-button { display: none; } .cat-hero-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: none; background: transparent; color: var(--ink-3); font-size: 14px; cursor: pointer; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; transition: background var(--fast), color var(--fast); opacity: 0; pointer-events: none; } .cat-hero-input:not(:placeholder-shown) ~ .cat-hero-clear { opacity: 1; pointer-events: auto; } .cat-hero-clear:hover { background: var(--surface-sunken); color: var(--ink); } @media (max-width: 820px) { .cat-hero { margin-bottom: 16px; } .cat-hero-input { padding: 13px 44px 13px 44px; font-size: 16px; } } /* ── 카탈로그 매입가 범위 슬라이더 ── */ .cat-supply { margin-bottom: 14px; } .cat-supply-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .cat-supply-purity { display: flex; gap: 6px; flex: none; } .cat-supply-slider-wrap { flex: 1 1 auto; min-width: 160px; } .cat-supply-slider { position: relative; height: 44px; } .cat-supply-slider input[type=range] { position: absolute; top: 0; left: 0; width: 100%; height: 44px; margin: 0; padding: 0; -webkit-appearance: none; appearance: none; background: transparent; pointer-events: none; outline: none; } .cat-supply-slider input[type=range]::-webkit-slider-runnable-track { height: 4px; background: transparent; border: none; } .cat-supply-slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); border: 3px solid var(--surface); box-shadow: var(--shadow-card); cursor: pointer; margin-top: -10px; } .cat-supply-slider input[type=range]::-moz-range-track { height: 4px; background: transparent; border: none; } .cat-supply-slider input[type=range]::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); border: 3px solid var(--surface); box-shadow: var(--shadow-card); cursor: pointer; } .cat-supply-slider input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: var(--shadow-card), 0 0 0 4px var(--accent-tint); } .cat-supply-slider input[type=range]:focus-visible::-moz-range-thumb { box-shadow: var(--shadow-card), 0 0 0 4px var(--accent-tint); } .cat-supply-track { position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0; height: 4px; background: var(--hairline-strong); border-radius: 2px; pointer-events: none; } .cat-supply-fill { position: absolute; height: 100%; background: var(--accent); border-radius: 2px; } .cat-supply-slider.disabled { opacity: 0.4; pointer-events: none; } .cat-supply-values { font-size: 13px; color: var(--ink-2); font-weight: 600; text-align: center; margin-top: 2px; min-height: 18px; } .prod-supply { font-size: 12px; font-weight: 600; color: var(--brand-deep); margin-top: 2px; } @media (max-width: 820px) { .cat-supply-slider input[type=range]::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -12px; } .cat-supply-slider input[type=range]::-moz-range-thumb { width: 22px; height: 22px; } } /* ── 상태 뱃지 시스템 ── 카드 우상단 stack. 흰 반투명 + 색 outline + 색 점 + 색 텍스트. StyleSeed 지침: 그림자 절제·채도 낮춤·시각 노이즈 최소. 좌상단 .ribbon(재질)과 위치 분리. */ .state-badges { position: absolute; top: 8px; right: 8px; z-index: 3; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; pointer-events: none; } .state-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: -0.005em; padding: 3px 8px 3px 7px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(140%) blur(6px); -webkit-backdrop-filter: saturate(140%) blur(6px); border: 1px solid currentColor; white-space: nowrap; } .state-badge::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } .state-badge.neutral { color: var(--ink-2); border-color: rgba(29, 29, 31, 0.22); } .state-badge.warn { color: var(--warn); border-color: rgba(168, 116, 16, 0.32); } .state-badge.danger { color: var(--danger); border-color: rgba(196, 49, 75, 0.32); } /* ── AI 미디어 생성 — 디자인 시스템(Apple+골드 액센트) 준수, 컴포저 중심 ── */ .studio-wrap { display: flex; flex-direction: column; gap: 16px; } /* 컴포저 카드 — 프롬프트(본문) + 도구바(푸터) 한 카드 */ .studio-composer { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 10px; } .studio-comp-head { display: flex; align-items: center; gap: 6px; } .studio-comp-label { font-weight: 700; font-size: 12.5px; color: var(--ink-2); letter-spacing: -0.01em; } .studio-comp-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid var(--hairline); } /* 모델 칩 — 작은 pill (배경 없음, 가벼움) */ .studio-mchip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 5px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-pill); cursor: pointer; transition: border-color var(--fast), background var(--fast); font: inherit; } .studio-mchip:hover { border-color: var(--gold); background: var(--surface-sunken); } .studio-mchip-tag { font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: var(--r-pill); background: rgba(95, 155, 232, 0.15); color: var(--sat); letter-spacing: 0.02em; } .studio-mchip-tag.edit { background: rgba(74, 188, 199, 0.18); color: var(--gold); } .studio-mchip-tag.vid { background: color-mix(in srgb, var(--lux-violet) 16%, transparent); color: var(--lux-violet); } .studio-mchip-name { font-weight: 700; font-size: 12.5px; color: var(--ink); letter-spacing: -0.01em; } .studio-mchip-price { font-size: 11px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; } .studio-mchip-chev { font-size: 11px; color: var(--ink-3); } /* 생성 버튼 — 골드 pill (작은 면적) */ .studio-go { background: var(--gold); color: #fff; border: none; padding: 9px 22px; border-radius: var(--r-pill); font-weight: 700; font-size: 13.5px; cursor: pointer; transition: background var(--fast); display: inline-flex; align-items: center; gap: 6px; min-width: 0; } .studio-go:hover { background: var(--accent-hover); } .studio-go:disabled { opacity: 0.55; cursor: not-allowed; } /* 고급 설정 모달 */ /* 설정 바 — 접혀 있어도 지금 설정이 읽히는 자리이자 펼치는 버튼. 카드 안 카드를 만들지 않으려고 테두리 없이 배경 톤으로만 눌러요(SSOT §3). */ .studio-setbtn { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; background: var(--surface-sunken); border: 1px solid transparent; border-radius: var(--r-sm); padding: 6px 10px; min-height: 32px; font-size: 12px; color: var(--ink-2); cursor: pointer; transition: background var(--fast), color var(--fast), border-color var(--fast); } .studio-setbtn:hover { background: var(--accent-tint); color: var(--ink); } .studio-setbtn.on { background: var(--accent-tint); border-color: var(--accent-tint-strong); color: var(--ink); } .studio-setbtn-ico { display: inline-flex; flex: none; color: var(--ink-3); } .studio-setbtn.on .studio-setbtn-ico { color: var(--accent); } .studio-setbtn-sum { display: inline-flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-variant-numeric: tabular-nums; } .studio-setbtn-dot { color: var(--ink-3); } .studio-setbtn-rest { color: var(--ink-3); } .studio-setbtn-caret { display: inline-flex; flex: none; color: var(--ink-3); transition: transform var(--std) var(--ease); } .studio-setbtn.on .studio-setbtn-caret { transform: rotate(180deg); } /* 예상 비용 — 유료 호출 직전에 읽는 숫자라 [생성하기] 바로 옆. */ .studio-cost { display: inline-flex; align-items: baseline; gap: 3px; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink-2); } .studio-cost-lab { font-size: 11px; color: var(--ink-3); } .studio-cost-val { font-size: 14px; font-weight: 700; color: var(--ink); } .studio-cost-approx { font-size: 11px; color: var(--ink-3); } .studio-cost.high .studio-cost-val { color: var(--warn); } .studio-cost.high .studio-cost-lab { color: var(--warn); } /* 펼침 — 높이 대신 grid-template-rows 로 애니메이션(레이아웃 스래시 없이 접힘/펼침). */ .studio-adv-anim { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--std) var(--ease); } .studio-adv-anim.open { grid-template-rows: 1fr; } .studio-adv-anim > .studio-adv { overflow: hidden; min-height: 0; } /* 테두리 없는 '우물' — 컴포저 카드 안이라 카드를 겹치지 않아요. */ .studio-adv { background: var(--surface-sunken); border-radius: var(--r-sm); } .studio-adv-anim.open > .studio-adv { padding: 12px; margin-top: 2px; } @media (prefers-reduced-motion: reduce) { .studio-adv-anim, .studio-setbtn-caret { transition: none; } } @media (max-width: 820px) { .studio-setbtn { min-height: 44px; flex: 1 1 100%; } .studio-cost { margin-left: auto; } } /* 모델 선택 모달 — 카테고리 탭 + 카드 그리드 */ .studio-mpick-wrap { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .studio-mpick-tabs { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 4px; border-bottom: 1px solid var(--hairline); } .studio-mpick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; max-height: 60vh; overflow-y: auto; padding: 4px; } .studio-mpick { padding: 14px 16px; background: var(--surface); border: 1.5px solid var(--hairline); border-radius: var(--r-md); cursor: pointer; text-align: left; transition: border-color var(--fast), background var(--fast), transform var(--fast); display: flex; flex-direction: column; gap: 6px; } .studio-mpick:hover { border-color: var(--gold); transform: translateY(-1px); } .studio-mpick.on { border-color: var(--gold); background: var(--gold-tint); } .studio-mpick-top { display: flex; justify-content: space-between; align-items: center; } .studio-mpick-cat { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: var(--r-pill); background: rgba(95, 155, 232, 0.15); color: var(--sat); letter-spacing: 0.02em; } .studio-mpick-cat.edit { background: rgba(74, 188, 199, 0.18); color: var(--gold); } .studio-mpick-cat.vid { background: color-mix(in srgb, var(--lux-violet) 16%, transparent); color: var(--lux-violet); } .studio-mpick-price { font-size: 11.5px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; } .studio-mpick-name { font-weight: 700; font-size: 14px; letter-spacing: -0.01em; color: var(--ink); } .studio-mpick-desc { font-size: 11.5px; color: var(--ink-3); line-height: 1.4; } .studio-mpick-sub { font-size: 11px; color: var(--ink-2); font-weight: 600; } /* 프롬프트 입력 — 컴포저 본문(테두리 없음, surface 유지) */ .studio-prompt { width: 100%; min-height: 80px; padding: 8px 0; border: none; background: transparent; font: inherit; font-size: 15px; color: var(--ink); resize: vertical; transition: none; line-height: 1.5; } .studio-prompt:focus { outline: none; } .studio-prompt::placeholder { color: var(--ink-3); } .studio-counter { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; margin-left: 2px; } /* 참조 이미지 */ .studio-refs { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 12px 14px; transition: border-color var(--fast), background var(--fast); } .studio-refs.drag { border-color: var(--gold); background: var(--gold-tint); } /* 슬롯 카드 — 다중 참조 슬롯(예: Kling/Seedance I2V 시작/끝 프레임) */ .studio-ref-slot { background: var(--surface-sunken); border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: 10px 12px; margin-bottom: 10px; transition: border-color var(--fast), background var(--fast); } .studio-ref-slot:last-child { margin-bottom: 0; } .studio-ref-slot.drag { border-color: var(--gold); background: var(--gold-tint); } .studio-ref-slot .studio-ref-head { margin-bottom: 8px; } .studio-ref-slot strong { font-size: 12.5px; font-weight: 700; color: var(--ink); letter-spacing: -0.005em; } .studio-ref-req { font-size: 11.5px; color: var(--danger); font-weight: 700; } .studio-ref-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-weight: 700; font-size: 13px; color: var(--ink-2); } .studio-ref-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; } .studio-ref-item { position: relative; aspect-ratio: 1; background: var(--surface-sunken); border-radius: var(--r-sm); overflow: hidden; border: 1.5px solid transparent; } .studio-ref-item.uploading { border-color: var(--gold); } .studio-ref-item.error { border-color: var(--danger); } .studio-ref-item img { width: 100%; height: 100%; object-fit: cover; } .studio-ref-overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(2px); } .studio-ref-item.error .studio-ref-overlay { background: rgba(196, 49, 75, 0.25); color: var(--danger); font-weight: 800; font-size: 26px; } .studio-ref-x { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.65); color: #fff; cursor: pointer; font-size: 12px; line-height: 1; z-index: 2; } .studio-ref-base { position: absolute; bottom: 4px; left: 4px; font-size: 9.5px; font-weight: 800; color: #fff; background: rgba(0, 0, 0, 0.7); padding: 2px 6px; border-radius: var(--r-pill); letter-spacing: 0.02em; } /* 레퍼런스 이름표 — 프롬프트에 그대로 옮겨 적는 값이라 '베이스' 배지보다 눈에 띄어야 해요. */ .studio-ref-base.tag { background: color-mix(in srgb, var(--lux-violet) 88%, black); font-variant-numeric: tabular-nums; } .studio-ref-hint { margin: 6px 0 2px; font-size: 12px; color: var(--ink-3); } .studio-ref-tagname { font-family: inherit; font-weight: 700; color: var(--lux-violet); } .studio-ref-add { aspect-ratio: 1; background: var(--surface-sunken); border: 1.5px dashed var(--hairline-strong); border-radius: var(--r-sm); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; color: var(--ink-3); transition: border-color var(--fast); } .studio-ref-add:hover { border-color: var(--gold); color: var(--gold); } .studio-ref-add-ico { display: grid; place-items: center; } /* 라이브러리 상세 삭제 버튼 */ .studio-del-btn { color: var(--danger); border-color: rgba(196, 49, 75, 0.35); } .studio-del-btn:hover { background: rgba(196, 49, 75, 0.08); border-color: var(--danger); } /* 생성 완료 큰 결과 카드 — 큐 안에 들어감. [라이브러리로 이동]·[이미지 폐기] 둘 중 하나 누를 때까지 유지. */ .studio-result-card { background: var(--surface); border: 1.5px solid var(--pos); border-radius: var(--r-md); padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; } .studio-result-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; } .studio-result-state { font-weight: 700; color: var(--pos); font-size: 13.5px; letter-spacing: -0.01em; } .studio-result-meta { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; } .studio-result-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; } .studio-result-img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-sm); cursor: zoom-in; background: var(--surface-sunken); border: 1px solid var(--hairline); transition: transform var(--fast), box-shadow var(--fast); } .studio-result-img:hover { transform: scale(1.02); box-shadow: var(--shadow-hover); } video.studio-result-img { aspect-ratio: 16/9; } /* 라이브러리 — 비디오 카드 hover 자동재생 + 우상단 비디오 뱃지 */ .studio-lib-card video { aspect-ratio: 1; width: 100%; object-fit: cover; background: var(--surface-sunken); } .studio-lib-vidbadge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,0.66); color: #fff; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: var(--r-pill); } video.studio-detail-img { aspect-ratio: 16/9; flex: 0 1 560px; max-width: 100%; height: auto; border-radius: var(--r-md); background: var(--surface-sunken); } .studio-result-prompt { font-size: 12.5px; color: var(--ink-2); padding: 9px 12px; background: var(--surface-sunken); border-radius: var(--r-sm); line-height: 1.55; white-space: pre-wrap; word-break: break-word; } .studio-result-actions { display: flex; gap: 8px; flex-wrap: wrap; } .studio-discard-btn { color: var(--danger); border-color: rgba(196, 49, 75, 0.35); } .studio-discard-btn:hover { background: rgba(196, 49, 75, 0.08); border-color: var(--danger); } @media (max-width: 820px) { .studio-result-grid { grid-template-columns: 1fr; } } /* 사용량 칩 (탭바 오른쪽) + 모달 */ .studio-usage { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-pill); cursor: pointer; font: inherit; font-size: 12px; color: var(--ink-2); transition: border-color var(--fast); } .studio-usage:hover { border-color: var(--gold); } .studio-usage-icon { color: var(--gold); font-size: 11px; } .studio-usage-month { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; } .studio-usage-bal { color: var(--ink-3); font-variant-numeric: tabular-nums; } .studio-usage-modal { padding: 4px; display: flex; flex-direction: column; gap: 4px; } .studio-usage-row { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--hairline); } .studio-usage-row.bal { border-top: 1px solid var(--gold); border-bottom: none; margin-top: 6px; padding-top: 14px; } .studio-usage-row .studio-usage-k { min-width: 70px; font-weight: 600; color: var(--ink-2); font-size: 13px; } .studio-usage-row .studio-usage-v { font-weight: 800; color: var(--ink); font-size: 18px; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; flex: 1; } .studio-usage-row.bal .studio-usage-v { color: var(--gold); } /* 고급 설정 (모달 내부) */ .studio-params { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; } .studio-param { display: flex; flex-direction: column; gap: 4px; font-size: 12px; } .studio-param-lab { font-weight: 600; color: var(--ink-2); font-size: 11.5px; } .studio-param-help { font-size: 10.5px; color: var(--ink-3); } .studio-param input.input, .studio-param select.select { width: 100%; padding: 7px 10px; font-size: 13px; } .studio-param.is-bool { justify-content: flex-start; } .studio-param-row { display: flex; align-items: center; gap: 8px; min-height: 34px; } .studio-param-row input[type="checkbox"] { width: 17px; height: 17px; margin: 0; flex: none; accent-color: var(--accent); } .studio-param.is-bool .studio-param-lab { font-size: 12.5px; color: var(--ink); } /* 큐 패널 */ .studio-queue { display: flex; flex-direction: column; gap: 8px; } .studio-q-head { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; font-weight: 700; font-size: 13px; color: var(--ink-2); } .studio-qitem { display: flex; gap: 12px; align-items: center; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 10px 12px; } .studio-qitem.done { border-color: var(--pos); } .studio-qitem.failed { border-color: var(--danger); } .studio-qitem.cancelled { opacity: 0.55; } .studio-q-left { flex: 1 1 auto; min-width: 0; } .studio-q-model { font-weight: 700; font-size: 13px; color: var(--ink); } .studio-q-prompt { font-size: 12px; color: var(--ink-2); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .studio-q-state { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; font-weight: 600; } .studio-qitem.done .studio-q-state { color: var(--pos); } .studio-qitem.failed .studio-q-state { color: var(--danger); } .studio-q-right { display: flex; gap: 6px; align-items: center; flex: none; } .studio-q-spinner { width: 22px; height: 22px; border: 2.5px solid var(--hairline); border-top-color: var(--gold); border-radius: 50%; animation: studioSpin 0.9s linear infinite; } @keyframes studioSpin { to { transform: rotate(360deg); } } /* 라이브러리 갤러리 */ /* ── 레퍼런스 세트 ── 이름 붙인 참조 이미지 묶음. 라이브러리 카드와 같은 문법을 써요(두 번 배우지 않게). */ .studio-set-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .studio-set-bar .input { max-width: 240px; } .studio-set-help { font-size: 12px; color: var(--ink-3); margin: 0 0 14px 2px; } .studio-set-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; } .studio-set-card { position: relative; padding: 0; border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden; cursor: pointer; background: var(--surface); text-align: left; transition: transform var(--fast), box-shadow var(--fast); display: flex; flex-direction: column; } .studio-set-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); } .studio-set-card > img { aspect-ratio: 1; width: 100%; object-fit: cover; background: var(--surface-sunken); } .studio-set-empty { aspect-ratio: 1; display: grid; place-items: center; background: var(--surface-sunken); color: var(--ink-3); } .studio-set-meta { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 5px; min-width: 0; } .studio-set-name { font-size: 13px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .studio-set-sub { display: flex; align-items: center; gap: 6px; font-size: 11.5px; } .studio-set-kind { padding: 1px 7px; border-radius: var(--r-pill); font-size: 10.5px; font-weight: 700; background: var(--accent-tint); color: var(--brand-deep); } .studio-set-kind.model { background: color-mix(in srgb, var(--lux-violet) 16%, transparent); color: var(--lux-violet); } .studio-set-tags { display: flex; gap: 4px; flex-wrap: wrap; } .studio-set-tag { font-size: 10.5px; color: var(--ink-3); background: var(--surface-sunken); padding: 1px 6px; border-radius: var(--r-pill); } .studio-set-blank { grid-column: 1/-1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 40px 16px; color: var(--ink-2); text-align: center; } .studio-set-blank > div:first-child { color: var(--ink-3); } /* 편집 시트 — 팝업 안이라 카드를 겹치지 않고 줄로만 나눠요(SSOT §3). */ .studio-set-editor { display: flex; flex-direction: column; gap: 12px; } .studio-set-imghead { display: flex; align-items: center; gap: 8px; } .studio-set-imghead .lab { margin: 0; } .studio-set-editgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; } .studio-set-thumb { position: relative; border-radius: var(--r-sm); overflow: hidden; background: var(--surface-sunken); } .studio-set-thumb > img { aspect-ratio: 1; width: 100%; object-fit: cover; display: block; } .studio-set-thumb.cover { outline: 2px solid var(--accent); outline-offset: -2px; } .studio-set-coverbadge { position: absolute; bottom: 4px; left: 4px; font-size: 9.5px; font-weight: 800; color: var(--ink-on-accent); background: var(--accent); padding: 2px 6px; border-radius: var(--r-pill); } .studio-set-first { position: absolute; bottom: 4px; left: 4px; width: 22px; height: 22px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer; color: #fff; background: rgba(0, 0, 0, 0.62); transform: rotate(90deg); } .studio-set-picker { display: flex; flex-direction: column; gap: 10px; } .studio-set-savehead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .studio-set-sechead { margin: 4px 0 0 2px; } .studio-ref-load { margin-left: 8px; } @media (max-width: 820px) { .studio-set-bar .input { max-width: none; flex: 1 1 100%; } .studio-set-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } } .studio-lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; } /* 무한 스크롤 센티넬 — 높이 0이면 관찰이 안 걸려서 아주 얇게 둬요(보이지는 않아요). */ .studio-lib-more { height: 1px; } .studio-lib-card { position: relative; padding: 0; border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden; cursor: zoom-in; background: var(--surface); transition: transform var(--fast), box-shadow var(--fast); display: flex; flex-direction: column; } .studio-lib-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); } .studio-lib-card img { aspect-ratio: 1; width: 100%; object-fit: cover; background: var(--surface-sunken); } .studio-lib-star { position: absolute; top: 6px; right: 6px; background: rgba(0, 0, 0, 0.6); color: #ffd76b; font-size: 14px; padding: 2px 7px; border-radius: var(--r-pill); } .studio-lib-cap { padding: 8px 10px 10px; text-align: left; } .studio-lib-model { font-size: 11px; font-weight: 700; color: var(--ink-2); } .studio-lib-prompt { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* 상세 모달 */ .studio-detail { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; } .studio-detail-img { flex: 0 1 480px; max-width: 100%; height: auto; border-radius: var(--r-md); background: var(--surface-sunken); } .studio-detail-side { flex: 1 1 280px; min-width: 0; } .studio-detail-model { font-weight: 700; font-size: 14px; color: var(--ink); margin-bottom: 6px; } .studio-detail-prompt { font-size: 13px; line-height: 1.55; color: var(--ink-2); background: var(--surface-sunken); padding: 10px 12px; border-radius: var(--r-sm); margin-bottom: 10px; white-space: pre-wrap; } .studio-detail-params { font-size: 11px; font-family: ui-monospace, monospace; color: var(--ink-3); background: var(--surface-sunken); padding: 8px 10px; border-radius: var(--r-sm); overflow: auto; max-height: 140px; white-space: pre; } .studio-detail-meta { font-size: 11.5px; color: var(--ink-3); margin-top: 8px; } .studio-lib-upbadge { position: absolute; top: 6px; left: 6px; z-index: 1; padding: 3px 8px; border-radius: var(--r-pill); background: var(--brand); color: var(--ink-on-accent); font-size: 10.5px; font-weight: 800; } /* 30일 경과로 WebP 압축된 생성물 — 원본 화질이 없다는 걸 카드에서 바로 알려요(업스케일 유도). */ .studio-lib-expbadge { position: absolute; top: 6px; left: 6px; z-index: 2; padding: 3px 8px; border-radius: var(--r-pill); background: var(--warn); color: var(--ink-on-accent); font-size: 10.5px; font-weight: 800; } .studio-lib-upbadge + .studio-lib-expbadge { top: 30px; } .studio-expired-note { margin: 8px 0 0; padding: 10px 12px; border-radius: var(--r-md); background: color-mix(in srgb, var(--warn) 12%, var(--surface)); border-left: 3px solid var(--warn); font-size: 12px; line-height: 1.55; color: var(--ink-2); } .studio-expired-note b { display: block; margin-bottom: 3px; color: var(--warn); font-size: 12.5px; font-weight: 750; } .studio-up-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; border: 1.5px dashed var(--hairline); border-radius: var(--r-md); background: var(--surface-sunken); text-align: center; transition: border-color var(--fast), background var(--fast); } .studio-up-dropzone.drag { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface-sunken)); } .studio-up-dropzone .btn { width: auto; } .studio-up-wrap { display: grid; grid-template-columns: minmax(280px, 0.9fr) minmax(360px, 1.1fr); gap: 24px; min-width: 0; } .studio-up-left, .studio-up-controls, .studio-up-section { min-width: 0; } .studio-up-preview { position: sticky; top: 78px; overflow: hidden; border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--surface-sunken); } .studio-up-preview img { display: block; width: 100%; height: auto; max-height: 68dvh; object-fit: contain; } .studio-up-grid { position: absolute; inset: 0; display: none; pointer-events: none; } /* 판별 중 안내 오버레이 — 미리보기 위에 덮어 무슨 일이 벌어지는지 알려줘요. (판별은 모델 추론이라 10~13초 걸려요. 작은 글씨 한 줄만으론 멈춘 걸로 보여요.) */ .studio-up-loading { position: absolute; inset: 0; display: none; } .studio-up-loading.on { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px; text-align: center; background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: blur(3px); } .studio-up-loading-t { font-size: 14px; font-weight: 700; color: var(--ink); } .studio-up-loading-s { font-size: 12px; color: var(--ink-2); line-height: 1.5; max-width: 300px; } .studio-up-loading-sec { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; } .studio-up-grid.on { display: grid; } .studio-up-grid span { min-width: 0; min-height: 0; border-right: 1px solid var(--warn); border-bottom: 1px solid var(--warn); box-shadow: inset 0 0 0 1px var(--surface); } .studio-up-controls { display: flex; flex-direction: column; gap: 16px; } .studio-up-analysis, .studio-up-section { padding: 14px 16px; border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--surface); } .studio-up-analysis strong { color: var(--ink); font-size: 15px; } .studio-up-reason { margin-top: 5px; color: var(--ink-2); font-size: 12.5px; line-height: 1.5; } .studio-up-detect-controls { display: flex; align-items: end; gap: 8px; margin-top: 12px; flex-wrap: wrap; } .studio-up-detect-controls label, .studio-up-size-inputs label { display: flex; flex-direction: column; gap: 5px; color: var(--ink-2); font-size: 11.5px; font-weight: 700; } .studio-up-small { width: 72px; } .studio-up-label { margin-bottom: 10px; color: var(--ink); font-size: 12.5px; font-weight: 800; } .studio-up-pills { display: flex; gap: 7px; flex-wrap: wrap; } .studio-up-pill { max-width: 100%; padding: 7px 11px; overflow: hidden; border: 1px solid var(--hairline-strong); border-radius: var(--r-pill); background: var(--surface); color: var(--ink-2); font: inherit; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; } .studio-up-pill:hover { border-color: var(--accent); color: var(--ink); } .studio-up-pill.on { border-color: var(--accent); background: var(--accent-tint); color: var(--brand); } .studio-up-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; } .studio-up-option { display: flex; min-width: 0; flex-direction: column; gap: 5px; color: var(--ink-2); font-size: 11.5px; font-weight: 700; } .studio-up-option small { color: var(--ink-3); font-size: 10.5px; font-weight: 500; line-height: 1.4; } .studio-up-option input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--accent); } .studio-up-size-inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; } .studio-up-note { min-height: 18px; margin-top: 7px; color: var(--ink-3); font-size: 11.5px; line-height: 1.45; } /* 판별은 실측 10~13초 걸려요(모델 추론 시간). 텍스트만 두면 멈춘 걸로 보여서 도는 표시를 같이 둬요. 기존 .studio-q-spinner 와 같은 애니메이션을 쓰되 글줄 안에 들어갈 크기예요. */ /* 🔴 flex 를 .studio-up-note 전체에 걸면 안 돼요 — clampNote·promptNote 등 다른 안내문까지 레이아웃이 바뀌어요. 스피너가 실제로 들어 있는 동안만 걸어요. */ .studio-up-note:has(.studio-up-spin) { display: flex; align-items: center; gap: 6px; } .studio-up-spin { flex: none; width: 12px; height: 12px; border: 2px solid var(--hairline); border-top-color: var(--accent); border-radius: 50%; animation: studioSpin 0.9s linear infinite; } @media (prefers-reduced-motion: reduce) { .studio-up-spin { animation: none; } } .studio-up-note.warn { color: var(--warn); } .studio-up-prompt { min-height: 108px; resize: vertical; line-height: 1.5; } .studio-up-summary { padding: 12px 14px; border-radius: var(--r-sm); background: var(--accent-tint); color: var(--brand); font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; } .studio-up-warning { min-height: 18px; color: var(--danger); font-size: 12px; font-weight: 700; line-height: 1.45; } .studio-up-progress { min-height: 18px; color: var(--ink-2); font-size: 12px; font-weight: 700; } .studio-up-actions { display: flex; justify-content: flex-end; } @media (max-width: 820px) { .studio-up-wrap { grid-template-columns: minmax(0, 1fr); gap: 16px; width: 100%; overflow-x: hidden; } .studio-up-preview { position: relative; top: auto; } .studio-up-options, .studio-up-size-inputs { grid-template-columns: minmax(0, 1fr); } .studio-up-controls, .studio-up-analysis, .studio-up-section { max-width: 100%; box-sizing: border-box; } .studio-up-wrap input, .studio-up-wrap select, .studio-up-wrap textarea { min-width: 0; max-width: 100%; font-size: 16px; box-sizing: border-box; } .studio-up-actions .btn { width: 100%; } .studio-up-dropzone { padding: 16px; } } @media (max-width: 820px) { .studio-models { padding-bottom: 6px; } .studio-model { min-width: 150px; } .studio-lib-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } .studio-submit { width: 100%; min-width: 0; } } @media (prefers-reduced-motion: reduce) { .studio-q-spinner { animation: none; } } /* 업적(게임 요소) */ .ach-hero { display: flex; gap: 16px; align-items: center; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 16px 18px; margin-bottom: 4px; } .ach-hero-badge { flex: 0 0 auto; display: grid; place-items: center; gap: 2px; width: 60px; } .ach-lv { font-size: 13px; font-weight: 800; color: var(--gold); letter-spacing: -0.01em; } .ach-bar { height: 7px; background: var(--surface-sunken); border-radius: var(--r-pill); overflow: hidden; } .ach-bar.sm { height: 5px; margin-top: 7px; } .ach-bar-fill { height: 100%; background: var(--ink-3); border-radius: inherit; transition: width var(--std); } .ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 12px; } .ach-card { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 14px; opacity: 0.62; transition: opacity var(--fast), border-color var(--fast); } .ach-card.on { opacity: 1; } /* 이번에 새로 달성한 업적 — 외곽 골드 글로우 펄스(다음 방문 땐 기준선이 올라가 자동으로 사라져요) */ .ach-card.ach-new { opacity: 1; border-color: var(--gold); animation: achNewGlow 1.5s ease-in-out infinite; } @keyframes achNewGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(74, 188, 199, 0); } 50% { box-shadow: 0 0 0 5px rgba(74, 188, 199, 0.3), 0 0 14px 2px rgba(74, 188, 199, 0.35); } } .ach-new-tag { font-size: 10px; font-weight: 800; color: #fff; background: var(--gold); border-radius: var(--r-pill); padding: 1px 7px; white-space: nowrap; } @media (prefers-reduced-motion: reduce) { .ach-card.ach-new { animation: none; } } .ach-ic { flex: 0 0 auto; width: 46px; height: 46px; display: grid; place-items: center; border: 1.5px solid var(--hairline); border-radius: 13px; } .ach-name { font-weight: 650; font-size: 14px; letter-spacing: -0.01em; } .ach-tier { font-size: 10px; font-weight: 700; border: 1px solid currentColor; border-radius: var(--r-pill); padding: 0 7px; line-height: 16px; } .ach-desc { font-size: 12px; color: var(--ink-3); margin-top: 3px; line-height: 1.45; } .ach-meta { font-size: 11px; color: var(--ink-3); margin-top: 6px; font-weight: 600; } /* ── 레벨 뱃지(프로필 이름 앞) ── */ .lv-badge { display: inline-flex; align-items: center; font-size: 10px; font-weight: 800; color: #fff; background: var(--gold); border-radius: var(--r-pill); padding: 1px 6px; margin-right: 6px; letter-spacing: -0.01em; box-shadow: var(--shadow-gold); } /* ── 상점(코스메틱) ── */ .store-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 14px 18px; margin-bottom: 14px; } .store-coin { font-weight: 800; color: var(--gold); font-size: 16px; display: inline-flex; align-items: center; gap: 6px; } .store-coin::before { content: "◆"; font-size: 13px; } .store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px; } .store-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 14px; display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; } .store-card.equipped { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; } .store-prev { width: 100%; height: 88px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--surface-sunken); overflow: hidden; position: relative; } .store-prev .avatar-initial { width: 44px; height: 44px; font-size: 18px; } .store-name { font-weight: 700; font-size: 13.5px; letter-spacing: -0.01em; } .store-desc { font-size: 11px; color: var(--ink-3); line-height: 1.45; min-height: 2.7em; } .store-price { font-weight: 800; color: var(--gold); font-size: 13px; } .store-card .btn { width: 100%; } /* ── 코스메틱 이펙트 ── 프로필 아이콘 주변(icon) + 프로필 배경(bg) ── */ .cos-iconwrap { position: relative; display: inline-grid; place-items: center; border-radius: 50%; isolation: isolate; } .cos-iconwrap > * { position: relative; z-index: 1; } [class*="cos-ic-"]::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; pointer-events: none; z-index: 0; } .cos-ic-ring::before { background: conic-gradient(from 0deg, transparent 0%, #e8c874 25%, #b8923f 50%, transparent 75%); animation: cos-spin 2.6s linear infinite; } .cos-ic-glow::before { inset: -2px; box-shadow: 0 0 12px 3px rgba(214, 173, 82, 0.85), 0 0 4px 1px rgba(214, 173, 82, 0.9); animation: cos-pulse 1.8s ease-in-out infinite; } .cos-ic-neon::before { inset: -2px; border: 2px solid #38e0e0; box-shadow: 0 0 10px #38e0e0, inset 0 0 5px #38e0e0; animation: cos-pulse 1.5s ease-in-out infinite; } .cos-ic-flame::before { inset: -3px; box-shadow: 0 0 12px 2px #ff6a00, 0 0 22px 5px rgba(255, 120, 0, 0.55); animation: cos-flicker 1.1s ease-in-out infinite; } .cos-ic-rainbow::before { background: conic-gradient(from 0deg, #ff5f5f, #ffb65f, #fff15f, #6bff8e, #5fd0ff, #8e6bff, #ff5fe0, #ff5f5f); animation: cos-spin 3s linear infinite; } .cos-ic-sparkle::before { inset: -6px; background: radial-gradient(circle at 18% 22%, #fff 0 2px, transparent 3px), radial-gradient(circle at 82% 28%, #fff 0 1.5px, transparent 2.5px), radial-gradient(circle at 30% 84%, #fff 0 2px, transparent 3px), radial-gradient(circle at 78% 78%, #fff 0 1.5px, transparent 2.5px); filter: drop-shadow(0 0 3px #ffe08a); animation: cos-spin 5s linear infinite, cos-twinkle 1.3s ease-in-out infinite; } [class*="cos-bg-"] { position: relative; overflow: hidden; isolation: isolate; padding: 5px 12px 5px 5px; border-radius: var(--r-pill); } [class*="cos-bg-"]::before { content: ""; position: absolute; inset: 0; z-index: -1; } [class*="cos-bg-"] .user-chip-name { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); } [class*="cos-bg-"] .lv-badge { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); } .cos-bg-wave::before { background: linear-gradient(110deg, #9c7a30, #e8c874, #9c7a30); background-size: 220% 100%; animation: cos-slide 3s linear infinite; } .cos-bg-shimmer::before { background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%), linear-gradient(0deg, #b8923f, #b8923f); background-size: 220% 100%, 100% 100%; animation: cos-slide 2.4s linear infinite; } .cos-bg-star::before { background: #10142e radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent), radial-gradient(1.5px 1.5px at 65% 60%, #cfe1ff, transparent), radial-gradient(1px 1px at 85% 25%, #fff, transparent), radial-gradient(1.5px 1.5px at 40% 80%, #fff, transparent); animation: cos-twinkle 2s ease-in-out infinite; } .cos-bg-aurora::before { background: linear-gradient(120deg, #2bb673, #2f80ed, #a259ff, #2bd6c6); background-size: 300% 300%; animation: cos-aurora 6s ease infinite; } /* 추가 아이콘 이펙트 */ .cos-ic-aurora::before { background: conic-gradient(from 0deg, #2bb673, #2f80ed, #a259ff, #2bd6c6, #2bb673); animation: cos-spin 4s linear infinite; } .cos-ic-orbit::before { inset: -2px; border: 1.5px solid rgba(214, 173, 82, 0.35); } .cos-ic-orbit::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; z-index: 0; pointer-events: none; background: radial-gradient(circle at 50% 0, #ffd36b 0 3px, transparent 4px); filter: drop-shadow(0 0 5px #ffd36b); animation: cos-spin 2.4s linear infinite; } /* 추가 배경 이펙트 */ .cos-bg-holo::before { background: linear-gradient(100deg, #ff9a9e, #fad0c4, #a18cd1, #84fab0, #8fd3f4, #ff9a9e); background-size: 300% 100%; animation: cos-slide 5s linear infinite; } .cos-bg-galaxy::before { background: linear-gradient(120deg, #0f0c29, #302b63, #6a3093, #24243e); background-size: 300% 300%; animation: cos-aurora 8s ease infinite; } /* ── 레벨 뱃지(Lv.N) 코스메틱 — 저렴한 입문용. 작은 뱃지의 색·간단 애니메이션 ── */ .cos-lv-silver { background: linear-gradient(135deg, #cdd4de, #8c96a3); } .cos-lv-ocean { background: linear-gradient(135deg, #46b6ff, #1f5fe0); } .cos-lv-sunset { background: linear-gradient(100deg, #ff8a5b, #ff5fa2, #ffd36b); background-size: 200% 100%; animation: cos-slide 3s linear infinite; } .cos-lv-neon { background: #16203a; color: #aef6ff; box-shadow: 0 0 8px #38e0e0, 0 0 2px #38e0e0; animation: cos-pulse 1.7s ease-in-out infinite; } .cos-lv-holo { background: linear-gradient(100deg, #a18cd1, #fbc2eb, #8fd3f4, #a18cd1); background-size: 300% 100%; animation: cos-slide 4s linear infinite; } .lv-badge.cos-lv-holo { color: #3a2f63; } .cos-lv-rainbow { background: linear-gradient(90deg, #ff5f5f, #ffb65f, #fff15f, #6bff8e, #5fd0ff, #8e6bff, #ff5fe0, #ff5f5f); background-size: 300% 100%; animation: cos-slide 2.6s linear infinite; } @keyframes cos-spin { to { transform: rotate(360deg); } } @keyframes cos-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } @keyframes cos-flicker { 0%, 100% { opacity: 0.7; } 35% { opacity: 1; } 60% { opacity: 0.6; } 80% { opacity: 0.95; } } @keyframes cos-twinkle { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } @keyframes cos-slide { to { background-position: -220% 0, 0 0; } } @keyframes cos-aurora { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @media (prefers-reduced-motion: reduce) { [class*="cos-ic-"]::before, [class*="cos-ic-"]::after, [class*="cos-bg-"]::before, [class*="cos-lv-"] { animation: none !important; } } .prod-thumb .noimg { width: 100%; height: 100%; display: grid; place-items: center; color: var(--ink-3); font-size: 30px; } .prod-thumb .ribbon { position: absolute; top: 8px; left: 8px; display: flex; gap: 5px; } .prod-body { padding: 11px 13px 14px; display: flex; flex-direction: column; gap: 3px; } .prod-cat { font-size: 11px; color: var(--ink-3); font-weight: 600; } .prod-name { font-size: 14px; font-weight: 650; line-height: 1.25; } .prod-code { font-size: 11px; color: var(--ink-3); font-family: inherit; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; } .prod-meta { display: flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap; } /* table */ .table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .table th { text-align: left; font-size: 11.5px; color: var(--ink-3); font-weight: 600; padding: 9px 12px; border-bottom: 1px solid var(--hairline); position: sticky; top: 0; background: var(--surface); } .table td { padding: 11px 12px; border-bottom: 1px solid var(--hairline); vertical-align: middle; } .table tr:hover td { background: var(--surface-2); } .num { font-variant-numeric: tabular-nums; text-align: right; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } /* 표 안 숫자는 지침대로 Pretendard 유지(monospace 금지) — 대시보드 소스/매체 등 .table 전역 */ .table .num, .table td.num, .table th.num { font-family: var(--font); } /* 숫자 헤더도 우측정렬 — .table th의 left가 .num의 right를 덮어 헤더↔숫자가 어긋나던 것 수정 */ .table th.num { text-align: right; } /* empty / loading */ .empty { text-align: center; padding: 80px 20px; color: var(--ink-3); } .empty .big { font-size: 40px; margin-bottom: 12px; opacity: 0.5; } .skeleton { background: linear-gradient(90deg, var(--surface-sunken), var(--hairline), var(--surface-sunken)); background-size: 200% 100%; animation: shimmer 1.3s infinite; border-radius: var(--r-md); } @keyframes shimmer { to { background-position: -200% 0; } } /* modal / sheet */ .scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(3px); z-index: 100; opacity: 0; animation: fade var(--std) forwards; } @keyframes fade { to { opacity: 1; } } .modal { position: fixed; z-index: 101; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.96); width: min(880px, 94vw); max-height: 90dvh; overflow: auto; background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-pop); opacity: 0; animation: pop var(--std) var(--ease-spring) forwards; } @keyframes pop { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } .modal-head { position: sticky; top: 0; background: color-mix(in srgb, var(--surface) 86%, transparent); backdrop-filter: blur(14px); display: flex; align-items: center; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--hairline); z-index: 2; } .modal-body { padding: 22px; } /* toast */ #toasts { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; } .toast { background: var(--ink); color: var(--canvas); padding: 11px 18px; border-radius: var(--r-pill); font-size: 13.5px; font-weight: 600; box-shadow: var(--shadow-pop); animation: pop var(--std) var(--ease-spring); } /* utilities */ .row { display: flex; align-items: center; gap: 10px; } .col { display: flex; flex-direction: column; } .wrap { flex-wrap: wrap; } .gap-sm { gap: 6px; } .mt { margin-top: 16px; } .muted { color: var(--ink-3); } .sec { color: var(--ink-2); } .right { margin-left: auto; } .hide { display: none !important; } .grow { flex: 1; min-width: 0; } .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .divider { height: 1px; background: var(--hairline); margin: 18px 0; } .formgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; } /* ========================= workspace / steps / price ========================= */ /* PC 우선 2열 워크스페이스 (모바일 1열) */ .work { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr); gap: 24px; align-items: start; } .rail { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 84px; } .panel { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); } .panel + .panel { margin-top: 0; } .panel-pad { padding: 24px; } .panel-head { display: flex; align-items: center; gap: 10px; padding: 18px 24px; border-bottom: 1px solid var(--hairline); } .panel-head h3 { font-size: 17px; letter-spacing: -0.01em; } /* 카드 왼쪽 상태 획 — ⚠️ `border-left: 3px` 로 그리지 마세요. .panel/.card 는 `border: 1px` + `border-radius: 18px` 라, 왼쪽만 3px 로 덮어쓰면 둥근 모서리에서 3px↔1px 이음매가 **갈고리처럼 말려 카드 윤곽에서 떨어져 보여요**(실측 스크린샷으로 확인). 카드 테두리 알파가 0.10 이라 그 말린 부분만 도드라져서 더 눈에 띕니다. 배경 스트라이프는 border-radius 가 깔끔히 잘라내서 그 현상이 없어요(라운드도 그대로 유지). */ .panel-line, .card-line { background: linear-gradient(var(--line-color), var(--line-color)) left / 3px 100% no-repeat, var(--surface); } .panel-line, .card-line { --line-color: var(--brand); } .panel-line-warn { --line-color: var(--warn); } .panel-line-accent { --line-color: var(--accent); } .panel-line-muted { --line-color: var(--hairline-strong); } .panel-line-none { --line-color: transparent; } /* 섹션 리듬 — ⚠️ 카드마다 `marginBottom` 을 손으로 정하지 마세요. 그러면 반드시 갈라져요: 실측(2026-08-05) 앱 전체 인라인 marginBottom 이 **12가지 값**, .panel/.card 만 봐도 16px 31곳·24px 10곳·14px 4곳·12px 1곳이었고, 공용 컴포넌트 `yearMonthBar` 는 아예 안 정해서 **0px** 라 연도 카드와 다음 카드가 붙어 보였어요(사장님 지적). **부모가 리듬을 소유**하면 자식은 여백을 몰라도 되고, 값이 한 곳에만 있어 갈라질 수가 없어요. 값은 DESIGN-SYSTEM §3 '섹션 24px'. */ .stack { display: flex; flex-direction: column; gap: var(--gap-section); } .stack-sm { display: flex; flex-direction: column; gap: 12px; } /* 적립금 지급 요청(관리자) — 카드 섹션·필터 헤더·일괄 작업 바·표 래퍼 */ .mr-sec { margin-bottom: 16px; } .mr-filters { flex-wrap: wrap; justify-content: space-between; row-gap: 10px; } .mr-body { padding: 18px 24px 20px; } .mr-tablewrap { overflow-x: auto; margin: 0 -8px; padding: 0 8px; } .mr-actionbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 8px 10px 14px; margin-bottom: 14px; background: var(--gold-tint); border: 1px solid var(--hairline); border-radius: var(--r-md); } .mr-actionbar-n { font-weight: 700; font-size: 13.5px; color: var(--ink); } .btn.mr-danger { color: var(--danger); } .mr-sms summary::-webkit-details-marker { display: none; } @media (max-width: 560px) { .mr-filters { padding: 14px 16px; } .mr-body { padding: 14px 16px 18px; } .mr-filters .seg-item { padding: 7px 11px; font-size: 12.5px; } } /* 단계 라벨 */ .step { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; } .step-n { width: 22px; height: 22px; border-radius: 50%; background: var(--gold-tint); color: var(--gold); font-size: 12px; font-weight: 800; display: grid; place-items: center; flex: none; } .step-t { font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; } .step-sub { font-size: 12.5px; color: var(--ink-3); } /* 세그먼트(마켓 선택 등) */ .seg { display: flex; flex-wrap: wrap; gap: 8px; } .seg-item { padding: 8px 13px; border-radius: var(--r-pill); border: 1px solid var(--hairline-strong); background: var(--surface); cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-2); transition: all var(--fast); display: inline-flex; gap: 6px; align-items: center; } .seg-item b { color: var(--ink-3); font-weight: 700; } .seg-item:hover { border-color: var(--gold); color: var(--ink); } .seg-item.on { background: var(--gold); border-color: var(--gold); color: var(--ink-on-chip); } .seg-item.on b { color: color-mix(in srgb, var(--ink-on-chip) 78%, transparent); } /* 가격 결과 히어로 */ .price-hero { background: linear-gradient(135deg, var(--gold), var(--gold-bright)); border: none; color: #fff; border-radius: var(--r-lg); padding: 20px 22px; } .price-hero .lbl { font-size: 12px; opacity: 0.9; font-weight: 600; } .price-hero .big { font-size: 40px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.04; margin-top: 4px; } .price-hero .sub { font-size: 12px; opacity: 0.85; margin-top: 4px; } /* 선택된 제품 칩 */ .picked { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--surface-2); } .picked img, .picked .ph { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; flex: none; background: var(--surface-sunken); display: grid; place-items: center; color: var(--ink-3); } /* 인라인 제품 검색 결과 */ .pt-results { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow: auto; } .pt-item { display: flex; flex-direction: column; gap: 4px; } .pt-result { display: flex; align-items: center; gap: 11px; width: 100%; padding: 8px 10px; border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--surface); cursor: pointer; text-align: left; transition: all var(--fast); } .pt-result:hover, .pt-result.pt-active { border-color: var(--gold); background: var(--gold-tint); } .pt-result img, .pt-result .ph { width: 40px; height: 40px; border-radius: 9px; object-fit: cover; flex: none; background: var(--surface-sunken); display: grid; place-items: center; color: var(--ink-3); } /* 가격검색 와이드 2열(PC): 좌 입력 · 우 적정가(스티키). ≤900px는 1열 스택. */ .pt-wide { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 28px; align-items: start; } .pt-wide > .pt-out { position: sticky; top: 16px; } @media (max-width: 900px) { .pt-wide { grid-template-columns: 1fr; gap: 18px; } .pt-wide > .pt-out { position: static; } } /* 단일/대량 탭 */ .pt-tabs { gap: 8px; } /* 대량검색 결과 표 — 숫자 우측·고정폭 느낌, 제품 셀만 넓게 */ .bulk-table th, .bulk-table td { white-space: nowrap; } .bulk-table td:first-child { white-space: normal; min-width: 160px; } /* 키보드(↑↓) 선택 하이라이트 — 발주 검색 리스트/그리드 */ .prod.prod-active { border-color: var(--gold); box-shadow: var(--shadow-hover); } /* 공용 제품 검색 모달 행 — 썸네일+이름(상세)+선택 */ .pick-row { display: flex; align-items: center; gap: 11px; padding: 7px 9px; border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--surface); transition: border-color var(--fast), background var(--fast); } .pick-row.pick-on, .pick-row:hover { border-color: var(--gold); background: var(--gold-tint); } .pick-thumb { width: 44px; height: 44px; border-radius: 9px; overflow: hidden; flex: none; background: var(--surface-sunken); display: grid; place-items: center; } .pick-thumb img { width: 100%; height: 100%; object-fit: cover; } .pick-thumb .noimg { color: var(--ink-3); font-size: 18px; } .pick-main { flex: 1; min-width: 0; } .pick-name { font-weight: 650; font-size: 13.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pick-name:hover { text-decoration: underline; } .pick-meta { font-size: 11px; color: var(--ink-3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pt-classify { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding: 7px 10px; border: 1px solid var(--gold); border-radius: var(--r-md); background: var(--gold-tint); } /* 가격 계산 과정 (매입가→마진→수수료→쿠폰) */ .breakdown { border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden; background: var(--surface); } .bd-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; font-size: 13px; } .bd-row + .bd-row { border-top: 1px solid var(--hairline); } .bd-k { color: var(--ink-2); } .bd-v { font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; } .bd-final { background: var(--gold-tint); } .bd-final .bd-k { color: var(--gold); font-weight: 700; } .bd-final .bd-v { color: var(--gold); font-weight: 800; font-size: 15px; } /* 스크린샷 붙여넣기 드롭존 */ .dropzone { text-align: center; padding: 26px 16px; border: 1.5px dashed var(--hairline-strong); border-radius: var(--r-md); background: var(--surface-2); cursor: pointer; transition: all var(--fast); } .dropzone:hover, .dropzone:focus { border-color: var(--gold); background: var(--gold-tint); outline: none; } .dropzone.drag { border-color: var(--gold); background: var(--gold-tint); transform: scale(1.01); } /* 전역 로딩 오버레이 (캐릭터 GIF) */ .loading-overlay { position: fixed; inset: 0; z-index: 4000; display: grid; place-items: center; background: color-mix(in srgb, var(--surface) 70%, transparent); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: loadingFade .14s ease; } .loading-box { display: grid; justify-items: center; gap: 8px; } .loading-gif { width: 150px; height: auto; filter: drop-shadow(0 10px 22px rgba(0,0,0,.14)); animation: loadingBob 1.5s ease-in-out infinite; } /* 다크 모드: GIF 누끼(흰 테두리)가 어두운 배경에서 지저분해 보여 → 흰 타일에 얹어 깔끔하게 */ :root[data-theme="dark"] .loading-gif { background: #fff; padding: 12px; border-radius: var(--r-lg); filter: none; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55); } .loading-msg { font-weight: 700; font-size: 14px; color: var(--ink); letter-spacing: -0.01em; } .loading-msg::after { display: inline-block; width: 1em; text-align: left; content: ""; animation: loadingDots 1.2s steps(1, end) infinite; } @keyframes loadingDots { 0%{content:"";} 25%{content:"·";} 50%{content:"··";} 75%{content:"···";} 100%{content:"";} } @keyframes loadingBob { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-7px); } } @keyframes loadingFade { from{opacity:0;} to{opacity:1;} } /* 오래 켜두면 새로고침 안내 배너 */ .refresh-banner { position: fixed; left: 50%; transform: translateX(-50%); bottom: 24px; z-index: 3500; display: flex; align-items: center; gap: 12px; width: min(540px, calc(100vw - 32px)); padding: 12px 14px 12px 16px; background: var(--surface); border: 1px solid var(--hairline); border-left: 3px solid var(--gold); border-radius: var(--r-lg); box-shadow: var(--shadow-hover); animation: bannerIn .28s ease; } .refresh-banner .refresh-ico { font-size: 18px; color: var(--gold); flex: none; } .refresh-banner .col { min-width: 0; } /* 텍스트가 글자 단위로 줄바꿈되지 않게 */ .refresh-banner .btn { flex: none; white-space: nowrap; } @keyframes bannerIn { from { opacity: 0; } to { opacity: 1; } } @media (max-width: 820px) { .refresh-banner { left: 16px; right: 16px; transform: none; width: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); } } @media (prefers-reduced-motion: reduce) { .refresh-banner { animation: none; } } /* 판매 제품 가격 현황 */ .pr-controls { display: grid; grid-template-columns: 1fr 360px; gap: 14px; align-items: start; margin-bottom: 16px; } @media (max-width: 820px) { .pr-controls { grid-template-columns: 1fr; } } /* 보고 표(이미지로 내보내는 산출물이라 고정 색, 테마 무관) */ .pr-wrap { overflow-x: auto; border-radius: var(--r-md); border: 1px solid var(--hairline); } .pr-table { border-collapse: collapse; width: 100%; background: var(--surface); color: var(--ink); font-size: 13px; font-family: var(--font); white-space: nowrap; } .pr-th { background: var(--surface-sunken); color: var(--ink); font-weight: 700; padding: 10px 12px; text-align: center; border: 1px solid var(--hairline); position: sticky; top: 0; letter-spacing: 0.01em; } .pr-td { padding: 9px 12px; text-align: center; border: 1px solid var(--hairline); color: var(--ink); } .pr-td.num { text-align: right; font-variant-numeric: tabular-nums; } /* 표 숫자는 전역 .num(monospace)를 덮고 Pretendard 유지(지침: Pretendard + tabular-nums) */ .pr-td.num, .pr-td.pr-sold, .pr-table .num { font-family: var(--font); } .pr-td.pr-supply { font-weight: 700; color: var(--ink); } .pr-zebra .pr-td { background: var(--surface-2); } .pr-td.pr-name { background: var(--accent-tint); font-weight: 650; text-align: left; color: var(--brand-deep); white-space: normal; } /* 편집 중 바로미터 '매우 낮음' 마켓이 있는 상품 — 상품명 셀을 위험색으로 강조(가격 문제를 한눈에) */ .pr-td.pr-name.pr-name-low { background: var(--danger-tint); color: var(--danger); } .pr-name-low .pr-name-btn, .pr-name-low > span { color: var(--danger); } .pr-name-low-tag { display: inline-flex; align-items: center; gap: 3px; margin-left: 7px; font-size: 11px; font-weight: 700; color: var(--danger); white-space: nowrap; vertical-align: middle; } .pr-name-low-tag .ic { flex: none; } /* 옵션(소재) — 실버/14K/18K 구분 색으로 한눈에(소재 고유색이라 브랜드 무관 유지) */ .pr-td.pr-opt { font-weight: 700; } .pr-td.pr-opt-silver { background: #eceff3; color: #586573; } .pr-td.pr-opt-14k { background: #f4d28a; color: #6b521b; } .pr-td.pr-opt-18k { background: #e7b357; color: #5c3f12; } /* 실제 팔린 마켓의 가격 셀만 강조 — 브랜드 아쿠아 틴트로 */ .pr-td.pr-sold { background: var(--accent-tint-strong); color: var(--brand-deep); font-weight: 700; } .pr-in { width: 84px; padding: 4px 7px; border: 1px solid var(--hairline-strong); border-radius: 7px; font-family: var(--font); font-size: 13px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; background: var(--surface); color: var(--ink); } /* 발주 여부 선택 (발주예정/발송예정) */ .pr-status-sel { font-family: var(--font); font-size: 13px; padding: 3px 6px; border: 1px solid var(--hairline-strong); border-radius: 7px; background: var(--surface); color: var(--ink); cursor: pointer; } .pr-status-sel:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-tint); } .pr-in:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-tint); } /* 가격 없는 빈 칸: 'X' placeholder를 가운데 회색으로(조회 모드 X와 통일). 입력하면 사라지고 숫자로 바뀜 */ .pr-in.pr-empty { text-align: center; } .pr-in.pr-empty::placeholder { color: var(--ink-3); font-weight: 700; opacity: 1; } /* 쿠폰 적용가 — 카페24가 상품에 붙여둔 쿠폰을 반영한 실제 구매가. 원가는 취소선으로 작게 남겨요. */ /* 편집 칸은 쿠폰 최종가를 받아요(칸에 보이는 = 넣는 = 고객이 내는 값). 그 아래 원가를 취소선으로 함께 보여줘요. */ .pr-cp-base { margin-top: 3px; font-size: 11px; font-weight: 500; color: var(--ink-3); text-decoration: line-through; text-align: right; font-variant-numeric: tabular-nums; } /* 옵션(함량) 직접 선택 — 셀의 소재 색을 그대로 물려받게 배경은 투명, 글자색은 상속 */ .pr-opt-sel { font-family: var(--font); font-size: 12px; font-weight: 700; padding: 3px 5px; border: 1px solid var(--hairline-strong); border-radius: 7px; background: transparent; color: inherit; cursor: pointer; } .pr-opt-sel:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-tint); } .pr-cp-was { display: block; font-size: 11px; font-weight: 500; color: var(--ink-3); text-decoration: line-through; font-variant-numeric: tabular-nums; } .pr-cp-now { display: block; font-weight: 750; color: var(--accent); font-variant-numeric: tabular-nums; } .pr-name-btn { background: none; border: none; padding: 0; font: inherit; font-weight: 650; color: var(--brand-deep); text-align: left; cursor: pointer; } .pr-name-btn:hover { text-decoration: underline; } @media (prefers-reduced-motion: reduce) { .loading-gif { animation: none; } } /* 로그인 시트 */ .ls-warn { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: var(--r-sm); background: var(--gold-tint); color: var(--ink-2); font-size: 12.5px; } .ls-biz { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; } .ls-kv { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 8px; align-items: center; margin-top: 5px; font-size: 13px; } .ls-kv-k { color: var(--ink-3); font-size: 11.5px; } .ls-kv-v { color: var(--ink); word-break: break-all; } /* 섹션 접이식 헤더 */ .ls-sec-head { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 16px 2px 8px; background: none; border: none; cursor: pointer; } .ls-sec-caret { color: var(--ink-3); font-size: 11px; width: 12px; } .ls-sec-title { font-size: 13px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; } .ls-sec-count { font-size: 11px; font-weight: 700; color: var(--ink-3); background: var(--surface-sunken); border-radius: var(--r-pill); padding: 1px 8px; } /* 로그인 시트 — 주소록형 단일 컬럼(한 항목이 가로로 넓게, 아래로 스크롤). 아이디·비밀번호는 가로 나란히+정렬 */ .ls-list, .ls-edit-list { display: flex; flex-direction: column; gap: 10px; } .ls-entry { display: flex; gap: 14px; align-items: flex-start; padding: 15px 18px; border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--surface); transition: border-color var(--fast), box-shadow var(--fast); } .ls-entry:hover { border-color: var(--hairline-strong); box-shadow: var(--shadow-card); } .ls-ava { flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--gold-tint); color: var(--gold); font-weight: 800; font-size: 17px; display: grid; place-items: center; line-height: 1; } .ls-main { flex: 1; min-width: 0; } .ls-entry-head { display: flex; align-items: center; gap: 8px; } .ls-entry-name { flex: 1; min-width: 0; font-weight: 700; font-size: 16px; letter-spacing: -0.01em; word-break: break-all; } .ls-open { flex: none; font-size: 12px; font-weight: 700; color: var(--gold); background: var(--gold-tint); border-radius: var(--r-pill); padding: 4px 11px; white-space: nowrap; } /* 아이디·비밀번호를 가로로 나란히 (넓으면 2열, 좁으면 1열) */ .ls-acc { margin-top: 9px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 6px 28px; } .ls-acc + .ls-acc { margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--hairline); } .ls-acc-note { grid-column: 1 / -1; font-size: 12px; color: var(--ink-3); } /* 라벨 64 · 값 1fr · 액션 68(고정) → 모든 줄의 값·아이콘이 세로로 칼같이 정렬 */ .ls-line { display: grid; grid-template-columns: 64px minmax(0, 1fr) 68px; align-items: center; gap: 10px; min-height: 36px; } .ls-line-k { font-size: 12px; font-weight: 600; color: var(--ink-3); } .ls-line-v { font-family: var(--font); font-size: 14.5px; line-height: 1.4; color: var(--ink); word-break: break-all; user-select: all; } .ls-line-acts { display: flex; gap: 2px; justify-content: flex-end; } .ls-line-acts .btn { min-width: 32px; min-height: 32px; padding: 0; } .ls-note { margin-top: 9px; font-size: 13px; color: var(--ink-2); white-space: pre-wrap; line-height: 1.55; word-break: break-all; } @media (max-width: 820px) { .ls-entry { padding: 14px; gap: 12px; } .ls-ava { width: 40px; height: 40px; font-size: 16px; } .ls-acc { grid-template-columns: 1fr; } /* 모바일: 아이디·비밀번호 세로 스택 */ .ls-line { grid-template-columns: 58px minmax(0, 1fr) 64px; } .ls-line-v { font-size: 15px; } .ls-biz { grid-template-columns: 1fr; } } /* nav '로그인 시트' 우측 — 오버레이(항상-위) 창 열기 아이콘. nav-item(button)과 버튼이 중첩되지 않게 래퍼 안 형제로 두고 우측에 절대배치해요. */ .nav-item-wrap { position: relative; } .nav-item-wrap > .nav-item { padding-right: 40px; } /* 아이콘 자리 확보 */ .nav-side-btn { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: inline-grid; place-items: center; width: 26px; height: 26px; border: none; background: none; border-radius: 7px; color: var(--ink-3); cursor: pointer; transition: background var(--fast), color var(--fast); } .nav-side-btn:hover { background: var(--accent-tint); color: var(--brand-deep); } .nav-item-wrap:has(.nav-item.active) .nav-side-btn { color: var(--brand-deep); } /* 스튜디오 실패/취소 기록 삭제 버튼 — 위험 동작이라 hover 시 빨강 */ .studio-q-del:hover { color: var(--danger); } /* ── 로그인 시트 오버레이 (PiP 항상-위 창 · 폴백 모달 공용) — 검색 + 아이디/비밀번호 원클릭 복사 전용 ── */ .lso-body { margin: 0; height: 100vh; overflow: hidden; background: var(--canvas); } .lso-root { display: flex; flex-direction: column; height: 100%; min-height: 0; font-family: var(--font); color: var(--ink); } .lso-root.lso-inmodal { height: min(72vh, 580px); } .lso-head { flex: none; padding: 12px 13px 11px; background: var(--surface); border-bottom: 1px solid var(--hairline); } .lso-title { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 750; color: var(--ink); margin-bottom: 9px; } .lso-title-ic { display: inline-flex; color: var(--brand-deep); } .lso-title .right { margin-left: auto; } .lso-hint { font-size: 11px; font-weight: 600; color: var(--ink-3); } .lso-search { display: flex; align-items: center; gap: 8px; background: var(--surface-sunken); border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: 0 10px; transition: border-color var(--fast), box-shadow var(--fast); } .lso-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--accent-tint); } .lso-search-ic { display: inline-flex; color: var(--ink-3); flex: none; } .lso-search-input { flex: 1; min-width: 0; border: none; background: none; outline: none; font: inherit; font-size: 16px; color: var(--ink); padding: 9px 0; } .lso-search-input::placeholder { color: var(--ink-3); } .lso-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 10px; } .lso-list { display: flex; flex-direction: column; gap: 8px; } .lso-empty { color: var(--ink-3); font-size: 13px; text-align: center; padding: 34px 12px; } .lso-card { border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--surface); padding: 11px 12px; transition: border-color var(--fast); } .lso-card:hover { border-color: var(--hairline-strong); } .lso-card-head { display: flex; align-items: center; gap: 9px; } .lso-ava { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-tint); color: var(--brand-deep); font-weight: 800; font-size: 13px; display: grid; place-items: center; line-height: 1; } .lso-card-name { flex: 1; min-width: 0; } .lso-site { font-size: 14px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lso-sec { font-size: 10.5px; color: var(--ink-3); } .lso-open { flex: none; font-size: 11px; font-weight: 700; color: var(--brand-deep); background: var(--accent-tint); border-radius: var(--r-pill); padding: 3px 9px; white-space: nowrap; text-decoration: none; } .lso-open:hover { background: var(--accent-tint-strong); } .lso-fields { margin-top: 9px; display: flex; flex-direction: column; gap: 3px; } .lso-field { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 34px; } .lso-flabel { font-size: 11px; font-weight: 600; color: var(--ink-3); } .lso-val { font-size: 14px; color: var(--ink); word-break: break-all; user-select: all; line-height: 1.35; } .lso-acts { display: flex; gap: 2px; justify-content: flex-end; } .lso-iconbtn { display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; border: none; background: none; border-radius: var(--r-sm); color: var(--ink-2); cursor: pointer; transition: background var(--fast), color var(--fast); } .lso-iconbtn:hover { background: var(--surface-sunken); color: var(--ink); } .lso-iconbtn.lso-copied { color: var(--pos); background: rgba(31, 143, 95, 0.13); } .lso-iconbtn.lso-copyfail { color: var(--danger); } .lso-accnote { grid-column: 1 / -1; font-size: 11.5px; color: var(--ink-3); padding: 1px 0; white-space: pre-wrap; } .lso-accsep { height: 1px; background: var(--hairline); margin: 5px 0; } /* 자격 관리 / 사용자 권한 설정 */ .ua-list { display: flex; flex-direction: column; gap: 10px; } .ua-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--surface); } .ua-row .right { margin-left: auto; } .ua-ava { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--gold-tint); color: var(--gold); font-weight: 800; font-size: 18px; display: grid; place-items: center; line-height: 1; } /* 마지막 접속 — 30일 넘게 안 들어온 계정은 앰버로 표시해 권한 정리 때 눈에 띄게 해요. */ .ua-seen { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-3); } .ua-seen svg { flex: none; opacity: .8; } .ua-seen.stale { color: var(--warn); } @media (max-width: 820px) { .ua-row { flex-wrap: wrap; } .ua-row .right { flex-basis: 100%; } } /* 가격표(공급가) — 그리드라 헤더↔값 열이 완벽 정렬, 함량 값은 중앙 */ .price-grid { border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden; } .price-grid-row { display: grid; align-items: center; } .price-grid-row + .price-grid-row { border-top: 1px solid var(--hairline); } .price-grid-c { padding: 11px 14px; text-align: center; font-variant-numeric: tabular-nums; font-size: 13.5px; color: var(--ink); white-space: nowrap; } .price-grid-k { text-align: left; font-weight: 500; color: var(--ink-2); } .price-grid-head { background: var(--surface-2); } .price-grid-head .price-grid-c { font-size: 11.5px; color: var(--ink-3); font-weight: 600; } .price-grid-hot { background: var(--gold-tint); } .price-grid-hot .price-grid-c { color: var(--gold); font-weight: 700; } /* 마켓별 판매가 — 마켓당 카드. 세로로 넉넉히, 요소 정렬 일관. */ .mkt-card { border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 12px 14px; background: var(--surface); } .mkt-card-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .mkt-name { font-weight: 700; font-size: 14px; color: var(--ink); } .mkt-var { padding: 8px 0 2px; } .mkt-var + .mkt-var { border-top: 1px dashed var(--hairline); margin-top: 4px; } .mkt-var-top { display: flex; align-items: center; gap: 10px; min-height: 26px; } .mkt-tag { flex: none; } .mkt-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .mkt-list { font-size: 12px; color: var(--ink-3); text-decoration: line-through; font-variant-numeric: tabular-nums; } .mkt-sale { font-weight: 750; font-size: 16px; color: var(--ink); font-variant-numeric: tabular-nums; } .mkt-cp { flex: none; align-self: center; font-size: 10px; padding: 1px 7px; white-space: nowrap; } .mkt-empty { font-size: 12px; } .mkt-stat { font-size: 12px; color: var(--ink-2); margin-top: 4px; font-variant-numeric: tabular-nums; } .mkt-fix { font-size: 12px; color: var(--warn); margin-top: 3px; font-variant-numeric: tabular-nums; } .mkt-fix b { font-weight: 750; } .mkt-fix-goal { color: var(--ink-3); } .mkt-meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 11px; } .mkt-edit { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--hairline); } .mkt-edit .input { font-variant-numeric: tabular-nums; } /* 실버 발주 — 항목 행(좌: 우리 제품 / 우: 매입처 정보 / 삭제), 트랙 고정으로 우측 정렬 안정화 */ .order-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(210px, 290px) 30px; gap: 14px; align-items: start; padding: 14px 0; border-top: 1px solid var(--hairline); } .order-item:first-of-type { border-top: 0; } .order-prod { display: flex; gap: 12px; min-width: 0; } .order-vendorinfo { min-width: 0; } @media (max-width: 1040px) { .order-item { grid-template-columns: minmax(0, 1fr) 30px; } .order-vendorinfo { grid-column: 1 / 2; grid-row: 2; padding-left: 64px; } } /* 옵션 강조 칩 */ .order-opt { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 3px 10px 3px 4px; border-radius: var(--r-pill); background: var(--silver-tint); color: var(--ink); font-size: 13px; font-weight: 650; } .order-opt-tag { padding: 1px 7px; border-radius: var(--r-pill); background: var(--silver); color: #fff; font-size: 11px; font-weight: 700; } /* 반복 발주 수량 제안 */ .order-suggest { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 5px; padding: 5px 10px; border-radius: var(--r-sm); background: var(--gold-tint); font-size: 12.5px; } .order-suggest b { color: var(--gold); } /* 키워드 보고 — PC 2단(보고카드 | 입력), 모바일 1단 */ .mk-work { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: start; } @media (max-width: 900px) { .mk-work { grid-template-columns: 1fr; } } /* 보고 카드 안 블로그·플레이스 표 — PC 2열, 모바일은 세로로 하나씩(좁은 폭 가독성) */ .mk-report-blocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; align-items: start; } @media (max-width: 820px) { .mk-report-blocks { grid-template-columns: 1fr; gap: 14px; } .mk-report-blocks > div { max-width: 360px; } } .mk-report-btn { font-size: 16px; padding: 14px 30px; border-radius: var(--r-pill); } /* 수동 조회는 회사 PC 로컬 브릿지(127.0.0.1)를 거쳐야 해서 모바일에선 숨겨요. */ @media (max-width: 820px) { .mk-run-btn { display: none; } } .mk-kw-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } .mk-url-btn { padding: 4px 10px; color: var(--ink-3); font-size: 12px; } .mk-url-btn.has-urls { background: var(--accent-tint); color: var(--accent); } .mk-url-summary { display: flex; flex-direction: column; gap: 4px; min-height: 20px; color: var(--ink-2); font-size: 12px; } .kw-link { color: var(--ink); font-weight: 600; text-decoration: none; cursor: pointer; border-bottom: 1px dashed var(--hairline-strong); } .kw-link:hover { color: var(--gold); border-bottom-color: var(--gold); } /* 현황 (홈 하단 가로형) */ .statbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; } .statitem { padding: 18px; border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--surface-2); } .statitem .statv { font-size: 24px; font-weight: 750; letter-spacing: -0.03em; line-height: 1.05; } .statitem .statk { font-size: 12.5px; color: var(--ink-3); margin-top: 5px; font-weight: 500; } /* 빠른 작업 리스트(레일) */ .quick { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); cursor: pointer; transition: background var(--fast); border: 1px solid transparent; } .quick:hover { background: var(--surface-sunken); } .quick.feature { border-color: var(--gold); background: var(--gold-tint); } .quick .qico { width: 38px; height: 38px; border-radius: 11px; background: var(--surface); display: grid; place-items: center; font-size: 17px; color: var(--gold); flex: none; border: 1px solid var(--hairline); } /* PWA 홈추가 안내 카드 (홈 최상단, 모바일+미설치일 때만 렌더) */ .pwa-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 18px; border-radius: var(--r-md); background: var(--accent-tint); border: 1px solid var(--hairline); } .pwa-card .pwa-ico { width: 40px; height: 40px; border-radius: 11px; background: var(--surface); display: grid; place-items: center; color: var(--accent); flex: none; border: 1px solid var(--hairline); } .pwa-card .pwa-t { font-weight: 700; font-size: 14px; color: var(--ink); } .pwa-card .pwa-d { font-size: 12px; color: var(--ink-3); margin-top: 2px; } .quick.feature .qico { background: var(--gold); color: #fff; border: none; } .quick .qt { font-weight: 650; font-size: 15px; } .quick .qd { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; } /* 섹션 헤더 */ .sec-head { display: flex; align-items: center; gap: 10px; margin: 38px 0 16px; } .sec-head h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; } .sec-head .count { font-size: 13px; color: var(--ink-3); font-weight: 600; } /* 진입 모션 (스태거) */ @keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .rise { animation: rise 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; } /* ========================= responsive ========================= */ @media (max-width: 820px) { .app { grid-template-columns: 1fr; } .sidebar { display: none; } .topbar { padding: 12px 16px; } .view { padding: 16px 16px 32px; } .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .work { grid-template-columns: 1fr; gap: 16px; } .rail { position: static; } .price-hero .big { font-size: 32px; } .modal { width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; top: 0; left: 0; transform: none; animation: fade var(--std) forwards; } .stats { grid-template-columns: repeat(2, 1fr); } /* 모바일 폴리시 */ .topbar h1 { font-size: 19px; } /* 모바일에선 살짝 줄여 긴 제목도 한 줄에 들어오도록(말줄임표 보존) */ .topbar .sub { font-size: 12px; } .topbar-main { flex-basis: 100%; } /* 제목 행 전체폭 → 제목이 안 눌림 */ .topbar > .row { flex-basis: 100%; } /* 액션(검색 등)은 다음 줄 전체폭 */ /* 풀스크린 모달 — 헤더 고정, 본문만 스크롤 (긴 폼 하단이 화면 밖으로 안 나가게) */ .modal { display: flex; flex-direction: column; } .modal-head { padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 14px; flex: none; } .modal-body { padding: 16px; flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: calc(16px + env(safe-area-inset-bottom)); } .panel-pad { padding: 16px; } /* 상품 상세: 이미지 전체폭 스택 */ .detail-media { flex: 1 1 100% !important; max-width: 100% !important; } .detail-media .card, .detail-media > div:first-child { max-width: 360px; margin: 0 auto; } /* 터치 타깃 — ≥44px(iOS HIG/Material). ★패딩만으로는 안 닿아요: .btn 계열은 line-height 가 글자 크기와 같아서(13px) 44부가 패딩을 6→8px 로 올렸어도 8+8+13+테두리2 = **31px** 에 머물렀어요(라이브 실측). 그래서 chip·seg-item 이 이미 쓰고 있던 것과 같은 min-height 를 버튼·입력에도 줍니다. ★표 안 버튼도 예외 없이 같이 키워요. 처음엔 "셀 안 버튼까지 키우면 행이 부푼다"고 보고 예외를 뒀는데, 라이브 3상태 실측에서 **행 높이가 그대로**였어요(온라인 광고 44/82 → 44/82, 키워드 보고 중앙값 40 → 40). 셀 안 버튼이 그 셀에서 가장 높은 요소가 아니라서요. 비용은 문서 높이 +2.2~5.7% 뿐이고, 예외를 두면 specificity 가 꼬여(`td .btn-sm` 0-1-1 < `.btn-sm:not()` 0-2-0) 되레 동작하지 않았어요. 단순한 쪽이 맞습니다. */ .btn:not(.btn-icon), .btn-sm:not(.btn-icon) { min-height: 44px; } .btn:not(.btn-icon) { padding: 10px 16px; } /* 아이콘 버튼은 정사각 패딩 유지(아이콘 찌그러짐 방지) */ .btn-sm:not(.btn-icon) { padding: 8px 13px; } .btn-icon { width: 44px; height: 44px; padding: 10px; } .chip, .seg-item { padding: 10px 14px; min-height: 44px; } /* 입력·선택도 같은 기준(실측 36~43px) — iOS 줌 방지용 16px 글자 규칙은 아래에 그대로 있어요. */ .input, .select, input.input, select.select { min-height: 44px; } /* 가격 현황 편집 표의 칸들 — 별도 클래스라 위 규칙에 안 걸려요(실측 입력 37px·상태 선택 25px). 한 행에 입력이 9개라 표가 늘어날 줄 알았는데, 재보니 행 높이가 이미 82px 이라 **중앙값 82→82 그대로**고 표 가로폭도 1149px 그대로예요(문서 높이만 +0.8%). 그래서 같이 키웁니다. */ .pr-in, .pr-status-sel, .pr-opt-sel { min-height: 44px; } /* 가격 결과/표가 좁은 폭에서 줄바꿈 깨지지 않게 */ .price-hero .big { font-size: 32px; } /* 표: 모바일 가독성 ↑ (글자·패딩 크게) */ table.table { font-size: 13.5px; } .table th { font-size: 12px; padding: 11px 10px; } .table td { padding: 12px 10px; } /* 제품 카드: 모바일에서 더 큼지막하게 */ .grid { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 14px; } .prod-cat { font-size: 12px; } .prod-name { font-size: 15px; line-height: 1.3; } .prod-code { font-size: 12px; } .prod-body { padding: 12px; } .badge { font-size: 12px; padding: 3px 10px; } /* 카드/패널/섹션 여백 — 에디토리얼하게 더 넉넉히 */ .card-pad { padding: 16px; } .work, .rail .col { gap: 16px; } /* 섹션 헤더·KPI — 모바일에서도 큼직하되 2열로 정돈 */ .sec-head { margin: 28px 0 14px; } .sec-head h2 { font-size: 22px; } .statbar { grid-template-columns: repeat(2, 1fr); } .statitem { padding: 16px; } .statitem .statv { font-size: 24px; } .panel-pad { padding: 18px; } /* iOS 입력 줌 방지 — 입력 폰트 16px 이상. 인라인 font-size(로그인시트·AEO 등)도 덮어써야 줌이 안 나요. */ .input, .select, textarea.input, .pr-in { font-size: 16px !important; } .pr-in { width: 100%; max-width: 120px; padding: 8px 10px; } /* 좁은 칸에서도 안 찌그러짐 */ /* 로그인 시트 행 — 모바일은 라벨/값/액션 세로 스택(찌그러짐 방지) */ .ls-line { grid-template-columns: 1fr; gap: 4px; padding: 8px 0; min-height: auto; } .ls-line-k { font-size: 11.5px; letter-spacing: 0.02em; } .ls-line-acts { justify-content: flex-start; gap: 6px; } .ls-line-acts .btn { min-width: 44px; min-height: 44px; } /* 표 — 모바일에선 셀 패딩만 살짝 줄여 좌우 스크롤 폭 부담 완화(글자 가독성은 유지) */ .pr-table th, .pr-table td { padding: 9px 8px; font-size: 13px; } /* 첫 열(.pr-name)은 white-space:normal이라 좁은 폭에서 캠페인명·제품명이 세로로 뭉개져요. 최소 폭을 줘서 2줄 안팎으로 읽히게 하고, 넘치는 표 전체는 .pr-wrap이 가로 스크롤로 흡수해요. */ .pr-td.pr-name, .pr-th.pr-name { min-width: 116px; } /* 컴포저(스튜디오) — 도구바 모바일에서 더 큼지막한 터치 영역 */ .studio-go { padding: 12px 22px; flex: 1 1 auto; justify-content: center; } .studio-mchip { padding: 8px 12px 8px 8px; min-height: 38px; } /* 사용량 칩 — 모바일에서 한 줄에 안 들어가면 다음 줄로 */ .studio-usage { padding: 8px 12px; font-size: 12.5px; } } /* ── SVG 아이콘 정렬 (유니코드 기호 대체) ── */ .ic { display: block; flex: none; } /* flex 컨테이너에서 아이콘이 줄어들지 않게 */ .empty .big .ic { margin: 0 auto; } /* 빈 상태 큰 아이콘 가운데 */ .btn.spin .ic { animation: icspin 0.8s linear infinite; } @keyframes icspin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .btn.spin .ic { animation: none; } } .nav-item .ico, .tab .ico, .menu-ico { display: inline-flex; align-items: center; justify-content: center; } .theme-toggle .ic { margin: 0 auto; } /* ── 모바일 좌측 메뉴 드로어(햄버거) — 사이드바 대체 ── */ .hamburger { display: none; } /* 데스크톱은 숨김(사이드바가 보임) */ @media (max-width: 820px) { .hamburger { display: inline-flex; position: relative; flex: none; margin-right: 2px; } } .hamburger .nav-dot { position: absolute; top: 3px; right: 3px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 2px var(--surface); } .menu-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, 0.4); animation: loadingFade 0.18s ease; } .menu-sheet { position: fixed; top: 0; left: 0; bottom: 0; z-index: 61; display: flex; flex-direction: column; width: min(320px, 86vw); background: var(--surface); box-shadow: 6px 0 36px rgba(0, 0, 0, 0.22); padding-bottom: env(safe-area-inset-bottom); animation: menuIn 0.22s ease; } /* 슬라이드 대신 페이드 — 어떤 환경에서도(애니메이션 일시정지 등) 화면 밖에 남지 않게 */ @keyframes menuIn { from { opacity: 0.4; } to { opacity: 1; } } .menu-grip { display: none; } .menu-body { flex: 1; } .menu-head { display: flex; align-items: center; padding: 14px 14px 8px; } .menu-head .menu-title { font-size: 16px; font-weight: 700; } .menu-head .btn-icon { margin-left: auto; } .menu-body { overflow-y: auto; padding: 2px 10px 10px; } /* 모바일 메뉴 상단 모드 전환 — iOS식 세그먼트(sunken 트랙 + 활성 세그가 부양된 pill) */ .menu-modetog { display: flex; gap: 4px; margin: 6px 14px 2px; padding: 4px; background: var(--surface-sunken); border-radius: var(--r-pill); } .menu-modeseg { flex: 1; border: none; background: none; color: var(--ink-2); font-weight: 600; font-size: 13.5px; padding: 10px 8px; min-height: 44px; border-radius: var(--r-pill); cursor: pointer; transition: color var(--fast), background var(--fast); } .menu-modeseg.on { background: var(--surface); color: var(--brand-deep); box-shadow: var(--shadow-card); } /* ── PC 사이드바 모드 스위치(제품 DB │ 예물 마케팅) — 슬라이딩 세그먼트, 모바일 .menu-modetog와 한 시스템 ── */ .modesw { position: relative; display: flex; margin: 2px 10px 16px; padding: 4px; background: var(--surface-sunken); border: 1px solid var(--hairline); border-radius: var(--r-pill); box-shadow: inset 0 1px 2px rgba(18, 56, 66, 0.05); isolation: isolate; } .modesw-thumb { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--shadow-card); transition: transform var(--std) var(--ease-spring), background var(--std), box-shadow var(--std); will-change: transform; } .modesw.mkt .modesw-thumb { transform: translateX(100%); background: linear-gradient(135deg, var(--brand-bright), var(--brand-deep)); box-shadow: var(--shadow-accent); } .modesw-seg { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; border: none; background: none; cursor: pointer; font: inherit; font-weight: 700; font-size: 12.5px; letter-spacing: -0.01em; color: var(--ink-3); padding: 8px 6px; border-radius: var(--r-pill); transition: color var(--std); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .modesw-seg:hover { color: var(--ink-2); } .modesw-seg.on { color: var(--brand-deep); } .modesw.mkt .modesw-seg.on { color: var(--ink-on-accent); } /* 모드 전환 시 본문 부드러운 진입(스위치 슬라이드와 짝) */ @keyframes modeIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } } .main.mode-in { animation: modeIn var(--std) var(--ease-spring); } /* ── 매장 매출 '검색·필터 도크' — 상시 노출·프리미엄. 큰 검색바 + 매장/기간/담당자 전부 한눈에 ── */ .sd-dock { position: relative; background: linear-gradient(180deg, var(--surface), var(--surface-2)); border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow-card); padding: 18px 18px 12px; margin-bottom: 18px; overflow: hidden; } .sd-dock::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--brand-bright), var(--brand-deep)); } .sd-hero { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; } .sd-search { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; } .sd-search-ico { position: absolute; left: 17px; color: var(--ink-3); display: flex; pointer-events: none; } .sd-search input { width: 100%; height: 52px; padding: 0 46px; font-size: 16px; font-weight: 500; color: var(--ink); background: var(--surface); border: 1.5px solid var(--hairline-strong); border-radius: var(--r-pill); outline: none; transition: border-color var(--fast), box-shadow var(--fast); } .sd-search input::placeholder { color: var(--ink-3); font-weight: 400; } .sd-search input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px var(--accent-tint); } .sd-search-clear { position: absolute; right: 9px; width: 34px; height: 34px; border: none; background: transparent; color: var(--ink-3); border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background var(--fast), color var(--fast); opacity: 0; pointer-events: none; } .sd-search.has-q .sd-search-clear { opacity: 1; pointer-events: auto; } .sd-search-clear:hover { background: var(--surface-sunken); color: var(--ink); } .sd-filters { display: flex; flex-direction: column; } .sd-frow { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-top: 1px solid var(--hairline); flex-wrap: wrap; } .sd-flabel { flex: none; width: 50px; padding-top: 6px; font-size: 12px; font-weight: 700; color: var(--ink-2); letter-spacing: -0.01em; } .sd-chips { flex: 1 1 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 7px; align-items: center; } .sd-sep { align-self: center; margin: 0 2px; padding-left: 10px; border-left: 1px solid var(--hairline-strong); font-size: 12px; color: var(--ink-3); } .sd-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--hairline); } .sd-sum { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; color: var(--ink-3); min-height: 22px; } .sd-sum-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: var(--r-pill); background: var(--accent-tint); color: var(--brand-deep); font-weight: 650; font-size: 11.5px; } @media (max-width: 560px) { .sd-dock { padding: 14px 13px 10px; } .sd-search input { height: 48px; } .sd-flabel { width: 100%; padding-top: 0; margin-bottom: -2px; } } /* ── 예물 마케팅 대시보드 (지표 종합 + AI 리뷰 + Q&A) ── */ .mkd-wrap { max-width: 1080px; margin: 0 auto; } /* 넓은 모니터에서 글이 늘어지지 않게 편안한 폭 */ .modeseg-mini { display: inline-flex; gap: 6px; } .mkd-review { background: linear-gradient(180deg, var(--accent-tint), var(--surface) 62%); border-color: var(--accent-tint-strong) !important; } .mkd-ai-ico { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: var(--brand); color: var(--ink-on-accent); box-shadow: var(--shadow-accent); flex: none; } .mkd-summary { font-size: 15px; line-height: 1.65; color: var(--ink); font-weight: 550; margin-bottom: 14px; } .mkd-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .mkd-col h4 { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); margin: 0 0 8px; } .mkd-col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; } .mkd-col li { position: relative; font-size: 13px; line-height: 1.5; color: var(--ink-2); padding-left: 12px; } .mkd-col li::before { content: ""; position: absolute; left: 0; top: 7.5px; width: 4px; height: 4px; border-radius: 50%; background: var(--ink-3); } .mkd-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; } .mkd-dot.pos { background: var(--pos); } .mkd-dot.warn { background: var(--warn); } .mkd-dot.sat { background: var(--sat); } .mkd-adrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 9px 13px; border: 1px solid var(--hairline); border-radius: var(--r-sm); background: var(--surface-2); } .mkd-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .mkd-log { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; max-height: 340px; overflow-y: auto; } .mkd-msg { max-width: 82%; padding: 9px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; } .mkd-msg.user { align-self: flex-end; background: var(--brand); color: var(--ink-on-accent); border-bottom-right-radius: 4px; } .mkd-msg.ai { align-self: flex-start; background: var(--surface-sunken); color: var(--ink); border-bottom-left-radius: 4px; } .mkd-spin { display: inline-flex; color: var(--accent); animation: mkdSpin 0.9s linear infinite; } @keyframes mkdSpin { to { transform: rotate(360deg); } } @media (max-width: 700px) { .mkd-cols { grid-template-columns: 1fr; } .mkd-two { grid-template-columns: 1fr; } } .menu-group { font-size: 11px; font-weight: 600; color: var(--ink-3); padding: 12px 8px 5px; letter-spacing: 0.04em; } .menu-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 12px; border: none; background: none; cursor: pointer; border-radius: var(--r-md); font-size: 15px; font-weight: 600; color: var(--ink); text-align: left; transition: background var(--fast); } .menu-item:active { background: var(--surface-sunken); } .menu-item.active { background: var(--gold-tint); color: var(--gold); } .menu-ico { color: var(--ink-2); flex: none; } .menu-item.active .menu-ico { color: var(--gold); } .menu-item .right { margin-left: auto; } .menu-foot { display: flex; align-items: center; gap: 7px; padding: 12px 18px; border-top: 1px solid var(--hairline); font-size: 13px; } /* ── 공개 회원 신청란 (로그인 없이 외부 접근) ── */ #app.pub { display: block; min-height: 100dvh; background: var(--canvas); } .pubmain { display: block; } .pub-wrap { min-height: 100vh; min-height: 100dvh; min-height: 100svh; display: flex; justify-content: center; align-items: flex-start; padding: calc(40px + env(safe-area-inset-top, 0px)) 16px calc(40px + env(safe-area-inset-bottom, 0px)); } .pub-card { width: 100%; max-width: 520px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow-card); padding: 28px 26px; animation: rise 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; } .pub-head { margin-bottom: 18px; } .pub-lab { font-size: 12px; font-weight: 650; color: var(--ink-2); margin-bottom: 6px; } .pub-card .input, .pub-card textarea.input { width: 100%; font-size: 16px; } .pub-radio { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-2); cursor: pointer; padding: 8px 12px; border: 1px solid var(--hairline-strong); border-radius: var(--r-pill); } .pub-radio input { accent-color: var(--gold); } .pub-warn { margin-top: 12px; font-size: 12.5px; color: var(--ink-2); background: var(--gold-tint); padding: 10px 13px; border-radius: var(--r-sm); line-height: 1.5; } .btn-lg { padding: 13px 20px; font-size: 15px; } /* 완료 화면 */ .pub-done { display: flex; flex-direction: column; align-items: center; padding: 14px 0 8px; } .pub-check { width: 64px; height: 64px; border-radius: 50%; background: var(--gold-tint); color: var(--gold); display: grid; place-items: center; font-size: 32px; font-weight: 800; animation: pop 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; } .pub-done-title { margin-top: 16px; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; } .pub-summary { width: 100%; background: var(--surface-sunken); border-radius: var(--r-md); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; } /* 내 신청 내역 항목 */ .pub-item { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid var(--hairline); border-radius: var(--r-md); } .pub-item.done { background: var(--surface-sunken); } .pub-item-check { width: 26px; height: 26px; flex: none; border-radius: 50%; border: 1.5px solid var(--hairline-strong); display: grid; place-items: center; font-size: 14px; font-weight: 800; color: var(--ink-3); } .pub-item.done .pub-item-check { background: var(--pos); border-color: var(--pos); color: #fff; } /* ── 아바타 + 사용자 칩 (이름 나오는 모든 영역 공통) ── */ .avatar { border-radius: 50%; object-fit: cover; flex: none; background: var(--surface-sunken); display: inline-block; vertical-align: middle; } .avatar-initial { display: grid; place-items: center; background: var(--gold-tint); color: var(--gold); font-weight: 800; line-height: 1; } img.avatar.ua-ava { padding: 0; } .user-chip { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; vertical-align: middle; } .user-chip-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* 하단 프로필 이름은 줄임(말줄임표) 없이 — 길면 줄바꿈 (QHD 등에서 잘리던 것 해결) */ .sidebar-foot .user-chip-name { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.2; word-break: keep-all; } /* 프로필 설정 미리보기 */ .profile-ava { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; background: var(--gold-tint); color: var(--gold); display: grid; place-items: center; font-weight: 800; font-size: 36px; flex: none; border: 1px solid var(--hairline); } .profile-ava img { width: 100%; height: 100%; object-fit: cover; } /* 배경 설정 미리보기 + 슬라이더 */ .bg-preview { width: 150px; height: 95px; border-radius: var(--r-md); border: 1px solid var(--hairline); background-size: cover; background-position: center; flex: none; display: grid; place-items: center; overflow: hidden; } .bg-preview.empty { background: var(--surface-sunken); } .bg-slider { width: 100%; accent-color: var(--gold); margin-top: 6px; } /* ── 페이지 배경 이미지 레이어 (이 기기 전용, 콘텐츠 뒤) ── */ :root { --surface-alpha: 1; } #bg-layer { position: fixed; inset: 0; z-index: -2; background-size: cover; background-position: center; background-repeat: no-repeat; pointer-events: none; } .has-bg body { background: transparent; } .has-bg #app, .has-bg .main, .has-bg .view { background: transparent; } /* 콘텐츠 카드/패널만 투명도 적용 — 사이드바·토프바(네비) 등 크롬은 그대로 불투명해 가독성 유지. alpha=1이면 기존과 동일 */ /* 폴백: color-mix 미지원 브라우저에선 불투명 표면 유지(투명해져 글씨 안 읽히는 것 방지) */ .has-bg .card, .has-bg .panel, .has-bg .modal, .has-bg .quick, .has-bg .statbar, .has-bg .ua-row, .has-bg .pub-card { background-color: var(--surface); } .has-bg .price-hero { background-color: var(--gold); } @supports (background-color: color-mix(in srgb, white 50%, transparent)) { .has-bg .card, .has-bg .panel, .has-bg .modal, .has-bg .quick, .has-bg .statbar, .has-bg .ua-row, .has-bg .pub-card { background-color: color-mix(in srgb, var(--surface) calc(var(--surface-alpha) * 100%), transparent); } .has-bg .price-hero { background-color: color-mix(in srgb, var(--gold) calc(var(--surface-alpha) * 100%), transparent); } } /* ── 판매 제품 가격 현황: 상단 금일 날짜/요일 (명조 세리프 타이포그래피) ── */ .date-banner { position: relative; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 22px 30px 24px; margin-bottom: 16px; box-shadow: var(--shadow-card); overflow: hidden; } .date-banner::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, var(--gold), color-mix(in srgb, var(--gold) 20%, transparent)); } /* 키커: '금 일' — 자간 넓힌 골드 라벨 + 가는 골드 룰 + 요일 */ .date-kicker { display: flex; align-items: center; gap: 13px; margin-bottom: 10px; } .date-kicker-label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.42em; color: var(--gold); padding-left: 2px; } .date-kicker-sep { width: 26px; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); } .date-kicker-wd { font-size: 12.5px; font-weight: 600; letter-spacing: 0.18em; color: var(--ink-3); } /* 헤드라인: 숫자=Cormorant Garamond, 한글=명조. 연도는 가늘고 muted, 날짜는 크게 */ .date-headline { font-family: "Cormorant Garamond", "Nanum Myeongjo", "Apple SD Gothic Neo", serif; display: flex; align-items: baseline; gap: 13px; line-height: 1; } .date-hl-y { font-size: 23px; font-weight: 500; color: var(--ink-3); letter-spacing: 0.03em; } .date-hl-d { font-size: 49px; font-weight: 700; color: var(--ink); letter-spacing: 0.005em; } @media (max-width: 820px) { .date-banner { padding: 18px 20px 20px; } .date-kicker { gap: 10px; margin-bottom: 7px; } .date-hl-y { font-size: 18px; } .date-hl-d { font-size: 35px; } } /* ── 상품 상세: 정보 항목 카드(라벨 강조) + 중량 한 줄 ── */ .detail-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; } .detail-field { background: var(--surface-sunken); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 9px 13px; min-width: 0; } .detail-field.wide { grid-column: 1 / -1; } .detail-field-label { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; color: var(--gold); margin-bottom: 4px; text-transform: uppercase; } .detail-field-value { font-size: 14px; font-weight: 650; color: var(--ink); word-break: break-word; line-height: 1.45; } .detail-field-sub { font-size: 11px; color: var(--ink-3); margin-top: 2px; } .detail-weights { display: flex; gap: 24px; flex-wrap: wrap; } .detail-weight-tag { font-size: 10.5px; font-weight: 700; color: var(--ink-3); } .detail-weight-val { font-size: 15px; font-weight: 700; color: var(--ink); margin-top: 1px; } /* ── 매출 현황 대시보드 ── */ .sa-hero { display: flex; flex-direction: column; gap: 4px; } .sa-hero-num { display: flex; align-items: baseline; gap: 6px; margin: 2px 0 4px; } .sa-hero-val { font-size: 42px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; } .sa-hero-unit { font-size: 20px; font-weight: 600; color: var(--ink-3); } .sa-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; } .sa-kpi { background: var(--surface-sunken); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 11px 13px; min-width: 0; } .sa-kpi-label { font-size: 11px; font-weight: 600; color: var(--ink-3); margin-bottom: 4px; } .sa-kpi-val { font-size: 16px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sa-sec-t { font-size: 14px; font-weight: 700; color: var(--ink); } /* 월별 막대 */ .sa-bars { display: flex; align-items: flex-end; gap: 8px; height: 168px; } .sa-bar-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; background: none; border: none; cursor: pointer; padding: 0; } .sa-bar-val { font-size: 11px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; } .sa-bar-track { width: 100%; max-width: 46px; flex: 1; display: flex; align-items: flex-end; } .sa-bar-fill { width: 100%; border-radius: 6px 6px 0 0; background: var(--gold); transition: height var(--std), filter var(--fast); min-height: 4px; } .sa-bar-col:hover .sa-bar-fill { filter: brightness(1.06); } .sa-bar-x { font-size: 11.5px; font-weight: 600; color: var(--ink-3); } /* 채널별 */ .sa-ch-head { display: flex; align-items: baseline; gap: 8px; } .sa-ch-name { font-size: 13.5px; font-weight: 650; color: var(--ink); } .sa-ch-pct { font-size: 11.5px; font-weight: 600; color: var(--ink-3); } .sa-ch-rev { font-size: 13.5px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; } .sa-ch-track { height: 7px; border-radius: var(--r-pill); background: var(--surface-sunken); overflow: hidden; margin: 5px 0 3px; } .sa-ch-fill { height: 100%; border-radius: var(--r-pill); background: var(--gold); } .sa-ch-sub { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; } /* 많이 팔린 상품 — 제품 카드 그리드(썸네일·순위 배지·판매수량). 매출 보고 하단 */ .bs-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; } .bs-card { position: relative; background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px; overflow: hidden; transition: transform var(--fast), box-shadow var(--fast), border-color var(--fast); } .bs-card.bs-clickable { cursor: pointer; } .bs-card.bs-clickable:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--hairline-strong); } .bs-card.bs-1 { border: 1.5px solid var(--brand); } .bs-thumb { position: relative; aspect-ratio: 1 / 1; background: var(--accent-tint); display: flex; align-items: center; justify-content: center; } .bs-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .bs-noimg { color: var(--brand); font-size: 30px; } .bs-badge { position: absolute; top: 8px; left: 8px; min-width: 24px; height: 24px; padding: 0 7px; border-radius: var(--r-pill); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; background: var(--surface); color: var(--ink-2); border: 1px solid var(--hairline-strong); } .bs-badge.top { background: var(--accent); color: var(--ink-on-accent); border: 0; } .bs-body { padding: 10px 11px 12px; } .bs-name { font-weight: 600; font-size: 13.5px; line-height: 1.35; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 37px; } .bs-qrow { display: flex; align-items: baseline; gap: 3px; margin-top: 7px; } .bs-qty-n { font-weight: 800; font-size: 22px; letter-spacing: -0.02em; color: var(--brand-deep); line-height: 1; font-variant-numeric: tabular-nums; } .bs-qty-u { font-size: 12px; color: var(--ink-3); } .bs-share { height: 4px; border-radius: var(--r-pill); background: var(--accent-tint); overflow: hidden; margin-top: 9px; } .bs-fill { height: 100%; border-radius: var(--r-pill); background: var(--brand); } /* 주문 원장 표 — 사은품 행은 흐리게 */ .ol-table td { font-size: 12.5px; } .ol-table tr.ol-gift { opacity: 0.5; } .ol-table tr.ol-gift .pr-td.num { color: var(--ink-3); font-weight: 600; } /* 취소된 주문 — 취소선 + 흐림(편집 모드에선 토글 버튼이 있으니 취소선만 약하게) */ .ol-table tr.ol-cancel .pr-td:not(:last-child) { text-decoration: line-through; color: var(--ink-3); } .ol-table tr.ol-cancel .ol-prodcell { text-decoration: line-through; } /* ───────────────────────────────────────────────────────────── 매출 3페이지(가격현황·매출현황·매출보고) 표 정렬 규칙 통일 - 헤더 th: 가운데 정렬 · 굵게 · 짙은 배경 · 세로 middle - 텍스트 셀 td: 왼쪽 정렬 · 세로 middle - 숫자 셀 td.num: 오른쪽 정렬 · tabular-nums · 세로 middle - 가운데 정렬 td.tac: 특별 케이스만 (상태 뱃지 등) - 패딩: 10-12px 일관 ───────────────────────────────────────────────────────────── */ /* ── 3페이지(가격현황·매출현황·매출보고) 표 정렬 규칙 ── 모든 셀 = 가로/세로 완전 가운데. 헤더·내용 규칙 동일. 예외: 긴 텍스트(제품명 .pr-name)만 왼쪽(가독성). 매출현황 상품칸은 인라인 left 유지. */ /* 딥 틸-네이비 헤더 + 소프트 hairline 그리드 + 완전 가운데 정렬(가로·세로). 헤더·내용 규칙 동일. 예외: 긴 텍스트(.pr-name)만 왼쪽. border-collapse로 1px 단선(겹침 방지). */ .pr-table { width: 100%; border-collapse: collapse; } .pr-table .pr-th { vertical-align: middle; text-align: center; font-weight: 700; font-size: 12px; letter-spacing: 0.03em; padding: 12px 12px; color: #fff; background: var(--lux-navy); border: 1px solid var(--lux-navy); white-space: nowrap; position: sticky; top: 0; } .pr-table .pr-td { vertical-align: middle; text-align: center; padding: 12px 12px; border: 1px solid var(--hairline); font-size: 13px; color: var(--ink); } .pr-table .pr-td.num { text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; } .pr-table .pr-td.tac { text-align: center; } .pr-table .pr-td.pr-name { text-align: left; } /* 매출 보고 — 플랫폼 표 */ .srep-table .pr-td { font-size: 13px; } .srep-table .srep-plat { font-weight: 650; } /* 총합 행 — 브랜드 아쿠아 tint + 딥 틸 굵게(정보 피라미드 상단) */ .srep-table tr.srep-total .pr-td { background: var(--accent-tint-strong); font-weight: 800; color: var(--brand-deep); } /* 주간 합계 카드 — 표 + 취소/광고/프로모션이 한 카드에 붙어요 */ .srep-wsum { margin-top: 10px; } .srep-wsum-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .srep-wsum-head .right { flex: 1; } .srep-wsum .pr-wrap + .srep-costs { margin-top: 18px; } .srep-wk-item { margin-bottom: 28px; } .srep-wk-item:last-of-type { margin-bottom: 8px; } @media (max-width: 820px) { .srep-wk-item { margin-bottom: 22px; } } /* 취소·광고·프로모션 기입 블록(카드 안) */ .srep-costs { padding-top: 16px; border-top: 1px dashed var(--hairline); } .srep-costs-t { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--ink); } .srep-costs-tag { font-size: 11px; font-weight: 700; color: var(--ink-3); background: var(--surface-sunken); border-radius: 999px; padding: 2px 9px; } .srep-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .srep-meta-item { background: var(--surface-sunken); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 11px 13px; text-align: center; } .srep-meta-item .lab { margin-bottom: 6px; font-size: 11.5px; font-weight: 700; color: var(--ink-2); } .srep-meta-item .input { width: 100%; max-width: none !important; text-align: center; font-variant-numeric: tabular-nums; } .srep-net { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-sunken); font-size: 13px; color: var(--ink-2); } .srep-net .right { flex: 1; } .srep-net-v { font-size: 18px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; } .srep-net-v.neg { color: var(--danger); } @media (max-width: 820px) { .srep-meta { grid-template-columns: 1fr 1fr; } } /* 종합 매출 지표 표(월간 최하단 1회) — 총합·취소·프로모션·광고 4행. 모든 셀 가운데. */ .srep-cb { table-layout: fixed; width: 100%; font-size: 13.5px; border-radius: var(--r-md); overflow: hidden; } .srep-cb col.c-lab { width: 22%; } .srep-cb col.c-n { width: 13%; } .srep-cb col.c-amt { width: 21%; } .srep-cb col.c-net { width: 28%; } .srep-cb col.c-pct { width: 16%; } .srep-cb .pr-th { padding: 13px 12px; } .srep-cb .pr-td { padding: 15px 12px; text-align: center; vertical-align: middle; font-size: 13.5px; } .srep-cb .srep-cb-lab { font-weight: 700; color: var(--ink); } .srep-cb .srep-cb-net { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; } .srep-cb .num { font-variant-numeric: tabular-nums; white-space: nowrap; } /* 총합 행 — 브랜드 아쿠아 tint + 딥 틸 강조(정보 피라미드 상단) */ .srep-cb tr.srep-cb-top .pr-td { background: var(--accent-tint-strong); } .srep-cb tr.srep-cb-top .srep-cb-lab { color: var(--brand-deep); font-size: 14px; } .srep-cb tr.srep-cb-top .srep-cb-net { color: var(--brand-deep); font-size: 16px; } .srep-cb tr.srep-cb-top .num { color: var(--brand-deep); font-weight: 700; } /* 항목별 라벨 색 위계(시맨틱 토큰) */ .srep-cb tr.srep-cb-cancel .srep-cb-lab { color: var(--danger); } .srep-cb tr.srep-cb-promo .srep-cb-lab { color: var(--sat); } .srep-cb tr.srep-cb-ad .srep-cb-lab { color: var(--warn); } @media (max-width: 820px) { .srep-cb { font-size: 12px; } .srep-cb .pr-th, .srep-cb .pr-td { padding: 11px 6px; } .srep-cb col.c-lab { width: 22%; } .srep-cb col.c-n { width: 13%; } .srep-cb col.c-amt { width: 22%; } .srep-cb col.c-net { width: 27%; } .srep-cb col.c-pct { width: 16%; } .srep-cb tr.srep-cb-top .srep-cb-net { font-size: 13.5px; } .srep-cb tr.srep-cb-top .srep-cb-lab { font-size: 13px; } } /* 마켓별 광고/프로모션 분할 입력(월간 종합 카드 안) — 기존 .srep-meta 타일 재사용 */ .srep-split-guide { font-size: 12px; margin-bottom: 14px; } .srep-split-sec { margin-top: 14px; } .srep-split-sec .sa-sec-t { font-size: 13px; margin-bottom: 10px; } .srep-split .srep-meta { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } .srep-split-months { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; } @media (max-width: 820px) { .srep-split .srep-meta { grid-template-columns: 1fr 1fr; } } /* 광고 ROAS 표 — 마켓명 열만 왼쪽(.pr-name), 나머지 가운데. 총합은 .srep-total 재사용 */ .srep-roas .pr-td { font-size: 13px; } /* 달력 매트릭스 — 요일×주. 스프레드시트 톤(두꺼운 회색선) 대신 가벼운 hairline 그리드 + 넉넉한 여백. */ .srep-cal { table-layout: fixed; border-collapse: separate; border-spacing: 0; } .srep-cal th { width: 14.28%; } /* 요일 헤더 — 밝은 헤더, 일=빨강·토=파랑·평일=ink-3. 윗모서리만 살짝 라운드 */ .srep-cal thead th.srep-wd { background: var(--surface-sunken); color: var(--ink-3); font-weight: 700; font-size: 12px; padding: 9px 6px; text-align: center; border-bottom: 1px solid var(--hairline); position: static; } .srep-cal thead th.srep-wd:first-child { border-top-left-radius: 12px; } .srep-cal thead th.srep-wd:last-child { border-top-right-radius: 12px; } .srep-cal thead th.srep-wd.sun { color: var(--danger); } .srep-cal thead th.srep-wd.sat { color: var(--sat); } /* 셀 — 요일 헤더처럼 상하·좌우 가운데. 가벼운 hairline 격자(두꺼운 #c6cdd8 .pr-td 덮어쓰기) */ .srep-cal td.srep-cal-cell { height: 66px; vertical-align: middle; text-align: center; padding: 5px 4px !important; border: 0; border-bottom: 1px solid var(--hairline); border-right: 1px solid var(--hairline); color: var(--ink); transition: background var(--fast, 0.15s); } .srep-cal td.srep-cal-cell:first-child { border-left: 1px solid var(--hairline); } .srep-cal tbody tr:last-child td.srep-cal-cell:first-child { border-bottom-left-radius: 12px; } .srep-cal tbody tr:last-child td.srep-cal-cell:last-child { border-bottom-right-radius: 12px; } .srep-cal-in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; line-height: 1.1; } .srep-cal-cell.has { cursor: pointer; } .srep-cal-cell.has:hover { background: var(--gold-tint); } .srep-cal-cell.out { background: var(--surface-sunken); opacity: 0.4; } .srep-cal-day { font-size: 12px; font-weight: 700; color: var(--ink-3); } .srep-cal-day.sun { color: var(--danger); } .srep-cal-day.sat { color: var(--sat); } .srep-cal-hol { font-size: 9.5px; font-weight: 700; color: var(--danger); line-height: 1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .srep-cal-rev { font-size: 13.5px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } /* 선택 강조 — 셀 배경을 직접 틴트하고 기존 격자선을 유지해요. */ .srep-cal-card { position: relative; } .srep-cal { position: relative; z-index: 1; background: transparent; } /* 표 흰 배경 제거 → 뒤 오버레이가 비쳐요 */ .srep-cal td.srep-cal-cell.band { background: var(--accent-tint); } @media (max-width: 820px) { .srep-cal td.srep-cal-cell { height: 64px; } .srep-cal-rev { font-size: 11.5px; } } /* 예약 달력 — 매출보고 달력(.srep-cal) 구조·선택효과(밴드 웨이브·범위 칩)를 그대로 재사용하되, 셀만 좌측정렬+고객명 표시로 넓혀요. */ .srep-cal.rsv-cal td.srep-cal-cell { height: 82px; vertical-align: top; text-align: left; padding: 6px 6px !important; } .srep-cal.rsv-cal .srep-cal-in { align-items: stretch; justify-content: flex-start; gap: 2px; width: 100%; } .rsv-cal-name { display: flex; align-items: center; gap: 3px; font-size: 10.5px; line-height: 1.5; color: var(--ink-2); overflow: hidden; white-space: nowrap; } .rsv-cal-name > span { overflow: hidden; text-overflow: ellipsis; } .rsv-cal-more { font-size: 10px; font-weight: 600; color: var(--ink-3); } @media (max-width: 820px) { .srep-cal.rsv-cal td.srep-cal-cell { height: 68px; } .rsv-cal-name { font-size: 9.5px; } } /* 보기 토글(주차별/일별) */ .srep-vtog-wrap { display: inline-flex; gap: 4px; padding: 3px; background: var(--surface-sunken); border: 1px solid var(--hairline); border-radius: 999px; } .chip.srep-vtog { border: 0; background: none; box-shadow: none; padding: 5px 13px; font-size: 12.5px; font-weight: 700; color: var(--ink-3); } .chip.srep-vtog.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-card), inset 0 0 0 1px var(--gold); } /* 일별 모드 기간 칩 — 시작→종료 표시. 고르는 중이면 골드 점선 강조 */ .srep-rangepill { font-size: 14px; font-weight: 700; color: var(--ink); padding: 6px 14px; background: var(--surface-sunken); border: 1px solid var(--hairline); border-radius: 999px; font-variant-numeric: tabular-nums; } .srep-rangepill.picking { border-color: var(--gold); border-style: dashed; color: var(--gold-ink, var(--gold)); animation: srepPickPulse 1.4s ease-in-out infinite; } @keyframes srepPickPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(74, 188, 199, 0); } 50% { box-shadow: 0 0 0 4px rgba(74, 188, 199, 0.14); } } @media (prefers-reduced-motion: reduce) { .srep-rangepill.picking { animation: none; } } /* 주차 선택 — 슬라이딩 세그먼트(iOS 세그먼트 컨트롤 톤). 활성 위로 골드 인디케이터가 미끄러져요. */ .srep-wkseg-track { position: relative; display: flex; flex: 1; min-width: 0; padding: 4px; gap: 0; background: var(--surface-sunken); border: 1px solid var(--hairline); border-radius: 999px; } .srep-wkseg-ind { position: absolute; top: 4px; bottom: 4px; left: 4px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-card), inset 0 0 0 1px var(--gold); will-change: transform; pointer-events: none; } @keyframes srepWkSlide { from { transform: translateX(var(--wk-from)); } to { transform: translateX(var(--wk-to)); } } @media (prefers-reduced-motion: reduce) { .srep-wkseg-ind { animation: none !important; } } .srep-wkseg { position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 4px; background: none; border: 0; cursor: pointer; border-radius: 999px; color: var(--ink-3); transition: color var(--fast, 0.15s); } .srep-wkseg:hover { color: var(--ink-2); } .srep-wkseg-n { font-size: 12px; font-weight: 700; letter-spacing: -0.01em; } .srep-wkseg-r { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; opacity: 0.85; } .srep-wkseg.on { color: var(--ink); } .srep-wkseg.on .srep-wkseg-n { color: var(--gold-ink, var(--gold)); } /* 일간 표 머리 — 날짜(큰 숫자)·요일 강조 미니 캘린더 칩 */ .srep-dayhdr { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .srep-dayhdr-chip { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 14px; background: var(--surface-sunken); border: 1px solid var(--hairline); flex: 0 0 auto; } .srep-dayhdr-m { font-size: 11px; font-weight: 700; color: var(--ink-3); line-height: 1; margin-bottom: 2px; } .srep-dayhdr-d { font-size: 26px; font-weight: 800; color: var(--ink); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .srep-dayhdr-chip.sun { background: rgba(196, 49, 75, 0.08); border-color: rgba(196, 49, 75, 0.22); } .srep-dayhdr-chip.sun .srep-dayhdr-d { color: var(--danger); } .srep-dayhdr-chip.sat { background: rgba(47, 109, 208, 0.08); border-color: rgba(47, 109, 208, 0.22); } .srep-dayhdr-chip.sat .srep-dayhdr-d { color: var(--sat); } .srep-dayhdr-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .srep-dayhdr-wd { font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; } .srep-dayhdr-wd.sun { color: var(--danger); } .srep-dayhdr-wd.sat { color: var(--sat); } /* 소계/묶음 머리 행 — pr-table은 항상 라이트 팔레트라 고정색으로(다크에서도 흰 표) */ .ol-table tr.ol-sub td { background: var(--surface-sunken); color: var(--ink); font-weight: 700; border-top: 1px solid var(--hairline-strong); } .ol-table tr.ol-grp td { background: var(--accent-tint); color: var(--brand-deep); font-weight: 700; border-top: 1px solid var(--hairline-strong); } .ol-table tr.ol-cust td { background: var(--accent-tint); color: var(--brand-deep); font-weight: 700; border-top: 1px solid var(--hairline-strong); } .ol-del-day { color: var(--danger); padding: 2px 9px; font-weight: 700; } .ol-del-day:hover { background: rgba(214, 69, 69, 0.12); } /* 상품 셀 — 이름 + 매칭 아이콘 */ .ol-table .ol-prodcell { display: flex; align-items: center; gap: 7px; } .ol-mtag { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; border: none; cursor: pointer; transition: transform var(--fast); } .ol-mtag:hover { transform: scale(1.12); } .ol-mtag.ok { background: rgba(31,143,78,0.16); color: #1f8f4e; } /* 매칭됨 — 초록 체크 */ .ol-mtag.no { background: #eef0f3; color: #9aa0aa; } /* 미매칭 — 회색(눌러서 연결) */ .ol-mtag.unlink { background: rgba(214,69,69,0.13); color: var(--danger); } /* 연동 해제(편집 모드) */ /* 편집 입력 — 셀에 맞는 작은 입력 */ .ol-table input.ol-edit { width: 100%; min-width: 70px; box-sizing: border-box; padding: 4px 6px; border: 1px solid var(--hairline-strong); border-radius: 6px; font: inherit; font-size: 12px; color: var(--ink); background: var(--surface); } .ol-table input.ol-edit:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-tint); } /* '수정 필요' 빠른 입력 칸 — 후보 칩 원클릭 + 직접 입력. 표 전체 편집 모드 없이 한 건씩 저장해요. */ .ol-table .ol-fix-td { min-width: 212px; } .ol-table .ol-fixcell { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; } .ol-table .chip.ol-optcand { padding: 6px 11px; font-size: 12px; min-height: 32px; white-space: nowrap; } .ol-table input.ol-fix-inp { flex: 1 1 96px; min-width: 96px; } @media (max-width: 820px) { /* 손가락으로 누르는 폭 — 표 안이라도 44px 아래로는 안 내려가게. 🔴 820px 은 이 파일의 모바일 기준이에요. 760px 로 두면 761~820px(아이패드 세로 768 등)에서 특이도가 더 높은 `.ol-table .chip.ol-optcand{min-height:32px}` 가 이겨 터치 타깃이 32px 로 떨어져요. */ .ol-table .chip.ol-optcand { min-height: 44px; padding: 8px 13px; font-size: 12.5px; } .ol-table input.ol-fix-inp { min-height: 44px; } } /* 연/월 토글 */ .mtog-y { font-size: 12px; font-weight: 700; color: var(--ink-3); min-width: 38px; } .chip.mtog { padding: 5px 11px; font-size: 12.5px; } .chip.mtog.mtog-empty { opacity: 0.4; } /* 데이터 없는 달은 흐리게 */ /* 연도 토글 — 현재 연도 버튼 + 우측 슬라이드로 펼쳐지는 연도 목록 */ .ytog-row { min-height: 34px; } .chip.ytog-cur { display: inline-flex; align-items: center; gap: 7px; } .ytog-caret { width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 5px solid currentColor; transition: transform var(--fast); } .chip.ytog-cur.on .ytog-caret { transform: rotate(90deg); } .ytog-list { display: flex; gap: 8px; overflow: hidden; max-width: 0; opacity: 0; transform: translateX(-12px); transition: max-width 0.32s ease, opacity 0.24s ease, transform 0.32s ease; } .ytog-list.open { max-width: 760px; opacity: 1; transform: none; } /* 토글 일원화 — 선택(.on) 시 강조 + 팝 애니메이션(마켓·월·보기모드 공통) */ @keyframes chip-pop { 0% { transform: scale(0.9); } 55% { transform: scale(1.06); } 100% { transform: scale(1); } } .chip.on, .seg-item.on { animation: chip-pop 0.26s ease; box-shadow: 0 0 0 3px var(--gold-tint); } @media (prefers-reduced-motion: reduce) { .chip.on, .seg-item.on { animation: none; } } /* 마켓 pill 묶음 — 정신없지 않게 살짝 촘촘히 */ .mk-pills .chip { padding: 6px 11px; font-size: 12.5px; } /* 매출 필터바 — 칸마다 .field 라벨 구조라 바닥선이 맞음(높낮이 깨짐 해결) */ .ol-filter { row-gap: 8px; } .ol-filter > .field { margin: 0; } .ol-filter > .field > .lab { white-space: nowrap; } /* 우측 마켓 요약표 — 첨부 이미지 양식을 디자인 지침에 맞춰 정돈 */ .ms-card { border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden; background: var(--surface); align-self: start; } /* 비율 컬럼(fr) — 큰 매출 숫자도 들어가고 헤더·데이터 정렬이 같아 균형이 맞음 */ .ms-head, .ms-row { display: grid; grid-template-columns: 1.5fr 0.7fr 1.3fr; align-items: center; } .ms-head { background: var(--gold-tint); font-size: 11.5px; font-weight: 700; color: var(--gold); } .ms-head > span, .ms-row > span { padding: 9px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 정렬은 컬럼 클래스로 — 헤더·데이터가 항상 같은 정렬 */ .ms-mk { text-align: left; } .ms-c { text-align: right; font-variant-numeric: tabular-nums; } .ms-r { text-align: right; font-variant-numeric: tabular-nums; } .ms-row { border-top: 1px solid var(--hairline); font-size: 12.5px; } .ms-row .ms-mk { font-weight: 600; color: var(--ink); } .ms-row .ms-c { color: var(--ink-2); } .ms-row .ms-r { font-weight: 700; color: var(--ink); } .ms-row.ms-total { background: var(--surface-sunken); border-top: 1.5px solid var(--hairline-strong); } .ms-row.ms-total .ms-mk, .ms-row.ms-total .ms-r { font-weight: 800; } .ms-empty { padding: 18px 10px; text-align: center; color: var(--ink-3); font-size: 12.5px; } .ms-scope { padding: 7px 10px; font-size: 11px; color: var(--ink-3); border-top: 1px solid var(--hairline); text-align: right; } @media (max-width: 820px) { .sa-hero-val { font-size: 34px; } .sa-kpis { grid-template-columns: 1fr 1fr; } .sa-bars { height: 140px; gap: 5px; } /* 매출 현황 — 모바일 */ .ol-filter > .field { flex: 1 1 100%; } /* 기간·검색 칸 풀폭 스택 */ .ol-filter > .ol-fbtn { flex: 0 0 auto; } /* 조회·초기화는 한 줄에 inline */ .ol-filter > .ol-fbtn .btn { width: 100%; } .ol-filter .input[type="date"] { max-width: none; flex: 1; } .ol-table .pr-td, .ol-table .pr-th { padding: 8px 9px; font-size: 12px; } /* ★매출 현황 편집칸 — 여기가 이번 감사에서 나온 가장 큰 모바일 결함이었어요. ⓐ font-size 12px 이라 **아이폰에서 칸을 누를 때마다 화면이 확대**됐어요(1187행의 16px 규칙은 `.input/.select/textarea.input/.pr-in` 만 덮어서 이 클래스가 빠져 있었어요). 라이브 7월 데이터 실측으로 이런 칸이 **1,600개** 였습니다. ⓑ 높이도 28~30px 이라 터치 타깃 미달이었어요. 비용은 실측상 거의 0 — 행 높이 61→61(무변) · 문서 높이 16,009→16,009(+0%) · 표는 원래 가로 스크롤 컨테이너 안이라 856→886px(페이지 가로 오버플로 0→0). */ .ol-table input.ol-edit { min-width: 56px; font-size: 16px !important; min-height: 44px; } /* 매칭 뱃지 — 24 → 32px. ⚠️ 44px 로 키우면 같은 행 안에서 hit 영역이 **20쌍 겹칩니다**(실측) + 제품명 옆 작은 원형 뱃지라 시각 비중도 과해져요. 44px 기준에는 여전히 못 미치는 **알고 하는 절충**이고, 행 높이는 61→61 로 안 변합니다. */ .ol-mtag { width: 32px; height: 32px; } .mk-pills .chip, .chip.mtog { padding: 10px 14px; } /* 터치 타깃 키움 */ .ms-head, .ms-row { grid-template-columns: 1.4fr 0.7fr 1.3fr; } .ms-head > span, .ms-row > span { padding: 9px 9px; } .date-banner { padding: 16px 18px 18px; } } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ========================= 공지 · 전광판(던파 비트비트체) ========================= */ /* 마퀴 전용 픽셀 폰트 — 본문엔 영향 없음(.notice-mq-track에만 적용). swap으로 비차단 로드. */ @font-face { font-family: "DNFBitBitv2"; src: url("https://cdn.df.nexon.com/img/common/font/DNFBitBitv2.otf") format("opentype"); font-weight: 400; font-display: swap; } /* 전광판 — 토프바 바로 아래(.main의 독립 행) 가운데 정렬된 얇은 띠. 공지 없으면 JS가 숨겨요. */ .notice-mq { align-self: center; width: 720px; max-width: calc(100% - 56px); box-sizing: border-box; margin: 12px auto 0; display: flex; align-items: center; gap: 9px; height: 30px; padding: 0 14px; background: var(--surface-sunken); border: 1px solid var(--hairline); border-radius: var(--r-pill); overflow: hidden; cursor: pointer; transition: background var(--fast), box-shadow var(--fast); } .notice-mq:hover { background: var(--surface); box-shadow: var(--shadow-card); } .notice-mq-ico { flex: 0 0 auto; display: inline-flex; color: var(--gold); } .notice-mq-vp { position: relative; flex: 1; min-width: 0; height: 100%; overflow: hidden; display: flex; align-items: center; -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 26px), transparent); } .notice-mq-track { display: inline-flex; flex: 0 0 auto; white-space: nowrap; animation: noticeScroll linear infinite; will-change: transform; font-family: "DNFBitBitv2", var(--font); font-size: 14px; line-height: 1; color: var(--ink); letter-spacing: 0.02em; } .notice-mq-seg { padding-right: 64px; } .notice-mq-sep { margin: 0 16px; color: var(--gold); opacity: 0.65; } /* 공지 3개 구분점 */ .notice-mq:hover .notice-mq-track { animation-play-state: paused; } @keyframes noticeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* 모션 최소화 — 흐름 대신 한 줄 고정 + 말줄임 */ @media (prefers-reduced-motion: reduce) { .notice-mq-vp { mask-image: none; -webkit-mask-image: none; } .notice-mq-track { animation: none; min-width: 0; max-width: 100%; } .notice-mq-seg { padding-right: 0; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .notice-mq-seg[aria-hidden] { display: none; } } /* 공지 게시판 */ .notice-row { display: flex; align-items: center; gap: 10px; padding: 9px 6px; border-bottom: 1px solid var(--hairline); } .notice-row:last-child { border-bottom: 0; } .notice-row.latest { background: var(--gold-tint); border-radius: var(--r-sm); } .notice-badge { flex: 0 0 auto; font-size: 10px; font-weight: 800; color: var(--ink-on-accent); background: var(--gold); padding: 2px 8px; border-radius: var(--r-pill); } .notice-dot { flex: 0 0 auto; width: 5px; height: 5px; margin: 0 9px; border-radius: 50%; background: var(--ink-3); opacity: 0.5; } .notice-text { flex: 1; min-width: 0; font-size: 14px; color: var(--ink); word-break: break-all; } .notice-meta { flex: 0 0 auto; font-size: 11px; color: var(--ink-3); white-space: nowrap; } /* 마진 준수 바로미터 — 상품 상세 마켓별 판매가 옆 색 인디케이터(파/녹/노/빨). 색은 인라인(currentColor) */ .mkt-baro { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 1px 8px; border: 1px solid currentColor; border-radius: var(--r-pill); background: color-mix(in srgb, currentColor 11%, transparent); white-space: nowrap; } .mkt-baro-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; } /* ════════ 통합 대시보드 (views/dashboard.js) ════════ */ /* 컨트롤 바 — 카드 아님(StyleSeed: 기간·소스는 상단 1줄) */ .dash-bar { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; } .dash-bar-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .dash-custom { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; } .dash-period, .dash-anchor, .dash-src { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .dash-period-sp { width: 1px; height: 18px; background: var(--hairline-strong); margin: 0 2px; } .dash-anchor { padding-top: 2px; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* pill 토글(기간·앵커) */ .pillx { padding: 7px 13px; border-radius: var(--r-pill); border: 1px solid var(--hairline-strong); background: var(--surface); cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-2); transition: all var(--fast); display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; } .pillx:hover { border-color: var(--gold); color: var(--ink); } .pillx.on { background: var(--gold); border-color: var(--gold); color: #fff; } /* 소스 상태칩 */ .srcchip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-2); padding: 4px 10px; border-radius: var(--r-pill); border: 1px solid var(--hairline); background: var(--surface-2); } .srcchip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); flex: 0 0 auto; } .srcchip.on .dot { background: var(--pos); } .srcchip.err .dot { background: var(--gold); } .srcchip.load .dot { background: var(--sat); animation: dash-pulse 1.1s ease-in-out infinite; } .srcchip.off { opacity: 0.5; } .srcchip .srcnote { color: var(--ink-3); font-weight: 500; } @keyframes dash-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } /* 섹션 */ .dash-sec { margin-bottom: 32px; scroll-margin-top: 12px; } .dash-sec-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; } .dash-sec-h h2 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; margin: 0; } .dash-sec-body { display: flex; flex-direction: column; gap: 16px; } /* 히어로 */ .dash-hero { display: flex; flex-direction: column; gap: 4px; } .dash-hero-v { font-size: 40px; font-weight: 750; letter-spacing: -0.02em; line-height: 1; color: var(--ink); } .dash-delta { display: inline-flex; align-items: center; gap: 4px; width: fit-content; font-size: 12.5px; font-weight: 700; padding: 2px 9px; border-radius: var(--r-pill); } .dash-delta.up { color: var(--gold); background: var(--gold-tint); } .dash-delta.down { color: var(--ink-2); background: var(--surface-sunken); } /* KPI 그리드 */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; } .kpi-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md); box-shadow: var(--shadow-card); padding: 14px 15px; display: flex; flex-direction: column; gap: 3px; } .kpi-card.clickable { cursor: pointer; transition: box-shadow var(--fast), transform var(--fast); } .kpi-card.clickable:hover { box-shadow: var(--shadow-hover); } .kpi-label { font-size: 12px; font-weight: 600; color: var(--ink-2); } .kpi-val { font-size: 24px; font-weight: 750; letter-spacing: -0.02em; color: var(--ink); min-height: 28px; } .kpi-sub { font-size: 11px; color: var(--ink-3); } /* 카드 그룹(가로 3, 모바일 1열) */ .dash-cards3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; align-items: start; } .dash-card-h { font-size: 14px; font-weight: 650; color: var(--ink); margin-bottom: 10px; } .dash-link { display: flex; } /* 가로 막대 리스트 */ .barlist { display: flex; flex-direction: column; gap: 9px; } .barlist-top { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; margin-bottom: 3px; } .barlist-label { color: var(--ink-2); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .barlist-val { color: var(--ink); font-weight: 700; white-space: nowrap; } .barlist-sub { color: var(--ink-3); font-weight: 500; } .barlist-track { height: 7px; border-radius: var(--r-pill); background: var(--surface-sunken); overflow: hidden; } .barlist-fill { height: 100%; border-radius: var(--r-pill); background: var(--gold); } /* 키-값(매출 대사) */ .dash-kv { display: flex; flex-direction: column; gap: 8px; } .dash-kv-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding-bottom: 8px; border-bottom: 1px solid var(--hairline); } .dash-kv-row:last-child { border-bottom: 0; padding-bottom: 0; } .dash-kv-row .k { color: var(--ink-2); } .dash-kv-row .v { color: var(--ink); font-weight: 700; } /* 퍼널 */ .funnel { display: flex; flex-direction: column; gap: 11px; } .funnel-top { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 4px; } .funnel-label { color: var(--ink-2); font-weight: 600; } .funnel-n { color: var(--ink); font-weight: 700; } .funnel-track { height: 10px; border-radius: var(--r-pill); background: var(--surface-sunken); overflow: hidden; } .funnel-fill { height: 100%; border-radius: var(--r-pill); background: var(--gold); } .funnel-conv { font-size: 11px; color: var(--ink-3); margin-top: 3px; } .funnel-conv.low { color: var(--danger); font-weight: 600; } /* 메타 전환 퍼널 (라벨·큰 수치·전환율 + sqrt 폭 막대) */ .dash-fun { display: flex; flex-direction: column; gap: 12px; } .dash-fun-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 4px; } .dash-fun-label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); } .dash-fun-n { font-size: 17px; font-weight: 750; letter-spacing: -0.01em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; } .dash-fun-track { height: 9px; border-radius: var(--r-pill); background: var(--accent-tint); overflow: hidden; } .dash-fun-fill { height: 100%; border-radius: var(--r-pill); background: var(--brand); } .dash-fun-conv { font-size: 11px; color: var(--ink-3); margin-top: 4px; } .dash-fun-conv.low { color: var(--danger); font-weight: 600; } .dash-fun-row.zero .dash-fun-label, .dash-fun-row.zero .dash-fun-n { color: var(--ink-3); } .dash-fun-row.zero .dash-fun-track { opacity: 0.5; } /* 비중 막대 (채널·고객층 — 전체 지출 대비) */ .dash-mix { display: flex; flex-direction: column; gap: 10px; } .dash-mix-top { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; margin-bottom: 3px; } .dash-mix-label { color: var(--ink-2); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dash-mix-val { color: var(--ink); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; } .dash-mix-pct { color: var(--brand-deep); font-weight: 600; } .dash-mix-sub { color: var(--ink-3); font-weight: 500; } .dash-mix-track { height: 7px; border-radius: var(--r-pill); background: var(--surface-sunken); overflow: hidden; } .dash-mix-fill { height: 100%; border-radius: var(--r-pill); background: var(--accent); } /* 인기 소재 — 큰 카드 그리드(썸네일 크게·성과) */ .dash-cr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px; } .dash-cr-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px; overflow: hidden; transition: transform var(--fast), box-shadow var(--fast), border-color var(--fast); } .dash-cr-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: var(--hairline-strong); } .dash-cr-thumb { position: relative; aspect-ratio: 4 / 3; background: var(--surface-sunken); display: grid; place-items: center; overflow: hidden; } .dash-cr-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .dash-cr-noimg { color: var(--ink-3); font-size: 28px; } .dash-cr-play { position: absolute; right: 6px; bottom: 6px; background: var(--accent); color: var(--ink-on-accent); border-radius: 7px; padding: 1px 5px; display: inline-flex; } .dash-cr-body { padding: 10px 11px 12px; } .dash-cr-name { font-weight: 600; font-size: 12.5px; line-height: 1.3; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 33px; } .dash-cr-spend { font-weight: 800; font-size: 16px; letter-spacing: -0.01em; color: var(--brand-deep); margin-top: 5px; font-variant-numeric: tabular-nums; } .dash-cr-metrics { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 6px; font-size: 11px; color: var(--ink-3); align-items: center; } .dash-cr-chip { background: var(--accent-tint); color: var(--brand-deep); border-radius: var(--r-pill); padding: 1px 7px; font-weight: 600; } /* 일별 매출 스파크 */ .dash-spark { width: 100%; height: 48px; display: block; } .dash-spark rect { fill: var(--gold); } .dash-spark-base { stroke: var(--hairline); stroke-width: 0.4; } .dash-spark-cap { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--ink-3); margin-top: 6px; } .dash-spark-cap-sp { width: 8px; } /* 원인분석 todo */ .dash-todo { margin: 10px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; } .dash-todo li { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; } /* 스켈레톤 */ .skel-block { background: linear-gradient(100deg, var(--surface-sunken) 30%, var(--surface-2) 50%, var(--surface-sunken) 70%); background-size: 200% 100%; border-radius: var(--r-md); animation: skel 1.3s ease-in-out infinite; } .skel-line { background: var(--surface-sunken); border-radius: 6px; animation: skel-fade 1.3s ease-in-out infinite; } @keyframes skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @keyframes skel-fade { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @media (prefers-reduced-motion: reduce) { .skel-block, .skel-line, .srcchip.load .dot { animation: none; } } @media (max-width: 820px) { .dash-hero-v { font-size: 34px; } .dash-cards3 { grid-template-columns: 1fr; } } /* ════════ 매장 집중 진단 (views/store-diagnosis.js) ════════ */ .sdg-page { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .sdg-storebar { padding-block: 16px; } .sdg-store-scroll { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; padding: 3px; -webkit-overflow-scrolling: touch; } .sdg-store-scroll .chip { flex: none; } .sdg-unit { margin: 0 0 2px 2px; font-size: 12px; } .sdg-sec { margin-top: 14px; min-width: 0; } .sdg-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; } .sdg-sec-head h2 { font-size: 18px; } .sdg-sec-head .muted { font-size: 12px; } .sdg-hero { padding: 24px; background: var(--accent-tint); border-color: var(--hairline-strong); } .sdg-hero-value { color: var(--brand-deep); font-size: clamp(34px, 5vw, 52px); font-weight: 800; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .sdg-deltas { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; } .sdg-delta { display: inline-flex; padding: 3px 9px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 700; white-space: nowrap; } .sdg-delta.up { color: var(--pos); background: color-mix(in srgb, var(--pos) 12%, transparent); } .sdg-delta.down { color: var(--danger); background: var(--danger-tint); } .sdg-delta.flat, .sdg-delta.none { color: var(--ink-3); background: var(--surface-sunken); } .sdg-stack { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .sdg-subcard { min-width: 0; } .sdg-inline-load { font-size: 12px; padding: 2px 4px; } .sdg-error { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .sdg-page .empty { padding: 30px 16px; } @media (max-width: 820px) { .sdg-page { gap: 10px; } .sdg-storebar, .sdg-page > .panel.panel-pad { padding: 16px; } .sdg-storebar > .row { flex-wrap: wrap; } .sdg-store-scroll { flex-basis: calc(100% - 48px); order: 2; width: 100%; } .sdg-hero { padding: 20px 18px; } .sdg-hero-value { font-size: 36px; } .sdg-subcard { padding: 16px; } } /* 미니 게임 허브 시트 (games.js) — modal 안에 두 게임 카드 */ .games-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .games-item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px 16px; border-radius: 14px; border: 1px solid var(--hairline); background: var(--surface); cursor: pointer; transition: transform var(--fast), box-shadow var(--fast); } .games-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); } .games-emoji { font-size: 36px; line-height: 1; } .games-name { font-weight: 700; font-size: 15px; color: var(--ink); } .games-sub { font-size: 12px; color: var(--ink-3); text-align: center; } @media (max-width: 480px) { .games-grid { grid-template-columns: 1fr; } } /* ── 인스타 커맨드센터 ── 시맨틱 토큰만. 발사대·계정 줄·슬라이드 목록. */ /* 계정 줄은