/* GarakMarket 공통 컴포넌트 (GMK-UX-001 #1 기준) design-tokens.css 이후에 로드한다. */ /* Google Material Symbols 아이콘 (이모지 대신 사용). 각 레이아웃 에서 폰트를 로드한다. */ .material-symbols-outlined { font-family: var(--font-family-icon); font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-smoothing: antialiased; } /* 상태 배지: 색상만이 아니라 텍스트 라벨을 항상 함께 표기한다 (#1 오류·상태 표시 원칙) */ .status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-weight: 700; font-size: 0.9em; line-height: 1.4; white-space: nowrap; } .status-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .status-badge--onsale { color: var(--color-status-onsale); background: var(--color-status-onsale-bg); } .status-badge--soldout { color: var(--color-status-soldout); background: var(--color-status-soldout-bg); } .status-badge--ended { color: var(--color-status-ended); background: var(--color-status-ended-bg); } .status-badge--progress { color: var(--color-status-progress); background: var(--color-status-progress-bg); } .status-badge--delivered { color: var(--color-status-delivered); background: var(--color-status-delivered-bg); } .status-badge--cancelled { color: var(--color-status-cancelled); background: var(--color-status-cancelled-bg); } .status-badge--warning { color: var(--color-status-warning); background: var(--color-status-warning-bg); } /* 컬러 포인트 강화: 카드 왼쪽에 상태색 띠를 둬서 목록을 텍스트로 읽기 전에 색으로 먼저 스캔할 수 있게 한다(#28 GMK-UX-002 참고, 색상만이 아니라 옆의 상태 배지 텍스트와 항상 함께 쓴다 - #1 원칙 유지). 변형 규칙을 .card-accent와 겹친 2-클래스 선택자로 써서 특이도를 올린다 - .product-card/ .broker-settlement-card처럼 나중에 border 축약형을 선언하는 규칙에 밀려 border-left가 지워지는 걸 방지(특이도로 이기므로 스타일시트 로드 순서에 기대지 않아도 됨). */ .card-accent { border-left: 4px solid transparent; } .card-accent.card-accent--onsale { border-left: 4px solid var(--color-status-onsale); } .card-accent.card-accent--soldout { border-left: 4px solid var(--color-status-soldout); } .card-accent.card-accent--ended { border-left: 4px solid var(--color-status-ended); } .card-accent.card-accent--progress { border-left: 4px solid var(--color-status-progress); } .card-accent.card-accent--delivered { border-left: 4px solid var(--color-status-delivered); } .card-accent.card-accent--cancelled { border-left: 4px solid var(--color-status-cancelled); } .card-accent.card-accent--warning { border-left: 4px solid var(--color-status-warning); } /* 터치 영역 48x48 이상 보장 버튼 (#1) */ .btn-touch { min-height: var(--touch-target-min); min-width: var(--touch-target-min); font-size: var(--mobile-font-button); font-weight: 700; border-radius: var(--radius-md); padding: 10px 20px; } /* 중매인 핵심 실행 버튼: 52px 이상 (#1) */ .btn-broker-primary { display: flex; align-items: center; justify-content: center; min-height: var(--broker-button-height); width: 100%; font-size: 18px; font-weight: 700; color: #fff; background: var(--color-primary); border: none; border-radius: var(--radius-md); box-shadow: 0 2px 4px rgba(0, 75, 159, 0.18); transition: box-shadow 0.15s ease, transform 0.1s ease; } .btn-broker-primary:hover { box-shadow: 0 4px 8px rgba(0, 75, 159, 0.22); transform: translateY(-1px); } .btn-broker-primary:active { background: var(--color-primary-dark); transform: translateY(0); } /* 처리할 새 주문이 있을 때만 포인트 컬러(주황)로 눈에 띄게 해 "지금 해야 할 일"과 일상적인 이동 버튼(파랑)을 색으로 구분한다. */ .btn-broker-primary--urgent { background: var(--color-accent); box-shadow: 0 2px 6px rgba(255, 136, 57, 0.35); } .btn-broker-primary--urgent:hover { box-shadow: 0 4px 10px rgba(255, 136, 57, 0.4); } .btn-broker-primary--urgent:active { background: #e0701f; } /* 상품/시세 카드형 목록: 모바일에서 가로 스크롤 표 대신 카드 우선 (#1) */ .product-card { display: flex; gap: var(--spacing-4); padding: var(--spacing-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg); margin-bottom: var(--spacing-4); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05); transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease; } @media (hover: hover) { a.product-card__link:hover .product-card { box-shadow: 0 6px 16px rgba(16, 24, 40, 0.10); border-color: var(--color-primary); transform: translateY(-1px); } } .product-card__thumb { width: 88px; height: 88px; border-radius: var(--radius-md); background: var(--color-bg-subtle) center/cover no-repeat; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); font-size: 12px; } .product-card__body { flex: 1; min-width: 0; } .product-card__name { font-size: var(--mobile-font-body); font-weight: 700; color: var(--color-text); margin: 0 0 4px; } .product-card__spec { font-size: 15px; color: var(--color-text-muted); margin: 0 0 8px; } .product-card__meta { font-size: 15px; color: var(--color-text-muted); margin: 4px 0 0; } .product-card__price { font-size: var(--mobile-font-price); font-weight: 800; color: var(--color-text); } .product-card__price small { font-size: 14px; font-weight: 500; color: var(--color-text-muted); } .product-card__link { text-decoration: none; color: inherit; display: block; } /* 숫자 입력: 숫자 키패드 우선 노출 대상 표시 (#1 중매인 입력) */ input[inputmode="numeric"], input[inputmode="decimal"] { font-size: var(--mobile-font-price); font-weight: 700; text-align: right; } /* 빈 화면: 다음 행동을 항상 제공한다 (#1) */ .empty-state { text-align: center; padding: var(--spacing-6) var(--spacing-4); color: var(--color-text-muted); } .empty-state__title { font-size: var(--mobile-font-body); font-weight: 700; color: var(--color-text); margin-bottom: var(--spacing-2); } /* 오류 메시지: 원인과 해결 방법을 함께 제공 (#1) */ .form-error-message { display: flex; gap: 6px; align-items: flex-start; font-size: 15px; color: var(--color-danger); margin-top: 6px; } /* 등록/수정 폼 카드 (FusionSnow Q-Bank의 data-card/form-section 배치를 참고). PC 관리자 화면(Bootstrap)과 모바일 구매자 화면 양쪽에서 공용으로 쓴다. */ .form-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06); padding: var(--spacing-5) var(--spacing-6); max-width: 640px; } .form-card__header { display: flex; align-items: center; gap: 10px; margin-bottom: var(--spacing-5); } .form-card__header .material-symbols-outlined { width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--color-primary-bg); color: var(--color-primary-dark); display: flex; align-items: center; justify-content: center; font-size: 22px; } .form-card__title { font-size: 19px; font-weight: 800; margin: 0; } .form-card__subtitle { font-size: 13px; color: var(--color-text-muted); margin: 2px 0 0; } /* 등록/수정 폼을 팝업(모달)처럼 보이게 하는 오버레이. 실제 JS 모달은 아니고 일반 서버 렌더링 페이지를 화면 중앙의 작은 카드로 띄워 화면이 비어 보이지 않게 한다. */ .modal-page-overlay { position: fixed; inset: 0; background: rgba(17, 24, 39, 0.5); display: flex; align-items: flex-start; justify-content: center; padding: 48px 24px; overflow-y: auto; z-index: 40; } .modal-page-overlay .form-card { width: 100%; max-width: 480px; position: relative; } .form-card__close { position: absolute; top: var(--spacing-4); right: var(--spacing-4); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: none; background: none; color: var(--color-text-muted); border-radius: 999px; text-decoration: none; cursor: pointer; } .form-card__close:hover { background: var(--color-bg-subtle); color: var(--color-text); } .field-hint { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; } .form-section-title { font-size: 13px; font-weight: 700; color: var(--color-text-muted); letter-spacing: 0.02em; margin: var(--spacing-5) 0 var(--spacing-3); padding-top: var(--spacing-4); border-top: 1px solid var(--color-border); } .form-section-title:first-of-type { margin-top: 0; padding-top: 0; border-top: none; } .form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--spacing-3); } .form-row-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-3); } @media (max-width: 640px) { .form-row-pair { grid-template-columns: 1fr; } } .form-row label, .form-row .field-input-label { font-size: 13px; font-weight: 700; color: var(--color-text); } .field-input { box-sizing: border-box; height: 42px; padding: 0 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: 15px; font-family: inherit; background: #fff; color: var(--color-text); width: 100%; transition: border-color 0.12s ease, box-shadow 0.12s ease; } .field-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-bg); } .field-input:disabled { background: var(--color-bg-subtle); color: var(--color-text-muted); } /* 가격 등 금액 입력 필드: 일반 텍스트 입력과 구분되도록 원(₩) 아이콘과 큰 숫자로 강조한다 (wwit.design 핀크 "충전금액" 입력 화면 참고). */ .amount-input { display: flex; align-items: center; gap: 10px; height: var(--broker-button-height); padding: 0 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; transition: border-color 0.12s ease, box-shadow 0.12s ease; } .amount-input:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-bg); } .amount-input__icon { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--color-primary-bg); color: var(--color-primary-dark); font-size: 14px; font-weight: 800; display: flex; align-items: center; justify-content: center; } .amount-input__field { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: inherit; font-size: 22px; font-weight: 800; text-align: right; color: var(--color-text); } .amount-input__suffix { flex-shrink: 0; font-size: 15px; font-weight: 600; color: var(--color-text-muted); } .form-footer { display: flex; gap: 10px; margin-top: var(--spacing-5); padding-top: var(--spacing-4); border-top: 1px solid var(--color-border); } /* 다중 선택 체크박스 그리드 (담당 품목 선택 등) */ .checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; padding: 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-subtle); } .checkbox-grid label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--color-text); } .checkbox-grid input[type="checkbox"] { accent-color: var(--color-primary); width: 16px; height: 16px; } /* 토글 스위치 (form-switch 대체용, 더 뚜렷한 on/off 표현) */ .toggle-row { display: flex; align-items: center; gap: 10px; } .toggle { position: relative; display: inline-flex; align-items: center; cursor: pointer; flex-shrink: 0; } .toggle input { position: absolute; opacity: 0; width: 0; height: 0; } .toggle-track { width: 44px; height: 25px; border-radius: 999px; background: #d1d5db; position: relative; transition: background 0.15s ease; } .toggle-track::after { content: ""; position: absolute; top: 2.5px; left: 2.5px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: transform 0.15s ease; } .toggle input:checked + .toggle-track { background: var(--color-primary); } .toggle input:checked + .toggle-track::after { transform: translateX(19px); } .toggle-label { font-size: 14px; font-weight: 600; color: var(--color-text); } /* Bootstrap 버튼 색상/모서리를 디자인 토큰 팔레트로 재스킨 (관리자 화면) */ .btn { border-radius: var(--radius-md); font-weight: 600; } .btn-primary { background: var(--color-primary); border-color: var(--color-primary); box-shadow: 0 1px 2px rgba(0, 75, 159, 0.25); } .btn-primary:hover, .btn-primary:focus { background: var(--color-primary-dark); border-color: var(--color-primary-dark); } .btn-outline-primary { color: var(--color-primary); border-color: var(--color-primary); } .btn-outline-primary:hover { background: var(--color-primary); border-color: var(--color-primary); } .btn-outline-secondary { color: var(--color-text-muted); border-color: var(--color-border); } .btn-outline-secondary:hover { background: var(--color-bg-subtle); border-color: var(--color-text-muted); color: var(--color-text); } .btn-outline-success { color: var(--color-status-onsale); border-color: var(--color-status-onsale); } .btn-outline-success:hover { background: var(--color-status-onsale); border-color: var(--color-status-onsale); } .btn-outline-danger { color: var(--color-danger); border-color: var(--color-danger); } .btn-outline-danger:hover { background: var(--color-danger); border-color: var(--color-danger); } /* 상품 사진 업로드 드롭존 (#8 GMK-BRO-002). 기본 대신 클릭/드래그 업로드와 썸네일 미리보기·대표사진 선택을 제공한다. */ .photo-dropzone { border: 2px dashed var(--color-border); border-radius: var(--radius-lg); padding: var(--spacing-5); text-align: center; cursor: pointer; background: var(--color-bg-subtle); transition: border-color 0.15s ease, background 0.15s ease; } .photo-dropzone:hover, .photo-dropzone.is-dragover { border-color: var(--color-primary); background: var(--color-primary-bg); } .photo-dropzone input[type="file"] { display: none; } .photo-dropzone__icon { font-size: 32px; color: var(--color-primary); margin-bottom: 4px; } .photo-dropzone__title { font-weight: 700; font-size: var(--mobile-font-body); color: var(--color-text); } .photo-dropzone__hint { font-size: 13px; color: var(--color-text-muted); margin-top: 4px; } /* 가로 스크롤 영역 공통: 좌우 버튼/썸네일 클릭으로도 넘길 수 있으므로, 사진 크기 때문에 영역 아래에 나타나는 브라우저 기본 스크롤바는 숨긴다(터치 스와이프 자체는 계속 동작한다). */ .photo-thumb-grid, .photo-gallery__main, .photo-gallery__thumbs { scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* 구형 Edge */ } .photo-thumb-grid::-webkit-scrollbar, .photo-gallery__main::-webkit-scrollbar, .photo-gallery__thumbs::-webkit-scrollbar { display: none; /* Chrome, Safari, 최신 Edge */ } /* 새로 선택한 사진 미리보기: 크게, 좌우로 스크롤되는 슬라이더 형태로 보여준다. */ .photo-thumb-grid { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x proximity; padding: 10px 4px 14px; margin-top: var(--spacing-3); -webkit-overflow-scrolling: touch; } .photo-thumb { position: relative; flex: 0 0 140px; width: 140px; height: 140px; scroll-snap-align: start; border-radius: var(--radius-md); overflow: visible; border: 2px solid var(--color-border); background: var(--color-bg); } .photo-thumb.is-primary { border-color: #FFB300; } .photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: calc(var(--radius-md) - 2px); } /* 사진 위 아이콘 버튼(대표 지정 별, 삭제): 사진 바깥으로 튀어나오게 배치하면 슬라이더의 overflow-x:auto가 세로 overflow도 함께 잘라내어 아이콘이 잘려 보인다. 사진 안쪽에 여백을 두고, 배경 전체가 아니라 아이콘 자체에 어두운 반투명 원형 배경을 둘러 사진 위에 자연스럽게 얹힌 형태로 통일한다. */ .photo-thumb__star, .photo-gallery__star, .photo-thumb__remove, .photo-gallery__remove { position: absolute; top: 8px; width: 32px; height: 32px; min-height: 0; border-radius: 50%; border: none; background: rgba(17, 24, 39, 0.55); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; z-index: 2; } .photo-thumb__star, .photo-gallery__star { left: 8px; } .photo-thumb__remove, .photo-gallery__remove { right: 8px; } .photo-thumb__star.is-active, .photo-gallery__star.is-active { background: #FFB300; color: #fff; cursor: default; } .photo-thumb__remove:hover, .photo-gallery__remove:hover { background: var(--color-danger); } .photo-thumb__star .material-symbols-outlined, .photo-gallery__star .material-symbols-outlined, .photo-thumb__remove .material-symbols-outlined, .photo-gallery__remove .material-symbols-outlined { font-size: 18px; } /* 등록된 사진 갤러리: 큰 슬라이드(위) + 가로 썸네일 목록(아래)으로 전체 사진을 한눈에 볼 수 있게 한다. */ .photo-gallery { position: relative; } .photo-gallery__main { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; border-radius: var(--radius-lg); background: var(--color-bg); } .photo-gallery__slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 4 / 3; } .photo-gallery__slide img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--radius-lg); } /* 스크롤 대신 명확한 버튼으로도 사진을 넘길 수 있게 좌우 화살표를 슬라이드 위에 얹는다. */ .photo-gallery__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; border: none; background: rgba(17, 24, 39, 0.55); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 3; padding: 0; } .photo-gallery__nav:hover { background: rgba(17, 24, 39, 0.75); } .photo-gallery__nav:disabled { opacity: 0.3; cursor: default; } .photo-gallery__nav--prev { left: 10px; } .photo-gallery__nav--next { right: 10px; } .photo-gallery__nav .material-symbols-outlined { font-size: 22px; } .photo-gallery__thumbs { display: flex; gap: 10px; overflow-x: auto; margin-top: 10px; padding-bottom: 4px; -webkit-overflow-scrolling: touch; } .photo-gallery__thumb { position: relative; flex: 0 0 64px; width: 64px; height: 64px; padding: 0; border-radius: var(--radius-sm); border: 2px solid var(--color-border); overflow: hidden; background: none; cursor: pointer; opacity: 0.6; } .photo-gallery__thumb.is-primary { border-color: #FFB300; } .photo-gallery__thumb.is-active { opacity: 1; border-color: var(--color-primary); } .photo-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ============================================================ PC 반응형 쉘 (구매자/중매인 공용, 관리자 화면과 동일한 톤). 1024px 미만은 각 역할의 기존 모바일 상단바 + 하단 탭을 그대로 쓰고, 1024px 이상에서는 상단 헤더 + 좌측 사이드바로 전환하고 하단 탭은 숨긴다. ============================================================ */ .role-header { display: flex; align-items: center; gap: var(--spacing-3); height: 60px; padding: 0 var(--spacing-4); background: var(--color-bg); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 30; } .role-header__brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--color-text); } .role-header__logo { width: 32px; height: 32px; border-radius: 8px; background: var(--color-primary); color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .role-header__title { font-size: 17px; font-weight: 800; } .role-header__spacer { flex: 1; } .role-header__logout { display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 700; color: var(--color-text-muted); background: none; border: none; cursor: pointer; font-family: inherit; text-decoration: none; } .role-header__logout:hover { color: var(--color-danger); } .role-header__logout .material-symbols-outlined { font-size: 20px; } .role-sidebar { display: none; } @media (min-width: 1024px) { .role-shell { display: flex; align-items: flex-start; } /* flex 아이템은 기본적으로 내용 크기만큼만 차지한다. 이 규칙이 없으면 본문 영역이 사이드바 옆에서 넓게 펼쳐지지 않고 좁게 쪼그라들어(#1 GMK-UX-001 PC 반응형 회귀) 오른쪽에 큰 빈 공간이 남는다. */ .role-main { flex: 1 1 auto; min-width: 0; } .role-sidebar { display: flex; flex-direction: column; width: 220px; flex-shrink: 0; background: var(--color-primary-dark); padding: var(--spacing-4) 0; position: sticky; top: 60px; height: calc(100vh - 60px); } .role-sidebar__link { display: flex; align-items: center; gap: 10px; padding: 12px var(--spacing-5); color: #E8EAED; text-decoration: none; font-size: 15px; font-weight: 600; } .role-sidebar__link .material-symbols-outlined { font-size: 20px; } .role-sidebar__link:hover { background: rgba(255, 255, 255, 0.08); } .role-sidebar__link.is-active { background: rgba(255, 255, 255, 0.16); color: #fff; } } /* 소비자/중매인 상품 카드 목록: 1024px 이상에서는 한 줄 나열 대신 그리드로 보여준다. */ .role-card-grid { display: block; } @media (min-width: 700px) { .role-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--spacing-4); } .role-card-grid > .product-card__link { display: flex; } .role-card-grid .product-card, .role-card-grid .product-card__link .product-card { height: 100%; width: 100%; margin-bottom: 0; flex-direction: column; } .role-card-grid .product-card__thumb { width: 100%; height: 140px; } }