/* 화면 공통 토큰 — 화면 개편 1단계: B 톤(담백) 확정(2026-09-30 D98, 설계 docs/decisions/ui-overhaul-2026-09-30.md §4). 은행 앱처럼 조용하고 가지런하게: 흰 바탕·회색 단계·파랑 하나만 강조·얇은 구분선·테두리·그림자 최소. 화면 코드는 이 토큰만 쓴다(색 값을 직접 적지 않는다). · 표 값(§4)은 그대로 둔다. 표 값 가운데 **글자로 쓰면 대비 4.5:1 에 못 미치는 것**(밝음 text-3·danger·ok, 어두움 text-3)은 글자용 보정 토큰(-aa, 같은 색 계열에서 가장 가까운 통과 값)을 따로 두고, 글자에는 -aa 를 쓴다(점·아이콘 같은 글자 아닌 표시는 3:1 — ok 점은 -mark). scripts/test_job_box.mjs 가 두 모드의 대비를 계산한다. · 원본 사진·로고·증빙은 색상을 변환하지 않는다. 로고(남색·노랑)는 그대로 — 노랑은 로고에만 있고 화면 강조로 쓰지 않는다. */ :root { /* §4 표 — 밝은 모드 */ --yc-page: #F7F8FA; --yc-surface: #FFFFFF; --yc-surface-2: #F2F4F6; --yc-text: #191F28; --yc-text-2: #4E5968; --yc-text-3: #8B95A1; --yc-line: #E5E8EB; --yc-accent: #2563EB; --yc-danger: #E5484D; --yc-ok: #12B76A; --yc-warn: #B45309; --yc-on-warn: #FFFFFF; /* 경고 띠(오프라인 X03 — OV-A1 2026-10-17): 짙은 호박색 + 흰 글자 5.0:1 */ --yc-shadow-pop: 0 12px 32px rgba(15, 23, 42, .16); /* 떠 있는 판 그림자(OV-C 2026-10-17 거르기 판) */ /* 글자 대비 4.5:1 보정(-aa)·점(-mark)·강조 위 글자 */ --yc-text-3-aa: #66717E; --yc-danger-aa: #DA1F25; --yc-ok-aa: #0D804A; --yc-ok-mark: #10A15D; --yc-on-accent: #FFFFFF; /* 파생 — 옅은 면(안 읽음·선택)·눌림 */ --yc-accent-soft: color-mix(in srgb, var(--yc-accent) 8%, var(--yc-surface)); --yc-accent-hover: color-mix(in srgb, var(--yc-accent) 86%, #000000); --yc-danger-soft: color-mix(in srgb, var(--yc-danger) 8%, var(--yc-surface)); --yc-ok-soft: color-mix(in srgb, var(--yc-ok) 8%, var(--yc-surface)); /* 옛 이름(기존 규칙이 쓰던 토큰) → B 톤 */ --yc-raised: var(--yc-surface-2); --yc-muted: var(--yc-text-2); --yc-focus: var(--yc-accent); /* 글자 단계 다섯 · 굵기 셋 (금액·건수는 tabular-nums — .yc-num) */ --yc-fs-title: 22px; --yc-fs-section: 18px; --yc-fs-card: 16px; --yc-fs-body: 14px; --yc-fs-meta: 12px; --yc-fw-bold: 700; --yc-fw-semi: 600; --yc-fw-regular: 400; /* 여백 4px 단위 · 화면 좌우 20px(휴대폰) · 구역 사이 24px */ --yc-space-1: 4px; --yc-space-2: 8px; --yc-space-3: 12px; --yc-space-4: 16px; --yc-space-5: 20px; --yc-space-6: 24px; --yc-gutter: 20px; --yc-section-gap: 24px; /* 넓은 화면의 가운데 한 열 폭 — styles.css 의 [일정]·[정산]·[더보기]·화주 관제 700px 열과 [운행] 전환 줄 넓은 화면 정렬(OV-RUNS, 640px 이상)이 함께 쓰는 한 원천(runs-tab-2026-10-18 §B-3 3차) */ --yc-col-max: 700px; /* 모서리: 카드·창 12px · 버튼·입력 칸 10px · 상태 점 원 */ --yc-radius-card: 12px; --yc-radius-control: 10px; /* 누르는 자리 44px · 주 버튼 높이(휴대폰 52px) */ --yc-tap: 44px; --yc-btn-primary-h: 52px; /* 움직임 150ms 안팎의 옅은 전환만(prefers-reduced-motion 이면 0) */ --yc-motion: 150ms; /* 택배사·업종 배지(D108 — 원천 taxonomy.js COURIERS·INDUSTRIES 의 tone, 쓰는 곳 .yc-courier[data-c]). 개편 전 배지(Tailwind 원색)와 같은 값 — 원색 재매핑 구역이 바꾸지 않게 전용 토큰으로 둔다. 면 위 글자 대비 4.5:1 이상(두 모드 같은 값 — scripts/test_ui_cards.mjs 가 계산한다). -edge: 면과 바탕을 가르는 1px(어두운 모드의 쿠팡 검정) */ --yc-c-coupang: #000000; --yc-c-coupang-on: #FFFFFF; --yc-c-cj: #C2410C; --yc-c-cj-on: #FFFFFF; --yc-c-hanjin: #1E40AF; --yc-c-hanjin-on: #FFFFFF; --yc-c-lotte: #DC2626; --yc-c-lotte-on: #FFFFFF; --yc-c-logen: #EAB308; --yc-c-logen-on: #000000; --yc-c-post: #B91C1C; --yc-c-post-on: #FFFFFF; --yc-c-kurly: #7E22CE; --yc-c-kurly-on: #FFFFFF; --yc-c-ssg: #F59E0B; --yc-c-ssg-on: #000000; --yc-c-courier-other: #334155; --yc-c-courier-other-on: #FFFFFF; --yc-c-parcel: #1E40AF; --yc-c-parcel-on: #FFFFFF; --yc-c-fresh: #047857; --yc-c-fresh-on: #FFFFFF; --yc-c-moving: #B45309; --yc-c-moving-on: #FFFFFF; --yc-c-construction: #57534E; --yc-c-construction-on: #FFFFFF; --yc-c-agri: #4D7C0F; --yc-c-agri-on: #FFFFFF; --yc-c-quick: #E11D48; --yc-c-quick-on: #FFFFFF; --yc-c-industry-other: #475569; --yc-c-industry-other-on: #FFFFFF; --yc-c-edge: transparent; /* 기사 모집 공고 보조색(E11 2026-10-11 — 입구 카드·전용 화면 머리 띠·공고 카드 왼쪽 띠·칩): 오더 화면의 강조 파랑과 한눈에 다르게. 글자 대비 4.5:1(면·옅은 면 위 — 두 모드) */ --yc-fp-accent: #0F766E; --yc-fp-on: #FFFFFF; --yc-fp-soft: color-mix(in srgb, var(--yc-fp-accent) 8%, var(--yc-surface)); } :root[data-theme="dark"] { background: var(--yc-page); /* §4 표 — 어두운 모드 */ --yc-page: #0F1115; --yc-surface: #171A21; --yc-surface-2: #1F232B; --yc-text: #F2F4F6; --yc-text-2: #B0B8C1; --yc-text-3: #6B7684; --yc-line: #2A2F38; --yc-accent: #5B8DEF; --yc-danger: #FF6B6E; --yc-ok: #3DD68C; --yc-warn: #F5B544; --yc-on-warn: #1A1206; /* 어두움 10:1 */ --yc-shadow-pop: 0 12px 32px rgba(0, 0, 0, .45); --yc-text-3-aa: #808A98; --yc-danger-aa: #FF6B6E; --yc-ok-aa: #3DD68C; --yc-ok-mark: #3DD68C; /* 어두운 강조(#5B8DEF) 위 흰 글자는 3.2:1 — 강조 위 글자는 바탕색으로 */ --yc-on-accent: #0F1115; --yc-accent-soft: color-mix(in srgb, var(--yc-accent) 12%, var(--yc-surface)); /* 옅은 면 위 강조 글자 4.5:1 이상(14% 는 4.44) */ --yc-accent-hover: color-mix(in srgb, var(--yc-accent) 86%, #FFFFFF); --yc-danger-soft: color-mix(in srgb, var(--yc-danger) 14%, var(--yc-surface)); --yc-ok-soft: color-mix(in srgb, var(--yc-ok) 14%, var(--yc-surface)); /* 쿠팡 검정 배지가 어두운 면에 묻히지 않게 1px 밝은 테두리(D108) */ --yc-c-edge: var(--yc-text-3-aa); /* 기사 모집 공고 보조색(E11) — 어두운 면 위 밝은 청록, 채운 칩 위 글자는 바탕색 */ --yc-fp-accent: #2DD4BF; --yc-fp-on: #0F1115; --yc-fp-soft: color-mix(in srgb, var(--yc-fp-accent) 12%, var(--yc-surface)); color-scheme: dark; } @media (prefers-reduced-motion: reduce) { :root { --yc-motion: 0ms; } } /* ── 공용 모양(화면 개편 1단계 — 앱·팀 콘솔·관리 콘솔·홈페이지가 같은 모양을 쓴다. 토큰만 쓴다) ─────────────────── */ /* 글자 단계 */ .yc-t-title { font-size: var(--yc-fs-title); font-weight: var(--yc-fw-bold); line-height: 1.36; letter-spacing: -.02em; color: var(--yc-text); } .yc-t-section { font-size: var(--yc-fs-section); font-weight: var(--yc-fw-bold); line-height: 1.4; letter-spacing: -.01em; color: var(--yc-text); } .yc-t-card { font-size: var(--yc-fs-card); font-weight: var(--yc-fw-semi); line-height: 1.45; color: var(--yc-text); } .yc-t-body { font-size: var(--yc-fs-body); font-weight: var(--yc-fw-regular); line-height: 1.6; color: var(--yc-text-2); } .yc-t-meta { font-size: var(--yc-fs-meta); font-weight: var(--yc-fw-regular); line-height: 1.5; color: var(--yc-text-3-aa); } .yc-num { font-variant-numeric: tabular-nums; } /* 목록은 카드가 아니라 줄: 흰 면 위에 1px 구분선으로 나눈 줄(위아래 16px). 그림자 없음 */ .yc-list { background: var(--yc-surface); border-top: 1px solid var(--yc-line); border-bottom: 1px solid var(--yc-line); } .yc-list.is-boxed { border: 1px solid var(--yc-line); border-radius: var(--yc-radius-card); overflow: hidden; } .yc-row { display: flex; align-items: center; gap: var(--yc-space-3); min-height: var(--yc-tap); padding: var(--yc-space-4) var(--yc-gutter); background: var(--yc-surface); color: var(--yc-text); text-align: left; width: 100%; transition: background-color var(--yc-motion) ease; } .yc-row + .yc-row { border-top: 1px solid var(--yc-line); } button.yc-row, a.yc-row, .yc-row[role="button"] { cursor: pointer; } :is(button.yc-row, a.yc-row, .yc-row[role="button"]):hover { background: var(--yc-surface-2); } .yc-row-main { flex: 1; min-width: 0; display: grid; gap: var(--yc-space-1); } .yc-row-title { font-size: var(--yc-fs-card); font-weight: var(--yc-fw-semi); line-height: 1.45; color: var(--yc-text); overflow-wrap: anywhere; } .yc-row-sub { font-size: var(--yc-fs-body); line-height: 1.55; color: var(--yc-text-2); } .yc-row-meta { font-size: var(--yc-fs-meta); line-height: 1.5; color: var(--yc-text-3-aa); } .yc-row-amount { font-size: var(--yc-fs-card); font-weight: var(--yc-fw-bold); color: var(--yc-text); font-variant-numeric: tabular-nums; white-space: nowrap; } /* 요약 칸·창처럼 묶음이 필요한 곳만 카드(테두리는 구분선 색 1px 까지) */ .yc-card { background: var(--yc-surface); border: 1px solid var(--yc-line); border-radius: var(--yc-radius-card); padding: var(--yc-space-4); } /* 상태 표시: 채운 칩 대신 작은 점 + 글자. 할 일 = 강조 · 진행 중 = 보조 글자 · 끝남 = 옅은 글자 · 문제 = 위험 · 성공(입금·완료) = ok. 한 줄에 상태 하나 */ .yc-status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--yc-fs-body); font-weight: var(--yc-fw-semi); line-height: 1.4; color: var(--yc-text-2); } .yc-status-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--yc-text-2); } .yc-status.is-todo { color: var(--yc-accent); } .yc-status.is-todo .yc-status-dot { background: var(--yc-accent); } .yc-status.is-doing { color: var(--yc-text-2); } .yc-status.is-doing .yc-status-dot { background: var(--yc-text-2); } .yc-status.is-done { color: var(--yc-text-3-aa); font-weight: var(--yc-fw-regular); } .yc-status.is-done .yc-status-dot { background: var(--yc-text-3-aa); } .yc-status.is-danger { color: var(--yc-danger-aa); } .yc-status.is-danger .yc-status-dot { background: var(--yc-danger); } .yc-status.is-ok { color: var(--yc-ok-aa); } .yc-status.is-ok .yc-status-dot { background: var(--yc-ok-mark); } /* 상자 고르기(할 일·진행 중·끝남): 글자 탭 + 아래 2px 강조 줄, 건수는 글자 옆 숫자(0 이면 없음) */ .yc-boxtabs { display: flex; gap: var(--yc-space-5); border-bottom: 1px solid var(--yc-line); padding: 0 var(--yc-gutter); background: var(--yc-surface); overflow-x: auto; scrollbar-width: none; } .yc-boxtabs::-webkit-scrollbar { display: none; } .yc-boxtab { position: relative; display: inline-flex; align-items: center; gap: var(--yc-space-1); min-height: var(--yc-tap); padding: 0 2px; border: 0; background: none; color: var(--yc-text-2); font-size: var(--yc-fs-card); font-weight: var(--yc-fw-semi); white-space: nowrap; cursor: pointer; transition: color var(--yc-motion) ease; } .yc-boxtab::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: transparent; transition: background-color var(--yc-motion) ease; } .yc-boxtab:is([aria-selected="true"], .is-active) { color: var(--yc-text); font-weight: var(--yc-fw-bold); } .yc-boxtab:is([aria-selected="true"], .is-active)::after { background: var(--yc-accent); } .yc-boxtab-count { font-size: var(--yc-fs-body); font-weight: var(--yc-fw-bold); color: var(--yc-accent); font-variant-numeric: tabular-nums; } .yc-boxtab-count:empty { display: none; } /* 버튼: 주 동작 = 강조 채움(휴대폰 52px, 화면에 하나) · 보조 = 면(보조) 채움 + 보조 글자 · 드문 동작 = 글자 링크. 그라데이션·그림자 없음 */ .yc-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--yc-space-2); min-height: var(--yc-tap); padding: 0 var(--yc-space-4); border: 0; border-radius: var(--yc-radius-control); font-size: var(--yc-fs-card); font-weight: var(--yc-fw-bold); line-height: 1.3; cursor: pointer; transition: background-color var(--yc-motion) ease, color var(--yc-motion) ease; } .yc-btn:disabled { cursor: not-allowed; opacity: .55; } .yc-btn-primary { background: var(--yc-accent); color: var(--yc-on-accent); } .yc-btn-primary:hover:not(:disabled) { background: var(--yc-accent-hover); } .yc-btn-secondary { background: var(--yc-surface-2); color: var(--yc-text-2); } .yc-btn-secondary:hover:not(:disabled) { color: var(--yc-text); } .yc-btn-block { display: flex; width: 100%; } @media (max-width: 767px) { .yc-btn-primary { min-height: var(--yc-btn-primary-h); } } .yc-link { display: inline-flex; align-items: center; min-height: var(--yc-tap); padding: 0; border: 0; background: none; color: var(--yc-accent); font-size: var(--yc-fs-body); font-weight: var(--yc-fw-semi); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .yc-link.is-quiet { color: var(--yc-text-2); } .yc-link.is-danger { color: var(--yc-danger-aa); } /* 화면 머리의 작은 '?' — 그 화면 주제의 도움말 절을 연다(r26-F2-5, main.js ycOpenGuideTopic). 손가락 기기는 공통 규칙으로 44px, 목록 머리 안에서는 줄 높이를 늘리지 않는다. */ .yc-help-btn { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--yc-text-3-aa); font-size: 16px; cursor: pointer; } .yc-help-btn:hover, .yc-help-btn:focus-visible { color: var(--yc-text); background: var(--yc-surface-2); } .yc-jlist-head .yc-help-btn { margin: -12px -6px -12px auto; } /* 하단 탭: 흰 면 + 위 구분선, 고른 탭만 강조 색, 배지는 작은 숫자 */ .yc-tabbar { display: flex; background: var(--yc-surface); border-top: 1px solid var(--yc-line); } .yc-tabbar-btn { position: relative; flex: 1; display: grid; justify-items: center; gap: 2px; min-height: 56px; padding: 6px 4px; border: 0; background: none; color: var(--yc-text-3-aa); font-size: var(--yc-fs-meta); font-weight: var(--yc-fw-semi); cursor: pointer; } .yc-tabbar-btn:is([aria-current="page"], .is-active) { color: var(--yc-accent); } .yc-tabbar-badge { position: absolute; top: 4px; left: calc(50% + 8px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--yc-accent); color: var(--yc-on-accent); font-size: 11px; font-weight: var(--yc-fw-bold); line-height: 16px; text-align: center; font-variant-numeric: tabular-nums; } .yc-tabbar-badge:empty { display: none; } /* 빈 상태: 한 문장 + 한 버튼 */ .yc-empty { display: grid; justify-items: center; gap: var(--yc-space-3); padding: var(--yc-space-6) var(--yc-gutter); text-align: center; color: var(--yc-text-2); font-size: var(--yc-fs-body); } .yc-brand-logo { display: inline-block; position: relative; flex-shrink: 0; aspect-ratio: 8 / 3; overflow: hidden; vertical-align: middle; } .yc-brand-logo > img { width: 100%; height: 100%; object-fit: contain; } .yc-brand-logo > .yc-logo-dark { display: none; } [data-theme="dark"] .yc-brand-logo > .yc-logo-light { display: none; } [data-theme="dark"] .yc-brand-logo > .yc-logo-dark { display: block; transform: scale(1.36); } [data-theme="dark"] .yc-logo-mount { background: transparent !important; border-color: transparent !important; box-shadow: none !important; } [data-theme="dark"] .yc-logo-mount-badge { width: 76px; height: 32px; padding: 0; } [data-theme="dark"] #adminSidebar.collapsed .yc-logo-mount-badge { width: 60px; height: 28px; } @media print { [data-theme] .yc-brand-logo > .yc-logo-light { display: block; } [data-theme] .yc-brand-logo > .yc-logo-dark { display: none; } } .yc-money-label { font-size: .8125rem; font-weight: 700; color: var(--yc-muted); margin: 0 0 4px; } .yc-money-label span { font-weight: 500; font-size: .75rem; } .yc-unit-amount { font-size: clamp(1.875rem, 5vw, 2rem); font-weight: 800; line-height: 1.2; letter-spacing: -.04em; color: var(--yc-text); font-variant-numeric: tabular-nums; } .yc-unit-amount > span { font-size: .875rem; font-weight: 600; color: var(--yc-muted); margin-left: 5px; letter-spacing: 0; } .yc-price-volume { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 20px; margin-top: 6px; } .yc-price-volume > .yc-unit-amount { margin: 0 !important; white-space: nowrap; } .yc-estimated-volume { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 7px; color: var(--yc-muted); line-height: 1.4; } .yc-estimated-volume > span { font-size: .875rem; font-weight: 500; } .yc-estimated-volume strong { font-size: 1.25rem; font-weight: 700; letter-spacing: -.025em; color: var(--yc-text); font-variant-numeric: tabular-nums; white-space: nowrap; } .yc-estimated-volume small { margin-left: 2px; font-size: .875rem; font-weight: 500; color: var(--yc-muted); } .yc-price-volume--table { gap: 6px 14px; margin-top: 4px; } .yc-price-volume--table .yc-estimated-volume strong { font-size: 1rem; } .yc-money-note { margin-top: 10px; color: var(--yc-muted); font-size: .8125rem; line-height: 1.65; overflow-wrap: anywhere; } .yc-money-panel { background: var(--yc-accent-soft); border: 1px solid var(--yc-line); border-radius: 16px; padding: 18px; } .yc-freight-receipt { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--yc-line); color: var(--yc-text); font-size: 14px; line-height: 1.65; } .yc-receipt-title { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: space-between; margin-bottom: 10px; font-weight: 700; } .yc-receipt-title span { color: var(--yc-muted); font-weight: 500; font-size: .75rem; } .yc-freight-receipt dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 5px 0; } .yc-freight-receipt dt { color: var(--yc-muted); } .yc-freight-receipt dd { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; } .yc-freight-receipt .yc-receipt-net { border-top: 1px solid var(--yc-line); margin-top: 8px; padding-top: 12px; font-size: 16px; } .yc-receipt-net dt, .yc-receipt-net dd { color: var(--yc-accent); font-weight: 800; } .yc-money-due { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--yc-line); font-size: .875rem; font-weight: 600; color: var(--yc-accent); line-height: 1.65; } .yc-table-unit { display: block; font-size: 19px; font-weight: 800; color: var(--yc-text); font-variant-numeric: tabular-nums; } .yc-table-unit small { font-size: .8125rem; margin-left: 4px; font-weight: 500; color: var(--yc-muted); } .yc-table-total, .yc-table-note { display: block; font-size: .8125rem; line-height: 1.6; color: var(--yc-muted); margin-top: 4px; } .yc-payer-note { padding: 12px 14px; border-radius: 12px; background: var(--yc-raised); color: var(--yc-muted); font-size: .875rem; line-height: 1.7; } .yc-payer-note strong, .yc-payer-note span { display: block; } .yc-payer-note strong { color: var(--yc-text); } .yc-money-details { margin-top: 14px; font-size: .875rem; color: var(--yc-muted); line-height: 1.75; } .yc-money-details summary { cursor: pointer; padding: 7px 0; font-weight: 700; color: var(--yc-accent); } .yc-detail-money-summary { display: grid; gap: 10px; } .yc-detail-money-summary #modalTotalRevenue { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; line-height: 1.25; } .yc-detail-money-summary #modalTotalRevenue > span { white-space: nowrap; } .yc-detail-money-summary .yc-detail-money-unit { font-size: .875rem; font-weight: 600; color: var(--yc-muted); } .yc-detail-money-secondary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; text-align: left; } .yc-detail-money-secondary #modalPriceCalc, .yc-detail-money-secondary #modalVolumeInfo { font-size: .875rem; line-height: 1.6; } .yc-accept-explanation { color: var(--yc-muted); font-size: .875rem; line-height: 1.75; margin-top: 14px; } .yc-money-headline { margin-top: 2px; } .yc-money-basis { margin-top: 4px; font-size: .875rem; line-height: 1.6; color: var(--yc-muted); font-variant-numeric: tabular-nums; } .yc-freight-receipt dl > div { flex-wrap: wrap; row-gap: 0; } .yc-freight-receipt dd.yc-receipt-basis { flex-basis: 100%; text-align: left; font-weight: 500; font-size: .8125rem; line-height: 1.5; color: var(--yc-muted); } #modalBrokerageBox > .yc-freight-receipt:first-child { margin-top: 0; padding-top: 4px; border-top: 0; } .yc-accept-job { font-size: .9375rem; font-weight: 700; line-height: 1.5; color: var(--yc-text); } .yc-accept-job span { display: block; font-size: .875rem; font-weight: 500; color: var(--yc-muted); } .yc-completion-preview { border: 1px solid var(--yc-line); border-radius: 14px; background: var(--yc-surface); padding: 16px; margin-bottom: 20px; font-size: .875rem; color: var(--yc-muted); } .yc-completion-amount { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .yc-completion-amount small { display: block; font-size: .8125rem; margin-top: 3px; } .yc-completion-amount strong { font-size: 23px; color: var(--yc-text); font-variant-numeric: tabular-nums; } :where(button, a, select, input, summary):focus-visible { outline: 2px solid var(--yc-focus); outline-offset: 3px; } [data-theme="dark"] body { background: var(--yc-page) !important; color: var(--yc-text) !important; } [data-theme="dark"] :is(.modal-content, .alert-modal-content, .modal-footer, .full-page-overlay, #mainAppView, .desktop-workspace, #main-content, #feedDesktopInspector, #ycJobStatement) { background: var(--yc-surface) !important; color: var(--yc-text) !important; border-color: var(--yc-line) !important; } [data-theme="dark"] :is(.modal-header, .modal-footer, #ycJobStatement header, #ycJobStatement footer, #ycStatementBody dl > div) { border-color: var(--yc-line) !important; } [data-theme="dark"] :is(#ycStatementBody p, #ycStatementCopyStatus) { color: var(--yc-muted) !important; } [data-theme="dark"] :is(#ycStatementBody dd, #ycStatementTitle) { color: var(--yc-text) !important; } [data-theme="dark"] :is(.erp-table, #pageTitle, #pageTitle *, #feedRoleBanner) { color: var(--yc-text) !important; } [data-theme="dark"] :is(.erp-table thead, .erp-table th, .erp-table tbody tr:hover) { background: var(--yc-raised) !important; color: var(--yc-text) !important; } [data-theme="dark"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) { background-color: var(--yc-surface) !important; color: var(--yc-text) !important; border-color: var(--yc-line) !important; } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--yc-text-3-aa) !important; opacity: 1; } [data-theme="dark"] :is(input, select, textarea):disabled { background-color: var(--yc-raised) !important; color: var(--yc-muted) !important; } :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--yc-accent); } [data-theme="dark"] :is(.modal-overlay, dialog::backdrop) { background-color: color-mix(in srgb, var(--yc-page) 76%, transparent); } [data-theme="dark"] [hidden] { display: none !important; } @media (max-width: 480px) { #modalTotalRevenue { font-size: 2rem; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } .job-card-item, .modal-content { animation: none !important; transition: none !important; } } @media print { :root[data-theme] { color-scheme: light; --yc-surface: #FFFFFF; --yc-text: #191F28; --yc-text-2: #4E5968; --yc-line: #E5E8EB; } .yc-appearance-row, .yc-appearance-trigger, .yc-appearance-dialog { display: none !important; } } /* 기존 화면의 색상 유틸리티를 상태별 팔레트로 연결한다. */ @media screen { [data-theme="dark"] .bg-amber-100 { background-color: #3b3020 !important; } [data-theme="dark"] .bg-amber-100\/70 { background-color: rgb(59 48 32 / 0.7) !important; } [data-theme="dark"] .bg-amber-100\/90 { background-color: rgb(59 48 32 / 0.9) !important; } [data-theme="dark"] .bg-amber-200 { background-color: #3b3020 !important; } [data-theme="dark"] .bg-amber-200\/90 { background-color: rgb(59 48 32 / 0.9) !important; } [data-theme="dark"] .bg-amber-50 { background-color: #3b3020 !important; } [data-theme="dark"] .bg-amber-50\/20 { background-color: rgb(59 48 32 / 0.2) !important; } [data-theme="dark"] .bg-amber-50\/40 { background-color: rgb(59 48 32 / 0.4) !important; } [data-theme="dark"] .bg-amber-50\/50 { background-color: rgb(59 48 32 / 0.5) !important; } [data-theme="dark"] .bg-amber-50\/60 { background-color: rgb(59 48 32 / 0.6) !important; } [data-theme="dark"] .bg-amber-50\/70 { background-color: rgb(59 48 32 / 0.7) !important; } [data-theme="dark"] .bg-amber-50\/80 { background-color: rgb(59 48 32 / 0.8) !important; } [data-theme="dark"] .bg-amber-50\/90 { background-color: rgb(59 48 32 / 0.9) !important; } [data-theme="dark"] .bg-blue-200 { background-color: #192e4c !important; } [data-theme="dark"] .bg-blue-200\/70 { background-color: rgb(25 46 76 / 0.7) !important; } [data-theme="dark"] .bg-blue-200\/80 { background-color: rgb(25 46 76 / 0.8) !important; } [data-theme="dark"] .bg-blue-200\/90 { background-color: rgb(25 46 76 / 0.9) !important; } [data-theme="dark"] .bg-blue-50\/15 { background-color: rgb(25 46 76 / 0.15) !important; } [data-theme="dark"] .bg-cyan-50 { background-color: #16323e !important; } [data-theme="dark"] .bg-emerald-100 { background-color: #193a31 !important; } [data-theme="dark"] .bg-emerald-100\/80 { background-color: rgb(25 58 49 / 0.8) !important; } [data-theme="dark"] .bg-emerald-200\/90 { background-color: rgb(25 58 49 / 0.9) !important; } [data-theme="dark"] .bg-emerald-50 { background-color: #193a31 !important; } [data-theme="dark"] .bg-emerald-50\/10 { background-color: rgb(25 58 49 / 0.1) !important; } [data-theme="dark"] .bg-emerald-50\/15 { background-color: rgb(25 58 49 / 0.15) !important; } [data-theme="dark"] .bg-emerald-50\/20 { background-color: rgb(25 58 49 / 0.2) !important; } [data-theme="dark"] .bg-emerald-50\/40 { background-color: rgb(25 58 49 / 0.4) !important; } [data-theme="dark"] .bg-emerald-50\/70 { background-color: rgb(25 58 49 / 0.7) !important; } [data-theme="dark"] .bg-emerald-50\/80 { background-color: rgb(25 58 49 / 0.8) !important; } [data-theme="dark"] .bg-gray-300 { background-color: #1c2a40 !important; } [data-theme="dark"] .bg-green-100 { background-color: #20382d !important; } [data-theme="dark"] .bg-green-50 { background-color: #20382d !important; } [data-theme="dark"] .bg-indigo-100 { background-color: #252746 !important; } [data-theme="dark"] .bg-indigo-100\/70 { background-color: rgb(37 39 70 / 0.7) !important; } [data-theme="dark"] .bg-indigo-50 { background-color: #252746 !important; } [data-theme="dark"] .bg-indigo-50\/15 { background-color: rgb(37 39 70 / 0.15) !important; } [data-theme="dark"] .bg-indigo-50\/20 { background-color: rgb(37 39 70 / 0.2) !important; } [data-theme="dark"] .bg-indigo-50\/40 { background-color: rgb(37 39 70 / 0.4) !important; } [data-theme="dark"] .bg-indigo-50\/50 { background-color: rgb(37 39 70 / 0.5) !important; } [data-theme="dark"] .bg-indigo-50\/60 { background-color: rgb(37 39 70 / 0.6) !important; } [data-theme="dark"] .bg-indigo-50\/70 { background-color: rgb(37 39 70 / 0.7) !important; } [data-theme="dark"] .bg-indigo-50\/80 { background-color: rgb(37 39 70 / 0.8) !important; } [data-theme="dark"] .bg-indigo-50\/90 { background-color: rgb(37 39 70 / 0.9) !important; } [data-theme="dark"] .bg-orange-50 { background-color: #3c2b22 !important; } [data-theme="dark"] .bg-purple-100 { background-color: #312643 !important; } [data-theme="dark"] .bg-purple-100\/60 { background-color: rgb(49 38 67 / 0.6) !important; } [data-theme="dark"] .bg-purple-100\/70 { background-color: rgb(49 38 67 / 0.7) !important; } [data-theme="dark"] .bg-purple-50 { background-color: #312643 !important; } [data-theme="dark"] .bg-purple-50\/15 { background-color: rgb(49 38 67 / 0.15) !important; } [data-theme="dark"] .bg-purple-50\/20 { background-color: rgb(49 38 67 / 0.2) !important; } [data-theme="dark"] .bg-purple-50\/40 { background-color: rgb(49 38 67 / 0.4) !important; } [data-theme="dark"] .bg-purple-50\/50 { background-color: rgb(49 38 67 / 0.5) !important; } [data-theme="dark"] .bg-purple-50\/60 { background-color: rgb(49 38 67 / 0.6) !important; } [data-theme="dark"] .bg-purple-50\/70 { background-color: rgb(49 38 67 / 0.7) !important; } [data-theme="dark"] .bg-red-100 { background-color: #3d2530 !important; } [data-theme="dark"] .bg-red-50 { background-color: #3d2530 !important; } [data-theme="dark"] .bg-red-50\/20 { background-color: rgb(61 37 48 / 0.2) !important; } [data-theme="dark"] .bg-red-50\/30 { background-color: rgb(61 37 48 / 0.3) !important; } [data-theme="dark"] .bg-red-50\/40 { background-color: rgb(61 37 48 / 0.4) !important; } [data-theme="dark"] .bg-red-50\/50 { background-color: rgb(61 37 48 / 0.5) !important; } [data-theme="dark"] .bg-rose-100 { background-color: #3d2534 !important; } [data-theme="dark"] .bg-rose-200 { background-color: #3d2534 !important; } [data-theme="dark"] .bg-rose-50 { background-color: #3d2534 !important; } [data-theme="dark"] .bg-rose-50\/10 { background-color: rgb(61 37 52 / 0.1) !important; } [data-theme="dark"] .bg-rose-50\/15 { background-color: rgb(61 37 52 / 0.15) !important; } [data-theme="dark"] .bg-rose-50\/20 { background-color: rgb(61 37 52 / 0.2) !important; } [data-theme="dark"] .bg-rose-50\/25 { background-color: rgb(61 37 52 / 0.25) !important; } [data-theme="dark"] .bg-rose-50\/40 { background-color: rgb(61 37 52 / 0.4) !important; } [data-theme="dark"] .bg-rose-50\/50 { background-color: rgb(61 37 52 / 0.5) !important; } [data-theme="dark"] .bg-rose-50\/60 { background-color: rgb(61 37 52 / 0.6) !important; } [data-theme="dark"] .bg-rose-50\/70 { background-color: rgb(61 37 52 / 0.7) !important; } [data-theme="dark"] .bg-rose-50\/80 { background-color: rgb(61 37 52 / 0.8) !important; } [data-theme="dark"] .bg-rose-50\/90 { background-color: rgb(61 37 52 / 0.9) !important; } [data-theme="dark"] .bg-sky-100 { background-color: #173247 !important; } [data-theme="dark"] .bg-sky-50 { background-color: #173247 !important; } [data-theme="dark"] .bg-sky-50\/15 { background-color: rgb(23 50 71 / 0.15) !important; } [data-theme="dark"] .bg-slate-300 { background-color: #1c2a40 !important; } [data-theme="dark"] .bg-teal-100 { background-color: #153735 !important; } [data-theme="dark"] .bg-teal-200\/70 { background-color: rgb(21 55 53 / 0.7) !important; } [data-theme="dark"] .bg-teal-200\/80 { background-color: rgb(21 55 53 / 0.8) !important; } [data-theme="dark"] .bg-teal-200\/90 { background-color: rgb(21 55 53 / 0.9) !important; } [data-theme="dark"] .bg-teal-50 { background-color: #153735 !important; } [data-theme="dark"] .bg-teal-50\/15 { background-color: rgb(21 55 53 / 0.15) !important; } [data-theme="dark"] .bg-teal-50\/60 { background-color: rgb(21 55 53 / 0.6) !important; } [data-theme="dark"] .bg-teal-50\/70 { background-color: rgb(21 55 53 / 0.7) !important; } [data-theme="dark"] .bg-teal-50\/80 { background-color: rgb(21 55 53 / 0.8) !important; } [data-theme="dark"] .bg-teal-50\/90 { background-color: rgb(21 55 53 / 0.9) !important; } [data-theme="dark"] .bg-yellow-50 { background-color: #353322 !important; } [data-theme="dark"] .border-amber-100 { border-color: #3b3020 !important; } [data-theme="dark"] .border-amber-200 { border-color: #f4cf8760 !important; } [data-theme="dark"] .border-amber-200\/70 { border-color: #f4cf8760 !important; } [data-theme="dark"] .border-amber-200\/80 { border-color: #f4cf8760 !important; } [data-theme="dark"] .border-amber-200\/90 { border-color: #f4cf8760 !important; } [data-theme="dark"] .border-amber-300 { border-color: #f4cf8760 !important; } [data-theme="dark"] .border-amber-300\/80 { border-color: #f4cf8760 !important; } [data-theme="dark"] .border-amber-400 { border-color: #f4cf8760 !important; } [data-theme="dark"] .border-amber-400\/30 { border-color: #f4cf8760 !important; } [data-theme="dark"] .border-amber-400\/40 { border-color: #f4cf8760 !important; } [data-theme="dark"] .border-amber-50 { border-color: #3b3020 !important; } [data-theme="dark"] .border-blue-300\/80 { border-color: #9fc3ff60 !important; } [data-theme="dark"] .border-blue-400 { border-color: #9fc3ff60 !important; } [data-theme="dark"] .border-blue-400\/30 { border-color: #9fc3ff60 !important; } [data-theme="dark"] .border-blue-400\/40 { border-color: #9fc3ff60 !important; } [data-theme="dark"] .border-blue-50 { border-color: #192e4c !important; } [data-theme="dark"] .border-cyan-400\/25 { border-color: #88e3f060 !important; } [data-theme="dark"] .border-cyan-400\/30 { border-color: #88e3f060 !important; } [data-theme="dark"] .border-emerald-100 { border-color: #193a31 !important; } [data-theme="dark"] .border-emerald-200 { border-color: #8be0ba60 !important; } [data-theme="dark"] .border-emerald-200\/70 { border-color: #8be0ba60 !important; } [data-theme="dark"] .border-emerald-200\/80 { border-color: #8be0ba60 !important; } [data-theme="dark"] .border-emerald-300 { border-color: #8be0ba60 !important; } [data-theme="dark"] .border-emerald-400 { border-color: #8be0ba60 !important; } [data-theme="dark"] .border-emerald-400\/30 { border-color: #8be0ba60 !important; } [data-theme="dark"] .border-emerald-400\/40 { border-color: #8be0ba60 !important; } [data-theme="dark"] .border-emerald-50 { border-color: #193a31 !important; } [data-theme="dark"] .border-gray-100\/90 { border-color: rgb(51 68 93 / 0.9) !important; } [data-theme="dark"] .border-gray-800 { border-color: #33445d !important; } [data-theme="dark"] .border-green-200 { border-color: #a1e6af60 !important; } [data-theme="dark"] .border-indigo-100 { border-color: #252746 !important; } [data-theme="dark"] .border-indigo-100\/80 { border-color: rgb(37 39 70 / 0.8) !important; } [data-theme="dark"] .border-indigo-200 { border-color: #b8b9ff60 !important; } [data-theme="dark"] .border-indigo-200\/60 { border-color: #b8b9ff60 !important; } [data-theme="dark"] .border-indigo-200\/80 { border-color: #b8b9ff60 !important; } [data-theme="dark"] .border-indigo-300 { border-color: #b8b9ff60 !important; } [data-theme="dark"] .border-indigo-400\/30 { border-color: #b8b9ff60 !important; } [data-theme="dark"] .border-indigo-50 { border-color: #252746 !important; } [data-theme="dark"] .border-orange-200 { border-color: #ffc39a60 !important; } [data-theme="dark"] .border-orange-300 { border-color: #ffc39a60 !important; } [data-theme="dark"] .border-purple-100 { border-color: #312643 !important; } [data-theme="dark"] .border-purple-200 { border-color: #dab8ff60 !important; } [data-theme="dark"] .border-purple-200\/60 { border-color: #dab8ff60 !important; } [data-theme="dark"] .border-purple-200\/80 { border-color: #dab8ff60 !important; } [data-theme="dark"] .border-purple-200\/90 { border-color: #dab8ff60 !important; } [data-theme="dark"] .border-purple-300 { border-color: #dab8ff60 !important; } [data-theme="dark"] .border-purple-400 { border-color: #dab8ff60 !important; } [data-theme="dark"] .border-purple-50 { border-color: #312643 !important; } [data-theme="dark"] .border-red-100 { border-color: #3d2530 !important; } [data-theme="dark"] .border-red-200 { border-color: #ffb0b360 !important; } [data-theme="dark"] .border-red-300 { border-color: #ffb0b360 !important; } [data-theme="dark"] .border-red-50 { border-color: #3d2530 !important; } [data-theme="dark"] .border-rose-100 { border-color: #3d2534 !important; } [data-theme="dark"] .border-rose-200 { border-color: #ffafc460 !important; } [data-theme="dark"] .border-rose-200\/80 { border-color: #ffafc460 !important; } [data-theme="dark"] .border-rose-300 { border-color: #ffafc460 !important; } [data-theme="dark"] .border-rose-400 { border-color: #ffafc460 !important; } [data-theme="dark"] .border-rose-400\/30 { border-color: #ffafc460 !important; } [data-theme="dark"] .border-rose-50 { border-color: #3d2534 !important; } [data-theme="dark"] .border-sky-200 { border-color: #8dd7fc60 !important; } [data-theme="dark"] .border-sky-300 { border-color: #8dd7fc60 !important; } [data-theme="dark"] .border-slate-400\/30 { border-color: rgb(51 68 93 / 0.3) !important; } [data-theme="dark"] .border-slate-600 { border-color: #33445d !important; } [data-theme="dark"] .border-slate-700 { border-color: #33445d !important; } [data-theme="dark"] .border-slate-700\/50 { border-color: rgb(51 68 93 / 0.5) !important; } [data-theme="dark"] .border-slate-700\/60 { border-color: rgb(51 68 93 / 0.6) !important; } [data-theme="dark"] .border-slate-700\/70 { border-color: rgb(51 68 93 / 0.7) !important; } [data-theme="dark"] .border-slate-700\/80 { border-color: rgb(51 68 93 / 0.8) !important; } [data-theme="dark"] .border-slate-800 { border-color: #33445d !important; } [data-theme="dark"] .border-slate-800\/80 { border-color: rgb(51 68 93 / 0.8) !important; } [data-theme="dark"] .border-slate-900 { border-color: #33445d !important; } [data-theme="dark"] .border-teal-100 { border-color: #153735 !important; } [data-theme="dark"] .border-teal-200 { border-color: #8be0d260 !important; } [data-theme="dark"] .border-teal-200\/60 { border-color: #8be0d260 !important; } [data-theme="dark"] .border-teal-200\/70 { border-color: #8be0d260 !important; } [data-theme="dark"] .border-teal-200\/80 { border-color: #8be0d260 !important; } [data-theme="dark"] .border-teal-200\/90 { border-color: #8be0d260 !important; } [data-theme="dark"] .border-teal-300 { border-color: #8be0d260 !important; } [data-theme="dark"] .border-teal-300\/80 { border-color: #8be0d260 !important; } [data-theme="dark"] .border-teal-400 { border-color: #8be0d260 !important; } [data-theme="dark"] .border-teal-50 { border-color: #153735 !important; } [data-theme="dark"] .border-white { border-color: #33445d !important; } [data-theme="dark"] .border-white\/10 { border-color: rgb(51 68 93 / 0.1) !important; } [data-theme="dark"] .border-white\/15 { border-color: rgb(51 68 93 / 0.15) !important; } [data-theme="dark"] .border-white\/20 { border-color: rgb(51 68 93 / 0.2) !important; } [data-theme="dark"] .border-white\/30 { border-color: rgb(51 68 93 / 0.3) !important; } [data-theme="dark"] .border-white\/5 { border-color: rgb(51 68 93 / 0.05) !important; } [data-theme="dark"] .focus\:border-amber-50:focus { border-color: #3b3020 !important; } [data-theme="dark"] .focus\:border-blue-50:focus { border-color: #192e4c !important; } [data-theme="dark"] .focus\:border-indigo-50:focus { border-color: #252746 !important; } [data-theme="dark"] .focus\:border-purple-50:focus { border-color: #312643 !important; } [data-theme="dark"] .focus\:border-rose-50:focus { border-color: #3d2534 !important; } [data-theme="dark"] .from-amber-50 { --tw-gradient-from: #3b3020 var(--tw-gradient-from-position); --tw-gradient-to: transparent var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } [data-theme="dark"] .from-amber-50\/20 { --tw-gradient-from: rgb(59 48 32 / 0.2) var(--tw-gradient-from-position); --tw-gradient-to: transparent var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } [data-theme="dark"] .from-amber-50\/50 { --tw-gradient-from: rgb(59 48 32 / 0.5) var(--tw-gradient-from-position); --tw-gradient-to: transparent var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } [data-theme="dark"] .from-blue-50 { --tw-gradient-from: #192e4c var(--tw-gradient-from-position); --tw-gradient-to: transparent var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } [data-theme="dark"] .from-blue-50\/15 { --tw-gradient-from: rgb(25 46 76 / 0.15) var(--tw-gradient-from-position); --tw-gradient-to: transparent var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } [data-theme="dark"] .from-blue-50\/50 { --tw-gradient-from: rgb(25 46 76 / 0.5) var(--tw-gradient-from-position); --tw-gradient-to: transparent var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } [data-theme="dark"] .from-blue-50\/60 { --tw-gradient-from: rgb(25 46 76 / 0.6) var(--tw-gradient-from-position); --tw-gradient-to: transparent var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } [data-theme="dark"] .from-blue-50\/70 { --tw-gradient-from: rgb(25 46 76 / 0.7) var(--tw-gradient-from-position); --tw-gradient-to: transparent var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } [data-theme="dark"] .from-blue-50\/80 { --tw-gradient-from: rgb(25 46 76 / 0.8) var(--tw-gradient-from-position); --tw-gradient-to: transparent var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } [data-theme="dark"] .from-blue-50\/90 { --tw-gradient-from: rgb(25 46 76 / 0.9) var(--tw-gradient-from-position); --tw-gradient-to: transparent var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } [data-theme="dark"] .from-emerald-50 { --tw-gradient-from: #193a31 var(--tw-gradient-from-position); --tw-gradient-to: transparent var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } [data-theme="dark"] .from-emerald-50\/20 { --tw-gradient-from: rgb(25 58 49 / 0.2) var(--tw-gradient-from-position); --tw-gradient-to: transparent var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } [data-theme="dark"] .from-emerald-50\/40 { --tw-gradient-from: rgb(25 58 49 / 0.4) var(--tw-gradient-from-position); --tw-gradient-to: transparent var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } [data-theme="dark"] .from-indigo-50 { --tw-gradient-from: #252746 var(--tw-gradient-from-position); --tw-gradient-to: transparent var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } [data-theme="dark"] .from-purple-50\/70 { --tw-gradient-from: rgb(49 38 67 / 0.7) var(--tw-gradient-from-position); --tw-gradient-to: transparent var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } [data-theme="dark"] .from-purple-50\/90 { --tw-gradient-from: rgb(49 38 67 / 0.9) var(--tw-gradient-from-position); --tw-gradient-to: transparent var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } [data-theme="dark"] .from-rose-50\/50 { --tw-gradient-from: rgb(61 37 52 / 0.5) var(--tw-gradient-from-position); --tw-gradient-to: transparent var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } [data-theme="dark"] .from-slate-50 { --tw-gradient-from: #101b2c var(--tw-gradient-from-position); --tw-gradient-to: transparent var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } [data-theme="dark"] .from-teal-50\/90 { --tw-gradient-from: rgb(21 55 53 / 0.9) var(--tw-gradient-from-position); --tw-gradient-to: transparent var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } [data-theme="dark"] .hover\:bg-amber-100:hover { background-color: #3b3020 !important; } [data-theme="dark"] .hover\:bg-amber-100\/60:hover { background-color: rgb(59 48 32 / 0.6) !important; } [data-theme="dark"] .hover\:bg-amber-200:hover { background-color: #3b3020 !important; } [data-theme="dark"] .hover\:bg-amber-50:hover { background-color: #3b3020 !important; } [data-theme="dark"] .hover\:bg-amber-50\/20:hover { background-color: rgb(59 48 32 / 0.2) !important; } [data-theme="dark"] .hover\:bg-amber-50\/50:hover { background-color: rgb(59 48 32 / 0.5) !important; } [data-theme="dark"] .hover\:bg-blue-200:hover { background-color: #192e4c !important; } [data-theme="dark"] .hover\:bg-blue-50\/20:hover { background-color: rgb(25 46 76 / 0.2) !important; } [data-theme="dark"] .hover\:bg-blue-50\/30:hover { background-color: rgb(25 46 76 / 0.3) !important; } [data-theme="dark"] .hover\:bg-blue-50\/40:hover { background-color: rgb(25 46 76 / 0.4) !important; } [data-theme="dark"] .hover\:bg-blue-50\/50:hover { background-color: rgb(25 46 76 / 0.5) !important; } [data-theme="dark"] .hover\:bg-emerald-100:hover { background-color: #193a31 !important; } [data-theme="dark"] .hover\:bg-emerald-50:hover { background-color: #193a31 !important; } [data-theme="dark"] .hover\:bg-emerald-50\/20:hover { background-color: rgb(25 58 49 / 0.2) !important; } [data-theme="dark"] .hover\:bg-emerald-50\/30:hover { background-color: rgb(25 58 49 / 0.3) !important; } [data-theme="dark"] .hover\:bg-gray-300:hover { background-color: #1c2a40 !important; } [data-theme="dark"] .hover\:bg-gray-50\/80:hover { background-color: rgb(16 27 44 / 0.8) !important; } [data-theme="dark"] .hover\:bg-green-100:hover { background-color: #20382d !important; } [data-theme="dark"] .hover\:bg-green-50:hover { background-color: #20382d !important; } [data-theme="dark"] .hover\:bg-indigo-100:hover { background-color: #252746 !important; } [data-theme="dark"] .hover\:bg-indigo-50:hover { background-color: #252746 !important; } [data-theme="dark"] .hover\:bg-indigo-50\/20:hover { background-color: rgb(37 39 70 / 0.2) !important; } [data-theme="dark"] .hover\:bg-orange-50:hover { background-color: #3c2b22 !important; } [data-theme="dark"] .hover\:bg-purple-100:hover { background-color: #312643 !important; } [data-theme="dark"] .hover\:bg-purple-50:hover { background-color: #312643 !important; } [data-theme="dark"] .hover\:bg-purple-50\/50:hover { background-color: rgb(49 38 67 / 0.5) !important; } [data-theme="dark"] .hover\:bg-red-100:hover { background-color: #3d2530 !important; } [data-theme="dark"] .hover\:bg-red-50:hover { background-color: #3d2530 !important; } [data-theme="dark"] .hover\:bg-red-50\/20:hover { background-color: rgb(61 37 48 / 0.2) !important; } [data-theme="dark"] .hover\:bg-rose-100:hover { background-color: #3d2534 !important; } [data-theme="dark"] .hover\:bg-rose-200:hover { background-color: #3d2534 !important; } [data-theme="dark"] .hover\:bg-rose-50:hover { background-color: #3d2534 !important; } [data-theme="dark"] .hover\:bg-rose-50\/40:hover { background-color: rgb(61 37 52 / 0.4) !important; } [data-theme="dark"] .hover\:bg-rose-50\/50:hover { background-color: rgb(61 37 52 / 0.5) !important; } [data-theme="dark"] .hover\:bg-slate-100\/50:hover { background-color: rgb(28 42 64 / 0.5) !important; } [data-theme="dark"] .hover\:bg-slate-100\/80:hover { background-color: rgb(28 42 64 / 0.8) !important; } [data-theme="dark"] .hover\:bg-slate-200\/70:hover { background-color: rgb(28 42 64 / 0.7) !important; } [data-theme="dark"] .hover\:bg-slate-200\/90:hover { background-color: rgb(28 42 64 / 0.9) !important; } [data-theme="dark"] .hover\:bg-slate-50\/80:hover { background-color: rgb(16 27 44 / 0.8) !important; } [data-theme="dark"] .hover\:bg-teal-100:hover { background-color: #153735 !important; } [data-theme="dark"] .hover\:bg-teal-50:hover { background-color: #153735 !important; } [data-theme="dark"] .hover\:bg-teal-50\/35:hover { background-color: rgb(21 55 53 / 0.35) !important; } [data-theme="dark"] .hover\:bg-white\/10:hover { background-color: rgb(19 30 48 / 0.1) !important; } [data-theme="dark"] .hover\:bg-white\/15:hover { background-color: rgb(19 30 48 / 0.15) !important; } [data-theme="dark"] .hover\:bg-white\/20:hover { background-color: rgb(19 30 48 / 0.2) !important; } [data-theme="dark"] .hover\:bg-white\/30:hover { background-color: rgb(19 30 48 / 0.3) !important; } [data-theme="dark"] .hover\:border-amber-300:hover { border-color: #f4cf8760 !important; } [data-theme="dark"] .hover\:border-amber-50:hover { border-color: #3b3020 !important; } [data-theme="dark"] .hover\:border-blue-200:hover { border-color: #9fc3ff60 !important; } [data-theme="dark"] .hover\:border-blue-300:hover { border-color: #9fc3ff60 !important; } [data-theme="dark"] .hover\:border-blue-400:hover { border-color: #9fc3ff60 !important; } [data-theme="dark"] .hover\:border-blue-50:hover { border-color: #192e4c !important; } [data-theme="dark"] .hover\:border-emerald-300:hover { border-color: #8be0ba60 !important; } [data-theme="dark"] .hover\:border-emerald-400:hover { border-color: #8be0ba60 !important; } [data-theme="dark"] .hover\:border-emerald-50:hover { border-color: #193a31 !important; } [data-theme="dark"] .hover\:border-indigo-200:hover { border-color: #b8b9ff60 !important; } [data-theme="dark"] .hover\:border-indigo-300:hover { border-color: #b8b9ff60 !important; } [data-theme="dark"] .hover\:border-indigo-400:hover { border-color: #b8b9ff60 !important; } [data-theme="dark"] .hover\:border-purple-300:hover { border-color: #dab8ff60 !important; } [data-theme="dark"] .hover\:border-red-200:hover { border-color: #ffb0b360 !important; } [data-theme="dark"] .hover\:border-red-50:hover { border-color: #3d2530 !important; } [data-theme="dark"] .hover\:border-rose-300:hover { border-color: #ffafc460 !important; } [data-theme="dark"] .hover\:border-rose-400:hover { border-color: #ffafc460 !important; } [data-theme="dark"] .hover\:border-teal-50:hover { border-color: #153735 !important; } [data-theme="dark"] .hover\:from-blue-50:hover { --tw-gradient-from: #192e4c var(--tw-gradient-from-position); --tw-gradient-to: transparent var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } [data-theme="dark"] .hover\:from-purple-50:hover { --tw-gradient-from: #312643 var(--tw-gradient-from-position); --tw-gradient-to: transparent var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } [data-theme="dark"] .hover\:text-amber-700:hover { color: #f4cf87 !important; } [data-theme="dark"] .hover\:text-amber-800:hover { color: #f4cf87 !important; } [data-theme="dark"] .hover\:text-indigo-600:hover { color: #b8b9ff !important; } [data-theme="dark"] .hover\:text-indigo-800:hover { color: #b8b9ff !important; } [data-theme="dark"] .hover\:text-indigo-900:hover { color: #b8b9ff !important; } [data-theme="dark"] .hover\:text-purple-600:hover { color: #dab8ff !important; } [data-theme="dark"] .hover\:text-purple-800:hover { color: #dab8ff !important; } [data-theme="dark"] .hover\:text-rose-900:hover { color: #ffafc4 !important; } [data-theme="dark"] .hover\:to-indigo-50:hover { --tw-gradient-to: #252746 var(--tw-gradient-to-position); } [data-theme="dark"] .text-amber-600 { color: #f4cf87 !important; } [data-theme="dark"] .text-amber-600\/80 { color: rgb(244 207 135 / 0.8) !important; } [data-theme="dark"] .text-amber-700 { color: #f4cf87 !important; } [data-theme="dark"] .text-amber-800 { color: #f4cf87 !important; } [data-theme="dark"] .text-amber-900 { color: #f4cf87 !important; } [data-theme="dark"] .text-amber-950 { color: #f4cf87 !important; } [data-theme="dark"] .text-black { color: #e9f0fb !important; } /* 앱 다크 모드 누락 보강 (r16 UIAPP-05): 상단 안전 여백의 흰 띠, 흰 원형 등록 버튼, 노란 택배사 배지의 흰 글자 */ [data-theme="dark"] .app-container { background-color: var(--yc-surface); } [data-theme="dark"] #fabUploadBtn.yc-fab-compact { background-color: var(--yc-raised) !important; border-color: var(--yc-line) !important; color: var(--yc-accent) !important; } [data-theme="dark"] #fabUploadBtn.yc-fab-compact:hover { background-color: var(--yc-accent-soft) !important; } [data-theme="dark"] :is(.bg-yellow-500, .bg-amber-500).text-black { color: #191F28 !important; } /* 노란 배지 위 글자는 두 모드 모두 어두운 글자(밝은 모드 --yc-text 값) */ [data-theme="dark"] .text-blue-900 { color: #9fc3ff !important; } [data-theme="dark"] .text-blue-900\/90 { color: rgb(159 195 255 / 0.9) !important; } [data-theme="dark"] .text-blue-950 { color: #9fc3ff !important; } [data-theme="dark"] .text-cyan-600 { color: #88e3f0 !important; } [data-theme="dark"] .text-emerald-600\/80 { color: rgb(139 224 186 / 0.8) !important; } [data-theme="dark"] .text-emerald-900 { color: #8be0ba !important; } [data-theme="dark"] .text-emerald-950 { color: #8be0ba !important; } [data-theme="dark"] .text-indigo-600 { color: #b8b9ff !important; } [data-theme="dark"] .text-indigo-600\/80 { color: rgb(184 185 255 / 0.8) !important; } [data-theme="dark"] .text-indigo-700 { color: #b8b9ff !important; } [data-theme="dark"] .text-indigo-800 { color: #b8b9ff !important; } [data-theme="dark"] .text-indigo-900 { color: #b8b9ff !important; } [data-theme="dark"] .text-indigo-900\/80 { color: rgb(184 185 255 / 0.8) !important; } [data-theme="dark"] .text-indigo-950 { color: #b8b9ff !important; } [data-theme="dark"] .text-orange-600 { color: #ffc39a !important; } [data-theme="dark"] .text-orange-700 { color: #ffc39a !important; } [data-theme="dark"] .text-orange-800 { color: #ffc39a !important; } [data-theme="dark"] .text-purple-600 { color: #dab8ff !important; } [data-theme="dark"] .text-purple-700 { color: #dab8ff !important; } [data-theme="dark"] .text-purple-800 { color: #dab8ff !important; } [data-theme="dark"] .text-purple-900 { color: #dab8ff !important; } [data-theme="dark"] .text-purple-900\/80 { color: rgb(218 184 255 / 0.8) !important; } [data-theme="dark"] .text-purple-950 { color: #dab8ff !important; } [data-theme="dark"] .text-red-900 { color: #ffb0b3 !important; } [data-theme="dark"] .text-rose-900 { color: #ffafc4 !important; } [data-theme="dark"] .text-rose-950 { color: #ffafc4 !important; } [data-theme="dark"] .text-sky-600 { color: #8dd7fc !important; } [data-theme="dark"] .text-sky-700 { color: #8dd7fc !important; } [data-theme="dark"] .text-sky-800 { color: #8dd7fc !important; } [data-theme="dark"] .text-teal-600 { color: #8be0d2 !important; } [data-theme="dark"] .text-teal-700 { color: #8be0d2 !important; } [data-theme="dark"] .text-teal-800 { color: #8be0d2 !important; } [data-theme="dark"] .text-teal-900 { color: #8be0d2 !important; } [data-theme="dark"] .text-teal-950 { color: #8be0d2 !important; } [data-theme="dark"] .to-blue-50\/30 { --tw-gradient-to: rgb(25 46 76 / 0.3) var(--tw-gradient-to-position); } [data-theme="dark"] .to-blue-50\/50 { --tw-gradient-to: rgb(25 46 76 / 0.5) var(--tw-gradient-to-position); } [data-theme="dark"] .to-blue-50\/70 { --tw-gradient-to: rgb(25 46 76 / 0.7) var(--tw-gradient-to-position); } [data-theme="dark"] .to-blue-50\/80 { --tw-gradient-to: rgb(25 46 76 / 0.8) var(--tw-gradient-to-position); } [data-theme="dark"] .to-indigo-100 { --tw-gradient-to: #252746 var(--tw-gradient-to-position); } [data-theme="dark"] .to-indigo-50 { --tw-gradient-to: #252746 var(--tw-gradient-to-position); } [data-theme="dark"] .to-indigo-50\/40 { --tw-gradient-to: rgb(37 39 70 / 0.4) var(--tw-gradient-to-position); } [data-theme="dark"] .to-indigo-50\/50 { --tw-gradient-to: rgb(37 39 70 / 0.5) var(--tw-gradient-to-position); } [data-theme="dark"] .to-indigo-50\/60 { --tw-gradient-to: rgb(37 39 70 / 0.6) var(--tw-gradient-to-position); } [data-theme="dark"] .to-indigo-50\/70 { --tw-gradient-to: rgb(37 39 70 / 0.7) var(--tw-gradient-to-position); } [data-theme="dark"] .to-orange-50 { --tw-gradient-to: #3c2b22 var(--tw-gradient-to-position); } [data-theme="dark"] .to-orange-50\/25 { --tw-gradient-to: rgb(60 43 34 / 0.25) var(--tw-gradient-to-position); } [data-theme="dark"] .to-orange-50\/80 { --tw-gradient-to: rgb(60 43 34 / 0.8) var(--tw-gradient-to-position); } [data-theme="dark"] .to-pink-50 { --tw-gradient-to: #38263d var(--tw-gradient-to-position); } [data-theme="dark"] .to-purple-50 { --tw-gradient-to: #312643 var(--tw-gradient-to-position); } [data-theme="dark"] .to-slate-50 { --tw-gradient-to: #101b2c var(--tw-gradient-to-position); } [data-theme="dark"] .to-slate-50\/80 { --tw-gradient-to: rgb(16 27 44 / 0.8) var(--tw-gradient-to-position); } [data-theme="dark"] .to-teal-50\/60 { --tw-gradient-to: rgb(21 55 53 / 0.6) var(--tw-gradient-to-position); } [data-theme="dark"] .to-teal-50\/70 { --tw-gradient-to: rgb(21 55 53 / 0.7) var(--tw-gradient-to-position); } [data-theme="dark"] .to-white { --tw-gradient-to: #131e30 var(--tw-gradient-to-position); } [data-theme="dark"] .via-amber-50\/50 { --tw-gradient-stops: var(--tw-gradient-from), rgb(59 48 32 / 0.5) var(--tw-gradient-via-position), var(--tw-gradient-to); } [data-theme="dark"] .via-blue-50 { --tw-gradient-stops: var(--tw-gradient-from), #192e4c var(--tw-gradient-via-position), var(--tw-gradient-to); } [data-theme="dark"] .via-cyan-50 { --tw-gradient-stops: var(--tw-gradient-from), #16323e var(--tw-gradient-via-position), var(--tw-gradient-to); } [data-theme="dark"] .via-emerald-50\/40 { --tw-gradient-stops: var(--tw-gradient-from), rgb(25 58 49 / 0.4) var(--tw-gradient-via-position), var(--tw-gradient-to); } [data-theme="dark"] .via-emerald-50\/60 { --tw-gradient-stops: var(--tw-gradient-from), rgb(25 58 49 / 0.6) var(--tw-gradient-via-position), var(--tw-gradient-to); } [data-theme="dark"] .via-indigo-50\/40 { --tw-gradient-stops: var(--tw-gradient-from), rgb(37 39 70 / 0.4) var(--tw-gradient-via-position), var(--tw-gradient-to); } [data-theme="dark"] .via-indigo-50\/60 { --tw-gradient-stops: var(--tw-gradient-from), rgb(37 39 70 / 0.6) var(--tw-gradient-via-position), var(--tw-gradient-to); } [data-theme="dark"] .via-indigo-50\/70 { --tw-gradient-stops: var(--tw-gradient-from), rgb(37 39 70 / 0.7) var(--tw-gradient-via-position), var(--tw-gradient-to); } [data-theme="dark"] .via-purple-50 { --tw-gradient-stops: var(--tw-gradient-from), #312643 var(--tw-gradient-via-position), var(--tw-gradient-to); } [data-theme="dark"] .via-slate-50 { --tw-gradient-stops: var(--tw-gradient-from), #101b2c var(--tw-gradient-via-position), var(--tw-gradient-to); } [data-theme="dark"] .via-white { --tw-gradient-stops: var(--tw-gradient-from), #131e30 var(--tw-gradient-via-position), var(--tw-gradient-to); } } /* ── 화면 개편 1단계: Tailwind 회색·흰색·파랑 색 클래스 → B 톤 토큰(두 모드 공통 — 값은 토큰이 모드마다 정한다). 빨강·초록은 글자만(-aa). ── 같은 클래스의 옛 어두운 모드 고정값 줄은 지웠다. 새 회색·흰색·파랑 색 클래스를 쓰면 여기 같은 모양의 줄을 더한다(색 값을 적지 않는다 — 토큰만). 그 밖의 색(노랑·보라·청록 등 상태 배지 옅은 면)은 화면 개편 3~5단계에서 상태 점으로 바꾸며 없앤다 — 그때까지 옛 어두운 모드 값 그대로다. */ @media screen { .bg-blue-100 { background-color: var(--yc-accent-soft) !important; } .bg-blue-50 { background-color: var(--yc-accent-soft) !important; } .bg-blue-50\/10 { background-color: color-mix(in srgb, var(--yc-accent-soft) 10%, transparent) !important; } .bg-blue-50\/20 { background-color: color-mix(in srgb, var(--yc-accent-soft) 20%, transparent) !important; } .bg-blue-50\/40 { background-color: color-mix(in srgb, var(--yc-accent-soft) 40%, transparent) !important; } .bg-blue-50\/50 { background-color: color-mix(in srgb, var(--yc-accent-soft) 50%, transparent) !important; } .bg-blue-50\/60 { background-color: color-mix(in srgb, var(--yc-accent-soft) 60%, transparent) !important; } .bg-blue-50\/70 { background-color: color-mix(in srgb, var(--yc-accent-soft) 70%, transparent) !important; } .bg-blue-50\/80 { background-color: color-mix(in srgb, var(--yc-accent-soft) 80%, transparent) !important; } .bg-blue-50\/90 { background-color: color-mix(in srgb, var(--yc-accent-soft) 90%, transparent) !important; } .bg-blue-600 { background-color: var(--yc-accent) !important; } .bg-blue-600\/15 { background-color: color-mix(in srgb, var(--yc-accent) 15%, transparent) !important; } .bg-blue-600\/20 { background-color: color-mix(in srgb, var(--yc-accent) 20%, transparent) !important; } .bg-blue-600\/30 { background-color: color-mix(in srgb, var(--yc-accent) 30%, transparent) !important; } .bg-gray-100 { background-color: var(--yc-surface-2) !important; } .bg-gray-200 { background-color: var(--yc-line) !important; } .bg-gray-200\/70 { background-color: color-mix(in srgb, var(--yc-line) 70%, transparent) !important; } .bg-gray-50 { background-color: var(--yc-page) !important; } .bg-gray-50\/40 { background-color: color-mix(in srgb, var(--yc-page) 40%, transparent) !important; } .bg-gray-50\/60 { background-color: color-mix(in srgb, var(--yc-page) 60%, transparent) !important; } .bg-gray-50\/80 { background-color: color-mix(in srgb, var(--yc-page) 80%, transparent) !important; } .bg-gray-50\/90 { background-color: color-mix(in srgb, var(--yc-page) 90%, transparent) !important; } .bg-slate-100 { background-color: var(--yc-surface-2) !important; } .bg-slate-100\/70 { background-color: color-mix(in srgb, var(--yc-surface-2) 70%, transparent) !important; } .bg-slate-100\/80 { background-color: color-mix(in srgb, var(--yc-surface-2) 80%, transparent) !important; } .bg-slate-100\/90 { background-color: color-mix(in srgb, var(--yc-surface-2) 90%, transparent) !important; } .bg-slate-200 { background-color: var(--yc-line) !important; } .bg-slate-200\/70 { background-color: color-mix(in srgb, var(--yc-line) 70%, transparent) !important; } .bg-slate-50 { background-color: var(--yc-page) !important; } .bg-slate-50\/40 { background-color: color-mix(in srgb, var(--yc-page) 40%, transparent) !important; } .bg-slate-50\/50 { background-color: color-mix(in srgb, var(--yc-page) 50%, transparent) !important; } .bg-slate-50\/60 { background-color: color-mix(in srgb, var(--yc-page) 60%, transparent) !important; } .bg-slate-50\/70 { background-color: color-mix(in srgb, var(--yc-page) 70%, transparent) !important; } .bg-slate-50\/80 { background-color: color-mix(in srgb, var(--yc-page) 80%, transparent) !important; } .bg-slate-50\/90 { background-color: color-mix(in srgb, var(--yc-page) 90%, transparent) !important; } .bg-white { background-color: var(--yc-surface) !important; } .bg-white\/10 { background-color: color-mix(in srgb, var(--yc-surface) 10%, transparent) !important; } .bg-white\/15 { background-color: color-mix(in srgb, var(--yc-surface) 15%, transparent) !important; } .bg-white\/20 { background-color: color-mix(in srgb, var(--yc-surface) 20%, transparent) !important; } .bg-white\/25 { background-color: color-mix(in srgb, var(--yc-surface) 25%, transparent) !important; } .bg-white\/5 { background-color: color-mix(in srgb, var(--yc-surface) 5%, transparent) !important; } .bg-white\/70 { background-color: color-mix(in srgb, var(--yc-surface) 70%, transparent) !important; } .bg-white\/80 { background-color: color-mix(in srgb, var(--yc-surface) 80%, transparent) !important; } .bg-white\/90 { background-color: color-mix(in srgb, var(--yc-surface) 90%, transparent) !important; } .bg-white\/95 { background-color: color-mix(in srgb, var(--yc-surface) 95%, transparent) !important; } .border-blue-100 { border-color: color-mix(in srgb, var(--yc-accent) 32%, var(--yc-line)) !important; } .border-blue-100\/80 { border-color: color-mix(in srgb, var(--yc-accent) 32%, var(--yc-line)) !important; } .border-blue-100\/90 { border-color: color-mix(in srgb, var(--yc-accent) 32%, var(--yc-line)) !important; } .border-blue-200 { border-color: color-mix(in srgb, var(--yc-accent) 32%, var(--yc-line)) !important; } .border-blue-200\/60 { border-color: color-mix(in srgb, var(--yc-accent) 32%, var(--yc-line)) !important; } .border-blue-200\/80 { border-color: color-mix(in srgb, var(--yc-accent) 32%, var(--yc-line)) !important; } .border-blue-200\/90 { border-color: color-mix(in srgb, var(--yc-accent) 32%, var(--yc-line)) !important; } .border-blue-300 { border-color: color-mix(in srgb, var(--yc-accent) 32%, var(--yc-line)) !important; } .border-blue-300\/40 { border-color: color-mix(in srgb, var(--yc-accent) 32%, var(--yc-line)) !important; } .border-blue-500 { border-color: var(--yc-accent) !important; } .border-blue-600 { border-color: var(--yc-accent) !important; } .border-gray-100 { border-color: var(--yc-line) !important; } .border-gray-100\/80 { border-color: var(--yc-line) !important; } .border-gray-200 { border-color: var(--yc-line) !important; } .border-gray-200\/50 { border-color: var(--yc-line) !important; } .border-gray-200\/60 { border-color: var(--yc-line) !important; } .border-gray-200\/70 { border-color: var(--yc-line) !important; } .border-gray-200\/80 { border-color: var(--yc-line) !important; } .border-gray-200\/90 { border-color: var(--yc-line) !important; } .border-gray-300 { border-color: var(--yc-line) !important; } .border-gray-50 { border-color: var(--yc-line) !important; } .border-slate-100 { border-color: var(--yc-line) !important; } .border-slate-200 { border-color: var(--yc-line) !important; } .border-slate-200\/60 { border-color: var(--yc-line) !important; } .border-slate-200\/70 { border-color: var(--yc-line) !important; } .border-slate-200\/80 { border-color: var(--yc-line) !important; } .border-slate-200\/90 { border-color: var(--yc-line) !important; } .border-slate-300 { border-color: var(--yc-line) !important; } .border-slate-300\/60 { border-color: var(--yc-line) !important; } .border-slate-300\/80 { border-color: var(--yc-line) !important; } .disabled\:bg-gray-200:disabled { background-color: var(--yc-surface-2) !important; } .disabled\:bg-slate-100:disabled { background-color: var(--yc-surface-2) !important; } .disabled\:text-gray-500:disabled { color: var(--yc-text-3-aa) !important; } .disabled\:text-slate-500:disabled { color: var(--yc-text-3-aa) !important; } .focus\:bg-white:focus { background-color: var(--yc-surface) !important; } .group:hover .group-hover\:bg-blue-700 { background-color: var(--yc-accent-hover) !important; } .group:hover .group-hover\:text-blue-600 { color: var(--yc-accent) !important; } .group:hover .group-hover\:text-emerald-600 { color: var(--yc-ok-aa) !important; } .group:hover .group-hover\:text-emerald-700 { color: var(--yc-ok-aa) !important; } .group:hover .group-hover\:text-red-600 { color: var(--yc-danger-aa) !important; } .group:hover .group-hover\:text-slate-500 { color: var(--yc-text-3-aa) !important; } .hover\:bg-blue-100:hover { background-color: var(--yc-accent-soft) !important; } .hover\:bg-blue-50:hover { background-color: var(--yc-accent-soft) !important; } .hover\:bg-blue-700:hover { background-color: var(--yc-accent-hover) !important; } .hover\:bg-gray-100:hover { background-color: var(--yc-surface-2) !important; } .hover\:bg-gray-200:hover { background-color: var(--yc-line) !important; } .hover\:bg-gray-50:hover { background-color: var(--yc-surface-2) !important; } .hover\:bg-slate-100:hover { background-color: var(--yc-surface-2) !important; } .hover\:bg-slate-200:hover { background-color: var(--yc-line) !important; } .hover\:bg-slate-50:hover { background-color: var(--yc-surface-2) !important; } .hover\:bg-white:hover { background-color: var(--yc-surface) !important; } .hover\:border-gray-300:hover { border-color: color-mix(in srgb, var(--yc-text-3) 45%, var(--yc-line)) !important; } .hover\:border-slate-300:hover { border-color: color-mix(in srgb, var(--yc-text-3) 45%, var(--yc-line)) !important; } .hover\:text-blue-600:hover { color: var(--yc-accent) !important; } .hover\:text-blue-700:hover { color: var(--yc-accent) !important; } .hover\:text-blue-800:hover { color: var(--yc-accent) !important; } .hover\:text-emerald-700:hover { color: var(--yc-ok-aa) !important; } .hover\:text-gray-600:hover { color: var(--yc-text-2) !important; } .hover\:text-gray-700:hover { color: var(--yc-text-2) !important; } .hover\:text-gray-800:hover { color: var(--yc-text) !important; } .hover\:text-gray-900:hover { color: var(--yc-text) !important; } .hover\:text-red-600:hover { color: var(--yc-danger-aa) !important; } .hover\:text-red-700:hover { color: var(--yc-danger-aa) !important; } .hover\:text-rose-600:hover { color: var(--yc-danger-aa) !important; } .hover\:text-rose-700:hover { color: var(--yc-danger-aa) !important; } .hover\:text-rose-800:hover { color: var(--yc-danger-aa) !important; } .hover\:text-slate-600:hover { color: var(--yc-text-2) !important; } .hover\:text-slate-700:hover { color: var(--yc-text-2) !important; } .hover\:text-slate-800:hover { color: var(--yc-text) !important; } .hover\:text-slate-900:hover { color: var(--yc-text) !important; } .text-blue-600 { color: var(--yc-accent) !important; } .text-blue-700 { color: var(--yc-accent) !important; } .text-blue-800 { color: var(--yc-accent) !important; } .text-emerald-600 { color: var(--yc-ok-aa) !important; } .text-emerald-700 { color: var(--yc-ok-aa) !important; } .text-emerald-800 { color: var(--yc-ok-aa) !important; } .text-gray-400 { color: var(--yc-text-3-aa) !important; } .text-gray-500 { color: var(--yc-text-3-aa) !important; } .text-gray-600 { color: var(--yc-text-2) !important; } .text-gray-700 { color: var(--yc-text-2) !important; } .text-gray-800 { color: var(--yc-text) !important; } .text-gray-900 { color: var(--yc-text) !important; } .text-green-600 { color: var(--yc-ok-aa) !important; } .text-green-700 { color: var(--yc-ok-aa) !important; } .text-green-800 { color: var(--yc-ok-aa) !important; } .text-red-600 { color: var(--yc-danger-aa) !important; } .text-red-700 { color: var(--yc-danger-aa) !important; } .text-red-800 { color: var(--yc-danger-aa) !important; } .text-rose-600 { color: var(--yc-danger-aa) !important; } .text-rose-700 { color: var(--yc-danger-aa) !important; } .text-rose-800 { color: var(--yc-danger-aa) !important; } .text-slate-400 { color: var(--yc-text-3-aa) !important; } .text-slate-500 { color: var(--yc-text-3-aa) !important; } .text-slate-600 { color: var(--yc-text-2) !important; } .text-slate-700 { color: var(--yc-text-2) !important; } .text-slate-800 { color: var(--yc-text) !important; } .text-slate-900 { color: var(--yc-text) !important; } .text-slate-950 { color: var(--yc-text) !important; } /* 강조 채움 위 글자는 두 모드 모두 강조 위 글자 토큰(어두운 모드 강조 #5B8DEF 위 흰 글자는 3.2:1) */ :is(.bg-blue-600, .hover\:bg-blue-700:hover).text-white, :is(.bg-blue-600, .hover\:bg-blue-700:hover) .text-white { color: var(--yc-on-accent) !important; } /* 그림자 없음(B 톤) — 카드·버튼·칩의 옅은 그림자를 뺀다. 창·메뉴처럼 떠 있는 것(shadow-lg 이상)은 둔다. */ .yc-product-ui :is(.shadow-2xs, .shadow-xs, .shadow-sm, .shadow-md, .shadow-inner) { box-shadow: none !important; } } /* 앱 보기에서는 데스크톱 상세 패널 대신 카드의 상세 창을 사용한다. */ body.mobile-preview-mode #feedDesktopInspector { display: none !important; } @media (max-width: 600px) { body.mobile-preview-mode #feedList.feed-grid-layout:not(.hidden) { grid-template-columns: minmax(0, 1fr) !important; } #currentWorkspaceTitle { display: none; } } /* 기존 PC 미리보기의 고정 밝은 배경과 단계 표시도 같은 테마를 따른다. */ :root[data-theme="dark"] body #mainAppView { background-color: var(--yc-surface) !important; border-color: var(--yc-line) !important; } [data-theme="dark"] :is(.yc-status-page .card, .phone .screen) { background: var(--yc-surface); color: var(--yc-text); border-color: var(--yc-line); } [data-theme="dark"] .yc-status-page .icon { background: var(--yc-accent-soft); color: var(--yc-accent); } [data-theme="dark"] .yc-status-page :is(p, .sub) { color: var(--yc-muted); } @media print { :root[data-theme] { --yc-page: #FFFFFF; background: #FFFFFF !important; } } /* 업무 화면의 읽기 기준: 보조 정보도 13px, 본문 14px 이상. 아이콘과 알림 숫자는 제외한다. */ @media screen { .yc-product-ui :is(.text-\[8px\], .text-\[9px\], .text-\[10px\], .text-\[10\.5px\], .text-\[11px\], .text-\[12px\], .text-xs):not(i):not([aria-hidden="true"]):not(.sr-only) { font-size: .8125rem !important; line-height: 1.55; } .yc-product-ui .text-sm { line-height: 1.6; } .yc-product-ui :is(p, label, dd).text-xs { font-size: .875rem !important; } .yc-product-ui :is(.text-gray-400, .text-gray-500, .text-slate-400, .text-slate-500):not(i) { color: var(--yc-muted) !important; } [data-theme="dark"] :is(.text-gray-500, .text-slate-500) { color: var(--yc-muted) !important; } .yc-product-ui :is(input, textarea)::placeholder { color: var(--yc-muted); opacity: 1; } .yc-product-ui :is(.modal-content, .alert-modal-content) { line-height: 1.65; } .yc-product-ui .modal-header h3 { font-size: 1.125rem; letter-spacing: -.025em; } .yc-product-ui .modal-header button { min-width: 44px; min-height: 44px; } .yc-product-ui .modal-footer button { min-height: 48px; font-size: .9375rem !important; } .yc-product-ui :is(.yc-money-label, .yc-money-note, .yc-table-total, .yc-table-note) { letter-spacing: -.01em; } .yc-product-ui .yc-money-details summary { min-height: 44px; padding: 10px 0; } .yc-product-ui .job-card-item { border-color: var(--yc-line); border-radius: var(--yc-radius-card); padding: 20px; box-shadow: none; } .yc-product-ui .job-card-item h3 { font-size: 1.0625rem; line-height: 1.45; margin-bottom: 4px; } .yc-product-ui .job-card-item > p { font-size: .875rem; line-height: 1.6; margin-bottom: 18px; } .yc-product-ui .job-card-item > div:first-child { gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .yc-product-ui .job-card-item > div:first-child > div { gap: 6px; } .yc-product-ui .job-card-item .yc-unit-amount { margin-top: 2px; } .yc-product-ui .job-card-time-elapsed { font-weight: 500; } .yc-product-ui .job-card-item.opacity-70 { opacity: 1; } .yc-product-ui .job-card-item:is(.border-teal-400, .border-teal-500) { border-color: var(--yc-line); } .yc-product-ui .job-card-item.ring-2 { border-color: var(--yc-accent); } .yc-product-ui #main-content { background: var(--yc-page) !important; } .yc-product-ui #feedList:not(.hidden) { display: grid; gap: 16px !important; align-items: start; } .yc-product-ui #feedStickyHeader { box-shadow: none; padding-top: 12px; padding-bottom: 12px; border-color: var(--yc-line); } .yc-product-ui .quick-filter-chip { min-height: 38px; padding: 7px 14px; } .yc-product-ui :is(#btnFeedSubMarket, #btnFeedSubDispatch) { min-height: 44px; font-size: .875rem !important; } /* 하단 탭(B 톤 공용 모양 .yc-tabbar 와 같은 규칙): 흰 면 + 위 구분선, 고른 탭만 강조 색, 나머지는 옅은 글자 */ .yc-product-ui .bottom-nav-bar { border-color: var(--yc-line); background: var(--yc-surface) !important; backdrop-filter: none; } .yc-product-ui .bottom-nav-bar .nav-btn { gap: 4px; color: var(--yc-text-3-aa) !important; min-height: var(--yc-tap); } .yc-product-ui .bottom-nav-bar .nav-btn.text-blue-600 { color: var(--yc-accent) !important; } .yc-product-ui .bottom-nav-bar .nav-btn span { font-size: .8125rem !important; font-weight: 600; white-space: nowrap; } /* E14 하단 탭 글자 한 줄(runs-tab-2026-10-18 뒤 5칸 — 용차·기사 모집·운행·팀·더보기, 옛 6칸 때 정한 값 그대로) — 글자는 읽기 기준 13px 그대로(360 폭 탭 60px 에 '기사 모집' 47px) */ .yc-product-ui .bottom-nav-bar .nav-btn > i { font-size: 20px; } /* 떠 있는 [+ 오더 등록]: 그림자 대신 1px 선(화면 개편 4단계 설계 §8 ⑦ — B 톤은 그림자 없음) */ .yc-product-ui .fab-wrapper button { background-image: none; background-color: var(--yc-accent); color: var(--yc-on-accent); border: 1px solid var(--yc-line); box-shadow: none !important; min-height: 48px; padding: 12px 18px; border-radius: var(--yc-radius-card); } .yc-product-ui .fab-wrapper button span { font-size: .875rem !important; } .yc-product-ui .erp-table :is(th, td) { line-height: 1.6; } .yc-product-ui .erp-table td { padding-top: 14px; padding-bottom: 14px; } .yc-product-ui :is(#tab-profile, #tab-schedule, #tab-settlement) p { line-height: 1.7; } .yc-product-ui #tab-profile .truncate:not(h3):not(strong):not([id*="Name"]) { white-space: normal; overflow: visible; text-overflow: clip; } .yc-product-ui .yc-completion-amount { align-items: flex-start; flex-wrap: wrap; } .yc-product-ui :is(#ycStatementBody, #ycStatementCopyStatus) { font-size: .875rem; line-height: 1.7; } .yc-product-ui #ycStatementBody :is(dt, dd) { padding-top: 4px; padding-bottom: 4px; } @media (max-width: 767px) { .yc-product-ui :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) { font-size: 1rem !important; min-height: 44px; } .yc-product-ui .desktop-workspace > header { padding: 10px 16px; } .yc-product-ui .desktop-workspace > header button { min-width: 44px; min-height: 44px; } .yc-product-ui .desktop-workspace > header .yc-appearance-header { width: 44px; padding: 0; } /* 휴대폰 머리줄 화면 모드 단추 = 아이콘만 44×44 · 이름은 aria-label '화면 모드'(ux-tab-theme 후속 2026-10-14) */ .yc-product-ui .desktop-workspace > header .yc-appearance-header > span { display: none; } .yc-product-ui #feedList.feed-grid-layout:not(.hidden) { grid-template-columns: minmax(0, 1fr) !important; } .yc-product-ui .job-card-item { padding: 18px; } .yc-product-ui #tab-profile .p-4[role="button"] { padding-top: 18px; padding-bottom: 18px; } .yc-product-ui .modal-content { border-radius: 22px 22px 0 0; } } } /* 화면 모드는 더보기의 설정 줄과 머리줄 단추(해·달 아이콘 + '화면 모드', 알림 종 왼쪽 — 휴대폰은 아이콘만)에서 같은 선택 창으로 연다(ux-tab-theme 2026-10-14 §B). */ .yc-appearance-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 9px 12px; color: var(--yc-muted); background: transparent; border: 1px solid var(--yc-line); border-radius: 12px; font-size: .8125rem; font-weight: 600; cursor: pointer; flex-shrink: 0; } .yc-appearance-trigger:hover { background: var(--yc-raised); color: var(--yc-text); } .yc-appearance-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 18px 16px; text-align: left; border-top: 1px solid var(--yc-line); border-bottom: 1px solid var(--yc-line); background: var(--yc-surface); color: var(--yc-muted); cursor: pointer; } .yc-appearance-row:hover { background: var(--yc-raised); } .yc-appearance-row-icon { width: 20px; flex-shrink: 0; } .yc-appearance-row-copy { flex: 1; display: grid; gap: 4px; } .yc-appearance-row-copy strong { font-size: .9375rem; font-weight: 650; color: var(--yc-text); } .yc-appearance-row-copy > span { font-size: .8125rem; line-height: 1.6; } /* 더보기 설정 목록의 다른 행과 같은 모양(색 상자 아이콘·14px 제목·11px 설명). (r16 UIAPP-19) */ #tab-profile .yc-appearance-row { padding: 16px; border-top: 0; } #tab-profile .yc-appearance-row-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 12px; background: var(--yc-raised); color: var(--yc-muted); } #tab-profile .yc-appearance-row-copy { gap: 2px; } #tab-profile .yc-appearance-row-copy strong { font-size: .875rem; font-weight: 700; } #tab-profile .yc-appearance-row-copy > span { font-size: 11px; line-height: 1.5; } .yc-appearance-dialog { max-width: none; width: min(480px, calc(100% - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 24px; border: 1px solid var(--yc-line); border-radius: 24px; background: var(--yc-surface); color: var(--yc-text); box-shadow: 0 24px 80px rgb(0 0 0 / .24); overflow-y: auto; overscroll-behavior: contain; } .yc-appearance-dialog::backdrop { background: color-mix(in srgb, #0F1115 60%, transparent); backdrop-filter: blur(3px); } .yc-appearance-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .yc-appearance-heading h2 { margin: 0; font-size: 1.25rem; font-weight: 750; line-height: 1.4; } .yc-appearance-close { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; margin: -8px -8px 0 0; border-radius: 12px; color: var(--yc-muted); background: transparent; border: 0; cursor: pointer; } .yc-appearance-close:hover { background: var(--yc-raised); } .yc-appearance-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 24px 0 0; padding: 0; border: 0; } .yc-appearance-choice { position: relative; cursor: pointer; min-width: 0; } .yc-appearance-choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } /* 화면 모드 미리보기는 각 모드의 모습을 그린 그림이라 모드와 무관하게 그 모드의 B 톤 값(§4 표)을 그대로 쓴다. */ .yc-appearance-preview { display: grid; align-content: start; gap: 10px; height: 116px; padding: 12px; border: 2px solid var(--yc-line); border-radius: var(--yc-radius-card); background: #F7F8FA; pointer-events: none; } .yc-appearance-preview[data-preview="dark"] { background: #0F1115; } .yc-appearance-preview[data-preview="system"] { background: linear-gradient(110deg, #F7F8FA 50%, #0F1115 50%); } .yc-preview-bar { height: 5px; width: 42%; border-radius: 4px; background: #2563EB; } .yc-preview-card { display: grid; gap: 5px; padding: 10px 8px; border-radius: 7px; background: #FFFFFF; border: 1px solid #E5E8EB; } .yc-preview-card b { width: 55%; height: 5px; background: #4E5968; border-radius: 3px; } .yc-preview-card i { width: 78%; height: 4px; background: #8B95A1; border-radius: 3px; } .yc-preview-card em { width: 50%; height: 9px; margin-top: 4px; background: #2563EB; border-radius: 3px; } .yc-preview-line { width: 65%; height: 4px; background: #8B95A1; border-radius: 3px; } [data-preview="dark"] .yc-preview-card { background: #171A21; border-color: #2A2F38; } [data-preview="dark"] :is(.yc-preview-bar, .yc-preview-card em) { background: #5B8DEF; } [data-preview="dark"] .yc-preview-card b { background: #F2F4F6; } [data-preview="system"] .yc-preview-card { background: linear-gradient(110deg, #FFFFFF 50%, #171A21 50%); border-color: #8B95A1; } .yc-appearance-choice-label { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-top: 10px; font-size: .875rem; font-weight: 650; } .yc-appearance-choice-desc { display: block; margin-top: 4px; font-size: .8125rem; font-weight: 500; line-height: 1.5; color: var(--yc-muted); } .yc-appearance-check { display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid var(--yc-line); border-radius: 50%; color: transparent; font-size: 12px; flex-shrink: 0; } .yc-appearance-choice input:checked ~ .yc-appearance-preview { border-color: var(--yc-accent); box-shadow: 0 0 0 2px var(--yc-accent-soft); } .yc-appearance-choice input:checked ~ .yc-appearance-choice-label { color: var(--yc-accent); } .yc-appearance-choice input:checked ~ .yc-appearance-choice-label .yc-appearance-check { background: var(--yc-accent); color: var(--yc-on-accent); border-color: var(--yc-accent); } .yc-appearance-choice input:focus-visible ~ .yc-appearance-preview { outline: 2px solid var(--yc-focus); outline-offset: 4px; } .yc-appearance-dialog footer { margin-top: 24px; } .yc-appearance-done { display: block; width: 100%; min-height: var(--yc-btn-primary-h); padding: 12px; border: none; border-radius: var(--yc-radius-control); background: var(--yc-accent); color: var(--yc-on-accent); font-size: var(--yc-fs-card); font-weight: var(--yc-fw-bold); cursor: pointer; } .yc-appearance-done:hover { background: var(--yc-accent-hover); } @media (max-width: 480px) { .yc-appearance-dialog { width: 100%; max-height: calc(100dvh - 24px); margin: auto 0 0; padding: 24px 20px max(24px, env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; border-bottom: 0; } .yc-appearance-choices { gap: 10px; } .yc-appearance-preview { padding: 10px; height: 108px; } } @media (max-width: 359px) { .yc-appearance-choice-label { font-size: .8125rem; } .yc-appearance-dialog { padding-left: 16px; padding-right: 16px; } } .yc-card-payout { color: var(--yc-accent); font-size: .8125rem; font-weight: 600; line-height: 1.6; margin-top: 2px; } /* 긴 확인 안내에서도 결정을 위한 버튼은 항상 보이고 본문만 스크롤된다. */ .yc-product-ui #customAlertModal .alert-modal-content { display: flex; flex-direction: column; width: min(480px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 24px; text-align: left; } .yc-product-ui #alertIcon { flex-shrink: 0; margin-bottom: 12px; } .yc-product-ui #alertIcon i { font-size: 32px; } .yc-app #alertIcon { margin-bottom: 8px; } .yc-app #alertIcon i { font-size: 24px; } .yc-product-ui #alertTitle { flex-shrink: 0; font-size: 1.125rem; line-height: 1.5; margin-bottom: 16px; } .yc-product-ui #alertMessage { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin-bottom: 0; padding: 2px; } .yc-product-ui #alertMessage + div { flex-shrink: 0; padding-top: 18px; } .yc-product-ui #alertMessage + div button { min-height: 48px; font-size: .9375rem; box-shadow: none; } @media (max-width: 480px) { .yc-product-ui #customAlertModal .alert-modal-content { width: 100%; max-height: calc(100dvh - 24px); margin: auto 0 0; padding: 24px 20px max(24px, env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; } } /* 앱 PC 보기의 어두운 탐색 영역(#desktopSidebar)은 밝은 보조 글씨. 콘솔 사이드바(#adminSidebar)는 4단계부터 밝은 면이라 아래 콘솔 틀 규칙을 따른다. */ .yc-product-ui #desktopSidebar :is(.text-gray-400, .text-gray-500, .text-slate-400, .text-slate-500) { color: #b9c7d9 !important; } .yc-console-action-label { display: inline; } @media (max-width: 1279px) { .yc-console-action-label { display: none; } } @media (max-width: 1599px) { .yc-product-ui header #serverTimeClock.hidden { display: none !important; } } [data-theme="dark"] .yc-product-ui button:disabled { background-color: var(--yc-raised) !important; color: var(--yc-muted) !important; border-color: var(--yc-line) !important; box-shadow: none !important; } [data-theme="dark"] .yc-product-ui table :is(th, td, tr) { border-color: var(--yc-line) !important; } /* ── 화면 개편 4단계(설계 §9): 콘솔 틀(팀 콘솔·관리 콘솔 공용 — 사이드바·머리) B 톤 · 팀 콘솔 줄·상자 탭·관리 판(드로어). 토큰만 ───────────── */ /* 사이드바: 면 바탕 + 보조 글자, 고른 메뉴만 강조(남색 면·하늘색 띠 없음) */ .yc-product-ui #adminSidebar { background: var(--yc-surface) !important; color: var(--yc-text-2) !important; border-right: 1px solid var(--yc-line); box-shadow: none !important; } .yc-product-ui #adminSidebar :is(.sidebar-header-box, .sidebar-footer-box) { background: var(--yc-surface) !important; border-color: var(--yc-line) !important; } .yc-product-ui #adminSidebar :is(#consoleBrandTitle, #sidebarAdminName, .yc-side-team-name) { color: var(--yc-text) !important; } .yc-product-ui #adminSidebar :is(.nav-section-title, .sidebar-full-text > span + span, #sidebarAdminTier, #adminBuildVersionTag) { color: var(--yc-text-3-aa) !important; } .yc-product-ui #adminSidebar :is(.nav-item, .broker-nav-item) { color: var(--yc-text-2) !important; background: none; border-left: 0 !important; font-weight: var(--yc-fw-semi); } .yc-product-ui #adminSidebar :is(.nav-item, .broker-nav-item) i { color: var(--yc-text-3-aa) !important; } .yc-product-ui #adminSidebar :is(.nav-item, .broker-nav-item):hover { background: var(--yc-surface-2) !important; color: var(--yc-text) !important; } .yc-product-ui #adminSidebar :is(.nav-item, .broker-nav-item).active { background: var(--yc-accent-soft) !important; color: var(--yc-accent) !important; font-weight: var(--yc-fw-bold); } .yc-product-ui #adminSidebar :is(.nav-item, .broker-nav-item).active i { color: var(--yc-accent) !important; } .yc-product-ui #adminSidebar .badge-pill-count { background: var(--yc-accent) !important; color: var(--yc-on-accent) !important; animation: none !important; } .yc-product-ui #adminSidebar #consoleWorkspaceSwitcher > div { background: var(--yc-surface-2) !important; border-color: var(--yc-line) !important; box-shadow: none !important; } .yc-ws-btn { color: var(--yc-text-2); background: none; font-weight: var(--yc-fw-semi); } .yc-ws-btn:hover { color: var(--yc-text); } .yc-ws-btn.is-active { background: var(--yc-surface); color: var(--yc-accent); font-weight: var(--yc-fw-bold); box-shadow: 0 0 0 1px var(--yc-line); } .yc-product-ui #adminSidebar #sidebarAdminAvatar { background: var(--yc-surface-2) !important; color: var(--yc-text-2) !important; border-color: var(--yc-line) !important; } .yc-product-ui #adminSidebar .sidebar-footer-detail > a { background: var(--yc-surface-2) !important; color: var(--yc-text-2) !important; } .yc-product-ui #adminSidebar .sidebar-footer-detail > a:hover { color: var(--yc-text) !important; } .yc-product-ui #adminSidebar .sidebar-footer-detail > a i, .yc-product-ui #adminSidebar .sidebar-footer-box button { color: var(--yc-text-3-aa) !important; } .yc-product-ui #adminSidebar .sidebar-footer-box button:hover { color: var(--yc-text) !important; } .yc-product-ui #adminSidebar #btnToggleSidebarCollapse { color: var(--yc-text-2) !important; } /* 머리: 면 + 아래 구분선(그림자 없음). 주 동작 하나(강조 채움) · 테두리 버튼 · 아이콘 버튼(알림·화면 모드·새로고침) */ .yc-console-head { background: var(--yc-surface) !important; border-bottom: 1px solid var(--yc-line) !important; box-shadow: none !important; } .yc-console-head #pageTitle { color: var(--yc-text) !important; font-size: var(--yc-fs-section) !important; } .yc-console-head #pageTitle i { color: var(--yc-text-3-aa) !important; } .yc-console-head #btnToggleSidebarCollapse { color: var(--yc-text-2) !important; } .yc-console-head #btnToggleSidebarCollapse:hover { background: var(--yc-surface-2) !important; color: var(--yc-text) !important; } .yc-console-head #serverTimeClock { color: var(--yc-text-3-aa) !important; } .yc-hbtn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex-shrink: 0; min-height: 40px; min-width: 40px; padding: 0 12px; border: 1px solid var(--yc-line); border-radius: var(--yc-radius-control); background: var(--yc-surface); color: var(--yc-text-2); font-size: 14px; font-weight: var(--yc-fw-semi); line-height: 1.2; white-space: nowrap; cursor: pointer; transition: background-color var(--yc-motion) ease, color var(--yc-motion) ease; } .yc-hbtn:hover { background: var(--yc-surface-2); color: var(--yc-text); } .yc-hbtn.is-icon { width: 40px; padding: 0; } .yc-hbtn.is-primary { background: var(--yc-accent); border-color: transparent; color: var(--yc-on-accent); font-weight: var(--yc-fw-bold); } .yc-hbtn.is-primary:hover { background: var(--yc-accent-hover); color: var(--yc-on-accent); } .yc-hbtn i { font-size: 15px; } .yc-hbtn-narrow-icon { display: none; } @media (max-width: 1279px) { .yc-hbtn-narrow-icon { display: inline-block; } } .yc-hbtn .yc-notif-badge { top: -6px; right: -6px; } .yc-console-head .yc-appearance-header { min-height: 40px; width: 40px; padding: 0; border-radius: var(--yc-radius-control); color: var(--yc-text-2); } .yc-console-head .yc-appearance-header > span { display: none; } /* 팀 콘솔 화면(배차 현황·정산·소속 기사·팀 플랜): 흰 면 + 1px 구분선, 카드·그림자 없음 */ .yc-bk-view:not(.hidden) { display: flex; flex-direction: column; gap: var(--yc-space-3); } .yc-bk-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--yc-space-3); background: var(--yc-surface); border: 1px solid var(--yc-line); border-radius: var(--yc-radius-card); padding: 0 var(--yc-space-4); min-height: 52px; } .yc-bk-toolbar.is-plain { padding: var(--yc-space-2) var(--yc-space-4); } .yc-bk-toolbar .yc-boxtabs.is-flat { border-bottom: 0; padding: 0; background: none; align-self: stretch; } .yc-bk-toolbar .yc-boxtabs.is-flat .yc-boxtab { min-height: 50px; font-size: 15px; } .yc-bk-toolbar .yc-boxtabs.is-flat .yc-boxtab::after { bottom: 0; } .yc-bk-tools { display: flex; align-items: center; gap: var(--yc-space-2); flex-wrap: wrap; margin-left: auto; padding: 6px 0; } .yc-bk-select, .yc-bk-search { min-height: 38px; padding: 0 12px; border: 1px solid var(--yc-line); border-radius: var(--yc-radius-control); background: var(--yc-surface); color: var(--yc-text); font-size: 14px; } .yc-bk-select { padding-right: 28px; } .yc-bk-search { width: 260px; } .yc-bk-search::placeholder { color: var(--yc-text-3-aa); } /* 손가락 기기(앱 팀 탭·태블릿 콘솔)에서는 고르기·검색 칸도 44px 로 누른다(6단계 검증 — 768 에서 38px). */ @media (pointer: coarse) { .yc-bk-select, .yc-bk-search { min-height: 44px; } } .yc-bk-meta { color: var(--yc-text-3-aa); font-size: 13px; font-weight: var(--yc-fw-regular); } .yc-bk-error { color: var(--yc-danger-aa); font-weight: var(--yc-fw-semi); } .yc-bk-summary { margin: 0; padding: 0 2px; color: var(--yc-text-2); font-size: 14px; font-weight: var(--yc-fw-semi); } .yc-bk-summary:empty { display: none; } .yc-bk-boxbar { display: flex; align-items: center; gap: var(--yc-space-2); flex-wrap: wrap; } .yc-bk-seg { display: inline-flex; border: 1px solid var(--yc-line); border-radius: var(--yc-radius-control); overflow: hidden; background: var(--yc-surface); } .yc-bk-seg-btn { min-height: 36px; padding: 0 14px; border: 0; background: none; color: var(--yc-text-2); font-size: 14px; font-weight: var(--yc-fw-semi); cursor: pointer; } .yc-bk-seg-btn + .yc-bk-seg-btn { border-left: 1px solid var(--yc-line); } .yc-bk-seg-btn.is-active { background: var(--yc-accent-soft); color: var(--yc-accent); font-weight: var(--yc-fw-bold); } .yc-bk-bulkbar:not(.hidden) { display: flex; align-items: center; gap: var(--yc-space-3); flex-wrap: wrap; padding: 8px var(--yc-space-4); background: var(--yc-accent-soft); border-radius: var(--yc-radius-card); } .yc-bk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 1px solid transparent; border-radius: var(--yc-radius-control); font-size: 14px; font-weight: var(--yc-fw-semi); line-height: 1.2; white-space: nowrap; cursor: pointer; text-decoration: none; transition: background-color var(--yc-motion) ease, color var(--yc-motion) ease; } .yc-bk-btn.is-primary { background: var(--yc-accent); color: var(--yc-on-accent); font-weight: var(--yc-fw-bold); } .yc-bk-btn.is-primary:hover { background: var(--yc-accent-hover); } .yc-bk-btn.is-soft { background: var(--yc-accent-soft); color: var(--yc-accent); font-weight: var(--yc-fw-bold); } .yc-bk-btn.is-soft:hover { background: color-mix(in srgb, var(--yc-accent) 16%, var(--yc-surface)); } .yc-bk-btn.is-soft .yc-app-tag { color: var(--yc-accent); } .yc-bk-btn.is-outline { background: var(--yc-surface); border-color: var(--yc-line); color: var(--yc-text-2); } .yc-bk-btn.is-outline:hover { background: var(--yc-surface-2); color: var(--yc-text); } .yc-bk-btn.is-block { display: flex; width: 100%; min-height: 44px; } .yc-bk-btn:disabled { opacity: .55; cursor: not-allowed; } /* 줄 표: 줄 높이 56px 이하, 칸은 한 줄(넘치면 말줄임), 상태는 점 + 글자, 주 버튼은 마지막 칸에 하나 */ .yc-bk-tablewrap { background: var(--yc-surface); border: 1px solid var(--yc-line); border-radius: var(--yc-radius-card); overflow: auto; } .yc-bk-table { width: 100%; border-collapse: collapse; table-layout: auto; color: var(--yc-text); font-size: 14px; } .yc-bk-table thead th { position: sticky; top: 0; z-index: 1; height: 40px; padding: 0 12px; background: var(--yc-surface-2); color: var(--yc-text-2); font-size: 13px; font-weight: var(--yc-fw-semi); text-align: left; white-space: nowrap; border-bottom: 1px solid var(--yc-line); cursor: default; } .yc-bk-table thead th[onclick] { cursor: pointer; } .yc-bk-table thead th[onclick]:hover { color: var(--yc-text); } .yc-bk-table thead th.is-sorted { color: var(--yc-accent); } .yc-bk-table thead th .sort-icon-box { margin-left: 4px; } /* 정렬 머리 칸([배차 현황]·[정산] 표 — broker-pc.js bkTableHeadHtml·bkSettleHeadHtml): th 안의 버튼이라 키보드(Tab·Enter·Space)로도 누른다. 모양은 예전 th onclick 그대로 — 글자·색·굵기는 th 에서 물려받고(정렬한 열의 강조색도), ::after 가 칸 전체를 누르는 자리로 덮는다(th 가 sticky 라 기준 상자). 마우스 올림 글자색은 예전처럼 정렬한 열에도 걸리고, 포커스 테두리는 칸 안쪽 2px(예전 th[onclick]:focus-visible 과 같은 모양). */ .yc-bk-table thead th .yc-bk-sort-btn { -webkit-appearance: none; appearance: none; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; letter-spacing: inherit; cursor: pointer; user-select: none; } .yc-bk-table thead th .yc-bk-sort-btn::after { content: ''; position: absolute; inset: 0; } .yc-bk-table thead th .yc-bk-sort-btn:hover { color: var(--yc-text); } .yc-bk-table thead th .yc-bk-sort-btn:focus-visible { outline: none; } .yc-bk-table thead th .yc-bk-sort-btn:focus-visible::after { outline: 2px solid var(--yc-focus); outline-offset: -2px; } .yc-bk-table tbody td { height: 52px; padding: 0 12px; border-bottom: 1px solid var(--yc-line); vertical-align: middle; white-space: nowrap; } .yc-bk-table tbody tr:last-child td { border-bottom: 0; } .yc-bk-row { cursor: pointer; transition: background-color var(--yc-motion) ease; } .yc-bk-row:hover, .yc-bk-row:focus-visible { background: var(--yc-surface-2); } .yc-bk-row.is-open { background: var(--yc-accent-soft); } .yc-bk-row.is-static { cursor: default; } .yc-bk-row.is-static:hover { background: none; } .yc-bk-row-links { display: flex; align-items: center; justify-content: flex-end; gap: 14px; } .yc-bk-row:focus-visible { outline: 2px solid var(--yc-accent); outline-offset: -2px; } .yc-bk-cell { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 줄을 바꾸는 칸(팀 콘솔 [소속 기사] '오늘 일정' — 긴 일정 글이 1024px 표를 상자보다 넓히지 않게, r26 N-S3-2) */ .yc-bk-table tbody td.yc-bk-wrap, .yc-bk-wrap .yc-bk-cell { white-space: normal; } /* 팀 콘솔 [소속 기사] 표(P2c): 1024~1279 폭에서 사이드바를 펼쳐도 표 안 가로 스크롤이 없게 칸 여백만 줄인다(칸·정보는 그대로) */ @media (max-width: 1279px) { #view-broker-fleet .yc-bk-table :is(thead th, tbody td) { padding-left: 8px; padding-right: 8px; } } .yc-bk-when { width: 1%; } .yc-bk-where { font-weight: var(--yc-fw-semi); } .yc-bk-where .yc-bk-cell { max-width: 280px; } .yc-bk-driver .yc-bk-cell { max-width: 120px; } .yc-bk-amount { width: 1%; text-align: right; font-weight: var(--yc-fw-semi); } .yc-bk-where .yc-courier { margin-right: 6px; } /* 운임 칸 아래 작은 줄(D108 — 금액 두 가지): '건당 X원 × N건'. 두 줄이어도 줄 높이 52px 안(64px 까지 허용) */ .yc-bk-unit { display: block; margin-top: 1px; font-size: var(--yc-fs-meta); font-weight: var(--yc-fw-regular); line-height: 1.4; color: var(--yc-text-3-aa); white-space: nowrap; } .yc-bk-status .yc-bk-cell { max-width: 320px; } .yc-bk-status .yc-status { display: inline; font-size: 14px; } .yc-bk-status .yc-status-dot { display: inline-block; margin-right: 6px; vertical-align: 1px; } /* 관리 판이 열리면 표가 판 왼쪽에 맞게 줄어든다: 캠프·상태 칸을 줄이고 주 버튼 칸을 뺀다(판 맨 위에 같은 주 버튼이 있다) */ body.yc-bk-drawer-open .yc-bk-where .yc-bk-cell { max-width: 180px; } body.yc-bk-drawer-open .yc-bk-status .yc-bk-cell { max-width: 200px; } body.yc-bk-drawer-open .yc-bk-table .yc-bk-act { display: none !important; } .yc-bk-act { width: 1%; text-align: right; } .yc-bk-sel { width: 36px; padding-right: 0 !important; } .yc-bk-sel input { width: 16px; height: 16px; accent-color: var(--yc-accent); } .yc-bk-table tr.yc-bk-group th { height: 32px; padding: 0 12px; background: var(--yc-surface); color: var(--yc-text-2); font-size: 13px; font-weight: var(--yc-fw-semi); text-align: left; border-bottom: 1px solid var(--yc-line); } .yc-bk-table tr.yc-bk-group th .yc-num { color: var(--yc-text-3-aa); margin-left: 4px; } .yc-bk-empty { height: auto !important; padding: 28px 16px !important; text-align: center; color: var(--yc-text-2); white-space: normal !important; } .yc-bk-table tr.yc-bk-more td { height: auto; padding: 12px; text-align: center; } .yc-bk-table .yc-row-just { background: var(--yc-ok-soft); } .yc-bk-table tr.yc-row-flash > td { animation: yc-row-flash 2.4s ease-out; } /* 관리 판(드로어): 오른쪽 고정 면 — 목록은 그대로 보이고 누를 수 있다(다른 줄을 누르면 판이 그 오더로 바뀐다) */ .yc-bk-drawer { position: fixed; top: 64px; right: 0; bottom: 0; z-index: 45; display: flex; flex-direction: column; width: min(420px, 100vw); background: var(--yc-surface); color: var(--yc-text); border-left: 1px solid var(--yc-line); } .yc-bk-drawer[hidden] { display: none; } body.yc-bk-drawer-open main { padding-right: calc(420px + 24px) !important; } .yc-bk-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 20px 12px; border-bottom: 1px solid var(--yc-line); } .yc-bk-drawer-titles { min-width: 0; } .yc-bk-drawer-title { margin: 0; font-size: var(--yc-fs-section); font-weight: var(--yc-fw-bold); line-height: 1.4; color: var(--yc-text); overflow-wrap: anywhere; } .yc-bk-drawer-title:focus { outline: none; } .yc-bk-drawer-sub { margin: 2px 0 0; font-size: 14px; color: var(--yc-text-2); } .yc-bk-drawer-close { flex: none; width: 40px; height: 40px; border: 1px solid var(--yc-line); border-radius: var(--yc-radius-control); background: var(--yc-surface); color: var(--yc-text-2); cursor: pointer; } .yc-bk-drawer-close:hover { background: var(--yc-surface-2); color: var(--yc-text); } .yc-bk-drawer-body { flex: 1; overflow-y: auto; padding: 16px 20px 24px; display: flex; flex-direction: column; gap: 16px; } .yc-bk-drawer-status { margin: 0; } .yc-bk-facts { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--yc-line); } .yc-bk-facts > div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--yc-line); } .yc-bk-facts dt { color: var(--yc-text-3-aa); font-size: 13px; } .yc-bk-facts dd { margin: 0; min-width: 0; color: var(--yc-text); font-size: 14px; overflow-wrap: anywhere; } .yc-bk-facts dd small { display: block; margin-top: 2px; color: var(--yc-text-3-aa); font-size: 12px; } .yc-bk-copy { padding: 0; border: 0; background: none; color: var(--yc-text); font-size: 13px; text-align: left; text-decoration: underline; text-decoration-color: var(--yc-line); text-underline-offset: 3px; cursor: pointer; overflow-wrap: anywhere; } .yc-bk-tel { color: var(--yc-accent); font-weight: var(--yc-fw-semi); } .yc-bk-drawer-links { display: flex; flex-wrap: wrap; gap: 4px 16px; } .yc-bk-drawer-links .yc-bk-link { font-size: 14px; min-height: 36px; } .yc-bk-bundle-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--yc-line); } .yc-bk-bundle-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--yc-line); font-size: 14px; } /* 좌석 막대: 가득 차도 강조 색 — 초과·미납(기한 만료)일 때만 위험 색(설계 §9) */ .yc-seatbar { width: 100%; height: 8px; border-radius: 4px; background: var(--yc-surface-2); overflow: hidden; } .yc-seatbar-fill { height: 100%; border-radius: 4px; background: var(--yc-accent); transition: width 300ms ease; } .yc-seatbar-fill.is-danger { background: var(--yc-danger); } /* 앱 팀 탭(화면 개편 4단계): 테두리 버튼 · 요금제 이름(작은 글자) · 상자 탭 아래 업종·검색 한 줄 · 목록 */ .yc-btn-outline { background: var(--yc-surface); color: var(--yc-text-2); border: 1px solid var(--yc-line); } .yc-btn-outline:hover:not(:disabled) { background: var(--yc-surface-2); color: var(--yc-text); } #teamHeaderActions .yc-btn { min-height: 44px; padding: 0 14px; font-size: 14px; white-space: nowrap; } .yc-team-plan-name { font-size: 13px; font-weight: var(--yc-fw-semi); color: var(--yc-text-3-aa); } .yc-team-tools { display: flex; gap: var(--yc-space-2); margin: var(--yc-space-3) 0; } .yc-team-tools .yc-bk-select { flex: none; max-width: 40%; } .yc-team-tools .yc-bk-search { flex: 1; width: auto; min-width: 0; } .yc-team-list { display: block; } .yc-team-list > .yc-empty { background: var(--yc-surface); border: 1px solid var(--yc-line); border-radius: var(--yc-radius-card); } .yc-jlist-more { margin-top: var(--yc-space-3); } #view-broker-dispatch .yc-bk-boxbar:not(.hidden) { margin-bottom: var(--yc-space-3); } .yc-team-manage-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding: 10px 16px; background: var(--yc-surface); border: 1px solid var(--yc-line); border-radius: var(--yc-radius-card); font-size: 14px; color: var(--yc-text-2); } .yc-team-manage-line.is-danger #teamManageLineTxt { color: var(--yc-danger-aa); } /* 앱 팀 탭 머리 한 줄(화면 개편 5단계 A — 설계 §10 ⑥): 제목 + 요금제 이름(작게) + 오른쪽 주 버튼 [오더 등록] + ⋯. 카드·그림자 없음, 토큰만 */ /* P5 §1-5: 제목·배지·'?'는 늘 한 줄(제목 칸은 줄바꿈 없음 — 좁으면 배지가 말줄임), 자리가 모자라면 [오더 등록]·⋯ 가 아래 줄 오른쪽으로 */ .yc-team-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 12px; min-height: 44px; } .yc-team-head-title { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex-wrap: nowrap; } .yc-team-head-title > .yc-team-plan-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #teamHeaderLogo { align-self: center; line-height: 0; } /* 팀 로고 32px(atlas-followups 2026-10-08 §3) — 글자 기준선이 아니라 가운데 */ .yc-team-head-h { margin: 0; font-size: var(--yc-fs-title); font-weight: var(--yc-fw-bold); line-height: 1.3; color: var(--yc-text); white-space: nowrap; } /* D139 — 팀이 없으면 [팀] 탭·콘솔 [소속 기사]는 운영 안내 한 덩어리만(빈 팀 관리 화면 0): 앱 main.js updateTeamPermissionsView · 콘솔 broker-pc.js bkSyncNoTeamGuide */ #tab-team.yc-team-none > :not(#teamSoloOnboardingCard):not(#teamInfoReadStatus) { display: none !important; } #view-broker-fleet.is-noteam > :not(#bkNoTeamGuide) { display: none !important; } .yc-team-guide { background: var(--yc-surface); border: 1px solid var(--yc-line); border-radius: var(--yc-radius-card); } .yc-team-guide-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--yc-space-2); } .yc-team-head-actions { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; } .yc-team-head-primary.hidden { display: none !important; } .yc-team-head-primary .yc-btn { white-space: nowrap; } .yc-team-more-wrap { position: relative; } .yc-team-more { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--yc-line); border-radius: var(--yc-radius-control); background: var(--yc-surface); color: var(--yc-text-2); font-size: 20px; font-weight: var(--yc-fw-bold); line-height: 1; cursor: pointer; } .yc-team-more:hover, .yc-team-more[aria-expanded="true"] { background: var(--yc-surface-2); color: var(--yc-text); } .yc-team-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 200px; padding: 6px; background: var(--yc-surface); border: 1px solid var(--yc-line); border-radius: var(--yc-radius-card); } .yc-team-menu > button { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--yc-radius-control); background: none; color: var(--yc-text); font-size: var(--yc-fs-body); font-weight: var(--yc-fw-semi); text-align: left; cursor: pointer; } .yc-team-menu > button:hover { background: var(--yc-surface-2); } .yc-team-menu > button.hidden { display: none !important; } .yc-team-menu > button i { color: var(--yc-text-3-aa); } .yc-team-backline { margin: -8px 0 4px; } .yc-team-backline .yc-link { gap: 4px; min-height: var(--yc-tap); font-size: 14px; color: var(--yc-text-2); text-decoration: none; } .yc-team-sheet-name { margin: 2px 0 0; font-size: 13px; color: var(--yc-text-3-aa); } .yc-team-sheet-actions { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; } .yc-team-sheet-links { border-top: 1px solid var(--yc-line); } .yc-team-sheet-row { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; padding: 0 4px; border: 0; border-bottom: 1px solid var(--yc-line); background: none; color: var(--yc-text); font-size: var(--yc-fs-body); font-weight: var(--yc-fw-semi); text-align: left; cursor: pointer; } .yc-team-sheet-row i { color: var(--yc-text-3-aa); font-size: 12px; } .yc-team-sheet-row:hover { background: var(--yc-surface-2); } /* 드문 동작(취소·복제·방출)은 작은 밑줄 글자. 자주 쓰는 동작만 버튼 크기를 쓴다. (UICON-18) */ .yc-bk-link { display: inline-flex; align-items: center; min-height: 28px; padding: 0; border: 0; background: none; color: var(--yc-muted); font-size: 12px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .yc-bk-link:hover { color: var(--yc-text); } .yc-bk-link.is-danger:hover { color: var(--yc-danger-aa); } .yc-num { font-variant-numeric: tabular-nums; } /* 콘솔 알림함 (UICON-10): 머리줄 종 버튼 + 오른쪽 패널. 색은 테마 토큰만 쓴다. */ .yc-notif-badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--yc-accent); color: var(--yc-on-accent); font-size: 10px; font-weight: 800; line-height: 18px; text-align: center; } .yc-notif-badge[hidden] { display: none; } .yc-notif-badge[data-yc-chat-count]:empty { display: none; } /* D135 머리 [대화] 배지 — 안 읽은 대화가 없으면 숨김 */ .yc-notif-panel { position: fixed; top: 72px; right: 16px; z-index: 60; display: flex; flex-direction: column; width: min(400px, calc(100vw - 32px)); max-height: calc(100vh - 88px); background: var(--yc-surface); color: var(--yc-text); border: 1px solid var(--yc-line); border-radius: 16px; box-shadow: 0 18px 48px rgba(15, 23, 42, .18); overflow: hidden; } .yc-notif-panel[hidden] { display: none; } .yc-notif-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--yc-line); } .yc-notif-head h2 { font-size: 15px; font-weight: 800; display: flex; align-items: center; gap: 6px; } .yc-notif-count { min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--yc-accent); color: var(--yc-on-accent); font-size: 11px; line-height: 20px; text-align: center; } .yc-notif-head-actions { display: flex; align-items: center; gap: 12px; } .yc-notif-close { width: 36px; height: 36px; border-radius: 10px; color: var(--yc-muted); } .yc-notif-close:hover { background: var(--yc-raised); color: var(--yc-text); } .yc-notif-push { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; background: var(--yc-accent-soft); font-size: 13px; } .yc-notif-push.is-muted { display: block; background: var(--yc-raised); color: var(--yc-muted); } .yc-notif-push button { flex-shrink: 0; min-height: 34px; padding: 0 12px; border-radius: 9px; background: var(--yc-accent); color: var(--yc-surface); font-size: 12px; font-weight: 800; } /* 관리자 콘솔 운영 알림 패널 (R2-174): 주선사 알림 패널과 같은 틀에 안내 한 줄 + 목록(항목 모양은 admin-pc.js loadAdminInbox). */ .yc-admin-notif-note { padding: 8px 16px 0; font-size: 12px; line-height: 1.5; color: var(--yc-muted); } .yc-admin-notif-list { padding: 10px 12px 14px; } /* 관리자 콘솔 [할 일] (r20 A-7): 머리줄 버튼의 열린 건수 배지는 남색(안 읽은 알림의 빨강과 구분), 긴급이 있으면 왼쪽 위 빨간 점. 패널은 알림 패널보다 넓다(제목·detail·횟수·[열기]·[처리됨]이 한 행). 필터 줄은 상태 탭·종류·테스트 포함. */ .yc-tasks-badge, .yc-tasks-count { background: var(--yc-accent); color: var(--yc-on-accent); } .yc-tasks-dot { position: absolute; top: 4px; left: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--yc-danger); box-shadow: 0 0 0 2px var(--yc-surface); } /* 버튼 안 아이콘 왼쪽 위(버튼 밖에 두면 종 배지 것으로 보인다) */ .yc-tasks-dot[hidden] { display: none; } .yc-tasks-panel { width: min(600px, calc(100vw - 32px)); } .yc-tasks-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 16px 0; } /* 콘솔 '⋯ 더 보기' 메뉴 (R2-175 · 버튼 위계): 반려·정지·임시 비밀번호·영구 삭제처럼 드문 조치를 접어 둔다. 누르는 자리 하한 44×44·항목 44px(2026-10-20 코덱스 판정 DSG-UX-ADMIN-TESTGRANT T2 — 옛 32×30·34, 결정 codex-round1-fixes-2026-10-20 §4 — 이 규칙을 쓰는 ⋯ 메뉴 모두). */ .yc-more { position: relative; display: inline-block; } .yc-more > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 8px; border: 1px solid var(--yc-line); border-radius: 8px; background: var(--yc-surface); color: var(--yc-muted); font-size: 15px; font-weight: 800; line-height: 1; cursor: pointer; user-select: none; } .yc-more > summary::-webkit-details-marker { display: none; } .yc-more > summary:hover, .yc-more[open] > summary { background: var(--yc-raised); color: var(--yc-text); } .yc-more > summary:focus-visible { outline: 2px solid var(--yc-focus); outline-offset: 2px; } .yc-more-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 45; display: grid; gap: 2px; min-width: 168px; padding: 6px; background: var(--yc-surface); color: var(--yc-text); border: 1px solid var(--yc-line); border-radius: 12px; box-shadow: 0 12px 32px rgba(15, 23, 42, .16); } .yc-more.is-up .yc-more-menu { top: auto; bottom: calc(100% + 4px); } .yc-more-menu > button { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 6px 10px; border: 0; border-radius: 8px; background: none; color: var(--yc-text); font-size: 12px; font-weight: 700; text-align: left; white-space: nowrap; cursor: pointer; } .yc-more-menu > button:hover:not(:disabled) { background: var(--yc-raised); } .yc-more-menu > button.is-danger { color: var(--yc-danger-aa); } .yc-more-menu > button:disabled { opacity: .5; cursor: not-allowed; } .yc-notif-list { overflow-y: auto; overscroll-behavior: contain; } .yc-notif-list li + li { border-top: 1px solid var(--yc-line); } .yc-notif-item { display: grid; gap: 3px; width: 100%; padding: 12px 16px; text-align: left; } .yc-notif-item:hover { background: var(--yc-raised); } .yc-notif-item.is-unread { background: var(--yc-accent-soft); } .yc-notif-title { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; line-height: 1.45; } .yc-notif-dot { flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--yc-accent); } .yc-notif-msg { font-size: 13px; line-height: 1.55; color: var(--yc-muted); white-space: pre-line; } .yc-notif-time { font-size: 12px; color: var(--yc-muted); font-variant-numeric: tabular-nums; } .yc-notif-empty { padding: 28px 16px; text-align: center; font-size: 13px; color: var(--yc-muted); } .yc-notif-empty.is-error { color: var(--yc-danger-aa); } @keyframes yc-row-flash { 0%, 60% { background: var(--yc-accent-soft); } 100% { background: transparent; } } .yc-product-ui #brokerJobsTableBody tr.yc-row-flash > td { animation: yc-row-flash 2.4s ease-out; } .yc-app-tag.is-muted { background: var(--yc-raised); color: var(--yc-muted); box-shadow: none; } /* 콘솔 버튼 끝의 작은 '앱' 표시: 누르면 앱 화면(결제·송금 기록)으로 넘어간다. (UICON-08) */ /* 면을 덧칠하면 채운 버튼 위 글자 대비가 떨어졌다(밝은 모드 흰 글자 24% 덧칠 = 3.4:1 — 6단계 검증). 면은 그대로 두고 글자색 테두리로만 묶는다. */ .yc-app-tag { display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 4px; background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 45%, transparent); font-size: 10px; font-weight: 800; line-height: 16px; letter-spacing: 0; } /* 채운 버튼 안의 작은 보조 표시(관리 콘솔 [환경 설정]의 '전환 ⇄'): 버튼 글자색을 그대로 쓰고 테두리로만 묶는다 — 면을 바꾸면 대비가 무너졌다(6단계 검증 1.1:1). */ .yc-btn-tag { display: inline-block; padding: 1px 6px; border-radius: 4px; background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 45%, transparent); font-size: 10px; font-weight: 700; line-height: 16px; white-space: nowrap; } /* 주선사 KPI '배차 대기' 아래 '요금 결제 대기 N건' 줄: 건수가 없으면 글자를 비우고 줄째 숨긴다(broker-pc.js updateBrokerMetrics). (r3-console-6) */ #metricPendingFeeLine:empty { display: none; } .yc-statement-retry { display:block; margin-top:16px; min-height:44px; padding:10px 16px; border:1px solid var(--yc-line); border-radius:var(--yc-radius-control); color:var(--yc-text); background:var(--yc-surface); font-size:14px; font-weight:700; } #ycJobStatement { font-size:14px; line-height:1.7; } #ycJobStatement header { position:sticky; top:0; z-index:1; background:var(--yc-surface); } #ycJobStatement footer { position:sticky; bottom:0; background:var(--yc-surface); } #ycJobStatement button { min-height:44px; } /* 입금 확인·신고는 금액과 선택지를 읽고 결정하는 화면이다. 보조 안내도 본문 크기를 유지한다. */ :is(#depositConfirmModal, #depositDisputeModal) :is(.text-xs, [class~="text-[11px]"]) { font-size:14px !important; line-height:1.65; } :is(#depositConfirmModal, #depositDisputeModal) .modal-footer button { min-height:48px; } #dcmShipperMemo { max-width:62%; overflow-wrap:anywhere; text-align:right; } .yc-statement-row { display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--yc-line); } #ycStatementBody > p { margin-bottom:6px; } /* Member settings: readable explanations, accessible toggles and consistent touch targets. */ :is(#unifiedProfileModal, #notificationSettingsModal) :is(p, label, .text-xs, [class*="text-[11px]"], [class*="text-[10px]"]) { font-size: 14px; line-height: 1.55; } :is(#unifiedProfileModal, #notificationSettingsModal) :is(input:not([type="checkbox"]):not([type="file"]), select, textarea) { font-size: 16px; } :is(#unifiedProfileModal, #notificationSettingsModal) button { min-height: 44px; } #memberProfileTabBar button { font-size: 14px; line-height: 1.4; } #notificationSettingsModal label:has(input[type="checkbox"]) { min-height: 44px; align-items: center; } #notificationSettingsModal input[type="checkbox"]:focus-visible + div { outline: 3px solid var(--yc-accent); outline-offset: 3px; } #saveNotificationSettingsButton:disabled { opacity: .6; cursor: wait; } #notifyTypeMuteBox label { align-items: flex-start; padding: 10px; } @media (max-width: 420px) { #notifyTypeMuteBox { grid-template-columns: minmax(0, 1fr); } } /* 내 정보 관리 기본 정보의 두 칸 줄은 입력 글자가 16px 인 폭(767px 까지) 전부에서 한 줄에 하나 — 420px 까지만 한 줄이던 때 640px 에서 과세 구분 '간이과세자 (세금계산서 미발급)'이 잘렸다 (r24 fix-5, V2-N3 같은 원인) */ @media (max-width: 767px) { #unifiedProfileModal #tabContent_basic .grid-cols-2 { grid-template-columns: minmax(0, 1fr); } } #notificationSettingsModal label:has(input.sr-only) > div { position: relative; } /* Personal records share the profile's readable input scale and touch targets. */ #manualSettlementModal label, #manualScheduleModal label { font-size: 14px; line-height: 1.55; } #manualSettlementModal .modal-header button, #manualScheduleModal .modal-header button { min-width: 44px; min-height: 44px; } #manualSettlementModal input[type="checkbox"] { width: 20px; height: 20px; flex: 0 0 20px; accent-color: var(--yc-accent); } #manualSettlementModal button { min-height: 44px; } #settlementFilterBar button { min-height: 44px; font-size: 14px; white-space: nowrap; } #settlementFilterBar button span { font-size: 12px; } /* 내 정보 창 머리는 두 모드 모두 테마의 면(surface-2)이다 — 고른 탭만 강조 채움 위 글자(r25 A8-01: 옛 '어두운 띠' 가정의 흰 글자·밝은 회색이 1.35~1.61:1 이었다). */ #memberProfileTabBar .profile-tab-btn { color: var(--yc-text-2) !important; } #memberProfileTabBar .profile-tab-btn.bg-blue-600 { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; } .yc-product-ui #brokerSettlementSummary p { font-size: 14px !important; line-height: 1.65; } /* 깜빡임(animate-pulse)은 글자를 흐리지 않는다 — 글자 있는 배지·칸은 색을 그대로 두고, 빈 점만 깜빡인다. 움직임 줄이기 설정이면 점도 멈춘다(r25 A9-12). */ .animate-pulse:not(:empty) { animation: none; } @media (prefers-reduced-motion: reduce) { .animate-pulse { animation: none; } } /* 지금 누를 수 없는 단추(관리 창 잠금·할 수 없는 조작) — 흐리게(opacity) 대신 면·보조 글자 토큰(대비 4.5:1 — r25 A9-17) */ .yc-btn-locked { background-color: var(--yc-surface-2) !important; color: var(--yc-text-2) !important; border-color: var(--yc-line) !important; } /* 지금 쓰이지 않는 설정 줄(꺼진 상위 설정 아래) — 흐리게(opacity) 대신 옅은 글자 토큰(대비 4.5:1 — r25 A8-11). */ .yc-row-muted, .yc-row-muted :is(span, p) { color: var(--yc-text-3-aa) !important; } /* 누르는 자리 24px 이상(WCAG 2.5.8 — r25 A8-04·A9-13·P-01): 마우스로 쓰는 화면(PC 앱·콘솔·콘솔 PC 모드)의 글자 크기 단추·체크·접는 줄·작은 링크. 손가락 기기의 44px 은 styles.css(@media pointer: coarse)가 덮는다. :where 로 특이도 0 — 단추마다 준 높이(min-h-[44px] 등)를 낮추지 않는다. */ :where(button:not([disabled]), [role="button"], summary, select, input[type="checkbox"]:not(.sr-only), input[type="radio"]:not(.sr-only)) { min-height: 24px; } :where(a.yc-bk-tel, a.yc-tap24) { display: inline-flex; align-items: center; min-height: 24px; } /* 문장 안 전화·메일 링크: 글줄 높이는 그대로 두고 누르는 영역만 44px 로 넓힌다(r24 V2-10). inline-flex 로 44px 상자를 만들면(터치 규칙 styles.css pointer: coarse) 그 줄만 높아져, 두 줄 안내가 세 줄 높이로 벌어졌다. inline 요소에는 min-height 가 먹지 않으므로 줄 상자는 커지지 않고, ::after 가 위아래로 누르는 영역을 만든다(누르면 링크로 간다). */ a.yc-tap-inline { display: inline; position: relative; } a.yc-tap-inline::after { content: ''; position: absolute; left: -6px; right: -6px; top: 50%; height: 44px; transform: translateY(-50%); } /* ── 화면 개편 3단계 + D108: 휴대폰 앱 — 목록 카드·상자 탭·관리 창(설계 §3·§4·§14, 토큰만) ─────────────────────────────── 목록은 한 장씩 떨어진 카드(D108 — 2026-10-01 배포 뒤 사용자 지적 '카드가 붙어 있어 구분감이 덜하다'): 카드마다 면(surface)·1px 구분선 테두리·모서리 12px· 안쪽 여백 14·16px, 카드 사이 8px(한 덩어리 목록 + 구분선은 쓰지 않는다). 카드 안은 어디(택배사 배지 + 캠프)·언제·얼마(금액 두 가지)·상태(점 + 다음에 할 일). 카드 하나에 주 동작 하나(누르면 관리 창·상세). 그림자·그라데이션 없음. 오더가 아닌 줄 목록(알림함·구독 관리 메뉴)은 .is-rows — 한 상자 + 구분선. */ .yc-jlist { background: transparent; border: 0; border-radius: 0; overflow: visible; } /* 카드 사이 8px — `* + .yc-jrow` 는 .yc-jrow 의 margin: 0(버튼 초기화)보다 앞서야 한다(특정도) */ .yc-jlist > * + *, .yc-jlist > * + .yc-jrow { margin-top: var(--yc-space-2); } .yc-jlist + .yc-jlist, .yc-jlist-gap { margin-top: var(--yc-space-3); } .yc-jrow { position: relative; display: block; width: 100%; min-height: var(--yc-tap); margin: 0; padding: 14px var(--yc-space-4); background: var(--yc-surface); border: 1px solid var(--yc-line); border-radius: var(--yc-radius-card); box-shadow: none; color: var(--yc-text); text-align: left; cursor: pointer; transition: background-color var(--yc-motion) ease, border-color var(--yc-motion) ease; } .yc-jrow:hover { background: var(--yc-surface-2); transform: none; box-shadow: none; } .yc-jrow:active { transform: none; } .yc-jrow:focus-visible { outline: 2px solid var(--yc-focus); outline-offset: -2px; } .yc-jrow.is-selected { background: var(--yc-accent-soft); border-color: var(--yc-accent); } .yc-jrow.is-static { cursor: default; } .yc-jrow.is-static:hover { background: var(--yc-surface); } /* 오더가 아닌 줄 목록(.is-rows — 알림함·구독 관리 메뉴): 한 상자 + 1px 구분선(카드로 나누지 않는다) */ .yc-jlist.is-rows { background: var(--yc-surface); border: 1px solid var(--yc-line); border-radius: var(--yc-radius-card); overflow: hidden; } .yc-jlist.is-rows > .yc-jrow { border: 0; border-radius: 0; padding: 12px var(--yc-space-4); } .yc-jlist.is-rows > * + *, .yc-jlist.is-rows > .yc-jrow + .yc-jrow { margin-top: 0; border-top: 1px solid var(--yc-line); } /* 카드 안: [배지 어디 ··· 얼마] / [언제 ··· 금액 기준] / [··· 금액 아래 줄(건당 × 건수 — 피드는 건수 · 예상 총액)] / [● 다음에 할 일 — 카드 전체 폭] */ .yc-jrow-line { display: flex; align-items: baseline; justify-content: space-between; gap: var(--yc-space-3); min-width: 0; } .yc-jrow-line.is-top { align-items: center; } .yc-jrow-line.is-sub { margin-top: 2px; } .yc-jrow-line.is-money { justify-content: flex-end; margin-top: 2px; } .yc-jrow-head { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; } .yc-jrow-sub { display: block; flex: 0 1 auto; min-width: 0; margin: 0; font-size: 13px; font-weight: var(--yc-fw-semi); line-height: 1.45; color: var(--yc-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; } .yc-jrow-title { display: block; flex: 1 1 auto; min-width: 0; margin: 0; font-size: var(--yc-fs-card); font-weight: var(--yc-fw-semi); line-height: 1.4; color: var(--yc-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .yc-jrow-when { display: block; flex: 1 1 auto; min-width: 0; margin: 0; font-size: 13px; line-height: 1.45; color: var(--yc-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; } .yc-jrow-status { display: block; margin: 6px 0 0; } .yc-jrow-status .yc-status { display: flex; align-items: flex-start; font-size: 13px; line-height: 1.45; } .yc-jrow-status .yc-status-dot { margin-top: 5px; } .yc-jrow-amount { display: block; flex: none; margin: 0; font-size: var(--yc-fs-card); font-weight: var(--yc-fw-bold); line-height: 1.4; color: var(--yc-text); white-space: nowrap; font-variant-numeric: tabular-nums; } .yc-jrow-meta { display: block; flex: none; margin: 0; font-size: var(--yc-fs-meta); line-height: 1.45; color: var(--yc-text-3-aa); white-space: nowrap; } .yc-jrow.is-muted :is(.yc-jrow-title, .yc-jrow-amount) { color: var(--yc-text-2); } /* 택배사·업종 배지(D108): 카드·표 제목 앞에 한 개 — 짧은 이름, 색 면 + 흰/검은 글자. 색 이름은 taxonomy.js tone(data-c — 클래스 이름을 조립하지 않는다), 색은 :root 의 --yc-c-* 토큰(원색 재매핑 구역 밖). 상태 칩이 아니다 — 상태는 점 + 글자. 어두운 모드의 쿠팡 검정은 1px 밝은 테두리(--yc-c-edge). */ .yc-courier { display: inline-block; flex: none; max-width: 9em; height: 20px; margin: 0; padding: 0 6px; border: 1px solid transparent; border-radius: 6px; font-size: 12px; font-weight: var(--yc-fw-bold); line-height: 18px; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; } .yc-courier[data-c="coupang"] { background: var(--yc-c-coupang); color: var(--yc-c-coupang-on); border-color: var(--yc-c-edge); } .yc-courier[data-c="cj"] { background: var(--yc-c-cj); color: var(--yc-c-cj-on); } .yc-courier[data-c="hanjin"] { background: var(--yc-c-hanjin); color: var(--yc-c-hanjin-on); } .yc-courier[data-c="lotte"] { background: var(--yc-c-lotte); color: var(--yc-c-lotte-on); } .yc-courier[data-c="logen"] { background: var(--yc-c-logen); color: var(--yc-c-logen-on); } .yc-courier[data-c="post"] { background: var(--yc-c-post); color: var(--yc-c-post-on); } .yc-courier[data-c="kurly"] { background: var(--yc-c-kurly); color: var(--yc-c-kurly-on); } .yc-courier[data-c="ssg"] { background: var(--yc-c-ssg); color: var(--yc-c-ssg-on); } .yc-courier[data-c="courier-other"] { background: var(--yc-c-courier-other); color: var(--yc-c-courier-other-on); } .yc-courier[data-c="parcel"] { background: var(--yc-c-parcel); color: var(--yc-c-parcel-on); } .yc-courier[data-c="fresh"] { background: var(--yc-c-fresh); color: var(--yc-c-fresh-on); } .yc-courier[data-c="moving"] { background: var(--yc-c-moving); color: var(--yc-c-moving-on); } .yc-courier[data-c="construction"] { background: var(--yc-c-construction); color: var(--yc-c-construction-on); } .yc-courier[data-c="agri"] { background: var(--yc-c-agri); color: var(--yc-c-agri-on); } .yc-courier[data-c="quick"] { background: var(--yc-c-quick); color: var(--yc-c-quick-on); } .yc-courier[data-c="industry-other"] { background: var(--yc-c-industry-other); color: var(--yc-c-industry-other-on); } .yc-jlist-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--yc-space-2); margin: var(--yc-space-5) 2px var(--yc-space-2); font-size: 13px; font-weight: var(--yc-fw-semi); color: var(--yc-text-2); } .yc-jlist-head:first-child { margin-top: 0; } .yc-jlist-foot { display: flex; justify-content: center; padding: var(--yc-space-2) var(--yc-space-4); background: transparent; } .yc-jlist.is-rows > .yc-jlist-foot { background: var(--yc-surface); } .yc-jlist-note { margin: var(--yc-space-2) 2px 0; font-size: var(--yc-fs-meta); line-height: 1.5; color: var(--yc-text-3-aa); } /* 피드 목록(#feedList)은 줄 목록일 때 격자를 쓰지 않는다(옛 카드 격자 규칙보다 앞선다) */ .yc-product-ui #feedList.yc-jlist:not(.hidden), .yc-product-ui #feedList.yc-jlist.feed-grid-layout:not(.hidden) { display: block !important; gap: 0 !important; grid-template-columns: none !important; } .yc-product-ui .job-card-item.yc-jrow { padding: 14px var(--yc-space-4); border: 1px solid var(--yc-line); border-radius: var(--yc-radius-card); box-shadow: none; } .yc-product-ui #feedList.yc-jlist > * + * { margin-top: var(--yc-space-2); } .yc-product-ui .job-card-item.yc-jrow.ring-2 { box-shadow: none; background: var(--yc-accent-soft); border-color: var(--yc-accent); } /* 상자 탭(할 일·진행 중·끝남)을 화면 여백 안에 둘 때 */ .yc-boxtabs.is-inset { padding: 0; margin: 0 0 var(--yc-space-3); background: transparent; } .yc-boxtabs .yc-boxtab-link { margin-left: auto; } /* 빈 상태: 한 문장 + 한 버튼(공용 .yc-empty) — 목록 상자 안에서 */ .yc-jlist > .yc-empty { background: var(--yc-surface); border: 1px solid var(--yc-line); border-radius: var(--yc-radius-card); } .yc-jlist.is-rows > .yc-empty { border: 0; border-radius: 0; } .yc-empty-title { margin: 0; font-size: 15px; font-weight: var(--yc-fw-semi); color: var(--yc-text); } /* 관리 창(목록 줄을 누르면 여는 시트): 머리(어디·언제·상태) + 본문(그 오더의 동작 — 주 동작 하나, 드문 동작은 작은 링크) */ #ycItemSheet .modal-content { max-height: 92dvh; } .yc-sheet-head { display: block; } .yc-sheet-title { margin: 0; font-size: var(--yc-fs-section); font-weight: var(--yc-fw-bold); line-height: 1.4; color: var(--yc-text); overflow-wrap: anywhere; } .yc-sheet-sub { margin: 2px 0 0; font-size: var(--yc-fs-body); line-height: 1.5; color: var(--yc-text-2); } .yc-sheet-status { margin: 8px 0 0; } .yc-sheet-amount { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--yc-line); } .yc-sheet-amount dt { font-size: var(--yc-fs-body); color: var(--yc-text-2); } .yc-sheet-amount dd { margin: 0; font-size: 20px; font-weight: var(--yc-fw-bold); color: var(--yc-text); font-variant-numeric: tabular-nums; text-align: right; } .yc-sheet-amount dd small { display: block; font-size: var(--yc-fs-meta); font-weight: var(--yc-fw-regular); color: var(--yc-text-3-aa); } .yc-sheet-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; padding-top: 12px; } /* 관리 창 안의 옛 카드 몸체는 창이 면·테두리를 주므로 겉 상자를 걷는다(내용·동작은 그대로) */ #ycItemSheetBody > [data-yc-manage-card] { margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; } #ycItemSheetBody [data-yc-manage-card] :is(.yc-mc-head, .yc-mc-dup) { display: none; } /* [용차] 탭 한 줄(화주·주선사): 화면 좌우 여백과 맞춘 상자 탭 · 오른쪽 끝 '전체 오더' */ .yc-boxtabs.is-page { padding: 0 var(--yc-space-4); gap: var(--yc-space-4); } /* 머리줄 알림 배지·하단 탭 배지: 작은 숫자(강조 색 하나 — 빨강 원색 배지 대신) */ .yc-head-badge { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--yc-accent); color: var(--yc-on-accent); font-size: 11px; font-weight: var(--yc-fw-bold); line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; } .yc-head-badge.hidden { display: none; } .yc-product-ui .bottom-nav-bar .nav-btn { position: relative; } .yc-product-ui .bottom-nav-bar .nav-btn .yc-tabbar-badge { top: 2px; } /* 상자 탭 줄 오른쪽 도구(달력·운행 불가 신고) */ .yc-boxtabs .yc-boxtab-tools { margin-left: auto; display: inline-flex; align-items: center; gap: var(--yc-space-3); white-space: nowrap; } .yc-boxtabs .yc-boxtab-tools .yc-link { font-size: 14px; } /* 한 줄 안내(목록 밖 — 글자 + 작은 링크 하나) */ .yc-nudge { display: flex; align-items: center; justify-content: space-between; gap: var(--yc-space-3); margin: 0 0 var(--yc-space-3); padding: 4px var(--yc-space-4); border-radius: var(--yc-radius-control); background: var(--yc-surface-2); color: var(--yc-text-2); font-size: var(--yc-fs-body); } .yc-nudge.hidden { display: none; } .yc-nudge p { margin: 0; min-width: 0; } .yc-nudge.is-danger { background: var(--yc-surface); box-shadow: inset 3px 0 0 var(--yc-danger); color: var(--yc-text); } .yc-nudge .yc-link { flex: none; } /* [정산](화주·주선사) 관리 창 본문: 보조 한 줄 · 안내 · 기사 · 주 동작(한 칸 띄워) · 작은 링크 */ #ycItemSheetBody [data-yc-manage-card="payout"] > * + * { margin-top: 6px; } #ycItemSheetBody [data-yc-manage-card="payout"] > .yc-btn { margin-top: var(--yc-space-4); } /* 알림함(화면 개편 3단계): 줄 = [● 제목 ··· 시각] / [분류 · 본문 한 줄]. 안 읽음은 점 하나(색 상자 없음), 읽음은 옅게. 줄 높이 78px 안 */ #notificationCenterList { padding: var(--yc-space-3) var(--yc-space-4) var(--yc-space-4); } .yc-nrow { position: relative; display: block; width: 100%; padding: 12px var(--yc-space-4); background: var(--yc-surface); color: var(--yc-text); cursor: pointer; transition: background-color var(--yc-motion) ease; } .yc-nrow + .yc-nrow { border-top: 1px solid var(--yc-line); } .yc-nrow:hover { background: var(--yc-surface-2); } .yc-nrow:focus-visible { outline: 2px solid var(--yc-focus); outline-offset: -2px; } .yc-nrow-line { display: flex; align-items: baseline; justify-content: space-between; gap: var(--yc-space-3); min-width: 0; } .yc-nrow-title { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; font-size: var(--yc-fs-card); font-weight: var(--yc-fw-bold); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .yc-nrow-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--yc-accent); } .yc-nrow-time { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: var(--yc-fs-meta); color: var(--yc-text-3-aa); white-space: nowrap; font-variant-numeric: tabular-nums; } .yc-nrow-star { font-size: 11px; color: var(--yc-text-2); } .yc-nrow-body { display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--yc-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .yc-nrow.is-read .yc-nrow-title { font-weight: var(--yc-fw-semi); color: var(--yc-text-2); } .yc-nrow.is-read .yc-nrow-body { color: var(--yc-text-3-aa); } .yc-boxtab-count.is-zero { display: none; } /* 줄 오른쪽 작은 건수(예: 더보기 > 알림함 'N개 안 읽음') — 강조 글자 하나, 빨강 알약 대신 */ .yc-count-note { font-size: 13px; font-weight: var(--yc-fw-semi); color: var(--yc-accent); font-variant-numeric: tabular-nums; } #notifDetailContent > * + * { margin-top: var(--yc-space-3); } /* 관리 창 본문 끝의 작은 링크 줄이 둘 이어지면(본문의 링크 + 창의 [오더 상세]) 한 덩어리로 */ .yc-sheet-links + .yc-sheet-links { padding-top: 0; } /* 달력 점: 끝남 = 옅은 글자 · 배차 = 강조 · 내 일정 = 보조 글자 · 팀원 = 보조 글자(테두리) */ .yc-cal-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--yc-text-3-aa); } .yc-cal-dot.is-done { background: var(--yc-text-3-aa); } .yc-cal-dot.is-doing { background: var(--yc-accent); } .yc-cal-dot.is-mine { background: var(--yc-text-2); } .yc-cal-dot.is-team { background: transparent; box-shadow: inset 0 0 0 1.5px var(--yc-text-2); } .yc-cal-day { width: 40px; height: 40px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; border-radius: var(--yc-radius-control); color: var(--yc-text); cursor: pointer; } .yc-cal-day:hover { background: var(--yc-surface-2); } .yc-cal-day.is-today { box-shadow: inset 0 0 0 1px var(--yc-accent); color: var(--yc-accent); font-weight: var(--yc-fw-bold); } .yc-cal-day.is-selected { background: var(--yc-accent); color: var(--yc-on-accent); font-weight: var(--yc-fw-bold); } .yc-cal-day .yc-cal-dots { position: absolute; bottom: 4px; display: flex; gap: 3px; } /* theme.css 는 tailwind.css 뒤에 실린다 — 공용 모양의 display 가 .hidden(숨김)을 이기지 않게 한다 */ [class*="yc-"].hidden { display: none !important; } /* 오더 찾기 머리: 흰 면 + 아래 구분선, [필터] 하나 + 고른 조건 한 줄 */ .yc-feed-head { padding: 10px var(--yc-space-4); background: var(--yc-surface); border-bottom: 1px solid var(--yc-line); } .yc-product-ui #feedStickyHeader.yc-feed-head { box-shadow: none; padding-top: 10px; padding-bottom: 10px; } .yc-btn-sm { min-height: 40px; padding: 0 14px; font-size: var(--yc-fs-body); gap: 6px; } .yc-filter-dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--yc-accent); } .yc-feed-summary { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--yc-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 오더 상세(화면 개편 3단계): 금액 한 덩어리 + 줄 목록(칩·색 상자 없음) */ #jobModal .modal-header { border-bottom: 1px solid var(--yc-line); } .yc-detail-status { margin: 0 0 6px; } .yc-detail-body { display: block; } .yc-detail-body > * + * { margin-top: var(--yc-space-4); } .yc-detail-money { padding: 4px 0 var(--yc-space-4); border-bottom: 1px solid var(--yc-line); } .yc-detail-money-summary { display: grid; gap: 4px; } .yc-detail-money-label { margin: 0; font-size: var(--yc-fs-body); color: var(--yc-text-2); } .yc-detail-money-label .opacity-70 { opacity: 1; color: var(--yc-text-3-aa); } .yc-detail-money-value { margin: 0; font-size: 26px; font-weight: var(--yc-fw-bold); line-height: 1.25; color: var(--yc-text); font-variant-numeric: tabular-nums; } .yc-detail-money-basis { margin: 0; font-size: 13px; color: var(--yc-text-2); } .yc-detail-receipt { margin-top: var(--yc-space-3); padding-top: var(--yc-space-3); border-top: 1px solid var(--yc-line); font-size: 13px; } .yc-detail-receipt:not(.hidden) { display: block; } .yc-detail-receipt .yc-freight-receipt { margin-top: 0; padding-top: 0; border-top: 0; } .yc-detail-list { margin: 0; } .yc-detail-list > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--yc-space-3); padding: 8px 0; font-size: var(--yc-fs-body); line-height: 1.5; } .yc-detail-list > div + div { border-top: 1px solid var(--yc-line); } .yc-detail-list > div.hidden, .yc-detail-list dd.hidden { display: none; } .yc-detail-list dt { flex: none; min-width: 72px; color: var(--yc-text-2); } .yc-detail-list dd { margin: 0; min-width: 0; text-align: right; color: var(--yc-text); overflow-wrap: anywhere; } .yc-detail-list dd .yc-link { position: relative; min-height: 32px; margin-left: 6px; font-size: 13px; } /* 줄 높이는 그대로 두고 누르는 자리만 44px(손가락 기기 — a.yc-tap-inline 과 같은 방식, r26 N-S3-5) */ .yc-detail-list dd .yc-link::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); } .yc-detail-section { padding-top: var(--yc-space-2); border-top: 1px solid var(--yc-line); } .yc-detail-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 4px 0 2px; } .yc-detail-section-head h4 { margin: 0; font-size: 14px; font-weight: var(--yc-fw-bold); color: var(--yc-text); } .yc-detail-meta { font-size: 13px; color: var(--yc-text-3-aa); } .yc-detail-note { margin: 0; font-size: 13px; line-height: 1.55; color: var(--yc-text-2); } .yc-detail-note.is-danger { color: var(--yc-danger-aa); } #modalSettlementCycleTxt { font-weight: var(--yc-fw-semi); color: var(--yc-text); background: none !important; border: 0 !important; padding: 0 !important; } #modalSettlementCycleDesc { display: block; font-size: 13px; color: var(--yc-text-2); } #modalSettlementDueNote:not(.hidden) { display: block; padding: 4px 0 8px; text-align: right; } /* ── 화면 개편 5단계(설계 §11): 관리 콘솔 — 첫 화면 한 줄 요약·할 일 큐, [배차 현황](관리) 상자·줄·관리 판(팀 콘솔 .yc-bk-* 모양을 같이 쓴다). 토큰만 ─────────── */ .yc-ad-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 52px; padding: 8px var(--yc-space-4); background: var(--yc-surface); border: 1px solid var(--yc-line); border-radius: var(--yc-radius-card); color: var(--yc-text-2); font-size: 14px; } .yc-ad-sum-item { display: inline-block; color: var(--yc-text-2); font-weight: var(--yc-fw-semi); } .yc-ad-sum-item b { color: var(--yc-text); font-weight: var(--yc-fw-bold); font-variant-numeric: tabular-nums; } .yc-ad-sum-item.is-link { min-height: 36px; padding: 0 2px; border: 0; background: none; cursor: pointer; text-decoration: none; } .yc-ad-sum-item.is-link:hover b, .yc-ad-sum-item.is-link:hover { color: var(--yc-accent); } .yc-ad-sum-item .yc-status { font-size: 14px; } .yc-ad-sum-sep { color: var(--yc-line); } .yc-ad-summary .yc-kpi-unknown { font-size: inherit !important; line-height: inherit !important; color: var(--yc-text-3-aa) !important; } .yc-ad-check { display: inline-flex; align-items: center; gap: 6px; color: var(--yc-text-2); font-size: 13px; font-weight: var(--yc-fw-semi); cursor: pointer; } .yc-ad-check input { width: 16px; height: 16px; accent-color: var(--yc-accent); } .yc-ad-foot { margin: 0; padding: 0 4px; text-align: right; } .yc-bk-table .yc-ad-owner .yc-bk-cell { max-width: 160px; } .yc-bk-table .yc-ov-urg { width: 28px; padding-right: 0 !important; } .yc-bk-table .yc-ov-kind .yc-bk-cell { max-width: 200px; color: var(--yc-text-2); } .yc-bk-table .yc-ov-title { font-weight: var(--yc-fw-semi); } .yc-bk-table .yc-ov-title .yc-bk-cell { max-width: 640px; } .yc-bk-table .yc-ov-when { width: 1%; color: var(--yc-text-3-aa); font-size: 13px; } .yc-bk-table .yc-ov-count { width: 1%; text-align: right; color: var(--yc-text-2); } .yc-ad-detail { margin: 0; padding: 12px; background: var(--yc-surface-2); border-radius: var(--yc-radius-control); color: var(--yc-text); font-size: 14px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; } .yc-ad-proof { padding-top: 4px; } .yc-bk-drawer-links .yc-more { display: inline-block; } /* [환경 설정]·[데이터베이스 관리](설계 §11 — 토큰·줄 모양만): 카드 → 구역(머리 + 줄). 카드 격자는 흰 면 하나 위에 구분선으로 나눈 구역들이 되고, 구역 안의 회색 상태 상자·둥근 테두리는 구분선 줄로 편다. 위험한 동작(데이터 정리·긴급 중지·모드 전환)의 확인·사유 절차는 그대로 — 색만 위험 토큰. */ .yc-ad-rows > .grid { gap: 0 !important; background: var(--yc-surface); border: 1px solid var(--yc-line); border-radius: var(--yc-radius-card); overflow: hidden; } .yc-ad-rows > .grid > div { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; border-bottom: 1px solid var(--yc-line) !important; } @media (min-width: 768px) { .yc-ad-rows > .grid > div:not(:last-child) { border-right: 1px solid var(--yc-line) !important; } } .yc-ad-rows > div:not(.grid) { box-shadow: none !important; } .yc-ad-rows > .grid > div > .space-y-3 > .flex:first-child :is(h3, h4) { font-size: 16px; } .yc-ad-rows > .grid > div .w-10.h-10 { width: 32px; height: 32px; font-size: 14px; border: 0 !important; background: var(--yc-surface-2) !important; color: var(--yc-text-2) !important; } .yc-ad-rows :is(div, p, dl, ol, ul, details).rounded-xl:is([class*="bg-slate-50"], [class*="bg-white"], [class*="bg-indigo-50"], [class*="bg-amber-50"], [class*="bg-emerald-50"], [class*="bg-blue-50"]):not(input):not(select):not(textarea):not(button) { background: transparent !important; border-radius: 0 !important; border-width: 0 0 1px 0 !important; border-color: var(--yc-line) !important; padding-left: 0 !important; padding-right: 0 !important; } .yc-ad-rows .space-y-1\.5 > .flex.justify-between, .yc-ad-rows .space-y-2 > .flex.justify-between { min-height: 32px; border-bottom: 1px solid var(--yc-line); } .yc-ad-rows .space-y-1\.5 > .flex.justify-between:last-child, .yc-ad-rows .space-y-2 > .flex.justify-between:last-child { border-bottom: 0; } /* ── 관리 콘솔 [환경 설정] 정보 구조(P1 — 설계 scratch/audit-r24/design/ux-refs-program-2026-10-08.md §2 · admin.html #view-operations). 머리(검색 칸 · 연동 상태 요약 칩) + 왼쪽 색인(묶음 다섯 · 보이는 묶음 강조 — 1280px 이상 220px, 1024~1279 는 위쪽 가로 칩 줄) + 오른쪽 한 열(최대 960px). 묶음 = 흰 면 + 머리(16px·700 · 한 줄 설명 12px 보조색), 안은 줄의 세로 나열(1px 선 — 격자 없음). 줄 = 왼쪽 제목(14px·700)·뜻 한 줄(12px — 넘치면 말줄임, [자세히]로 접힌 설명) | 오른쪽 값(14px·600 · 숫자 tabular)·상태 칩·동작 하나. 상태 칩 한 벌 .yc-chip — LIVE is-ok · TEST is-wait · 미등록 is-muted · 확인 필요 is-danger · 켜짐/꺼짐 is-accent/is-muted. 편집은 제자리(.yc-set-edit — [고치기]가 그 줄 안에서 연다), 위험 구역은 위험 토큰 1px 테두리 + 위험 테두리 버튼(채움 아님). 토큰만 ── */ .yc-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 8px; border: 1px solid var(--yc-line); border-radius: 9999px; background: var(--yc-surface-2); color: var(--yc-text-2); font-size: 12px; font-weight: var(--yc-fw-bold); line-height: 1.2; white-space: nowrap; } .yc-chip.is-ok { border-color: var(--yc-ok); background: var(--yc-ok-soft); color: var(--yc-ok-aa); } .yc-chip.is-wait { background: var(--yc-surface); color: var(--yc-text); } .yc-chip.is-muted { background: var(--yc-surface-2); color: var(--yc-text-2); } .yc-chip.is-danger { border-color: var(--yc-danger); background: var(--yc-danger-soft); color: var(--yc-danger-aa); } .yc-chip.is-accent { border-color: var(--yc-accent); background: var(--yc-accent-soft); color: var(--yc-accent); } .yc-set { --yc-set-nav-w: 220px; display: flex; flex-direction: column; gap: var(--yc-space-4); max-width: calc(var(--yc-set-nav-w) + 24px + 960px); } .yc-set [hidden], .yc-set [data-yc-set-miss] { display: none !important; } .yc-set-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } .yc-set-search { position: relative; flex: 1 1 260px; max-width: 420px; margin: 0; } .yc-set-search > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--yc-text-3-aa); font-size: 13px; pointer-events: none; } .yc-set-search input { width: 100%; min-height: 40px; padding: 0 12px 0 34px; border: 1px solid var(--yc-line); border-radius: var(--yc-radius-control); background: var(--yc-surface); color: var(--yc-text); font-size: 14px; } .yc-set-search input::placeholder { color: var(--yc-text-3-aa); } .yc-set-search input:focus { outline: 2px solid var(--yc-focus); outline-offset: 1px; border-color: var(--yc-accent); } .yc-set-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .yc-set-summary:empty { display: none; } .yc-set-sum-label { font-size: 12px; font-weight: var(--yc-fw-bold); color: var(--yc-text-2); } .yc-set-summary button.yc-chip { min-height: 32px; padding: 0 10px; cursor: pointer; } .yc-set-summary button.yc-chip:focus-visible { outline: 2px solid var(--yc-focus); outline-offset: 2px; } .yc-set-refresh { margin-left: auto; } .yc-set-empty { margin: 0; padding: 24px 16px; border: 1px solid var(--yc-line); border-radius: var(--yc-radius-card); background: var(--yc-surface); color: var(--yc-text-2); font-size: 14px; text-align: center; } .yc-set-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--yc-space-4); align-items: start; } .yc-set-main { display: flex; flex-direction: column; gap: var(--yc-space-6); min-width: 0; max-width: 960px; } /* 색인: 1024~1279 는 위쪽 가로 칩 줄(묶음만, 붙어 다닌다) */ .yc-set-nav { position: sticky; top: 0; z-index: 5; padding: 4px 0; background: var(--yc-page); } .yc-set-nav ol { margin: 0; padding: 0; list-style: none; } .yc-set-nav a { text-decoration: none; } .yc-set-nav-groups { display: flex; flex-wrap: wrap; gap: 8px; } .yc-set-nav-head { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1px solid var(--yc-line); border-radius: 9999px; background: var(--yc-surface); color: var(--yc-text); font-size: 13px; font-weight: var(--yc-fw-bold); } .yc-set-nav-head[aria-current="true"] { border-color: var(--yc-accent); background: var(--yc-accent-soft); color: var(--yc-accent); } .yc-set-nav a:focus-visible { outline: 2px solid var(--yc-focus); outline-offset: 2px; } .yc-set-nav-items { display: none; } @media (min-width: 1280px) { .yc-set-layout { grid-template-columns: var(--yc-set-nav-w) minmax(0, 960px); gap: var(--yc-space-6); } .yc-set-nav { top: 8px; max-height: calc(100vh - 88px); overflow-y: auto; padding: 0; background: none; } .yc-set-nav-groups { display: block; } .yc-set-nav-groups > li + li { margin-top: 8px; } .yc-set-nav-head { display: flex; min-height: 30px; padding: 0 12px; border: 0; border-radius: 8px; background: none; } .yc-set-nav-head[aria-current="true"] { background: var(--yc-accent-soft); box-shadow: inset 2px 0 0 var(--yc-accent); } .yc-set-nav-items { display: block; } .yc-set-nav-items a { display: flex; align-items: center; min-height: 26px; padding: 0 12px 0 20px; border-radius: 8px; color: var(--yc-text-2); font-size: 13px; line-height: 1.35; } .yc-set-nav-items a:hover, .yc-set-nav-head:not([aria-current="true"]):hover { background: var(--yc-surface-2); color: var(--yc-text); } } /* 묶음·줄 */ .yc-set-group { border: 1px solid var(--yc-line); border-radius: var(--yc-radius-card); background: var(--yc-surface); scroll-margin-top: 16px; } .yc-set-group-head { padding: 16px 16px 12px; } .yc-set-group-title { margin: 0; color: var(--yc-text); font-size: 16px; font-weight: var(--yc-fw-bold); line-height: 1.4; } .yc-set-group-desc { margin: 2px 0 0; color: var(--yc-text-2); font-size: 12px; line-height: 1.5; } .yc-set-row { min-height: 56px; padding: 12px 16px; border-top: 1px solid var(--yc-line); scroll-margin-top: 16px; } .yc-set-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: start; } .yc-set-text { min-width: 0; } .yc-set-title { margin: 0; color: var(--yc-text); font-size: 14px; font-weight: var(--yc-fw-bold); line-height: 20px; } .yc-set-desc { display: block; margin: 0; overflow: hidden; color: var(--yc-text-2); font-size: 12px; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; } .yc-set-more > summary { display: flex; align-items: center; gap: 6px; min-height: 24px; border-radius: 6px; list-style: none; cursor: pointer; } .yc-set-more > summary::-webkit-details-marker { display: none; } .yc-set-more > summary .yc-set-desc { flex: 0 1 auto; min-width: 0; } .yc-set-more > summary:focus-visible { outline: 2px solid var(--yc-focus); outline-offset: 2px; } .yc-set-more-tag { display: inline-flex; flex: none; align-items: center; gap: 5px; color: var(--yc-accent); font-size: 12px; font-weight: var(--yc-fw-semi); } .yc-set-more-tag::after { content: ''; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); } .yc-set-more[open] > summary .yc-set-more-tag::after { transform: translateY(1px) rotate(-135deg); } .yc-set-more > summary:hover .yc-set-more-tag { text-decoration: underline; text-underline-offset: 2px; } .yc-set-body { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; padding: 12px; border: 1px solid var(--yc-line); border-radius: var(--yc-radius-control); background: var(--yc-surface); color: var(--yc-text-2); font-size: 13px; } .yc-set-body-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .yc-set-body-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .yc-set-side { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; min-height: 38px; max-width: 380px; } .yc-set-value { color: var(--yc-text); font-size: 14px; font-weight: var(--yc-fw-semi); font-variant-numeric: tabular-nums; white-space: nowrap; } .yc-set-ro { color: var(--yc-text-3-aa); font-size: 11px; white-space: nowrap; } /* 동작: 테두리 버튼(주 버튼은 제자리 편집의 [저장]만 채운다)·작은 링크 */ .yc-set-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 1px solid var(--yc-line); border-radius: var(--yc-radius-control); background: var(--yc-surface); color: var(--yc-text); font-size: 13px; font-weight: var(--yc-fw-semi); line-height: 1.2; white-space: nowrap; cursor: pointer; transition: background-color var(--yc-motion) ease; } .yc-set-btn:hover:not(:disabled) { background: var(--yc-surface-2); } .yc-set-btn:focus-visible, .yc-set-link:focus-visible { outline: 2px solid var(--yc-focus); outline-offset: 2px; } .yc-set-btn:disabled { opacity: .45; cursor: not-allowed; } .yc-set-btn.is-primary { border-color: var(--yc-accent); background: var(--yc-accent); color: var(--yc-on-accent); } .yc-set-btn.is-primary:hover:not(:disabled) { background: var(--yc-accent-hover); } .yc-set-link { display: inline-flex; align-items: center; min-height: 28px; padding: 0 2px; border: 0; background: none; color: var(--yc-text-2); font-size: 12px; font-weight: var(--yc-fw-semi); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .yc-set-link:hover { color: var(--yc-text); } /* 제자리 편집([고치기] → 그 줄 안의 입력 칸 + [저장][취소]) — 여닫기는 admin-pc.js 의 옛 창 함수(display 를 바꾼다) */ .yc-set-edit { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; padding: 16px; border: 1px solid var(--yc-accent); border-radius: var(--yc-radius-control); background: var(--yc-surface); color: var(--yc-text); } .yc-set-row:has(.yc-set-edit:not(.hidden)) .yc-set-edit-btn { visibility: hidden; } .yc-set-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; } .yc-set-field { display: flex; flex-direction: column; gap: 4px; margin: 0; } .yc-set-field-label { color: var(--yc-text-2); font-size: 12px; font-weight: var(--yc-fw-bold); } .yc-set-input { width: 100%; max-width: 280px; min-height: 40px; padding: 8px 12px; border: 1px solid var(--yc-line); border-radius: var(--yc-radius-control); background: var(--yc-surface); color: var(--yc-text); font-size: 14px; } textarea.yc-set-input { max-width: none; min-height: 64px; } .yc-set-input:focus { outline: 2px solid var(--yc-focus); outline-offset: 1px; border-color: var(--yc-accent); } .yc-set-hint { margin: 0; color: var(--yc-text-2); font-size: 12px; line-height: 1.5; } .yc-set-preview { display: flex; flex-direction: column; gap: 4px; color: var(--yc-text); font-size: 13px; } .yc-set-preview:empty { display: none; } .yc-set-check { display: flex; align-items: flex-start; gap: 8px; color: var(--yc-text); font-size: 13px; cursor: pointer; } .yc-set-check input { flex: none; width: 16px; height: 16px; margin-top: 2px; accent-color: var(--yc-accent); } .yc-set-error { margin: 0; color: var(--yc-danger-aa); font-size: 12px; font-weight: var(--yc-fw-bold); } .yc-set-edit-acts { display: flex; justify-content: flex-end; gap: 8px; } /* 위험 구역: 위험 토큰 1px 테두리 · 줄의 버튼은 위험 테두리(채움 아님). 긴급 중지 단추는 그리는 JS 가 className 을 통째로 바꾸므로 구조로 덮는다 */ .yc-set-group.is-danger { border-color: var(--yc-danger); } .yc-set-group.is-danger .yc-set-group-title { color: var(--yc-danger-aa); } .yc-set-group.is-danger .yc-set-side > button { width: auto !important; min-height: 32px !important; padding: 0 12px !important; border: 1px solid var(--yc-danger) !important; border-radius: var(--yc-radius-control) !important; background: var(--yc-surface) !important; color: var(--yc-danger-aa) !important; box-shadow: none !important; font-size: 13px !important; font-weight: var(--yc-fw-semi) !important; } .yc-set-group.is-danger .yc-set-side > button:hover:not(:disabled) { background: var(--yc-danger-soft) !important; } /* 관리 판(드로어)이 열리면 표가 판 왼쪽에 맞게 줄어든다(팀 콘솔과 같은 규칙) — 등록자 칸도 줄인다 */ body.yc-bk-drawer-open .yc-bk-table .yc-ad-owner .yc-bk-cell { max-width: 100px; } /* 탭 안 상자 고르기의 [전체] 건수는 옅게(할 일로 읽히지 않게) — [처리할 것]의 건수는 강조 색(.yc-boxtab-count) */ .yc-boxtab-count.yc-ad-count-muted { color: var(--yc-text-3-aa); font-weight: var(--yc-fw-semi); } /* ── 관리 콘솔 탭 머리 한 틀(P2a — 설계 scratch/audit-r24/design/ux-refs-p2a-admin-tabs-2026-10-08.md §2, 배차 현황이 기준). [제목 줄 .yc-tab-head] 상태 칩(P1 .yc-chip) + [자세히](P1 .yc-set-more·.yc-set-body — 진단·안내 원문은 접힘 안) | 머리 동작(주 버튼 1 · 테두리 버튼 ≤2 — .yc-bk-btn) → [요약 .yc-kpis] KPI 카드 ≤4(제목 12px 보조색 · 값 20px 700 tabular · 아래 한 줄 12px, 아이콘 없음) → [상자 줄] 팀 콘솔·배차 현황과 같은 .yc-bk-toolbar(상자 탭 + 거르기 — 표 둘인 탭은 표마다 머리로) → [본문] → 빈 상태는 공용 .yc-empty(아이콘 + 한 문장 + 한 줄). 토큰만 ── */ .yc-tab-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; } .yc-tab-more { flex: 1 1 320px; min-width: 0; } .yc-tab-more > summary { flex-wrap: wrap; min-height: 36px; } .yc-tab-more .yc-ad-foot { padding: 0; text-align: left; } .yc-tab-chips { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; } .yc-tab-chips:empty { display: none; } .yc-tab-acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-left: auto; } .yc-bk-btn-count { min-width: 20px; padding: 0 6px; border-radius: 9999px; background: var(--yc-surface-2); color: var(--yc-text); font-size: 12px; font-variant-numeric: tabular-nums; line-height: 20px; text-align: center; } .yc-bk-btn.is-primary .yc-bk-btn-count { background: var(--yc-on-accent); color: var(--yc-accent); } .yc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; } .yc-kpi { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px 16px; border: 1px solid var(--yc-line); border-radius: var(--yc-radius-card); background: var(--yc-surface); } .yc-kpi-label { color: var(--yc-text-2); font-size: 12px; font-weight: var(--yc-fw-semi); line-height: 18px; } .yc-kpi-value { color: var(--yc-text); font-size: 20px; font-weight: var(--yc-fw-bold); line-height: 28px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .yc-kpi-value small { margin-left: 2px; color: var(--yc-text-2); font-size: 12px; font-weight: var(--yc-fw-semi); } .yc-kpi-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-height: 18px; color: var(--yc-text-2); font-size: 12px; line-height: 18px; } /* 거르기가 많은 상자 줄(용차콜 정산): 상자 탭 옆 남은 폭 안에서 오른쪽부터 채우고 넘치면 다음 줄로 */ .yc-bk-tools.is-fill { flex: 1 1 0; min-width: 0; justify-content: flex-end; } .yc-bk-tools.is-fill .yc-bk-select { max-width: 168px; } .yc-bk-tools.is-fill .yc-bk-search { width: 220px; } .yc-bk-toolbar:has(> .yc-bk-tools.is-fill) > .yc-boxtabs { align-self: flex-start; } .yc-bk-tools.is-end { flex-basis: 100%; justify-content: flex-end; gap: 16px; padding-top: 0; } .yc-bk-toolbar-title { margin: 0; color: var(--yc-text); font-size: 15px; font-weight: var(--yc-fw-bold); white-space: nowrap; } .yc-bk-toolbar-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; min-height: 50px; } .yc-empty > .yc-empty-icon { color: var(--yc-text-3-aa); font-size: 24px; line-height: 1; } /* 오류 상자(P5 §1-3 — utils.js ycEmptyHtml tone 'danger'): 빈 상태와 같은 모양, 아이콘만 danger 톤 */ .yc-empty.is-danger > .yc-empty-icon { color: var(--yc-danger-aa); } .yc-empty-sub { margin: 0; max-width: 520px; color: var(--yc-text-2); font-size: 13px; line-height: 1.55; } .yc-bk-empty > .yc-empty { padding: 0; } /* 서류 심사: 상자 줄이 왼쪽 목록 칸의 머리(칸 테두리 안 — 아래 구분선만) */ #userListPane > .yc-bk-toolbar { border-width: 0 0 1px; border-radius: 0; } #userListPane > .yc-bk-toolbar .yc-bk-search { flex: 1 1 180px; width: auto; } #inspectorPane > .yc-empty { align-content: center; } /* ── 관리 판 공통 순서 · 용차콜 정산 줄 표(P2b — 설계 scratch/audit-r24/design/ux-refs-p2b-drawer-team-console-2026-10-08.md §2-1·§2-2). 관리 판(관리 콘솔·팀 콘솔 공용 .yc-bk-drawer): 머리 = 제목(택배사 배지 + 캠프) · 한 줄(짧은 번호 · 운송일 · 입차) · 상태 알약(job-box 짧은 말·톤) → 본문 = 안내 한 줄(job-box 다음에 할 일) → 주 동작 하나 → 상세 묶음 넷(.yc-bk-fold — 운행 · 정산 · 당사자·연락 · 기록, 앞 둘 펼침) → 드문 동작(작은 링크) 맨 아래. [용차콜 정산] 표는 배차 현황과 같은 줄(.yc-bk-table) — 고르기 칸은 24px 누르는 자리. 토큰만 ── */ .yc-bk-drawer-title .yc-courier { margin-right: 6px; vertical-align: 2px; } .yc-bk-drawer-pill { display: inline-flex; align-items: center; min-height: 26px; margin: 8px 0 0; padding: 0 10px; border: 1px solid var(--yc-line); border-radius: 9999px; background: var(--yc-surface-2); } .yc-bk-drawer-pill:empty { display: none; } .yc-bk-drawer-pill .yc-status { font-size: 13px; } .yc-bk-drawer-note { margin: -8px 0 0; color: var(--yc-text-2); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; } .yc-bk-folds { display: flex; flex-direction: column; border-top: 1px solid var(--yc-line); } .yc-bk-fold { border-bottom: 1px solid var(--yc-line); } .yc-bk-fold > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; color: var(--yc-text); font-size: 14px; font-weight: var(--yc-fw-semi); list-style: none; cursor: pointer; } .yc-bk-fold > summary::-webkit-details-marker { display: none; } .yc-bk-fold > summary::after { content: ''; flex: none; width: 6px; height: 6px; margin-right: 4px; border-right: 1.5px solid var(--yc-text-2); border-bottom: 1.5px solid var(--yc-text-2); transform: translateY(-2px) rotate(45deg); } .yc-bk-fold[open] > summary::after { transform: translateY(1px) rotate(-135deg); } .yc-bk-fold > summary:focus-visible { outline: 2px solid var(--yc-focus); outline-offset: 2px; } .yc-bk-fold > .yc-bk-facts { border-top: 0; } .yc-bk-fold > .yc-bk-facts > div:last-child { border-bottom: 0; } .yc-bk-fold-extra { padding: 0 0 10px; } .yc-bk-table .yc-ad-sel { width: 1%; padding-right: 0; } .yc-ad-pick { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; cursor: pointer; } .yc-ad-pick input { width: 16px; height: 16px; margin: 0; cursor: pointer; } .yc-ad-pick input:disabled { cursor: not-allowed; opacity: .35; } /* 팀 콘솔 [스케줄](P2b §2-3): 머리 틀은 한 주 표 그리기(team-screens-ui.js) 안에 있다 — 아래 주 넘김 줄과 탭 사이 간격(.yc-bk-view gap)만큼 띄운다 */ #bkTeamWeekPane > .yc-tab-head { margin-bottom: var(--yc-space-3); } /* ── 화면 개편 4단계(설계 §8 ⑦): 앱의 떠 있는 카드 그림자 → 1px 선 · [더보기] 프로필 칩·신뢰 지수 태그 → 점 + 글자(토큰만) ─────────────── */ .yc-app :is(.animate-float, [class*="shadow-[0_20px"], [class*="shadow-[0_8px"]):not(.modal-content):not(.alert-modal-content) { box-shadow: none !important; border: 1px solid var(--yc-line) !important; } .yc-app :is([class*="shadow-[0_-4px"], [class*="shadow-[0_-10px"]) { box-shadow: none !important; } .yc-app :is(#membershipBadge, #myTrustGradeBadge, #myTrustTopTags > span, .yc-dot-label) { display: inline-flex !important; align-items: center; gap: 6px; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; color: var(--yc-text-2) !important; font-size: 13px !important; font-weight: var(--yc-fw-semi) !important; line-height: 1.5; white-space: nowrap; } .yc-app :is(#membershipBadge, #myTrustGradeBadge, #myTrustTopTags > span, .yc-dot-label)::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--yc-text-3-aa); } .yc-app #myTrustTopTags { gap: 4px 14px !important; } /* 팀 찾기(D123 — assets/js/team-board-ui.js): 고르기 칩·빠른 칩·고른 조건 칩·작은 표시. 원색 클래스 대신 토큰으로 — 앱·팀 콘솔·관리 콘솔, 밝음·어두움에서 같게(자동 색 구역의 !important 규칙과 다투지 않게). 고른 칩은 강조 면 하나. */ .yc-pick { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--yc-line); border-radius: 9999px; background: var(--yc-surface); color: var(--yc-text-2); font-size: 12px; font-weight: var(--yc-fw-bold); line-height: 1.2; white-space: nowrap; cursor: pointer; transition: background-color var(--yc-motion) ease, color var(--yc-motion) ease, border-color var(--yc-motion) ease; } input:checked + .yc-pick, .yc-pick[aria-pressed="true"] { background: var(--yc-accent); border-color: var(--yc-accent); color: var(--yc-on-accent); } input:focus-visible + .yc-pick, .yc-pick:focus-visible { outline: 2px solid var(--yc-focus); outline-offset: 2px; } .yc-pick-x { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 10px; border: 1px solid var(--yc-accent); border-radius: 9999px; background: var(--yc-accent-soft); color: var(--yc-accent); font-size: 12px; font-weight: var(--yc-fw-bold); white-space: nowrap; cursor: pointer; } .yc-tb-tag { display: inline-flex; align-items: center; padding: 2px 6px; border: 1px solid var(--yc-line); border-radius: 6px; background: var(--yc-surface-2); color: var(--yc-text-2); font-size: 11px; font-weight: var(--yc-fw-bold); line-height: 1.3; white-space: nowrap; } .yc-tb-tag.is-accent { border-color: var(--yc-accent); background: var(--yc-accent-soft); color: var(--yc-accent); } .yc-tb-tag.is-ok { border-color: var(--yc-ok); background: var(--yc-ok-soft); color: var(--yc-ok-aa); } .yc-tb-tag.is-wait { border-color: var(--yc-line); background: var(--yc-surface); color: var(--yc-text); } .yc-tb-box { padding: 12px; border: 1px solid var(--yc-line); border-radius: var(--yc-radius-card); background: var(--yc-surface); } .yc-tb-box.is-accent { border-color: var(--yc-accent); } .yc-tb-box.is-muted { opacity: .7; } .yc-tb-note { padding: 12px; border-radius: var(--yc-radius-control); background: var(--yc-surface-2); color: var(--yc-text); font-size: 13px; line-height: 1.55; white-space: pre-line; } /* 팀 로고(2026-10-08 atlas-followups §3 — partner-ui.js ycTeamLogoHtml): 보이는 곳마다 같은 둥근 썸네일, 로고가 없으면 팀 이름 첫 글자 원. 크기 28·32·48·64 */ .yc-team-logo { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 9999px; border: 1px solid var(--yc-line); background: var(--yc-surface-2); object-fit: cover; overflow: hidden; vertical-align: middle; } .yc-team-logo.is-letter { background: var(--yc-accent-soft); color: var(--yc-accent); font-weight: var(--yc-fw-bold); line-height: 1; } .yc-team-logo.is-28 { width: 28px; height: 28px; font-size: 13px; } .yc-team-logo.is-32 { width: 32px; height: 32px; font-size: 14px; } .yc-team-logo.is-48 { width: 48px; height: 48px; font-size: 20px; } .yc-team-logo.is-64 { width: 64px; height: 64px; font-size: 26px; } /* 팀 찾기 모집 카드(team-board-ui.js): 왼쪽 로고 48px + 오른쪽 줄들 */ .yc-tb-card { display: flex; align-items: flex-start; gap: var(--yc-space-3); } .yc-tb-card-main { display: block; flex: 1 1 auto; min-width: 0; } /* 팀 화면 셋(D123 ③ — assets/js/team-screens-ui.js): [커뮤니티] 글·댓글과 [스케줄] 한 주 보기. 같은 토큰만 쓴다. */ /* 팀 칸 줄: 고른 칸은 aria-selected(main.js applyTeamSubtabVisibility) — 옛 색 클래스(text-indigo-600·border-indigo-600)는 자동 색 구역이 같은 색으로 덮는다 */ #teamSubtabBar .yc-subtab-btn { color: var(--yc-text-2) !important; border-bottom-color: transparent !important; min-height: 44px; } #teamSubtabBar .yc-subtab-btn[aria-selected="true"] { color: var(--yc-text) !important; border-bottom-color: var(--yc-accent) !important; } #teamSubtabBar .yc-subtab-btn:focus-visible { outline: 2px solid var(--yc-focus); outline-offset: -2px; } .yc-tf-compose { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--yc-line); border-radius: var(--yc-radius-card); background: var(--yc-surface); } .yc-tf-compose textarea, .yc-tf-reply textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--yc-line); border-radius: var(--yc-radius-control); background: var(--yc-surface); color: var(--yc-text); font-size: 14px; line-height: 1.5; resize: vertical; } .yc-tf-compose textarea:focus-visible, .yc-tf-reply textarea:focus-visible { outline: 2px solid var(--yc-focus); outline-offset: 1px; } .yc-tf-hint { color: var(--yc-text-3-aa); font-size: 12px; line-height: 1.5; } .yc-tf-body { margin-top: 6px; color: var(--yc-text); font-size: 14px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; } .yc-tf-body.is-muted { color: var(--yc-text-3-aa); font-size: 13px; } .yc-tf-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 6px; } .yc-tf-act { display: inline-flex; align-items: center; min-height: 32px; padding: 0; border: 0; background: none; color: var(--yc-text-3-aa); font-size: 12px; font-weight: var(--yc-fw-semi); text-decoration: none; cursor: pointer; } .yc-tf-act:hover, .yc-tf-act:focus-visible { color: var(--yc-text); text-decoration: underline; } .yc-tf-act.is-main { color: var(--yc-accent); font-weight: var(--yc-fw-bold); } .yc-tf-thread { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--yc-line); display: flex; flex-direction: column; gap: 8px; } .yc-tf-comment { padding: 8px 10px; border-radius: var(--yc-radius-control); background: var(--yc-surface-2); } .yc-tf-comment .yc-tf-body { margin-top: 2px; font-size: 13px; } .yc-tf-reply { display: flex; gap: 8px; align-items: flex-end; } .yc-tf-reply textarea { min-height: 40px; font-size: 13px; } .yc-tf-sec { margin: 18px 2px 8px; color: var(--yc-text); font-size: 13px; font-weight: var(--yc-fw-bold); } .yc-tf-reward { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--yc-accent); font-size: 13px; font-weight: var(--yc-fw-semi); line-height: 1.5; } .yc-tf-reward b { color: var(--yc-text); font-weight: var(--yc-fw-bold); } .yc-tf-reward.yc-tb-box { margin: 0 0 8px; padding: 10px 12px; } .yc-tw-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .yc-tw-nav-btn { min-width: 44px; min-height: 44px; border: 1px solid var(--yc-line); border-radius: var(--yc-radius-control); background: var(--yc-surface); color: var(--yc-text-2); } .yc-tw-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 10px; } .yc-tw-day { display: flex; flex-direction: column; align-items: center; gap: 1px; min-height: 52px; padding: 6px 0; border: 1px solid var(--yc-line); border-radius: var(--yc-radius-control); background: var(--yc-surface); color: var(--yc-text-2); font-size: 11px; font-weight: var(--yc-fw-semi); cursor: pointer; } .yc-tw-day b { color: var(--yc-text); font-size: 15px; font-weight: var(--yc-fw-bold); } .yc-tw-day small { color: var(--yc-text-3-aa); font-size: 10px; } .yc-tw-day.is-today b { color: var(--yc-accent); } .yc-tw-day[aria-pressed="true"] { border-color: var(--yc-accent); background: var(--yc-accent); color: var(--yc-on-accent); } .yc-tw-day[aria-pressed="true"] b, .yc-tw-day[aria-pressed="true"] small { color: var(--yc-on-accent); } .yc-tw-state { display: inline-flex; align-items: center; gap: 6px; flex: none; color: var(--yc-text-2); font-size: 12px; font-weight: var(--yc-fw-bold); white-space: nowrap; } .yc-tw-state::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--yc-line); } .yc-tw-state[data-s="work"] { color: var(--yc-accent); } .yc-tw-state[data-s="work"]::before { background: var(--yc-accent); } .yc-tw-state[data-s="off"]::before { background: var(--yc-text-3-aa); } .yc-tw-state[data-s="custom"]::before, .yc-tw-state[data-s="standby"]::before { background: var(--yc-ok-mark); } /* 팀 콘솔(PC) 팀 화면 — D123 ⑤: [커뮤니티] 두 칸(팀 공지 · 팀원 글, 좁으면 위아래) · [스케줄] 한 주를 한 표로(행 팀원 · 열 요일) */ .yc-bk-community { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; } @media (min-width: 1280px) { .yc-bk-community { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } } .yc-bk-community-col { min-width: 0; } .yc-tn-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .yc-tn-head .yc-tf-sec { margin: 4px 2px 8px; } .yc-tn-title { margin: 6px 0 0; color: var(--yc-text); font-size: 14px; font-weight: var(--yc-fw-bold); line-height: 1.45; overflow-wrap: anywhere; } .yc-tn-preview { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; color: var(--yc-text-2); font-size: 13px; white-space: normal; } .yc-tw-tablewrap { overflow-x: auto; border: 1px solid var(--yc-line); border-radius: var(--yc-radius-card); background: var(--yc-surface); } .yc-tw-table { width: 100%; border-collapse: collapse; color: var(--yc-text); font-size: 13px; } .yc-tw-table th, .yc-tw-table td { padding: 0; border-bottom: 1px solid var(--yc-line); text-align: center; vertical-align: middle; } .yc-tw-table thead th { padding: 10px 6px; color: var(--yc-text-2); font-size: 12px; font-weight: var(--yc-fw-semi); white-space: nowrap; } .yc-tw-table thead th b { color: var(--yc-text); font-weight: var(--yc-fw-bold); } .yc-tw-table thead th small { display: block; color: var(--yc-text-3-aa); font-size: 11px; font-weight: var(--yc-fw-regular); } .yc-tw-table thead th:first-child, .yc-tw-table tbody th { padding: 10px 14px; text-align: left; } .yc-tw-table tbody th { min-width: 190px; font-weight: var(--yc-fw-semi); } .yc-tw-table tbody th small { display: block; margin-top: 2px; color: var(--yc-text-3-aa); font-size: 12px; font-weight: var(--yc-fw-regular); } .yc-tw-table tbody tr:last-child th, .yc-tw-table tbody tr:last-child td { border-bottom: 0; } .yc-tw-table .is-today { background: var(--yc-accent-soft); } .yc-tw-who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; color: var(--yc-text); } .yc-tw-cell { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; padding: 6px 4px; border: 0; background: none; color: inherit; font: inherit; } button.yc-tw-cell { cursor: pointer; } button.yc-tw-cell:hover { background: var(--yc-surface-2); } button.yc-tw-cell:focus-visible { outline: 2px solid var(--yc-focus); outline-offset: -2px; } .yc-tw-table .yc-tw-state[data-s="none"] { color: var(--yc-text-3-aa); font-weight: var(--yc-fw-regular); } .yc-tw-table .yc-tw-state[data-s="none"]::before { display: none; } /* ── 빠르게 채우기(D127 S3·§14 — assets/js/intake-ui.js): 등록 창 1단계 맨 위 한 줄(늘 보임 — 접지 않음). 선택지 셋 [직전 오더 불러오기]·[AI 자동 기입]·[사진으로 AI 기입] 같은 크기(세 칸 격자), 누르면 그 아래 판 하나. 마지막으로 쓴 방법(.is-last)은 옅은 강조만. 보조 위계 — 등록 버튼보다 작고 옅게(옅은 면·선·본문 글자 13px), 필수 표시 없음. 채운 칸은 옅은 강조 테두리 + 작은 '확인해 주세요', 요약 띠 [보기]는 첫 낮은 확신 칸으로. */ .yc-ai-box { border: 1px solid var(--yc-line); border-radius: var(--yc-radius-card); background: var(--yc-surface-2); } .yc-qf { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; } .yc-qf-title { margin: 0; color: var(--yc-text-2); font-size: 12px; font-weight: var(--yc-fw-semi); line-height: 1.4; } .yc-qf-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .yc-qf-opt { display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 6px 6px; border: 1px solid var(--yc-line); border-radius: var(--yc-radius-control); background: var(--yc-surface); color: var(--yc-text-2); font-size: 13px; font-weight: var(--yc-fw-semi); line-height: 1.3; text-align: center; word-break: keep-all; cursor: pointer; } .yc-qf-opt:hover { color: var(--yc-accent); border-color: color-mix(in srgb, var(--yc-accent) 35%, var(--yc-line)); } .yc-qf-opt:focus-visible { outline: 2px solid var(--yc-focus); outline-offset: 1px; } .yc-qf-opt.is-last { border-color: color-mix(in srgb, var(--yc-accent) 30%, var(--yc-line)); } .yc-qf-opt.is-open { color: var(--yc-accent); border-color: color-mix(in srgb, var(--yc-accent) 55%, var(--yc-line)); background: var(--yc-accent-soft); } .yc-qf-panel { display: flex; flex-direction: column; gap: 8px; padding-top: 2px; } .yc-qf-panel.hidden, .yc-qf-band.hidden, .yc-qf-see.hidden { display: none; } .yc-qf-panel textarea { width: 100%; min-height: 84px; padding: 10px 12px; border: 1px solid var(--yc-line); border-radius: var(--yc-radius-control); background: var(--yc-surface); color: var(--yc-text); font-size: 14px; line-height: 1.5; resize: vertical; } .yc-qf-panel textarea:focus-visible { outline: 2px solid var(--yc-focus); outline-offset: 1px; } .yc-qf-warn { margin: 0; color: var(--yc-danger-aa); font-size: 13px; font-weight: var(--yc-fw-semi); line-height: 1.5; } .yc-qf-band { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--yc-radius-control); background: var(--yc-accent-soft); color: var(--yc-text); font-size: 12px; font-weight: var(--yc-fw-semi); line-height: 1.4; } .yc-qf-band > span { flex: 1; min-width: 0; } .yc-qf-see { flex: none; min-height: 32px; padding: 4px 10px; border: 1px solid color-mix(in srgb, var(--yc-accent) 40%, var(--yc-line)); border-radius: var(--yc-radius-control); background: var(--yc-surface); color: var(--yc-accent); font-size: 12px; font-weight: var(--yc-fw-semi); cursor: pointer; } .yc-qf-see:focus-visible { outline: 2px solid var(--yc-focus); outline-offset: 1px; } .yc-qf-focus { outline: 2px solid var(--yc-accent) !important; outline-offset: 2px; } .yc-ai-actions { display: flex; flex-wrap: wrap; gap: 6px; } .yc-ai-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 36px; padding: 6px 12px; border: 1px solid var(--yc-line); border-radius: var(--yc-radius-control); background: var(--yc-surface); color: var(--yc-text-2); font-size: 13px; font-weight: var(--yc-fw-semi); cursor: pointer; } .yc-ai-btn:hover { color: var(--yc-accent); border-color: color-mix(in srgb, var(--yc-accent) 35%, var(--yc-line)); } .yc-ai-btn:focus-visible { outline: 2px solid var(--yc-focus); outline-offset: 1px; } .yc-ai-btn[disabled] { opacity: .6; cursor: progress; } .yc-ai-btn.hidden { display: none; } .yc-ai-hint { color: var(--yc-text-2); font-size: 12px; line-height: 1.5; margin: 0; } .yc-ai-note { color: var(--yc-text-3-aa); font-size: 13px; line-height: 1.5; margin: 0; } .yc-ai-result { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: var(--yc-radius-control); background: var(--yc-surface); border: 1px solid var(--yc-line); color: var(--yc-text-2); font-size: 12px; line-height: 1.5; } .yc-ai-result.hidden { display: none; } .yc-ai-result ul { margin: 0; padding-left: 16px; list-style: disc; } .yc-ai-result .yc-ai-cands { display: flex; flex-wrap: wrap; gap: 6px; } .yc-ai-filled { outline: 1px solid color-mix(in srgb, var(--yc-accent) 45%, var(--yc-line)) !important; outline-offset: 1px; } .yc-ai-tag { display: inline-block; margin-top: 2px; color: var(--yc-accent); font-size: 11px; font-weight: var(--yc-fw-semi); } /* E19 기사 모집 공고 창의 AI 자동 기입 칸(.yc-qf.is-open — intake-ui.js opts.open): 머리말 한 줄(라벨 글꼴·보통 굵기) + 작성기 상자 하나 (글 칸 3줄 → 글에 맞춰 8줄까지 · 상자 안 도구막대 [이미지 첨부] 왼쪽·[적용] 오른쪽 44px) · 포커스는 상자 테두리로 */ .yc-qf.is-open { padding: 0; } .yc-qf-head { margin: 0; color: var(--yc-text); font-weight: var(--yc-fw-regular); } /* 크기는 공고 칸 라벨과 같은 .text-xs */ .yc-qf-composer { border: 1px solid var(--yc-line); border-radius: var(--yc-radius-card); background: var(--yc-surface); } .yc-qf-composer:focus-within { border-color: var(--yc-accent); box-shadow: 0 0 0 1px var(--yc-accent); } /* 어두운 화면은 입력칸 바탕을 칠한다(!important) — 글 칸 위 모서리를 상자에 맞춰 둥글게 해야 상자 테두리 모서리를 덮지 않는다 */ .yc-qf-composer textarea { display: block; width: 100%; min-height: calc(4.5em + 16px); max-height: calc(12em + 16px); padding: 12px 14px 4px; border: 0; border-radius: calc(var(--yc-radius-card) - 1px) calc(var(--yc-radius-card) - 1px) 0 0; background: transparent; color: var(--yc-text); font-size: 14px; line-height: 1.5; resize: none; outline: none; } .yc-qf-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 8px 8px; } .yc-qf-tools .yc-btn { min-height: var(--yc-tap); } #uploadModal #newJobCampTime { color-scheme: light; } [data-theme="dark"] #uploadModal #newJobCampTime { color-scheme: dark; } @media (pointer: coarse) { .yc-ai-btn, .yc-qf-opt { min-height: 44px; } .yc-qf-see { min-height: 40px; } } /* ── D134 기사 모집 공고 · E11 오더와 떼어 놓기 · E14 하단 탭 [기사 모집](2026-10-11 — fixed-post-ui.js): 공고는 오더 카드 틀(.yc-jrow)을 쓰지 않는다 — 전용 틀 + 보조색 토큰 --yc-fp-* ── */ /* [기사 모집] 탭 #tab-fixedBoard: 머리 띠(보조색 옅은 면 — 제목·설명 한 줄·금액 고지 한 줄·[공고 등록]·내 공고 칩, 내 공고 보기는 [← 모든 공고]) · [필터]·간략히|상세히 한 줄 · 목록 */ .yc-fp-board-head { padding: 4px var(--yc-space-4) 14px; background: var(--yc-fp-soft); border-bottom: 1px solid var(--yc-line); } .yc-fp-board-head > .yc-link { gap: 6px; } .yc-fp-board-title { display: flex; align-items: center; gap: 8px; margin: 2px 0 4px; font-size: var(--yc-fs-section); font-weight: var(--yc-fw-bold); line-height: 1.4; color: var(--yc-text); } .yc-fp-board-title > i { color: var(--yc-fp-accent); font-size: 16px; } .yc-fp-board-note { margin: 0; font-size: 13px; line-height: 1.55; color: var(--yc-text-2); } .yc-fp-board-claim { margin: 4px 0 0; font-size: 13px; line-height: 1.55; color: var(--yc-text-2); } /* 보조 정보 읽기 기준 13px(위 '업무 화면의 읽기 기준') */ .yc-fp-board-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--yc-space-2); margin-top: var(--yc-space-3); } .yc-fp-board-body { padding: var(--yc-space-4); } .yc-fp-board-tools { display: flex; align-items: center; gap: 10px; margin-bottom: var(--yc-space-3); } .yc-fp-board-tools > .yc-btn { position: relative; flex: none; } .yc-fp-list { display: grid; gap: var(--yc-space-2); } .yc-fp-more { margin-top: var(--yc-space-3); } /* 간략히|상세히(E12 §1 A — 라디오 둘, 고른 칸은 .yc-pick 강조 면 · 누르는 자리 44px) */ .yc-fp-view { display: inline-flex; flex: none; gap: 4px; } .yc-fp-view .yc-pick { gap: 6px; min-height: var(--yc-tap); padding: 0 10px; } /* 간략 행(E12 §1 B · E15 3줄: 제목 전체 폭 / 근무 … 금액 굵게 / 계약 칩·택배사 배지 — 칩이 제목을 가리지 않게): 행 전체가 버튼 하나, 왼쪽 보조색 띠는 카드와 같다 */ .yc-fp-row { display: grid; gap: 4px; width: 100%; margin: 0; padding: 10px var(--yc-space-4) 10px 14px; border: 1px solid var(--yc-line); border-left: 4px solid var(--yc-fp-accent); border-radius: var(--yc-radius-card); background: var(--yc-surface); color: var(--yc-text); font: inherit; text-align: left; cursor: pointer; } .yc-fp-row:focus-visible { outline: 2px solid var(--yc-focus); outline-offset: 2px; } .yc-fp-row-top, .yc-fp-row-sub { display: flex; align-items: center; gap: 6px; min-width: 0; } .yc-fp-row-tags { display: flex; align-items: center; gap: 6px; min-width: 0; } .yc-fp-row-title, .yc-fp-row-sub > .yc-fp-when { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .yc-fp-row-title { font-size: var(--yc-fs-card); font-weight: var(--yc-fw-semi); line-height: 1.4; } .yc-fp-row-sub > b { flex: none; font-size: 15px; font-weight: var(--yc-fw-bold); line-height: 1.25; color: var(--yc-text); } /* E15 보정: 줄 높이 1.25 — 390px 한 화면에 간략 행 5개 */ /* 공고 카드(E11 §2 C — 오더 카드와 다른 점: 왼쪽 보조색 띠 · 날짜 큰 글자·상태 점 없음 · '공고'·계약 종류 칩). 카드를 누르면 상세, [연락하기]는 보조 크기 */ .yc-fp-card { display: flex; flex-direction: column; background: var(--yc-surface); border: 1px solid var(--yc-line); border-left: 4px solid var(--yc-fp-accent); border-radius: var(--yc-radius-card); color: var(--yc-text); } .yc-fp-open { display: grid; gap: 4px; width: 100%; margin: 0; padding: 12px var(--yc-space-4) 4px 14px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; } .yc-fp-open:focus-visible { outline: 2px solid var(--yc-focus); outline-offset: -2px; border-radius: var(--yc-radius-card); } .yc-fp-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .yc-fp-chip { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border: 1px solid var(--yc-fp-accent); border-radius: 6px; background: var(--yc-fp-soft); color: var(--yc-fp-accent); font-size: 12px; font-weight: var(--yc-fw-bold); line-height: 18px; white-space: nowrap; } .yc-fp-chip.is-tag { background: var(--yc-fp-accent); color: var(--yc-fp-on); } .yc-fp-title { font-size: var(--yc-fs-card); font-weight: var(--yc-fw-semi); line-height: 1.4; color: var(--yc-text); overflow-wrap: anywhere; } .yc-fp-when { font-size: 13px; line-height: 1.45; color: var(--yc-text-2); } .yc-fp-money { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 13px; color: var(--yc-text-2); } .yc-fp-money > b { font-size: 15px; font-weight: var(--yc-fw-bold); color: var(--yc-text); } .yc-fp-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--yc-space-2); padding: 0 var(--yc-space-4) 12px; } .yc-fp-claim { font-size: 11px; font-weight: var(--yc-fw-semi); color: var(--yc-text-3-aa); } .yc-fp-detail { margin: 0; } .yc-fp-detail dt, .yc-fp-detail dd { margin: 0; } /* 공고 등록·수정 창(E13 — fixed-post-ui.js 겹 창 [data-fp-panel]): 손가락 기기는 고르기·입력 칸도 44px(767px 이하는 공용 규칙이 이미 44px — 태블릿 폭도 같게) */ @media (pointer: coarse) { [data-fp-panel] :is(select, input:not([type="checkbox"]):not([type="radio"]):not(.sr-only)) { min-height: var(--yc-tap); } } /* 팀 콘솔 [기사 모집 공고](P2b §2-3): 머리 틀(.yc-tab-head)은 다른 탭과 같은 폭·간격, 공고 줄 목록만 읽기 좋은 폭 */ .yc-fp-console { display: flex; flex-direction: column; gap: var(--yc-space-3); } .yc-fp-console > .yc-jlist { max-width: 880px; } /* ── 앱 안 대화(D135 — assets/js/chat-ui.js). 토큰만 쓴다(원색 클래스 없음 — 자동 색 구역과 부딪히지 않게). 누르는 자리 44px · 어두운 모드는 토큰이 바꾼다 ── */ .yc-seg2 { display: flex; gap: 4px; margin: 8px 16px 0; padding: 4px; border-radius: 12px; background: var(--yc-surface-2); } .yc-seg2 > button { flex: 1; min-height: var(--yc-tap); border: 0; border-radius: 9px; background: transparent; color: var(--yc-text-2); font-size: 15px; font-weight: var(--yc-fw-semi); cursor: pointer; } .yc-seg2 > button[aria-selected="true"] { background: var(--yc-surface); color: var(--yc-text); font-weight: var(--yc-fw-bold); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); } .yc-seg2 > button:focus-visible { outline: 2px solid var(--yc-focus); outline-offset: 1px; } .yc-seg2-count { margin-left: 2px; color: var(--yc-accent); font-weight: var(--yc-fw-bold); font-variant-numeric: tabular-nums; } .yc-seg2-count:empty { display: none; } .yc-chat-rooms { display: flex; flex-direction: column; } #chatRoomListView { min-height: 40dvh; } /* 알림함 [대화] 칸 — 방이 적어도 창 높이가 갑자기 줄지 않게 */ .yc-chat-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px 16px; border: 0; border-bottom: 1px solid var(--yc-line); background: var(--yc-surface); color: var(--yc-text); text-align: left; cursor: pointer; } .yc-chat-row:hover { background: var(--yc-surface-2); } .yc-chat-row:focus-visible { outline: 2px solid var(--yc-focus); outline-offset: -2px; } .yc-chat-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .yc-chat-row-title { font-size: 15px; font-weight: var(--yc-fw-bold); color: var(--yc-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .yc-chat-row-ctx { font-size: var(--yc-fs-meta); color: var(--yc-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .yc-chat-row-last { font-size: var(--yc-fs-body); color: var(--yc-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .yc-chat-row.is-unread .yc-chat-row-last { color: var(--yc-text); font-weight: var(--yc-fw-semi); } .yc-chat-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; } .yc-chat-time { font-size: var(--yc-fs-meta); color: var(--yc-text-3-aa); } .yc-chat-badge { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--yc-accent); color: var(--yc-on-accent); font-size: 12px; font-weight: var(--yc-fw-bold); line-height: 22px; text-align: center; font-variant-numeric: tabular-nums; } .yc-chat-tag { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 6px; background: var(--yc-surface-2); color: var(--yc-text-2); font-size: 11px; font-weight: var(--yc-fw-semi); vertical-align: 1px; } .yc-chat-empty { padding: 40px 24px; text-align: center; color: var(--yc-text-2); font-size: var(--yc-fs-body); line-height: 1.6; } /* 방 화면 — 휴대폰은 거의 전체 높이, PC 는 가운데 창 */ .yc-chat-sheet { height: 92dvh; height: var(--yc-modal-max-h, 92dvh); max-height: var(--yc-modal-max-h, 92dvh); } @media (min-width: 640px) { .yc-chat-sheet { height: min(88dvh, 760px); border-radius: 20px; margin: auto; align-self: center; } } .yc-chat-head { display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 4px; border-bottom: 1px solid var(--yc-line); background: var(--yc-surface); flex-shrink: 0; } .yc-chat-head-main { flex: 1; min-width: 0; } .yc-chat-title { margin: 0; font-size: var(--yc-fs-card); font-weight: var(--yc-fw-bold); color: var(--yc-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .yc-chat-ctx { margin: 0; font-size: var(--yc-fs-meta); color: var(--yc-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .yc-chat-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--yc-tap); height: var(--yc-tap); border: 0; border-radius: var(--yc-radius-control); background: transparent; color: var(--yc-text-2); cursor: pointer; flex-shrink: 0; } .yc-chat-icon-btn:hover { background: var(--yc-surface-2); color: var(--yc-text); } .yc-chat-icon-btn:focus-visible, .yc-chat-chip:focus-visible, .yc-chat-team-btn:focus-visible { outline: 2px solid var(--yc-focus); outline-offset: 1px; } .yc-chat-call { min-height: 40px; padding: 0 12px; font-size: var(--yc-fs-body); } @media (pointer: coarse) { .yc-chat-call { min-height: var(--yc-tap); } } .yc-chat-ended { margin: 0; padding: 8px 16px; background: var(--yc-surface-2); color: var(--yc-text-2); font-size: 13px; text-align: center; flex-shrink: 0; } .yc-chat-list { flex: 1; min-height: 0; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: var(--yc-page); overscroll-behavior: contain; } .yc-chat-day { align-self: center; margin: 4px 0; padding: 2px 10px; border-radius: 999px; background: var(--yc-surface-2); color: var(--yc-text-2); font-size: var(--yc-fs-meta); } .yc-chat-msg-wrap { display: flex; flex-direction: column; max-width: 82%; gap: 2px; } .yc-chat-msg-wrap.is-mine { align-self: flex-end; align-items: flex-end; } .yc-chat-msg-wrap.is-theirs, .yc-chat-msg-wrap.is-auto { align-self: flex-start; align-items: flex-start; } .yc-chat-msg { padding: 8px 12px; border-radius: 16px; font-size: 15px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; } .yc-chat-msg.is-mine { background: var(--yc-accent); color: var(--yc-on-accent); border-bottom-right-radius: 4px; } .yc-chat-msg.is-theirs { background: var(--yc-surface); color: var(--yc-text); border: 1px solid var(--yc-line); border-bottom-left-radius: 4px; } .yc-chat-msg.is-auto { background: var(--yc-accent-soft); color: var(--yc-text); border: 1px solid color-mix(in srgb, var(--yc-accent) 30%, var(--yc-line)); border-bottom-left-radius: 4px; } .yc-chat-msg-tag { display: block; margin-bottom: 2px; font-size: 12px; font-weight: var(--yc-fw-bold); opacity: .9; } .yc-chat-msg.is-auto .yc-chat-msg-tag { color: var(--yc-accent); opacity: 1; } .yc-chat-meta { font-size: var(--yc-fs-meta); color: var(--yc-text-3-aa); } .yc-chat-faq-link { min-height: 32px; font-size: 13px; } @media (pointer: coarse) { .yc-chat-faq-link { min-height: var(--yc-tap); } } .yc-chat-chips { display: flex; gap: 6px; overflow-x: auto; padding: 8px 12px; border-top: 1px solid var(--yc-line); background: var(--yc-surface); scrollbar-width: none; flex-shrink: 0; } .yc-chat-chips::-webkit-scrollbar { display: none; } .yc-chat-chips:empty { display: none; } .yc-chat-chip { flex: none; min-height: var(--yc-tap); padding: 0 14px; border: 1px solid var(--yc-line); border-radius: 999px; background: var(--yc-surface); color: var(--yc-text); font-size: var(--yc-fs-body); font-weight: var(--yc-fw-semi); white-space: nowrap; cursor: pointer; max-width: 80vw; overflow: hidden; text-overflow: ellipsis; } .yc-chat-chip:hover { background: var(--yc-surface-2); } .yc-chat-chip.is-my { border-color: color-mix(in srgb, var(--yc-accent) 40%, var(--yc-line)); } .yc-chat-chip.is-add { color: var(--yc-accent); border-style: dashed; } .yc-chat-input { display: flex; gap: 8px; align-items: flex-end; padding: 8px 12px max(8px, env(safe-area-inset-bottom)); border-top: 1px solid var(--yc-line); background: var(--yc-surface); flex-shrink: 0; } .yc-chat-input textarea { flex: 1; min-height: var(--yc-tap); max-height: 120px; padding: 10px 12px; border: 1px solid var(--yc-line); border-radius: 12px; background: var(--yc-surface); color: var(--yc-text); font-size: 16px; line-height: 1.4; resize: none; } .yc-chat-input textarea:focus-visible { outline: 2px solid var(--yc-focus); outline-offset: 1px; } .yc-chat-send { min-width: 72px; } /* 입구 버튼(오더 상세·팀원 줄) */ .yc-chat-job-btn { flex: 0 0 auto; min-height: 52px; padding: 0 14px; font-size: var(--yc-fs-body); } .yc-chat-inline-btn { min-height: var(--yc-tap); padding: 0 12px; font-size: var(--yc-fs-body); } .yc-chat-team-btn { display: inline-flex; align-items: center; gap: 4px; min-height: var(--yc-tap); padding: 0 8px; margin-left: 4px; border: 0; background: none; color: var(--yc-accent); font-weight: var(--yc-fw-bold); font-size: var(--yc-fs-meta); cursor: pointer; flex-shrink: 0; } /* 겹 창(신고·차단·내 문구·답 저장) */ .yc-chat-overlay { position: fixed; inset: 0; z-index: 9990; display: flex; align-items: flex-end; justify-content: center; background: rgba(0, 0, 0, .5); } @media (min-width: 640px) { .yc-chat-overlay { align-items: center; } } .yc-chat-sheet-panel { width: 100%; max-width: 28rem; max-height: 90dvh; overflow-y: auto; border-radius: 20px 20px 0 0; background: var(--yc-surface); color: var(--yc-text); box-shadow: 0 10px 30px rgba(0, 0, 0, .2); } @media (min-width: 640px) { .yc-chat-sheet-panel { border-radius: 20px; } } .yc-chat-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 8px 8px 20px; border-bottom: 1px solid var(--yc-line); } .yc-chat-sheet-head h3 { margin: 0; font-size: var(--yc-fs-card); font-weight: var(--yc-fw-bold); } .yc-chat-sheet-body { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px max(16px, env(safe-area-inset-bottom)); } .yc-chat-sheet-actions { display: flex; gap: 8px; } .yc-chat-sheet-actions > * { flex: 1; } .yc-chat-choice-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .yc-chat-menu .yc-btn { justify-content: flex-start; } .yc-chat-note, .yc-chat-hint { margin: 0; color: var(--yc-text-2); font-size: var(--yc-fs-meta); line-height: 1.5; } .yc-chat-radio { display: flex; align-items: center; gap: 8px; min-height: var(--yc-tap); font-size: var(--yc-fs-body); cursor: pointer; } .yc-chat-radio input { width: 18px; height: 18px; accent-color: var(--yc-accent); } .yc-chat-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: var(--yc-fw-bold); color: var(--yc-text); } .yc-chat-field :is(input, textarea) { min-height: var(--yc-tap); padding: 10px 12px; border: 1px solid var(--yc-line); border-radius: var(--yc-radius-control); background: var(--yc-surface); color: var(--yc-text); font-size: 16px; font-weight: var(--yc-fw-regular); } .yc-chat-my-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border: 1px solid var(--yc-line); border-radius: var(--yc-radius-card); } .yc-chat-my-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--yc-line); } .yc-chat-my-row:last-child { border-bottom: 0; } .yc-chat-my-label { font-weight: var(--yc-fw-bold); font-size: var(--yc-fs-body); } .yc-chat-my-body { grid-column: 1; color: var(--yc-text-2); font-size: var(--yc-fs-meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .yc-chat-my-row .yc-link { grid-column: 2; grid-row: 1 / span 2; } /* 콘솔(PC) 오른쪽 대화 판 */ .yc-chat-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 9980; width: min(420px, 100vw); display: flex; flex-direction: column; background: var(--yc-surface); color: var(--yc-text); border-left: 1px solid var(--yc-line); box-shadow: -8px 0 24px rgba(0, 0, 0, .12); } .yc-chat-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--yc-line); } .yc-chat-panel-head h2 { margin: 0; font-size: var(--yc-fs-card); font-weight: var(--yc-fw-bold); } .yc-chat-panel-list { flex: 1; min-height: 0; overflow-y: auto; } .yc-chat-panel-room { flex: 1; min-height: 0; display: flex; flex-direction: column; } .yc-chat-admin-msg { margin: 0; padding: 6px 8px; border-radius: 8px; background: var(--yc-surface-2); font-size: 12px; white-space: pre-wrap; word-break: break-word; } /* ── 기사 앱 P3(설계 scratch/audit-r24/design/ux-refs-p3-driver-app-2026-10-08.md §2-2·§2-3). 토큰만 쓴다(원색 클래스 없음). [정산] 머리 요약 카드 .yc-earn(진행 중 받을 금액 큰 숫자 · 다음 지급 · 입금 확인 · [연간 수입 요약]) · 정산 계좌 미등록 안내 상자 .yc-callout(맨 위 — 등록하면 사라짐) · 상세 창 신청 전 조건 줄 .yc-conds([배차 신청] 위 ≤3줄 — ✓ 신청할 수 있어요 / ● 거절 창 제목 + 작은 링크) ── */ .yc-earn { display: grid; gap: 2px; margin: 0 0 var(--yc-space-4); } .yc-earn-label { margin: 0; color: var(--yc-text-2); font-size: var(--yc-fs-body); } .yc-earn-amount { margin: 0 0 2px; color: var(--yc-text); font-size: 26px; font-weight: var(--yc-fw-bold); line-height: 1.25; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .yc-earn-line { margin: 0; color: var(--yc-text-2); font-size: var(--yc-fs-body); font-variant-numeric: tabular-nums; } .yc-earn > .yc-link { justify-self: start; } .yc-callout { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0 0 var(--yc-space-3); padding: var(--yc-space-3) var(--yc-space-4); border: 1px solid var(--yc-accent); border-radius: var(--yc-radius-card); background: var(--yc-accent-soft); } .yc-callout > p { flex: 1 1 200px; min-width: 0; margin: 0; color: var(--yc-text); font-size: var(--yc-fs-body); font-weight: var(--yc-fw-semi); } .yc-conds { display: grid; gap: 2px; margin: 0 0 var(--yc-space-2); padding: 0; list-style: none; } .yc-cond { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; min-height: 28px; color: var(--yc-text); font-size: var(--yc-fs-body); font-weight: var(--yc-fw-semi); line-height: 1.45; } .yc-cond > .yc-status-dot { background: var(--yc-danger); } .yc-cond.is-ok { color: var(--yc-ok-aa); } /* ── 공용 화면 조각(E24a · R1 — assets/js/ui-bits.js, 설계 docs/decisions/e24-help-tips-direct-pay-2026-10-13.md §1·§2). 토큰만 쓴다. .yc-help = 라벨·한 줄 뒤 원형 ?(24px 누르는 자리 — 손가락 기기는 styles.css coarse 규칙으로 44px, 음수 여백으로 줄 높이는 그대로) · .yc-help-pop = 마우스 툴팁 · .yc-help-scrim/.yc-help-sheet = 손가락 아래 시트(안내·확인 창(10000)·공용 대화 상자(10050) 위) · .yc-steps = 운행 단계(끝남 = 채운 원 + 체크 · 지금 = 테두리 + 채운 점 + 굵은 글자 · 남음 = 빈 원 — 모양·글자로 구별) · .yc-route-chip = 지급 주체 칩 ── */ .yc-help { display: inline-flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box; width: 24px; height: 24px; margin: -3px 0 -3px 2px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--yc-text-3-aa); vertical-align: middle; cursor: pointer; } .yc-help > span { display: grid; place-items: center; box-sizing: border-box; width: 18px; height: 18px; border: 1.5px solid currentColor; border-radius: 50%; color: inherit; font-size: 11px; font-weight: var(--yc-fw-bold); line-height: 1; } .yc-help:hover, .yc-help:focus-visible, .yc-help[aria-describedby] { color: var(--yc-text); } @media (pointer: coarse) { .yc-help { margin: -13px -10px -13px -8px; } } .yc-help-pop { position: fixed; z-index: 10061; box-sizing: border-box; max-width: min(280px, calc(100vw - 16px)); padding: 10px 12px; border-radius: var(--yc-radius-control); background: var(--yc-text); color: var(--yc-surface); font-size: var(--yc-fs-meta); line-height: 1.55; text-align: left; box-shadow: 0 8px 24px rgba(15, 23, 42, .18); } .yc-help-pop > p { margin: 0; } .yc-help-pop > p + p { margin-top: 2px; } .yc-help-pop > .yc-help-title { margin-bottom: 4px; font-size: 13px; font-weight: var(--yc-fw-bold); } .yc-help-scrim { position: fixed; inset: 0; z-index: 10060; display: flex; align-items: flex-end; justify-content: center; background: rgba(0, 0, 0, .45); } .yc-help-pop[hidden], .yc-help-scrim[hidden] { display: none; } .yc-help-sheet { box-sizing: border-box; width: 100%; max-width: 520px; padding: var(--yc-space-5) var(--yc-space-5) calc(var(--yc-space-4) + env(safe-area-inset-bottom, 0px)); border-radius: 16px 16px 0 0; background: var(--yc-surface); color: var(--yc-text); text-align: left; } .yc-help-sheet-body { margin-bottom: var(--yc-space-4); } .yc-help-sheet-body > .yc-help-title { margin: 0 0 var(--yc-space-2); font-size: var(--yc-fs-card); font-weight: var(--yc-fw-bold); line-height: 1.45; } .yc-help-sheet-body > p { margin: 0; color: var(--yc-text-2); font-size: var(--yc-fs-body); line-height: 1.6; } .yc-help-sheet-body > p + p { margin-top: var(--yc-space-1); } .yc-steps { display: flex; margin: var(--yc-space-3) 0 0; padding: 0; list-style: none; } .yc-steps-item { position: relative; flex: 1 1 0; min-width: 0; display: grid; justify-items: center; align-content: start; gap: 4px; text-align: center; } .yc-steps-item + .yc-steps-item::before { content: ''; position: absolute; top: 9px; right: 50%; width: 100%; height: 2px; background: var(--yc-line); } .yc-steps-item.is-done + .yc-steps-item::before { background: var(--yc-accent); } .yc-steps-mark { position: relative; z-index: 1; box-sizing: border-box; width: 20px; height: 20px; border: 2px solid var(--yc-text-3-aa); border-radius: 50%; background: var(--yc-surface); } .yc-steps-item.is-done .yc-steps-mark { border-color: var(--yc-accent); background: var(--yc-accent); } .yc-steps-item.is-done .yc-steps-mark::after { content: ''; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid var(--yc-on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg); } .yc-steps-item.is-current .yc-steps-mark { border-color: var(--yc-accent); } .yc-steps-item.is-current .yc-steps-mark::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--yc-accent); } .yc-steps-label { max-width: 100%; color: var(--yc-text-3-aa); font-size: var(--yc-fs-meta); line-height: 1.35; word-break: keep-all; overflow-wrap: anywhere; } .yc-steps-item.is-done .yc-steps-label { color: var(--yc-text-2); } .yc-steps-item.is-current .yc-steps-label { color: var(--yc-text); font-weight: var(--yc-fw-bold); } /* P1 UX03(2026-10-19): 시작 전 오더의 단계 위 공용 한 줄 '배차 확정 전입니다.'(ui-bits.js ycSteps notStarted) — 목록 아래 안내 줄(.yc-jlist-note)과 같은 토큰, 새 색 없음 */ .yc-steps-note { margin: var(--yc-space-3) 0 0; font-size: var(--yc-fs-meta); line-height: 1.5; color: var(--yc-text-3-aa); } .yc-steps-note + .yc-steps { margin-top: var(--yc-space-2); } .yc-route-chip { display: inline-flex; align-items: center; flex: none; box-sizing: border-box; min-height: 22px; padding: 0 8px; border: 1px solid var(--yc-line); border-radius: 999px; background: var(--yc-surface); color: var(--yc-text-2); font-size: var(--yc-fs-meta); font-weight: var(--yc-fw-semi); line-height: 1.3; white-space: nowrap; vertical-align: middle; } .yc-route-chip.is-direct { border-color: transparent; background: var(--yc-accent-soft); color: var(--yc-accent); } .yc-money-due > .yc-route-chip { margin-right: 6px; } .yc-detail-route { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 6px 0 0; color: var(--yc-text-2); font-size: var(--yc-fs-body); line-height: 1.5; } .yc-detail-route[hidden] { display: none; } /* ── 화면 개편 3단계: 앱 원색 → B 톤 토큰(자동 생성 — scripts/ui-audit/gen-app-tone.mjs, 손으로 고치지 않는다) ── */ @media screen { :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-amber-100 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-amber-200\/90 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.bg-amber-400, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.bg-amber-400, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].bg-amber-400, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.bg-amber-400 { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-amber-400.text-white:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-amber-400:not(.text-white):not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-text-3-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-amber-400\/20 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-amber-400\/30 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-amber-50 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-amber-50\/20 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-amber-50\/40 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-amber-50\/50 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-amber-50\/60 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-amber-50\/70 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-amber-50\/80 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-amber-50\/90 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.bg-amber-500, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.bg-amber-500, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].bg-amber-500, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.bg-amber-500 { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-amber-500.text-white:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-amber-500:not(.text-white):not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-text-3-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-amber-500\/10 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-amber-500\/15 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-amber-500\/20 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.bg-amber-600, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.bg-amber-600, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].bg-amber-600, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.bg-amber-600 { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-amber-600.text-white:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-amber-600:not(.text-white):not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-text-3-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.bg-amber-700, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.bg-amber-700, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].bg-amber-700, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.bg-amber-700 { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-amber-700.text-white:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-amber-700:not(.text-white):not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-text-3-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.bg-black, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.bg-black, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].bg-black, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.bg-black { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-blue-500 { background-color: var(--yc-accent) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-blue-500\/20 { background-color: var(--yc-accent) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-blue-500\/30 { background-color: var(--yc-accent) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-blue-800 { background-color: var(--yc-accent) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-blue-950 { background-color: var(--yc-accent) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-cyan-500\/15 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-emerald-100 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.bg-emerald-400, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.bg-emerald-400, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].bg-emerald-400, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.bg-emerald-400 { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-emerald-400.text-white:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-ok-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-emerald-400:not(.text-white):not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-ok-mark) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-emerald-50 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-emerald-50\/10 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-emerald-50\/15 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-emerald-50\/20 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-emerald-50\/40 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-emerald-50\/70 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-emerald-50\/80 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.bg-emerald-500, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.bg-emerald-500, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].bg-emerald-500, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.bg-emerald-500 { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-emerald-500.text-white:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-ok-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-emerald-500:not(.text-white):not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-ok-mark) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-emerald-500\/20 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-emerald-500\/30 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.bg-emerald-600, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.bg-emerald-600, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].bg-emerald-600, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.bg-emerald-600 { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-emerald-600.text-white:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-ok-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-emerald-600:not(.text-white):not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-ok-mark) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.bg-emerald-700, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.bg-emerald-700, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].bg-emerald-700, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.bg-emerald-700 { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-emerald-700.text-white:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-ok-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-emerald-700:not(.text-white):not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-ok-mark) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.bg-gradient-to-b, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.bg-gradient-to-b, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].bg-gradient-to-b, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.bg-gradient-to-b { background-image: none !important; background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-gradient-to-b:not(button):not(a):not([role="button"]):not(label) { background-image: none !important; background-color: var(--yc-surface-2) !important; color: var(--yc-text) !important; border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.bg-gradient-to-br, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.bg-gradient-to-br, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].bg-gradient-to-br, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.bg-gradient-to-br { background-image: none !important; background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-gradient-to-br:not(button):not(a):not([role="button"]):not(label) { background-image: none !important; background-color: var(--yc-surface-2) !important; color: var(--yc-text) !important; border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.bg-gradient-to-r, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.bg-gradient-to-r, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].bg-gradient-to-r, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.bg-gradient-to-r { background-image: none !important; background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-gradient-to-r:not(button):not(a):not([role="button"]):not(label) { background-image: none !important; background-color: var(--yc-surface-2) !important; color: var(--yc-text) !important; border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.bg-gray-800, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.bg-gray-800, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].bg-gray-800, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.bg-gray-800 { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-gray-800:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-text) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.bg-gray-900, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.bg-gray-900, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].bg-gray-900, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.bg-gray-900 { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-gray-900:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-text) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.bg-gray-900\/80, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.bg-gray-900\/80, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].bg-gray-900\/80, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.bg-gray-900\/80 { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-gray-900\/80:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-text) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-green-100 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-green-50 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-indigo-100 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-indigo-100\/70 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-indigo-50 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-indigo-50\/15 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-indigo-50\/20 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-indigo-50\/40 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-indigo-50\/50 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-indigo-50\/60 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-indigo-50\/70 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-indigo-50\/80 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.bg-indigo-500, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.bg-indigo-500, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].bg-indigo-500, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.bg-indigo-500 { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-indigo-500.text-white:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-indigo-500:not(.text-white):not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-text-3-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-indigo-500\/10 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-indigo-500\/20 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-indigo-500\/30 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.bg-indigo-600, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.bg-indigo-600, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].bg-indigo-600, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.bg-indigo-600 { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-indigo-600.text-white:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-indigo-600:not(.text-white):not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-text-3-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.bg-indigo-700, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.bg-indigo-700, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].bg-indigo-700, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.bg-indigo-700 { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-indigo-700.text-white:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-indigo-700:not(.text-white):not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-text-3-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.bg-lime-700, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.bg-lime-700, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].bg-lime-700, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.bg-lime-700 { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-lime-700.text-white:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-lime-700:not(.text-white):not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-text-3-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-orange-50 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.bg-orange-700, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.bg-orange-700, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].bg-orange-700, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.bg-orange-700 { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-orange-700.text-white:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-orange-700:not(.text-white):not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-text-3-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-purple-100 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-purple-50 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-purple-50\/20 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-purple-50\/50 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-purple-50\/70 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.bg-purple-600, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.bg-purple-600, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].bg-purple-600, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.bg-purple-600 { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-purple-600.text-white:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-purple-600:not(.text-white):not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-text-3-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-purple-600\/80 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.bg-purple-700, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.bg-purple-700, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].bg-purple-700, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.bg-purple-700 { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-purple-700.text-white:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-purple-700:not(.text-white):not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-text-3-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.bg-purple-950, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.bg-purple-950, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].bg-purple-950, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.bg-purple-950 { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-purple-950.text-white:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-purple-950:not(.text-white):not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-text-3-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-red-100 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-red-50 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-red-50\/20 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-red-50\/30 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-red-50\/40 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-red-50\/50 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.bg-red-500, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.bg-red-500, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].bg-red-500, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.bg-red-500 { background-color: var(--yc-surface-2) !important; color: var(--yc-danger-aa) !important; border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-red-500.text-white:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-danger-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-red-500:not(.text-white):not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-danger) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.bg-red-600, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.bg-red-600, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].bg-red-600, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.bg-red-600 { background-color: var(--yc-surface-2) !important; color: var(--yc-danger-aa) !important; border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-red-600.text-white:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-danger-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-red-600:not(.text-white):not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-danger) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-red-600\/20 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.bg-red-700, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.bg-red-700, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].bg-red-700, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.bg-red-700 { background-color: var(--yc-surface-2) !important; color: var(--yc-danger-aa) !important; border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-red-700.text-white:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-danger-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-red-700:not(.text-white):not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-danger) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.bg-red-950, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.bg-red-950, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].bg-red-950, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.bg-red-950 { background-color: var(--yc-surface-2) !important; color: var(--yc-danger-aa) !important; border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-red-950.text-white:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-danger-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-red-950:not(.text-white):not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-danger) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-red-950\/60 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-rose-100 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-rose-200 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-rose-50 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-rose-50\/10 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-rose-50\/15 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-rose-50\/20 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-rose-50\/40 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-rose-50\/50 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-rose-50\/60 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-rose-50\/80 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.bg-rose-500, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.bg-rose-500, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].bg-rose-500, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.bg-rose-500 { background-color: var(--yc-surface-2) !important; color: var(--yc-danger-aa) !important; border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-rose-500.text-white:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-danger-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-rose-500:not(.text-white):not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-danger) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-rose-500\/20 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.bg-rose-600, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.bg-rose-600, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].bg-rose-600, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.bg-rose-600 { background-color: var(--yc-surface-2) !important; color: var(--yc-danger-aa) !important; border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-rose-600.text-white:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-danger-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-rose-600:not(.text-white):not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-danger) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-rose-600\/15 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.bg-rose-700, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.bg-rose-700, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].bg-rose-700, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.bg-rose-700 { background-color: var(--yc-surface-2) !important; color: var(--yc-danger-aa) !important; border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-rose-700.text-white:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-danger-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-rose-700:not(.text-white):not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-danger) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-rose-950\/60 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-sky-100 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-sky-50 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-sky-50\/15 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.bg-slate-700, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.bg-slate-700, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].bg-slate-700, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.bg-slate-700 { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-slate-700:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-text) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.bg-slate-800, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.bg-slate-800, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].bg-slate-800, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.bg-slate-800 { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-slate-800:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-text) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.bg-slate-800\/50, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.bg-slate-800\/50, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].bg-slate-800\/50, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.bg-slate-800\/50 { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-slate-800\/50:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-text) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.bg-slate-800\/60, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.bg-slate-800\/60, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].bg-slate-800\/60, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.bg-slate-800\/60 { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-slate-800\/60:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-text) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.bg-slate-800\/80, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.bg-slate-800\/80, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].bg-slate-800\/80, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.bg-slate-800\/80 { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-slate-800\/80:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-text) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.bg-slate-800\/90, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.bg-slate-800\/90, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].bg-slate-800\/90, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.bg-slate-800\/90 { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-slate-800\/90:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-text) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.bg-slate-900, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.bg-slate-900, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].bg-slate-900, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.bg-slate-900 { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-slate-900:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-text) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.bg-slate-900\/40, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.bg-slate-900\/40, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].bg-slate-900\/40, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.bg-slate-900\/40 { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-slate-900\/40:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-text) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.bg-slate-900\/5, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.bg-slate-900\/5, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].bg-slate-900\/5, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.bg-slate-900\/5 { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-slate-900\/5:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-text) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.bg-slate-900\/60, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.bg-slate-900\/60, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].bg-slate-900\/60, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.bg-slate-900\/60 { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-slate-900\/60:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-text) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.bg-slate-900\/95, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.bg-slate-900\/95, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].bg-slate-900\/95, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.bg-slate-900\/95 { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-slate-900\/95:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-text) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.bg-slate-950, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.bg-slate-950, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].bg-slate-950, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.bg-slate-950 { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-slate-950:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-text) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.bg-slate-950\/35, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.bg-slate-950\/35, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].bg-slate-950\/35, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.bg-slate-950\/35 { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-slate-950\/35:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-text) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.bg-slate-950\/60, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.bg-slate-950\/60, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].bg-slate-950\/60, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.bg-slate-950\/60 { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-slate-950\/60:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-text) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.bg-slate-950\/70, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.bg-slate-950\/70, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].bg-slate-950\/70, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.bg-slate-950\/70 { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-slate-950\/70:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-text) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.bg-slate-950\/80, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.bg-slate-950\/80, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].bg-slate-950\/80, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.bg-slate-950\/80 { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-slate-950\/80:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-text) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.bg-slate-950\/85, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.bg-slate-950\/85, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].bg-slate-950\/85, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.bg-slate-950\/85 { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-slate-950\/85:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-text) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.bg-slate-950\/90, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.bg-slate-950\/90, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].bg-slate-950\/90, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.bg-slate-950\/90 { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-slate-950\/90:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-text) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-teal-100 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-teal-50 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-teal-50\/15 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-teal-50\/60 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-teal-50\/80 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-teal-50\/90 { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.bg-teal-500, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.bg-teal-500, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].bg-teal-500, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.bg-teal-500 { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-teal-500.text-white:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-teal-500:not(.text-white):not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-text-3-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.bg-teal-700, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.bg-teal-700, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].bg-teal-700, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.bg-teal-700 { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-teal-700.text-white:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-teal-700:not(.text-white):not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-text-3-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.bg-teal-900, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.bg-teal-900, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].bg-teal-900, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.bg-teal-900 { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-teal-900.text-white:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-teal-900:not(.text-white):not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-text-3-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.bg-yellow-500, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.bg-yellow-500, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].bg-yellow-500, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.bg-yellow-500 { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-yellow-500.text-white:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .bg-yellow-500:not(.text-white):not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-text-3-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-amber-100 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-amber-200 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-amber-200\/70 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-amber-200\/80 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-amber-200\/90 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-amber-300 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-amber-300\/80 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-amber-400 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-amber-400\/30 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-amber-500\/30 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-cyan-400\/25 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-cyan-400\/30 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-emerald-100 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-emerald-200 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-emerald-300 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-emerald-400 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-emerald-400\/30 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-emerald-500\/30 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-emerald-500\/40 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-emerald-600 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-green-200 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-indigo-100 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-indigo-100\/80 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-indigo-200 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-indigo-200\/80 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-indigo-300 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-indigo-400 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-indigo-400\/30 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-indigo-500 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-indigo-500\/20 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-indigo-500\/40 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-indigo-600 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-indigo-700 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-l-amber-400 { border-left-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-l-amber-500 { border-left-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-l-emerald-400 { border-left-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-l-emerald-500 { border-left-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-l-emerald-600 { border-left-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-l-indigo-500 { border-left-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-l-indigo-600 { border-left-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-l-purple-500 { border-left-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-l-purple-600 { border-left-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-l-red-500 { border-left-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-l-rose-400 { border-left-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-l-rose-500 { border-left-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-l-sky-500 { border-left-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-l-teal-500 { border-left-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-orange-200 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-orange-300 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-purple-100 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-purple-200 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-purple-200\/60 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-purple-300 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-purple-800 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-red-100 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-red-200 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-red-300 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-red-500\/30 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-red-600 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-red-800 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-red-800\/60 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-rose-100 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-rose-200 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-rose-200\/80 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-rose-300 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-rose-400 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-rose-500 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-rose-500\/40 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-rose-600 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-rose-800\/50 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-sky-200 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-sky-300 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-teal-200 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-teal-200\/60 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-teal-200\/80 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-teal-300 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-teal-500 { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .focus\:border-amber-500:focus { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .focus\:border-emerald-600:focus { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .focus\:border-indigo-500:focus { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .focus\:border-indigo-600:focus { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .focus\:border-rose-500:focus { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .focus\:ring-amber-400:focus { --tw-ring-color: var(--yc-accent) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .focus\:ring-amber-500:focus { --tw-ring-color: var(--yc-accent) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .focus\:ring-blue-400:focus { --tw-ring-color: var(--yc-accent) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .focus\:ring-blue-500:focus { --tw-ring-color: var(--yc-accent) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .focus\:ring-emerald-400:focus { --tw-ring-color: var(--yc-accent) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .focus\:ring-emerald-500:focus { --tw-ring-color: var(--yc-accent) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .focus\:ring-indigo-400:focus { --tw-ring-color: var(--yc-accent) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .focus\:ring-indigo-500:focus { --tw-ring-color: var(--yc-accent) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .focus\:ring-purple-400:focus { --tw-ring-color: var(--yc-accent) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .focus\:ring-purple-500:focus { --tw-ring-color: var(--yc-accent) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .focus\:ring-red-400:focus { --tw-ring-color: var(--yc-danger) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .focus\:ring-red-500:focus { --tw-ring-color: var(--yc-danger) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .focus\:ring-rose-400:focus { --tw-ring-color: var(--yc-danger) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .focus\:ring-rose-500:focus { --tw-ring-color: var(--yc-danger) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .focus\:ring-teal-500:focus { --tw-ring-color: var(--yc-accent) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .group:hover .group-hover\:bg-blue-700 { background-color: var(--yc-accent) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .group:hover button.group-hover\:bg-purple-700, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .group:hover a.group-hover\:bg-purple-700, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .group:hover [role="button"].group-hover\:bg-purple-700, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .group:hover label.group-hover\:bg-purple-700 { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .group:hover .group-hover\:bg-purple-700.text-white:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .group:hover .group-hover\:bg-purple-700:not(.text-white):not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-text-3-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .group:hover .group-hover\:text-amber-600 { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .group:hover .group-hover\:text-amber-700 { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .group:hover .group-hover\:text-cyan-300 { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .group:hover .group-hover\:text-emerald-600 { color: var(--yc-ok-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .group:hover .group-hover\:text-emerald-700 { color: var(--yc-ok-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .group:hover .group-hover\:text-red-500 { color: var(--yc-danger-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .group:hover .group-hover\:text-red-600 { color: var(--yc-danger-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:bg-amber-100:hover { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:bg-amber-100\/60:hover { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:bg-amber-50:hover { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:bg-amber-50\/20:hover { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.hover\:bg-amber-600:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.hover\:bg-amber-600:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].hover\:bg-amber-600:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.hover\:bg-amber-600:hover { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:bg-amber-600:hover.text-white:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:bg-amber-600:hover:not(.text-white):not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-text-3-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.hover\:bg-amber-700:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.hover\:bg-amber-700:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].hover\:bg-amber-700:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.hover\:bg-amber-700:hover { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:bg-amber-700:hover.text-white:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:bg-amber-700:hover:not(.text-white):not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-text-3-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.hover\:bg-amber-800:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.hover\:bg-amber-800:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].hover\:bg-amber-800:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.hover\:bg-amber-800:hover { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:bg-amber-800:hover.text-white:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:bg-amber-800:hover:not(.text-white):not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-text-3-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.hover\:bg-black:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.hover\:bg-black:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].hover\:bg-black:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.hover\:bg-black:hover { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:bg-blue-500:hover { background-color: var(--yc-accent) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:bg-blue-700:hover { background-color: var(--yc-accent) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:bg-emerald-100:hover { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:bg-emerald-50\/20:hover { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.hover\:bg-emerald-700:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.hover\:bg-emerald-700:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].hover\:bg-emerald-700:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.hover\:bg-emerald-700:hover { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:bg-emerald-700:hover.text-white:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-ok-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:bg-emerald-700:hover:not(.text-white):not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-ok-mark) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.hover\:bg-emerald-800:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.hover\:bg-emerald-800:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].hover\:bg-emerald-800:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.hover\:bg-emerald-800:hover { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:bg-emerald-800:hover.text-white:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-ok-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:bg-emerald-800:hover:not(.text-white):not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-ok-mark) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.hover\:bg-gray-700:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.hover\:bg-gray-700:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].hover\:bg-gray-700:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.hover\:bg-gray-700:hover { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:bg-gray-700:hover:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-text) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.hover\:bg-gray-900:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.hover\:bg-gray-900:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].hover\:bg-gray-900:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.hover\:bg-gray-900:hover { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:bg-gray-900:hover:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-text) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:bg-indigo-100:hover { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:bg-indigo-50:hover { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.hover\:bg-indigo-700:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.hover\:bg-indigo-700:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].hover\:bg-indigo-700:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.hover\:bg-indigo-700:hover { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:bg-indigo-700:hover.text-white:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:bg-indigo-700:hover:not(.text-white):not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-text-3-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.hover\:bg-indigo-800:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.hover\:bg-indigo-800:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].hover\:bg-indigo-800:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.hover\:bg-indigo-800:hover { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:bg-indigo-800:hover.text-white:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:bg-indigo-800:hover:not(.text-white):not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-text-3-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:bg-orange-50:hover { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:bg-purple-100:hover { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:bg-purple-50:hover { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.hover\:bg-purple-700:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.hover\:bg-purple-700:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].hover\:bg-purple-700:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.hover\:bg-purple-700:hover { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:bg-purple-700:hover.text-white:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:bg-purple-700:hover:not(.text-white):not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-text-3-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:bg-red-100:hover { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:bg-red-50:hover { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:bg-red-50\/20:hover { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.hover\:bg-red-600:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.hover\:bg-red-600:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].hover\:bg-red-600:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.hover\:bg-red-600:hover { background-color: var(--yc-surface-2) !important; color: var(--yc-danger-aa) !important; border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:bg-red-600:hover.text-white:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-danger-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:bg-red-600:hover:not(.text-white):not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-danger) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.hover\:bg-red-700:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.hover\:bg-red-700:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].hover\:bg-red-700:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.hover\:bg-red-700:hover { background-color: var(--yc-surface-2) !important; color: var(--yc-danger-aa) !important; border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:bg-red-700:hover.text-white:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-danger-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:bg-red-700:hover:not(.text-white):not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-danger) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:bg-red-900\/60:hover { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:bg-rose-100:hover { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:bg-rose-200:hover { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:bg-rose-50:hover { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:bg-rose-50\/50:hover { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.hover\:bg-rose-700:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.hover\:bg-rose-700:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].hover\:bg-rose-700:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.hover\:bg-rose-700:hover { background-color: var(--yc-surface-2) !important; color: var(--yc-danger-aa) !important; border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:bg-rose-700:hover.text-white:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-danger-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:bg-rose-700:hover:not(.text-white):not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-danger) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.hover\:bg-rose-800:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.hover\:bg-rose-800:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].hover\:bg-rose-800:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.hover\:bg-rose-800:hover { background-color: var(--yc-surface-2) !important; color: var(--yc-danger-aa) !important; border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:bg-rose-800:hover.text-white:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-danger-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:bg-rose-800:hover:not(.text-white):not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-danger) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.hover\:bg-slate-700:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.hover\:bg-slate-700:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].hover\:bg-slate-700:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.hover\:bg-slate-700:hover { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:bg-slate-700:hover:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-text) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.hover\:bg-slate-700\/60:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.hover\:bg-slate-700\/60:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].hover\:bg-slate-700\/60:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.hover\:bg-slate-700\/60:hover { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:bg-slate-700\/60:hover:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-text) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.hover\:bg-slate-800:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.hover\:bg-slate-800:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].hover\:bg-slate-800:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.hover\:bg-slate-800:hover { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:bg-slate-800:hover:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-text) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.hover\:bg-slate-800\/80:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.hover\:bg-slate-800\/80:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].hover\:bg-slate-800\/80:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.hover\:bg-slate-800\/80:hover { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:bg-slate-800\/80:hover:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-text) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.hover\:bg-slate-900:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.hover\:bg-slate-900:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].hover\:bg-slate-900:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.hover\:bg-slate-900:hover { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:bg-slate-900:hover:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-text) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:bg-teal-50:hover { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:bg-teal-50\/35:hover { background-color: var(--yc-surface-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) button.hover\:bg-teal-800:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) a.hover\:bg-teal-800:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) [role="button"].hover\:bg-teal-800:hover, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) label.hover\:bg-teal-800:hover { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:bg-teal-800:hover.text-white:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:bg-teal-800:hover:not(.text-white):not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-text-3-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:border-amber-500:hover { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:border-emerald-300:hover { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:border-emerald-500:hover { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:border-indigo-200:hover { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:border-indigo-300:hover { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:border-purple-300:hover { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:border-red-500:hover { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:border-rose-300:hover { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:border-rose-400:hover { border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:ring-blue-400:hover { --tw-ring-color: var(--yc-accent) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:text-amber-300:hover { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:text-amber-400:hover { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:text-amber-700:hover { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:text-amber-800:hover { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:text-emerald-700:hover { color: var(--yc-ok-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:text-indigo-400:hover { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:text-indigo-600:hover { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:text-indigo-700:hover { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:text-indigo-800:hover { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:text-purple-600:hover { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:text-purple-800:hover { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:text-red-400:hover { color: var(--yc-danger-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:text-red-500:hover { color: var(--yc-danger-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:text-red-700:hover { color: var(--yc-danger-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:text-rose-400:hover { color: var(--yc-danger-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:text-rose-600:hover { color: var(--yc-danger-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:text-rose-700:hover { color: var(--yc-danger-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:text-rose-800:hover { color: var(--yc-danger-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:text-rose-900:hover { color: var(--yc-danger-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .hover\:text-teal-950:hover { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .peer:checked ~ button.peer-checked\:bg-amber-500, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .peer:checked ~ a.peer-checked\:bg-amber-500, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .peer:checked ~ [role="button"].peer-checked\:bg-amber-500, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .peer:checked ~ label.peer-checked\:bg-amber-500 { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .peer:checked ~ .peer-checked\:bg-amber-500.text-white:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .peer:checked ~ .peer-checked\:bg-amber-500:not(.text-white):not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-text-3-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .peer:checked ~ button.peer-checked\:bg-emerald-500, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .peer:checked ~ a.peer-checked\:bg-emerald-500, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .peer:checked ~ [role="button"].peer-checked\:bg-emerald-500, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .peer:checked ~ label.peer-checked\:bg-emerald-500 { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .peer:checked ~ .peer-checked\:bg-emerald-500.text-white:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-ok-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .peer:checked ~ .peer-checked\:bg-emerald-500:not(.text-white):not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-ok-mark) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .peer:checked ~ button.peer-checked\:bg-indigo-600, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .peer:checked ~ a.peer-checked\:bg-indigo-600, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .peer:checked ~ [role="button"].peer-checked\:bg-indigo-600, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .peer:checked ~ label.peer-checked\:bg-indigo-600 { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .peer:checked ~ .peer-checked\:bg-indigo-600.text-white:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .peer:checked ~ .peer-checked\:bg-indigo-600:not(.text-white):not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-text-3-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .peer:checked ~ button.peer-checked\:bg-purple-600, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .peer:checked ~ a.peer-checked\:bg-purple-600, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .peer:checked ~ [role="button"].peer-checked\:bg-purple-600, :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .peer:checked ~ label.peer-checked\:bg-purple-600 { background-color: var(--yc-accent) !important; color: var(--yc-on-accent) !important; border-color: transparent !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .peer:checked ~ .peer-checked\:bg-purple-600.text-white:not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-surface-2) !important; color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .peer:checked ~ .peer-checked\:bg-purple-600:not(.text-white):not(button):not(a):not([role="button"]):not(label) { background-color: var(--yc-text-3-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .ring-blue-400\/30 { --tw-ring-color: var(--yc-accent) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .ring-blue-500\/20 { --tw-ring-color: var(--yc-accent) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .ring-blue-600 { --tw-ring-color: var(--yc-accent) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .ring-purple-200 { --tw-ring-color: var(--yc-accent) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .ring-purple-500 { --tw-ring-color: var(--yc-accent) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .ring-rose-400 { --tw-ring-color: var(--yc-danger) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-amber-200\/90 { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-amber-300 { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-amber-400 { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-amber-400\/80 { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-amber-400\/90 { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-amber-500 { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-amber-600 { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-amber-700 { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-amber-800 { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-amber-900 { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-amber-950 { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-cyan-100 { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-cyan-200 { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-cyan-200\/70 { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-cyan-300 { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-cyan-400 { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-emerald-200 { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-emerald-300 { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-emerald-400 { color: var(--yc-ok-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-emerald-500 { color: var(--yc-ok-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-emerald-600 { color: var(--yc-ok-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-emerald-700 { color: var(--yc-ok-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-emerald-800 { color: var(--yc-ok-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-emerald-900 { color: var(--yc-ok-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-emerald-950 { color: var(--yc-ok-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-green-600 { color: var(--yc-ok-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-green-700 { color: var(--yc-ok-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-green-800 { color: var(--yc-ok-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-indigo-200 { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-indigo-300 { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-indigo-400 { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-indigo-500 { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-indigo-600 { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-indigo-700 { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-indigo-800 { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-indigo-800\/80 { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-indigo-900 { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-indigo-900\/80 { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-indigo-950 { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-orange-600 { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-orange-700 { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-orange-800 { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-purple-300 { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-purple-400 { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-purple-500 { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-purple-600 { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-purple-700 { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-purple-800 { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-purple-900 { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-purple-900\/80 { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-purple-950 { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-red-300 { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-red-400 { color: var(--yc-danger-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-red-500 { color: var(--yc-danger-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-red-600 { color: var(--yc-danger-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-red-700 { color: var(--yc-danger-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-red-800 { color: var(--yc-danger-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-rose-300 { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-rose-400 { color: var(--yc-danger-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-rose-500 { color: var(--yc-danger-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-rose-600 { color: var(--yc-danger-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-rose-700 { color: var(--yc-danger-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-rose-800 { color: var(--yc-danger-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-rose-900 { color: var(--yc-danger-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-rose-950 { color: var(--yc-danger-aa) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-sky-400 { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-sky-600 { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-sky-700 { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-sky-800 { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-teal-300 { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-teal-500 { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-teal-600 { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-teal-700 { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-teal-800 { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-teal-900 { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-teal-950 { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-yellow-200 { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .text-yellow-300 { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) :is(button, a, [role="button"]) i[class*="text-"] { color: inherit !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) :is(button, a, [role="button"]).text-white :is([class*="text-amber-"], [class*="text-orange-"], [class*="text-yellow-"], [class*="text-lime-"], [class*="text-green-"], [class*="text-emerald-"], [class*="text-teal-"], [class*="text-cyan-"], [class*="text-sky-"], [class*="text-indigo-"], [class*="text-violet-"], [class*="text-purple-"], [class*="text-fuchsia-"], [class*="text-pink-"], [class*="text-rose-"], [class*="text-red-"]) { color: inherit !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) :is([class*="bg-gradient-to-"], .bg-slate-800, .bg-slate-900, .bg-gray-800, .bg-gray-900, .bg-slate-950, .bg-blue-800, .bg-blue-900, .bg-indigo-900, .bg-indigo-950):not(button):not(a):not([role="button"]):not(label) :is(.text-white, [class*="text-white/"], .text-slate-100, .text-slate-200, .text-slate-300, .text-slate-400, .text-gray-100, .text-gray-200, .text-gray-300):not(:is(button, a, [role="button"], label):is([class*="bg-gradient-to-"], .bg-blue-500, .bg-blue-600, .bg-blue-700, .bg-indigo-500, .bg-indigo-600, .bg-indigo-700, .bg-violet-500, .bg-violet-600, .bg-violet-700, .bg-purple-500, .bg-purple-600, .bg-purple-700, .bg-sky-500, .bg-sky-600, .bg-sky-700, .bg-cyan-500, .bg-cyan-600, .bg-cyan-700, .bg-teal-500, .bg-teal-600, .bg-teal-700, .bg-emerald-500, .bg-emerald-600, .bg-emerald-700, .bg-green-500, .bg-green-600, .bg-green-700)):not(:is(button, a, [role="button"], label):is([class*="bg-gradient-to-"], .bg-blue-500, .bg-blue-600, .bg-blue-700, .bg-indigo-500, .bg-indigo-600, .bg-indigo-700, .bg-violet-500, .bg-violet-600, .bg-violet-700, .bg-purple-500, .bg-purple-600, .bg-purple-700, .bg-sky-500, .bg-sky-600, .bg-sky-700, .bg-cyan-500, .bg-cyan-600, .bg-cyan-700, .bg-teal-500, .bg-teal-600, .bg-teal-700, .bg-emerald-500, .bg-emerald-600, .bg-emerald-700, .bg-green-500, .bg-green-600, .bg-green-700) *) { color: var(--yc-text-2) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) :is([class*="bg-gradient-to-"], .bg-slate-800, .bg-slate-900, .bg-gray-800, .bg-gray-900, .bg-slate-950):not(button):not(a):not([role="button"]):not(label) :is(.bg-white\/5, .bg-white\/10, .bg-white\/15, .bg-white\/20) { background-color: var(--yc-surface) !important; border-color: var(--yc-line) !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) .border-l-4 { border-left-width: 1px !important; } :is(.yc-app, .yc-bk-tone, .yc-ad-tone) :is(.shadow-sm, .shadow-md, .shadow-xs, .shadow-2xs, .shadow-inner):not(.modal-content):not(.alert-modal-content) { box-shadow: none !important; } } /* ── 앱 원색 → B 톤 토큰 끝 ── */ /* ===== R3 2026-10-16 ===== */ /* R3 화주·주선사 화면(설계 scratch/audit-r24/design/r3-shipper-broker-brief-2026-10-16.md — 메인 Fable). 색은 --yc-* 토큰만. */ /* R3-1 오더 등록 창: 3단계 머리 요약 두 줄(어디·언제 / 단가·물량) + 작은 [수정] — 레퍼런스 Grab 마지막 단계 요약·Deel 끝난 단계 */ .yc-upload-recap { border: 1px solid var(--yc-line); border-radius: var(--yc-radius-card); background: var(--yc-surface-2); padding: 2px 14px; } .yc-upload-recap-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; } .yc-upload-recap-row + .yc-upload-recap-row { border-top: 1px solid var(--yc-line); } .yc-upload-recap-label { flex: none; width: 64px; padding-top: 2px; font-size: var(--yc-fs-meta); font-weight: var(--yc-fw-semi); color: var(--yc-text-2); } .yc-upload-recap-main { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: var(--yc-fw-bold); line-height: 1.45; color: var(--yc-text); word-break: keep-all; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; } .yc-upload-recap-sub { display: block; margin-top: 2px; font-size: var(--yc-fs-meta); font-weight: var(--yc-fw-regular); color: var(--yc-text-2); } .yc-upload-recap-edit { flex: none; align-self: center; min-height: 44px; margin: -12px -8px -12px 0; padding: 0 8px; border: 0; background: none; font-size: 13px; font-weight: var(--yc-fw-semi); color: var(--yc-accent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .yc-upload-recap-edit:focus-visible { outline: 2px solid var(--yc-focus); outline-offset: -2px; border-radius: 6px; } /* 결제 조건 선택지: 이름·정산일(·요금)·요율 배지 한 줄 — 좁으면 정산일만 다음 줄로 */ .yc-settle-method-opt .yc-terms-line { flex-wrap: wrap; row-gap: 2px; } .yc-settle-method-opt .yc-terms-when { flex: 1 1 auto; } /* R3-3 화주 [정산] 요약: 정산일별 줄(최대 3) — 레퍼런스 Afterpay 기한별 금액 */ .yc-earn-dues { list-style: none; margin: 10px 0 2px; padding: 0; border-top: 1px solid var(--yc-line); } .yc-earn-due { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 7px 0 0; font-size: 14px; color: var(--yc-text-2); } .yc-earn-due b { color: var(--yc-text); font-weight: var(--yc-fw-semi); font-variant-numeric: tabular-nums; white-space: nowrap; } .yc-earn-due.is-late span { color: var(--yc-danger-aa); } /* R3-4 팀 콘솔 표: 열 폭 고정(1024 에서 줄바꿈·표 안 가로 스크롤 0) + 상태 칸 칩 두 벌(운행·정산) — 레퍼런스 Shopify 주문 표·Xero 판 머리 */ .yc-bk-table.is-fixed { table-layout: fixed; } .yc-bk-table.is-fixed th.yc-bk-sel { width: 40px; } .yc-bk-table.is-fixed th.yc-bk-when { width: 124px; } .yc-bk-table.is-fixed th.yc-bk-driver { width: 88px; } .yc-bk-table.is-fixed th.yc-bk-amount { width: 136px; } .yc-bk-table.is-fixed th.yc-bk-status { width: 272px; } .yc-bk-table.is-fixed th.yc-bk-act { width: 140px; } @media (min-width: 1280px) { .yc-bk-table.is-fixed th.yc-bk-status { width: 330px; } .yc-bk-table.is-fixed th.yc-bk-driver { width: 104px; } } @media (min-width: 1680px) { .yc-bk-table.is-fixed th.yc-bk-status { width: 380px; } } .yc-bk-table.is-fixed tbody td { overflow: hidden; text-overflow: ellipsis; } .yc-bk-table.is-fixed :is(.yc-bk-where, .yc-bk-driver, .yc-bk-status) .yc-bk-cell { max-width: none; } .yc-bk-table.is-fixed .yc-bk-amount .yc-bk-unit { overflow: hidden; text-overflow: ellipsis; } .yc-bk-table.is-fixed .yc-bk-act .yc-bk-btn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; } /* 관리 판이 열리면 표가 좁다 — 판 머리가 두 칩을 다 보이므로 표는 지금 목록의 눈 칩만(1680 이상은 둘 다) */ body.yc-bk-drawer-open .yc-bk-table.is-fixed th.yc-bk-status { width: 200px; } @media (max-width: 1679px) { body.yc-bk-drawer-open .yc-bk-table .yc-bk-chip.is-other { display: none; } } @media (min-width: 1680px) { body.yc-bk-drawer-open .yc-bk-table.is-fixed th.yc-bk-status { width: 330px; } } @media (max-width: 1279px) { body.yc-bk-drawer-open .yc-bk-table.is-fixed { table-layout: auto; } body.yc-bk-drawer-open .yc-bk-table .yc-bk-chip { padding: 0; border: 0; background: none; } } .yc-bk-chips { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; vertical-align: middle; } .yc-bk-chip { display: inline-flex; align-items: center; flex: 0 0.3 auto; min-width: 0; max-width: 100%; padding: 1px 8px; border: 1px solid var(--yc-line); border-radius: 9999px; background: var(--yc-surface); white-space: nowrap; overflow: hidden; } .yc-bk-chip.is-other { flex: 0 1 auto; min-width: 30px; background: var(--yc-surface-2); } .yc-bk-chip.is-empty { color: var(--yc-text-3-aa); font-size: 13px; } .yc-bk-chip .yc-status { display: inline-flex; min-width: 0; font-size: 13px; line-height: 22px; } .yc-bk-chip .yc-status-dot { display: inline-block; margin-right: 0; } .yc-bk-status .yc-bk-chip .yc-status { display: inline-flex; overflow: hidden; text-overflow: ellipsis; } .yc-bk-chip.is-other .yc-status:not(.is-danger) { color: var(--yc-text-2); font-weight: var(--yc-fw-regular); } .yc-bk-drawer-pill:has(.yc-bk-chips) { min-height: 0; padding: 0; border: 0; background: none; } /* R3-5 [정산] 회사 계좌 줄: 계좌 한 줄 + ?(안내 문장은 도움말 사전 freight_bank) */ #bkSettleBankLine { display: flex; align-items: center; gap: 4px; } #bkSettleBankLine.hidden { display: none; } #bkSettleBankLine .yc-bk-bankline { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ===== R4 2026-10-16 ===== */ /* 관리 콘솔 R4(설계 scratch/audit-r24/design/r4-admin-console-brief-2026-10-16.md) — 토큰만, 원색 없음. ① [배차 현황] 처리할 것: 사유 칸(다음에 할 일 한 줄 — 말줄임, 마우스를 올리면 전문) · 기한 칸(지났으면 위험 색 + '지남', 오늘이면 강조 색 + '오늘' — 글자로도 구별). 묶음 머리는 팀 콘솔과 같은 .yc-bk-group(사유 이름 + 건수). */ .yc-bk-table td.yc-ad-reason { max-width: 0; width: 26%; } /* 남는 폭을 사유 칸이 받는다(좁으면 말줄임) — 1024 에서도 표 안 가로 넘침 0 */ .yc-bk-table .yc-ad-reason .yc-bk-cell { max-width: none; } .yc-bk-table .yc-ad-reason .yc-status { display: inline; font-size: 14px; } .yc-bk-table .yc-ad-reason .yc-status-dot { display: inline-block; margin-right: 6px; vertical-align: 1px; } .yc-bk-table .yc-ad-due { width: 1%; white-space: nowrap; } .yc-ad-due-text { color: var(--yc-text-2); font-size: 13px; font-weight: var(--yc-fw-semi); } .yc-ad-due-text.is-past { color: var(--yc-danger-aa); } .yc-ad-due-text.is-today { color: var(--yc-accent); } @media (max-width: 1279px) { #view-jobs .yc-bk-table:has(td.yc-ad-reason) :is(thead th, tbody td) { padding-left: 8px; padding-right: 8px; } } @media (min-width: 1280px) { #view-jobs .yc-bk-table:has(td.yc-ad-reason) .yc-bk-where .yc-bk-cell { min-width: 150px; } #view-jobs .yc-bk-table:has(td.yc-ad-reason) .yc-ad-owner .yc-bk-cell { min-width: 80px; } #view-jobs .yc-bk-table:has(td.yc-ad-reason) .yc-bk-driver .yc-bk-cell { min-width: 90px; } } /* ② [용차콜 정산] 타일 거르기(Stripe 상태 타일): 상자 줄 맨 위 한 줄 — 이름 + 건수, 고른 타일은 강조 테두리 · 상자 탭 밑줄 대신 테두리 */ #view-settlements .yc-bk-toolbar .yc-boxtabs.yc-ad-tiles { flex-basis: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--yc-space-2); padding: var(--yc-space-3) 0 0; overflow: visible; align-self: auto; } #view-settlements .yc-bk-toolbar .yc-ad-tiles .yc-boxtab.yc-ad-tile { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-height: 60px; padding: 8px 12px; border: 1px solid var(--yc-line); border-radius: var(--yc-radius-control); background: var(--yc-surface); color: var(--yc-text-2); font-size: 13px; font-weight: var(--yc-fw-semi); text-align: left; white-space: nowrap; } #view-settlements .yc-bk-toolbar .yc-ad-tiles .yc-ad-tile::after { display: none; } #view-settlements .yc-bk-toolbar .yc-ad-tiles .yc-ad-tile:hover { border-color: var(--yc-text-3-aa); color: var(--yc-text); } #view-settlements .yc-bk-toolbar .yc-ad-tiles .yc-ad-tile:is([aria-selected="true"], .is-active) { border-color: var(--yc-accent); box-shadow: inset 0 0 0 1px var(--yc-accent); background: var(--yc-accent-soft); color: var(--yc-text); } #view-settlements .yc-bk-toolbar .yc-ad-tiles .yc-ad-tile:focus-visible { outline: 2px solid var(--yc-focus); outline-offset: 2px; } .yc-ad-tile-label { overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .yc-ad-tiles .yc-boxtab-count.yc-ad-tile-count { color: var(--yc-text); font-size: 20px; font-weight: var(--yc-fw-bold); line-height: 1.2; font-variant-numeric: tabular-nums; } .yc-ad-tiles .yc-ad-tile:is([aria-selected="true"], .is-active) .yc-ad-tile-count { color: var(--yc-accent); } /* 열 고정(운송일·오더 · 화주 · 기사 · 약정 운임 · 운행 칩 · 정산 칩 · 세금계산서 칩 · 주 버튼): 칩 칸은 점 + 글자 한 줄, 1024~1279 는 칸 여백을 줄여 표 안 가로 넘침 0 */ #view-settlements .yc-bk-table :is(.yc-ad-run, .yc-ad-tax) { width: 1%; white-space: nowrap; } #view-settlements .yc-bk-table :is(.yc-ad-run, .yc-ad-tax) .yc-status { display: inline; font-size: 13px; } #view-settlements .yc-bk-table :is(.yc-ad-run, .yc-ad-tax) .yc-status-dot { display: inline-block; margin-right: 6px; vertical-align: 1px; } #view-settlements .yc-bk-table .yc-bk-status .yc-bk-cell { max-width: 180px; } #view-settlements .yc-bk-table .yc-bk-driver .yc-bk-cell { max-width: 110px; } #view-settlements .yc-bk-table .yc-ad-owner .yc-bk-cell { max-width: 140px; } @media (max-width: 1279px) { #view-settlements .yc-bk-table :is(thead th, tbody td) { padding-left: 8px; padding-right: 8px; } #view-settlements .yc-bk-table .yc-ad-owner .yc-bk-cell { max-width: 96px; } #view-settlements .yc-bk-table .yc-bk-driver .yc-bk-cell { max-width: 72px; } #view-settlements .yc-bk-table .yc-bk-status .yc-bk-cell { max-width: 120px; } } /* ③ 머리 안내 '한 줄 + ?'(E24a ycHelpTip): 접힘 안 안내 문단 끝의 ? 는 글자 줄 안에 */ .yc-set-body p > .yc-help, .yc-tab-head p > .yc-help { vertical-align: -6px; } .yc-help-line { display: flex; align-items: center; gap: 2px; } .yc-help-line > p { margin: 0; } /* ===== R2 2026-10-16 ===== */ /* R2 기사 앱 핵심 화면(설계 scratch/audit-r24/design/r2-driver-app-brief-v2-2026-10-16.md — 레퍼런스는 패턴만). 색은 토큰만. */ /* R2-1 [용차] 피드 머리 한 줄(Airtasker Filter·Sort 한 줄 · Handshake 거르기 + 칩): [필터](왼쪽) · 고른 조건 · '내 조건에 맞는 오더 N건' 칩(가운데) · [+](오른쪽 끝). [정렬] 셋(운송일 가까운 순 기본·등록 최신·건당 단가 높은 순 — 2026-10-16 메인 보정). 고른 조건과 칩이 한 줄에 들어가지 않으면(요약이 잘리거나 다음 줄로 밀리면 — main.js ycFitFeedHead) 칩은 줄 아래 자기 줄(.is-split — 줄바꿈 표식 ::after). */ .yc-feed-headrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; } .yc-feed-headrow > #feedStickyFilterBtn { order: 1; } .yc-feed-headrow > .yc-feed-summary { order: 2; flex: 1 1 0; min-width: 0; } .yc-feed-headrow > .yc-feed-summary:empty { display: none; } .yc-feed-headrow > #feedPrefsChip { order: 3; margin-inline: auto; } .yc-feed-headrow > .yc-feed-sort { order: 4; margin-left: auto; } .yc-feed-headrow > #feedDriverUploadBtn { order: 5; } .yc-feed-headrow > .desktop-only { order: 6; } .yc-feed-headrow.is-split::after { content: ''; order: 7; flex-basis: 100%; height: 0; } .yc-feed-headrow.is-split > #feedPrefsChip { order: 8; } /* [정렬](Handshake 'Date posted' 드롭다운 — 패턴만): 고른 값이 보이는 작은 고르기 칸, 누르는 자리 44px */ .yc-feed-sort { position: relative; display: inline-flex; align-items: center; flex: none; min-height: var(--yc-tap); border: 1px solid var(--yc-line); border-radius: var(--yc-radius-control); background: var(--yc-surface); color: var(--yc-text-2); } .yc-feed-sort > i { position: absolute; left: 10px; font-size: 12px; pointer-events: none; } .yc-feed-sort > select { min-height: calc(var(--yc-tap) - 2px); padding: 0 10px 0 28px; border: 0; border-radius: inherit; background: transparent; color: var(--yc-text); font-size: 13px; font-weight: var(--yc-fw-semi); cursor: pointer; } .yc-feed-sort > select:focus-visible { outline: 2px solid var(--yc-focus); outline-offset: 2px; } /* R2-2 오더 상세 머리의 등록자 신뢰 줄(Upwork 'About the client' — 이름 · 인증 ✓ · ★평점(건수) · 완료 오더 N건, 조각 사이에서만 꺾는다) */ .yc-detail-trust { display: flex; flex-wrap: wrap; align-items: center; margin: 6px 0 0; color: var(--yc-text-2); font-size: var(--yc-fs-body); line-height: 1.5; } .yc-detail-trust[hidden] { display: none; } .yc-detail-trust > span { white-space: nowrap; } .yc-detail-trust-who { color: var(--yc-text); font-weight: var(--yc-fw-semi); } .yc-detail-trust-label { color: var(--yc-text-2); font-weight: var(--yc-fw-regular); } .yc-detail-trust-dot { margin: 0 6px; color: var(--yc-text-3-aa); } .yc-detail-trust .yc-link { position: relative; min-height: 0; font-size: var(--yc-fs-body); } .yc-detail-trust .yc-link::after { content: ''; position: absolute; left: -4px; right: -4px; top: 50%; height: var(--yc-tap); transform: translateY(-50%); } .yc-detail-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 0; } /* R2-3 [일정] 관리 창(Grab Driver 진행 중 · Subway 단계 · Keeta 단계 바): 제목 = 다음에 할 일(점·색 그대로, 제목 크기) · 아이콘 줄 셋 같은 크기(56px — 손가락 44px 넘게) · 주 버튼 하나 · 아래 작은 링크 */ #ycItemSheetHead .yc-sheet-title.is-run .yc-status { font-size: inherit; font-weight: inherit; line-height: inherit; } .yc-run-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--yc-space-2); margin: var(--yc-space-3) 0 0; } .yc-run-action { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 56px; padding: 6px 4px; border: 1px solid var(--yc-line); border-radius: var(--yc-radius-control); background: var(--yc-surface); color: var(--yc-text); font-size: var(--yc-fs-body); font-weight: var(--yc-fw-semi); line-height: 1.2; text-decoration: none; cursor: pointer; } .yc-run-action > i { font-size: 18px; color: var(--yc-accent); } .yc-run-action:hover:not(:disabled) { background: var(--yc-surface-2); } .yc-run-action:focus-visible { outline: 2px solid var(--yc-focus); outline-offset: 2px; } .yc-run-action:disabled { cursor: not-allowed; color: var(--yc-text-3-aa); background: var(--yc-surface-2); } .yc-run-action:disabled > i { color: var(--yc-text-3-aa); } .yc-run-main, .yc-run-rest { margin-top: var(--yc-space-3); } .yc-run-note { margin: 6px 0 0; text-align: center; font-size: var(--yc-fs-meta); color: var(--yc-text-2); } .yc-run-info { margin-top: var(--yc-space-3); } .yc-run-links { padding-top: var(--yc-space-2); } /* R2-4 [정산] 머리(DoorDash 큰 숫자 하나 + 부가 한 줄 · Whatnot 칸 묶음 · Turo 항목 줄): D79 나머지 칸은 한 상자 안의 줄(①③④⑤), [바로 정산]은 ① 칸에만 */ .yc-earn-cells { margin: var(--yc-space-3) 0 var(--yc-space-2); border: 1px solid var(--yc-line); border-radius: var(--yc-radius-control); background: var(--yc-surface-2); } .yc-earn-cell { padding: 10px 12px; } .yc-earn-cell + .yc-earn-cell { border-top: 1px solid var(--yc-line); } .yc-earn-cell-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--yc-space-3); } .yc-earn-cell-label { color: var(--yc-text); font-size: var(--yc-fs-body); font-weight: var(--yc-fw-semi); } .yc-earn-cell-amt { flex: none; color: var(--yc-text); font-size: var(--yc-fs-card); font-weight: var(--yc-fw-bold); font-variant-numeric: tabular-nums; } .yc-earn-cell-sub { margin: 2px 0 0; color: var(--yc-text-2); font-size: var(--yc-fs-meta); line-height: 1.5; } .yc-earn-cell .yc-earn-cell-btn { margin-top: var(--yc-space-2); } .yc-earn-cell > .yc-link { min-height: var(--yc-tap); font-size: var(--yc-fs-meta); } .yc-earn-cell.is-muted :is(.yc-earn-cell-label, .yc-earn-cell-amt) { color: var(--yc-text-2); font-weight: var(--yc-fw-semi); } .yc-earn-cell [data-yc-instant-member-only] { margin: 4px 0 0; color: var(--yc-text-2); font-size: var(--yc-fs-meta); } /* 지급 이력 한 줄(Turo 거래 목록 — 종류·날짜·상태 · 금액) */ .yc-pay-hist { display: flex; align-items: center; justify-content: space-between; gap: var(--yc-space-2); padding: 8px 0; border-top: 1px solid var(--yc-line); font-size: var(--yc-fs-meta); } .yc-pay-hist-main { min-width: 0; color: var(--yc-text); } .yc-pay-hist-main > b { font-weight: var(--yc-fw-bold); } .yc-pay-hist-main .yc-link { font-size: var(--yc-fs-meta); font-weight: var(--yc-fw-bold); } .yc-pay-hist-sub { color: var(--yc-text-2); } .yc-pay-hist-amt { flex: none; color: var(--yc-text); font-weight: var(--yc-fw-bold); font-variant-numeric: tabular-nums; } /* ===== G-B 2026-10-16 ===== */ /* G-B 화주·주선사(설계 scratch/audit-r24/design/g-feature-gaps-brief-2026-10-16.md — 레퍼런스는 패턴만). 색은 토큰만. */ /* G-2 [내 오더] 맨 위 계정 준비 한 줄 요약(Faire 'Action required 1' — 숫자 + 다음 할 일 + 한 입구): '계정 준비 2/4 · 다음 줄' … [더보기](카드는 [더보기] 맨 위) */ .yc-ready-line { display: flex; align-items: center; justify-content: space-between; gap: var(--yc-space-3); margin: 0 0 var(--yc-space-3); padding: 2px var(--yc-space-4); border-radius: var(--yc-radius-control); background: var(--yc-surface); box-shadow: inset 3px 0 0 var(--yc-accent); border: 1px solid var(--yc-line); color: var(--yc-text); font-size: var(--yc-fs-body); line-height: 1.45; } .yc-ready-line.hidden { display: none; } .yc-ready-line .yc-link { flex: none; } .yc-ready-line-text { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .yc-ready-line-text > b { font-weight: var(--yc-fw-bold); } /* G-5 등록 창 '기사에게 전달할 안내' 칸 아래 칩(Careem 'Upon arrival please call' · Deliveroo 'Add instructions for your rider'): 누르면 글 끝에 한 줄. 이미 들어간 칩은 눌린 모양, 1000자를 넘기면 비활성 */ .yc-note-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .yc-note-chips .yc-pick { white-space: normal; text-align: left; min-height: 36px; padding: 4px 12px; } .yc-note-chips .yc-pick:disabled { opacity: .45; cursor: not-allowed; } @media (pointer: coarse) { .yc-note-chips .yc-pick { min-height: var(--yc-tap); } } /* G-5 기사 [일정] 관리 창 머리의 운행 단계 아래 한 줄 안내: 두 줄까지(넘으면 … + 눌러 펼침) */ .yc-sheet-note { display: block; margin: 6px 0 0; padding: 0; border: 0; background: none; width: 100%; min-height: var(--yc-tap); text-align: left; white-space: pre-line; color: var(--yc-text-2); font-size: var(--yc-fs-body); line-height: 1.5; cursor: pointer; } .yc-sheet-note > b { color: var(--yc-text); font-weight: var(--yc-fw-semi); } .yc-sheet-note.is-clamped { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .yc-sheet-note:focus-visible { outline: 2px solid var(--yc-focus); outline-offset: 2px; } /* ===== G-A 2026-10-16 ===== */ /* G-1 필터 창 '지금 고른 조건으로 알림 받기'(Handshake — 거르기 줄 아래 한 줄 + 버튼 하나) · 결과 한 줄 + [조건 보기] */ .yc-filter-alert { padding: var(--yc-space-3); border: 1px solid var(--yc-line); border-radius: var(--yc-radius-card); background: var(--yc-surface-2); } .yc-filter-alert-row { display: flex; align-items: center; justify-content: space-between; gap: var(--yc-space-3); } .yc-filter-alert-text { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; color: var(--yc-text); font-size: var(--yc-fs-body); font-weight: var(--yc-fw-bold); line-height: 1.4; } .yc-filter-alert-text > i { flex: none; color: var(--yc-accent); } .yc-filter-alert-row > .yc-btn { flex: none; } .yc-filter-alert-result { margin: var(--yc-space-2) 0 0; color: var(--yc-text-2); font-size: var(--yc-fs-meta); line-height: 1.5; } .yc-filter-alert-result .yc-link { min-height: var(--yc-tap); font-size: var(--yc-fs-meta); } .yc-filter-alert-links { display: flex; justify-content: flex-end; } .yc-filter-alert-links[hidden], .yc-filter-alert-result[hidden] { display: none; } .yc-filter-alert-links .yc-link { font-size: var(--yc-fs-meta); } /* G-4 운행 단계 아래 작은 시각(Bolt Food·7-Eleven — 끝난 단계에만, 오는 단계는 비움) · 콘솔 관리 판 머리 아래 단계 */ .yc-steps-time { max-width: 100%; color: var(--yc-text-2); font-size: 11px; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: normal; } /* 칸 폭 안에서 날짜/시각 두 줄로 접힌다 — 옛 nowrap 은 390 폭에서 'M/D HH:MM' 이 옆 칸과 붙었다(W-A3 S3 판정 ②) */ .yc-bk-drawer-steps { margin: 0 0 var(--yc-space-3); } .yc-bk-drawer-steps .yc-steps { margin-top: var(--yc-space-2); } /* G-3 '내 실적(나만 봄)' — 큰 값 하나 + 작은 줄(DoorDash·Turo) · 분포 막대(Grab) · 받은 태그(Uber Eats) */ .yc-perf { margin-top: var(--yc-space-2); padding-top: var(--yc-space-3); border-top: 1px solid var(--yc-line); } .yc-perf-title { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--yc-space-2); color: var(--yc-text); font-size: var(--yc-fs-card); font-weight: var(--yc-fw-bold); } .yc-perf-mine { padding: 1px 8px; border: 1px solid var(--yc-line); border-radius: 999px; color: var(--yc-text-2); font-size: 11px; font-weight: var(--yc-fw-semi); } .yc-perf-item { padding: 10px 0; border-bottom: 1px solid var(--yc-line); } .yc-perf-item:last-child { border-bottom: 0; } .yc-perf-label { display: flex; align-items: center; gap: 4px; margin: 0; color: var(--yc-text-2); font-size: var(--yc-fs-meta); font-weight: var(--yc-fw-semi); } .yc-perf-value { margin: 2px 0 0; color: var(--yc-text); font-size: 22px; font-weight: var(--yc-fw-bold); line-height: 1.25; font-variant-numeric: tabular-nums; } .yc-perf-value small { margin-left: 2px; font-size: var(--yc-fs-body); font-weight: var(--yc-fw-semi); color: var(--yc-text-2); } .yc-perf-none { color: var(--yc-text-2); font-size: var(--yc-fs-body); font-weight: var(--yc-fw-semi); } .yc-perf-sub { margin: 2px 0 0; color: var(--yc-text-2); font-size: var(--yc-fs-meta); } .yc-perf-bars { margin: var(--yc-space-2) 0 0; padding: 0; list-style: none; display: grid; gap: 4px; } .yc-perf-bar { display: grid; grid-template-columns: 2.5em minmax(0, 1fr) 2.5em; align-items: center; gap: 8px; font-size: var(--yc-fs-meta); color: var(--yc-text-2); } .yc-perf-bar-track { height: 8px; border-radius: 999px; background: var(--yc-surface-2); box-shadow: inset 0 0 0 1px var(--yc-line); overflow: hidden; } .yc-perf-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--yc-accent); } .yc-perf-bar-n { text-align: right; font-variant-numeric: tabular-nums; color: var(--yc-text); } .yc-perf-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; } .yc-perf-tag { padding: 3px 10px; border: 1px solid var(--yc-line); border-radius: 999px; background: var(--yc-surface); color: var(--yc-text); font-size: var(--yc-fs-meta); } .yc-perf-tag b { color: var(--yc-accent); font-weight: var(--yc-fw-bold); } /* ===== TIPS 2026-10-17 ===== */ /* 현장 팁(설계 scratch/audit-r24/design/camp-tips-brief-2026-10-17.md — 레퍼런스 komoot·Swarm·Tripadvisor·Grab·Calm·AllTrails, 패턴만). 색은 토큰만(B 톤, 새 색 없음). */ /* T-4 관리 창 주 버튼 아래 보조 버튼 하나(전구 — 테두리만, 주 버튼보다 한 단계 낮게) */ .yc-ct-entry { margin-top: var(--yc-space-3); } .yc-ct-btn { width: 100%; background: var(--yc-surface); color: var(--yc-accent); border: 1px solid var(--yc-line); } .yc-ct-btn:hover:not(:disabled) { border-color: var(--yc-accent); } .yc-ct-btn > i { font-size: 16px; } /* 겹 창: 오더 상세(60)·관리 창 위, 대화 방(76) 위, 안내 창(80) 아래 */ .yc-ct-overlay { z-index: 77; } .yc-ct-form { display: grid; gap: var(--yc-space-3); } .yc-ct-note { margin: 0; color: var(--yc-text-2); font-size: var(--yc-fs-meta); line-height: 1.5; } .yc-ct-warn { margin: 0; padding: 8px 12px; border-radius: var(--yc-radius-control); background: var(--yc-surface-2); color: var(--yc-text); font-size: var(--yc-fs-meta); } .yc-ct-msg { margin: 0; padding: var(--yc-space-3) 0; color: var(--yc-text-2); font-size: var(--yc-fs-body); } .yc-ct-chips { display: flex; flex-wrap: wrap; gap: 6px; } @media (pointer: coarse) { .yc-ct-chips .yc-pick { min-height: var(--yc-tap); } } .yc-ct-text { width: 100%; min-height: 120px; padding: 12px; border: 1px solid var(--yc-line); border-radius: var(--yc-radius-control); background: var(--yc-surface); color: var(--yc-text); font-size: var(--yc-fs-body); line-height: 1.5; resize: vertical; } .yc-ct-text::placeholder { color: var(--yc-text-2); } .yc-ct-text:focus-visible { outline: 2px solid var(--yc-focus); outline-offset: 1px; } .yc-ct-count { margin: -6px 0 0; text-align: right; color: var(--yc-text-2); font-size: var(--yc-fs-meta); font-variant-numeric: tabular-nums; } .yc-ct-save { width: 100%; min-height: var(--yc-btn-primary-h); } /* T-5 오더 상세 '현장 팁 N건' 절 — 얇은 구분선 줄(Swarm 팁 목록) · 머리 전구(Tripadvisor 'Tip:') */ .yc-ct-section { margin: var(--yc-space-3) 0 0; padding-top: var(--yc-space-3); border-top: 1px solid var(--yc-line); } .yc-ct-section[hidden] { display: none; } .yc-ct-headrow { display: flex; align-items: center; justify-content: space-between; gap: var(--yc-space-2); } .yc-ct-all { flex: none; gap: 4px; text-decoration: none; font-size: var(--yc-fs-meta); } .yc-ct-head { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--yc-text); font-size: var(--yc-fs-card); font-weight: var(--yc-fw-bold); } .yc-ct-head > i { color: var(--yc-accent); } .yc-ct-list { margin: 0; padding: 0; list-style: none; } .yc-ct-row { padding: 10px 0; border-bottom: 1px solid var(--yc-line); } .yc-ct-row:last-child { border-bottom: 0; } .yc-ct-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0; color: var(--yc-text-2); font-size: var(--yc-fs-meta); font-variant-numeric: tabular-nums; } .yc-ct-dot { color: var(--yc-text-2); } .yc-ct-tag { padding: 2px 10px; border-radius: 999px; background: var(--yc-accent-soft); color: var(--yc-accent); font-size: var(--yc-fs-meta); font-weight: var(--yc-fw-semi); } .yc-ct-body { margin: 4px 0 0; color: var(--yc-text); font-size: var(--yc-fs-body); line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; } .yc-ct-foot { display: flex; justify-content: flex-end; margin: 0; } .yc-ct-report { font-size: var(--yc-fs-meta); } .yc-ct-reasons { display: grid; gap: 6px; margin-top: 6px; } /* §5 T-9 권역 줄(배송지를 고른 때만 — 자유 글 칩 2~20자·최대 5, 같은 캠프 권역 제안) · T-10 피드 카드 글자 칩 '배송지 팁 N'(지급 주체 칩과 같은 높이·크기, 버튼 아님) */ .yc-ct-areas { display: grid; gap: 6px; } .yc-ct-areas[hidden] { display: none; } .yc-ct-area-label { margin: 0; color: var(--yc-text-2); font-size: var(--yc-fs-meta); font-weight: var(--yc-fw-semi); } .yc-ct-area-label span { font-weight: var(--yc-fw-regular, 400); } .yc-ct-area { display: inline-flex; align-items: center; gap: 2px; min-height: 28px; padding: 0 10px; border: 1px solid transparent; border-radius: 999px; background: var(--yc-accent-soft); color: var(--yc-accent); font-size: var(--yc-fs-meta); font-weight: var(--yc-fw-semi); white-space: nowrap; } .yc-ct-area.is-sug { border-color: var(--yc-line); background: var(--yc-surface); color: var(--yc-text-2); cursor: pointer; } @media (pointer: coarse) { .yc-ct-area.is-sug { min-height: var(--yc-tap); } } .yc-ct-area-x { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; min-height: 28px; margin-right: -8px; padding: 0; border: 0; background: none; color: inherit; font-size: 16px; line-height: 1; cursor: pointer; } @media (pointer: coarse) { .yc-ct-area-x { min-width: var(--yc-tap); min-height: var(--yc-tap); } } .yc-ct-area-add { display: flex; gap: 6px; align-items: center; } .yc-ct-area-input { flex: 1; min-width: 0; min-height: var(--yc-tap); padding: 0 12px; border: 1px solid var(--yc-line); border-radius: var(--yc-radius-control); background: var(--yc-surface); color: var(--yc-text); font-size: var(--yc-fs-body); } .yc-ct-area-input:focus-visible { outline: 2px solid var(--yc-focus); outline-offset: 1px; } .yc-ct-area-add .yc-pick { flex: none; } @media (pointer: coarse) { .yc-ct-area-add .yc-pick { min-height: var(--yc-tap); } } .yc-ct-area-sug { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; color: var(--yc-text-2); font-size: var(--yc-fs-meta); } .yc-ct-areas-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 6px 0 0; } .yc-ct-areas-line > i { color: var(--yc-accent); font-size: 12px; } .yc-ct-cardchip { display: inline-flex; align-items: center; gap: 4px; flex: none; box-sizing: border-box; min-height: 22px; margin-right: 6px; padding: 0 8px; border: 1px solid var(--yc-line); border-radius: 999px; background: var(--yc-surface); color: var(--yc-text-2); font-size: var(--yc-fs-meta); font-weight: var(--yc-fw-semi); line-height: 1.3; white-space: nowrap; vertical-align: middle; } .yc-ct-cardchip > i { color: var(--yc-accent); font-size: 11px; } .yc-jrow-line.is-money .yc-ct-cardchip { margin-right: 0; } /* ===== E24b-D 2026-10-17 ===== */ /* 기사·멤버십 안내 정리(설계 scratch/audit-r24/design/e24b-guidance-sweep-brief-2026-10-17.md §1): 신청 확인 창 상대 한 줄(D2 — 오더 상세 신뢰 줄과 같은 글자 크기·색) · 팀 배차 동의 한 줄(A20 한 원천) */ .yc-accept-who { margin-top: 4px; font-size: .875rem; font-weight: 500; line-height: 1.5; color: var(--yc-text-2); } .yc-consent-line { font-weight: var(--yc-fw-bold); color: var(--yc-text); } .yc-consent-scope { display: block; margin-top: 2px; color: var(--yc-text-2); } /* E24b 후속 2026-10-17: 동의 줄 아래 노출 범위 한 줄 */ /* ===== OV-A1 2026-10-17 ===== */ /* 앱 입구 — 로그인·가입·인증 센터·준비 카드(설계 scratch/audit-r24/design/overhaul-2026-10-17/w-a1-entry-brief-2026-10-17.md · 메인 S1 판정 w-a1-s1-review-2026-10-17.md · 레퍼런스 Betterment·Kit 로그인 / Descript·Basecamp PC 로그인 / X 계정 종류 가입 / Stake·Grab Driver 서류 / Urban Company 준비 상태). 색은 토큰만. */ /* 경고 띠 토큰(X03 — 오프라인 띠 utils.js 가 쓴다): 밝음 = 짙은 호박색 + 흰 글자(5.0:1), 어두움 = 밝은 호박색 + 짙은 글자(10:1) */ /* 로그인: 로고(알약 없이) → 제목 왼쪽 → 라벨 위 흰 입력 1px → 비밀번호 칸 오른쪽 아래 '비밀번호 찾기' → [로그인] 하나 → 글자 링크 둘. 세로 가운데는 로고 위·끝 요소 아래 자동 여백 */ #loginView > .yc-login-logo { display: flex; justify-content: center; width: 100%; max-width: 24rem; margin-top: auto; margin-bottom: 28px; } #loginView > .yc-login-card { margin-top: 0; margin-bottom: auto; } #loginView .yc-login-title { margin: 0 0 20px; font-size: var(--yc-fs-title); font-weight: 800; line-height: 1.3; letter-spacing: -0.01em; color: var(--yc-text); text-align: left; } #loginView .yc-login-forgot { display: flex; justify-content: flex-end; margin-top: 4px; } #loginView .yc-login-signup { margin: 20px 0 0; text-align: center; font-size: var(--yc-fs-body); color: var(--yc-text-2); } #loginView .yc-login-guest { margin: 2px 0 0; text-align: center; font-size: 13px; color: var(--yc-text-2); } @media (min-width: 1024px) { #loginView > .yc-login-logo { max-width: 420px; margin-bottom: 20px; } #loginView > .yc-login-card { margin-bottom: 0; } #loginView > [data-yc-login-intro] { margin-bottom: auto; } } /* 입구 입력 칸: 흰 바탕 + 1px 테두리(text-3 — 바탕 대비 3:1 이상, 밝음·어두움). 어두운 모드 공용 입력 규칙(구분선 색 !important)보다 이 자리가 앞선다(아이디 선택자) */ :is(#loginView, #signupView) .yc-entry-input { background-color: var(--yc-surface) !important; border: 1px solid var(--yc-text-3) !important; border-radius: var(--yc-radius-control); color: var(--yc-text); transition: border-color var(--yc-motion), box-shadow var(--yc-motion); } :is(#loginView, #signupView) .yc-entry-input:focus { border-color: var(--yc-accent) !important; box-shadow: 0 0 0 1px var(--yc-accent); } #signupView .yc-entry-input[readonly] { background-color: var(--yc-surface-2) !important; } .yc-entry-link { display: inline-flex; align-items: center; min-height: 32px; padding: 0 4px; border: 0; background: none; font-size: 13px; font-weight: 600; color: var(--yc-text-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .yc-entry-link:hover { color: var(--yc-text); } .yc-entry-link.is-strong { font-size: var(--yc-fs-body); font-weight: 700; color: var(--yc-accent); } .yc-entry-btn-outline { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--yc-accent); border-radius: var(--yc-radius-control); background: var(--yc-surface); color: var(--yc-accent); font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer; } .yc-entry-btn-outline:hover:not(:disabled) { background: var(--yc-accent-soft); } .yc-entry-btn-outline.is-done, .yc-entry-btn-outline.is-done:disabled { border-color: var(--yc-ok-aa); background: var(--yc-ok-soft); color: var(--yc-ok-aa); opacity: 1; cursor: default; } /* 가입 화면 머리 오른쪽 글자 버튼 [로그인](P1 UX02 2026-10-19 — 코덱스 p1-existing-account-entry.md): 누르는 높이·폭 44px, 오른쪽 끝(margin-left:auto)·한 줄 — 위아래 음수 여백으로 머리 높이는 그대로(누르는 자리만 44px), 360 폭에서도 [←]·제목과 겹치지 않는다. 색은 토큰만 */ #signupView .yc-signup-login { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; margin: -6px -8px -6px auto; padding: 0 8px; border: 0; border-radius: var(--yc-radius-control); background: none; color: var(--yc-accent); font-size: var(--yc-fs-body); font-weight: 700; line-height: 1.2; white-space: nowrap; cursor: pointer; } #signupView .yc-signup-login:hover { background: var(--yc-accent-soft); } #signupView .yc-signup-login:focus-visible { outline: 2px solid var(--yc-focus); outline-offset: 2px; } /* 가입: 회원 유형 = 세로 행 넷(굵은 이름 + 한 줄 + 오른쪽 라디오). 고른 행 = 주 색 테두리 + 옅은 주 색 면(밝음·어두움 모두 — N02·N03 밝은 모드 구분 결함) */ .yc-role-list { display: flex; flex-direction: column; gap: 8px; } .yc-role-row { display: block; cursor: pointer; } .yc-role-body { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 10px 14px; border: 1px solid var(--yc-line); border-radius: var(--yc-radius-card); background: var(--yc-surface); transition: border-color var(--yc-motion), background-color var(--yc-motion); } .yc-role-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .yc-role-name { font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--yc-text); } .yc-role-desc { font-size: 13px; line-height: 1.4; color: var(--yc-text-2); } .yc-role-radio { flex: 0 0 auto; box-sizing: border-box; width: 20px; height: 20px; border: 2px solid var(--yc-text-3); border-radius: 50%; background: var(--yc-surface); } .yc-role-row > input:checked + .yc-role-body { border-color: var(--yc-accent); background: var(--yc-accent-soft); box-shadow: inset 0 0 0 1px var(--yc-accent); } .yc-role-row > input:checked + .yc-role-body .yc-role-radio { border-color: var(--yc-accent); background: var(--yc-accent); box-shadow: inset 0 0 0 4px var(--yc-surface); } .yc-role-row > input:focus-visible + .yc-role-body { outline: 2px solid var(--yc-focus); outline-offset: 2px; } /* 아이디 칸 안 오른쪽 작은 글자 버튼 [중복확인](checkDuplicateId 그대로) */ .yc-id-field > .yc-entry-input { padding-right: 92px; } .yc-id-check { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); min-height: 36px; padding: 0 10px; border: 0; border-radius: var(--yc-radius-control); background: none; color: var(--yc-accent); font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer; } .yc-id-check:hover { background: var(--yc-accent-soft); } /* 본인확인 줄: 색 면 없이 1px 줄 안에 상태 글 + [인증하기] 테두리 버튼 */ .yc-id-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 14px; border: 1px solid var(--yc-line); border-radius: var(--yc-radius-control); background: var(--yc-surface); } .yc-id-row-text { margin: 0; min-width: 0; font-size: 13px; line-height: 1.5; color: var(--yc-text-2); } /* 인증 센터([더보기 > 인증] — 통합 프로필 창 [인증] 칸): 한 줄 + ? · 진행 막대 · 상태 한 줄 · 서류 행 · 주선사 한 줄 */ .yc-vc-head { display: flex; flex-direction: column; gap: 2px; } .yc-vc-guide { font-size: var(--yc-fs-body); line-height: 1.55; color: var(--yc-text-2); } .yc-vc-bizlink { display: flex; } .yc-vc-list { display: flex; flex-direction: column; } .yc-vc-progress { display: flex; align-items: center; gap: 10px; margin: 2px 0 6px; } .yc-vc-progress-bar { flex: 1; height: 6px; overflow: hidden; border-radius: 999px; background: var(--yc-surface-2); } .yc-vc-progress-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--yc-accent); } .yc-vc-progress.is-done .yc-vc-progress-bar > span { background: var(--yc-ok-mark); } .yc-vc-progress-label { flex: 0 0 auto; font-size: var(--yc-fs-meta); font-weight: 700; color: var(--yc-text-2); font-variant-numeric: tabular-nums; } .yc-vc-note { display: flex; align-items: flex-start; gap: 8px; padding: 8px 0; font-size: 13px; line-height: 1.5; color: var(--yc-text-2); } .yc-vc-note > i { flex: 0 0 auto; margin-top: 3px; color: var(--yc-text-3-aa); } .yc-vc-note-title { display: block; font-weight: 700; color: var(--yc-text); } .yc-vc-note-sub { display: block; font-size: var(--yc-fs-meta); color: var(--yc-text-2); } .yc-vc-note.is-danger > i, .yc-vc-note.is-danger .yc-vc-note-title { color: var(--yc-danger-aa); } .yc-vc-note.is-ok > i, .yc-vc-note.is-ok .yc-vc-note-title { color: var(--yc-ok-aa); } .yc-vc-row { padding: 12px 0; border-top: 1px solid var(--yc-line); } .yc-vc-row-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .yc-vc-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; } .yc-vc-title { font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--yc-text); } .yc-vc-row.is-expired .yc-vc-title { color: var(--yc-danger-aa); } .yc-vc-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 6px; background: var(--yc-surface-2); color: var(--yc-text-2); font-size: 11px; font-weight: 700; } .yc-vc-tag.is-req { background: var(--yc-accent-soft); color: var(--yc-accent); } .yc-vc-side { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; } .yc-vc-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 0 12px; border: 1px solid var(--yc-accent); border-radius: var(--yc-radius-control); background: var(--yc-surface); color: var(--yc-accent); font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer; } .yc-vc-btn:hover { background: var(--yc-accent-soft); } .yc-vc-link { display: inline-flex; align-items: center; min-height: 32px; padding: 0 2px; border: 0; background: none; color: var(--yc-text-2); font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .yc-vc-link:hover { color: var(--yc-text); } .yc-vc-reason { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--yc-text-2); } .yc-vc-file { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 6px 0 0; font-size: var(--yc-fs-meta); color: var(--yc-text-3-aa); } .yc-vc-file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .yc-vc-file-date { flex: 0 0 auto; } .yc-vc-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; margin-top: 4px; } .yc-vc-meta > .yc-vc-file { flex: 1; margin: 0; } .yc-vc-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 12px; margin-top: 4px; } .yc-vc-meta > .yc-vc-actions { flex: 0 0 auto; margin-top: 0; } .yc-vc-actions:empty { display: none; } .yc-vc-plate-row { display: flex; align-items: flex-end; gap: 8px; margin-top: 10px; } .yc-vc-plate { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; font-size: var(--yc-fs-meta); font-weight: 700; color: var(--yc-text-2); } .yc-vc-plate-input { box-sizing: border-box; width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid var(--yc-text-3); border-radius: var(--yc-radius-control); background: var(--yc-surface); color: var(--yc-text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .yc-vc-plate-input:focus { border-color: var(--yc-accent); outline: none; box-shadow: 0 0 0 1px var(--yc-accent); } [data-theme="dark"] #unifiedProfileModal .yc-vc-plate-input { border-color: var(--yc-text-3) !important; } .yc-vc-plate-row .yc-vc-btn { min-height: 44px; } .yc-vc-foot { margin: 14px 0 0; font-size: var(--yc-fs-meta); line-height: 1.5; color: var(--yc-text-3-aa); } /* 준비 카드(기사 배차 준비·화주/주선사 계정 준비 공용 — 글자 그대로, 모양만): 머리(제목 + 다음 할 일) · 오른쪽 버튼 하나 · 줄 목록은 접힘 */ .yc-ready-card { position: relative; padding: 14px 16px; border: 1px solid var(--yc-line); border-radius: var(--yc-radius-card); background: var(--yc-surface); } .yc-ready-more > summary { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 44px; list-style: none; cursor: pointer; } .yc-ready-more > summary::-webkit-details-marker { display: none; } .yc-ready-sum.has-cta { padding-right: 124px; } .yc-ready-title { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--yc-text); } .yc-ready-title::after { content: ''; width: 6px; height: 6px; margin-top: -3px; border-right: 2px solid var(--yc-text-3-aa); border-bottom: 2px solid var(--yc-text-3-aa); transform: rotate(45deg); transition: transform var(--yc-motion); } .yc-ready-more[open] .yc-ready-title::after { margin-top: 3px; transform: rotate(-135deg); } .yc-ready-next { font-size: 13px; line-height: 1.45; color: var(--yc-text-2); } .yc-ready-cta { position: absolute; top: 18px; right: 16px; display: inline-flex; align-items: center; justify-content: center; min-height: 36px; max-width: 112px; padding: 0 12px; border: 1px solid var(--yc-accent); border-radius: var(--yc-radius-control); background: var(--yc-surface); color: var(--yc-accent); font-size: 13px; font-weight: 700; line-height: 1.2; text-align: center; cursor: pointer; } .yc-ready-cta:hover { background: var(--yc-accent-soft); } .yc-ready-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid var(--yc-line); list-style: none; } .yc-ready-item { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.45; color: var(--yc-text); } .yc-ready-item > i { flex: 0 0 auto; margin-top: 3px; font-size: 12px; color: var(--yc-text-3); } .yc-ready-item.is-done { color: var(--yc-text-2); } .yc-ready-item.is-done > i { color: var(--yc-ok-mark); } .yc-ready-item-text { flex: 1; min-width: 0; } .yc-ready-item-sub { display: block; font-size: var(--yc-fs-meta); color: var(--yc-text-2); } .yc-ready-link { flex: 0 0 auto; padding: 0 2px; border: 0; background: none; color: var(--yc-accent); font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } /* 밝은 로고 그림(logo-horizontal-sm.png)은 흰 바탕이 들어 있다 — 옅은 바탕(PC --yc-page) 위에서 흰 네모가 보이지 않게 곱하기로 얹는다(어두운 모드는 투명 로고 그대로) */ #loginView > .yc-login-logo .yc-logo-light { mix-blend-mode: multiply; } /* ===== OV-A3 2026-10-17 ===== */ /* 화주·주선사 앱(설계 scratch/audit-r24/design/overhaul-2026-10-17/w-a3-shipper-brief-2026-10-17.md · 메인 S1 판정 w-a3-s1-review-2026-10-17.md — 레퍼런스 Shopify 단계 요약·Fiverr Manage orders·Linktree More · Aside 결). 토큰만. */ /* A3-1 등록 창 진행 표시(#uploadStepper — 'n/3' 머리·가는 막대)는 DSG-UX-LANDING 2026-10-19 한 화면 등록으로 지웠다(마크업 없음 — 그룹 셋은 맨 끝 LANDING-AI 묶음). */ /* A3-1 3단계 카드 결 하나(요약·모집 마감·모집 대상 = 흰 면 1px · 회색 면·안쪽 회색 상자 없음) + 1단계 등록 주체(leader-post-ui.js)도 같은 결 */ #uploadModal .yc-upload-recap { background: var(--yc-surface); } .yc-app #uploadModal .yc-ov-step-card, .yc-app #uploadLeaderPostBox [data-yc-leader-post] { background: var(--yc-surface) !important; border: 1px solid var(--yc-line) !important; border-radius: var(--yc-radius-card) !important; box-shadow: none !important; } .yc-app #uploadModal .yc-ov-legal-box { background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; } /* A3-2 관리 창 드문 동작 한 줄(main.js ycMergeSheetRareLinks — 본문 작은 링크 줄을 창 끝 링크 줄로 합침) */ #ycItemSheetBody .yc-sheet-links[data-yc-rare-merged] { gap: 4px 14px; } /* A3-4 [더보기] '결제·정산' 한 줄(옛 [결제수단] 큰 카드 → 줄 + 창 #ycPayMethodsSheet) — 아이콘 단색 · 이름 + 상태 한 줄 · 화살표 */ .yc-ov-pay-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; margin: 0; padding: 12px 16px; border: 1px solid var(--yc-line); border-radius: var(--yc-radius-card); background: var(--yc-surface); color: var(--yc-text); font: inherit; text-align: left; cursor: pointer; } .yc-ov-pay-row:hover { background: var(--yc-surface-2); } .yc-ov-pay-row:focus-visible { outline: 2px solid var(--yc-focus); outline-offset: 2px; } .yc-ov-pay-row.is-loading { cursor: default; font-size: 13px; color: var(--yc-text-2); } .yc-ov-pay-row-ico { flex: none; width: 20px; text-align: center; color: var(--yc-text-2); font-size: 16px; } .yc-ov-pay-row-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .yc-ov-pay-row-txt b { font-size: 14px; line-height: 1.4; font-weight: var(--yc-fw-bold); color: var(--yc-text); } .yc-ov-pay-row-txt small { font-size: 12px; line-height: 1.4; color: var(--yc-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; } .yc-ov-pay-row-go { flex: none; color: var(--yc-text-3-aa); font-size: 12px; } .yc-ov-pm-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; } .yc-ov-pm-actions { display: inline-flex; flex-wrap: wrap; gap: 6px; } .yc-ov-pm-line { margin: 0 0 4px; font-size: 12px; line-height: 1.5; font-weight: var(--yc-fw-semi); color: var(--yc-text); } /* A3-5 화주 확인 창(팀장이 올린 오더 — leader-post-ui.js): 키·값 줄 → 요약 카드 결(흰 면 1px · 줄 사이 구분선) */ .yc-ov-lp-summary { border: 1px solid var(--yc-line); border-radius: var(--yc-radius-card); background: var(--yc-surface); padding: 2px 14px; } .yc-ov-lp-summary > div { border-bottom-width: 0 !important; padding-top: 9px !important; padding-bottom: 9px !important; } .yc-ov-lp-summary > div + div { border-top: 1px solid var(--yc-line); } /* A3-6 결제 창: 토큰 결(payment.css 원색 → 토큰 · 금액 큰 숫자·한 줄·[결제] 하나는 그대로 — payment.css 가 뒤에 실려 :root 로 특이도를 올린다) */ :root .yc-app .yc-payment-dialog { border-color: var(--yc-line); border-radius: var(--yc-radius-card); background: var(--yc-surface); color: var(--yc-text); box-shadow: none; } :root .yc-app .yc-payment-dialog #ycPaymentMode { color: var(--yc-accent); } :root .yc-app .yc-payment-dialog #ycPaymentClose { border-color: var(--yc-line); } :root .yc-app .yc-payment-dialog :is(#ycPaymentOrder, #ycPaymentInstruction) { color: var(--yc-text-2); } :root .yc-app .yc-payment-dialog #ycPaymentStatus:not(:empty) { background: var(--yc-accent-soft); color: var(--yc-text); } :root .yc-app .yc-payment-dialog .yc-payment-footer { border-top-color: var(--yc-line); } :root .yc-app .yc-payment-dialog .yc-payment-provider { border-color: var(--yc-line); } :root .yc-app .yc-payment-dialog #ycPaymentSubmit { background: var(--yc-accent); color: var(--yc-on-accent); border-radius: var(--yc-radius-control); } .yc-app #platformEscrowModal #pemLateFeeSummary { background: var(--yc-surface) !important; border-color: var(--yc-line) !important; } /* A3-7 PC 폭(≥1024 — 휴대폰 열 mobile-preview-mode, 새 틀 없음): 바깥 어두운 면 → 페이지 밝은 면 · 열 테두리 1px · 그림자 없음(Aside 결) */ body.mobile-preview-mode, body.mobile-preview-mode .app-container { background-color: var(--yc-page) !important; } /* 바깥 면은 styles.css ≥1024 의 body·.app-container 가 짙은 남색으로 칠한다(옛 고정 hex 020617) */ body.mobile-preview-mode #mainAppView { box-shadow: none !important; border-left: 1px solid var(--yc-line) !important; border-right: 1px solid var(--yc-line) !important; } /* ===== OV-T 2026-10-17 ===== */ /* 디자인 전면 개편 v3 W-T 팀 콘솔(설계 scratch/audit-r24/design/overhaul-2026-10-17/w-t-team-console-brief-2026-10-17.md · 메인 S1 판정 w-t-s1-review-2026-10-17.md). 토큰만 쓴다(색 값 직접 없음). 범위 = 팀 콘솔 화면(#view-broker-*) · 콘솔 표 전용 클래스 · 이 파동이 만든 클래스(.yc-ovt-* · .yc-ops-* · .yc-ts-* · .yc-fpc-* · .yc-tn-row · .yc-csv-*) — 관리 콘솔 화면(#view-jobs · #userListPane …)·관리 콘솔 KPI·앱 목록(.yc-tw-state)·공용 틀 규칙(#adminSidebar · .yc-console-head)은 바꾸지 않는다(사이드바·머리는 이미 목표 결 — S1). */ /* T-1 틀: 상자 줄(상자 탭 + 거르기)은 테두리 상자 대신 본문 폭 1px 줄 위 — 팀 콘솔 [배차 현황]·[정산]만(관리 콘솔 상자 줄은 W-C) */ :is(#view-broker-dispatch, #view-broker-settlement) > .yc-bk-toolbar { background: transparent; border: 0; border-bottom: 1px solid var(--yc-line); border-radius: 0; padding: 0; } :is(#view-broker-dispatch, #view-broker-settlement) > .yc-bk-toolbar .yc-boxtabs.is-flat .yc-boxtab::after { bottom: -1px; } /* T-1 [정산] KPI: 테두리 카드 → 숫자 + 라벨 가로 줄(마크업 .yc-kpi 그대로 · 숫자는 예전 한 줄 요약 그대로) */ #view-broker-settlement > .yc-kpis { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 32px; } #view-broker-settlement > .yc-kpis > .yc-kpi { flex-direction: row; align-items: baseline; gap: 8px; padding: 0; border: 0; border-radius: 0; background: none; } #view-broker-settlement > .yc-kpis .yc-kpi-label { font-size: 13px; } /* T-4 [소속 기사] — 머리 [기사 초대] 하나 → 운영 팀 한 줄 → 팀원 표(⋯) → 운영 팀 줄 목록 → 한 줄 셋 → 설정 줄 */ .yc-ovt-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 44px; padding: 8px 16px; border-radius: var(--yc-radius-control); background: var(--yc-surface-2); } .yc-ovt-sum-text { flex: 1 1 auto; min-width: 0; margin: 0; color: var(--yc-text); font-size: 14px; font-weight: var(--yc-fw-semi); font-variant-numeric: tabular-nums; } .yc-ovt-sum-link { margin-left: auto; padding: 0; border: 0; background: none; color: var(--yc-accent); font-size: 13px; font-weight: var(--yc-fw-bold); white-space: nowrap; cursor: pointer; } .yc-ovt-sum-link:hover { text-decoration: underline; } .yc-ovt-sum-link:focus-visible { outline: 2px solid var(--yc-focus); outline-offset: 2px; border-radius: 4px; } /* 팀원 표의 관리 칸 ⋯: 메뉴가 표 상자에 잘리지 않게(1024~1279 는 칸 여백 규칙으로 가로 넘침 없음 — 그대로) */ #view-broker-fleet .yc-bk-tablewrap { overflow: visible; } #view-broker-fleet .yc-bk-table thead th:first-child { border-top-left-radius: var(--yc-radius-card); } #view-broker-fleet .yc-bk-table thead th:last-child { border-top-right-radius: var(--yc-radius-card); } #view-broker-fleet .yc-bk-table .yc-bk-act { width: 1%; padding-right: 8px; } #view-broker-fleet .yc-more-menu > a { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 34px; padding: 6px 10px; border-radius: 8px; color: var(--yc-text); font-size: 12px; font-weight: 700; text-decoration: none; white-space: nowrap; } #view-broker-fleet .yc-more-menu > a:hover { background: var(--yc-raised); } /* (B) 운영 팀 줄 목록(partner-ui.js ycMountTeamStructure 줄 모드) */ .yc-ovt-group-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; } .yc-ovt-group-title { display: inline-flex; align-items: center; gap: 4px; margin: 0; color: var(--yc-text); font-size: 15px; font-weight: var(--yc-fw-bold); } .yc-ovt-mini { min-height: 32px; padding: 0 12px; border: 1px solid var(--yc-line); border-radius: var(--yc-radius-control); background: var(--yc-surface); color: var(--yc-text-2); font-size: 13px; font-weight: var(--yc-fw-semi); cursor: pointer; } .yc-ovt-mini:hover { background: var(--yc-surface-2); color: var(--yc-text); } .yc-ts-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--yc-line); border-radius: var(--yc-radius-card); background: var(--yc-surface); } .yc-ts-row + .yc-ts-row { border-top: 1px solid var(--yc-line); } .yc-ts-line { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px 8px 16px; } .yc-ts-name { flex: 0 0 auto; max-width: 240px; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--yc-text); font-size: 14px; font-weight: var(--yc-fw-bold); } .yc-ts-meta { flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--yc-text-2); font-size: 13px; font-variant-numeric: tabular-nums; } .yc-ts-pending { color: var(--yc-danger-aa); font-weight: var(--yc-fw-bold); } .yc-ts-members { padding: 0 16px 8px; } .yc-ts-members > summary { display: inline-flex; align-items: center; min-height: 28px; color: var(--yc-text-2); font-size: 12px; font-weight: var(--yc-fw-semi); cursor: pointer; } .yc-ts-members > ul { margin: 2px 0 0; padding: 0; list-style: none; } .yc-ts-member { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; border-top: 1px solid var(--yc-line); color: var(--yc-text); font-size: 13px; } .yc-ts-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .yc-ts-role { color: var(--yc-accent); font-size: 12px; } .yc-ts-car { color: var(--yc-text-3-aa); font-size: 12px; } .yc-ts-offers { margin-top: 10px; } .yc-ts-offers-title { margin: 0 0 4px; color: var(--yc-text-2); font-size: 12px; font-weight: var(--yc-fw-bold); cursor: default; } details.yc-ts-offers > .yc-ts-offers-title { cursor: pointer; } /* (C)·(D) 한 줄 셋·설정 줄 — 구분선 줄(테두리 카드 아님), 보이는 줄이 없으면 묶음도 숨긴다 */ /* 한 줄 셋·설정 줄은 테두리 상자가 아니라 구분선(메인 S1 판정 [소속 기사]) — 묶음 위·아래 1px 줄 + 줄 사이 1px 줄 */ .yc-ovt-lines { border-top: 1px solid var(--yc-line); border-bottom: 1px solid var(--yc-line); } .yc-ovt-lines:not(:has(> .yc-ovt-line:not(.hidden))) { display: none; } .yc-ovt-line { display: flex; align-items: center; gap: 8px 16px; min-height: 52px; padding: 8px 4px; } .yc-ovt-lines > .yc-ovt-line:not(.hidden) ~ .yc-ovt-line:not(.hidden) { border-top: 1px solid var(--yc-line); } .yc-ovt-line-name { flex: 0 0 180px; margin: 0; color: var(--yc-text); font-size: 14px; font-weight: var(--yc-fw-bold); } .yc-ovt-line-value { flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--yc-text-2); font-size: 13px; } .yc-ovt-line-value p { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .yc-ovt-line-acts { display: flex; flex: 0 0 auto; align-items: center; gap: 12px; margin-left: auto; } .yc-ovt-line-acts .yc-bk-btn { min-height: 32px; padding: 0 12px; font-size: 13px; } .yc-ovt-line-more { padding: 0 4px 10px; } .yc-ovt-line-more:empty { display: none; } /* 팀 평가 줄: 접힌 동안 첫 줄(평점 요약)만 — [열기]를 누르면 분포·좋은 점까지(broker-pc.js bkToggleTeamLine) */ #bkTeamReviewCard:not(.is-open) #bkTeamReviewView > div > :not(:first-child) { display: none; } #bkTeamReviewCard.is-open { align-items: flex-start; } #bkTeamReviewCard.is-open #bkTeamReviewView, #bkTeamReviewCard.is-open #bkTeamReviewView p { overflow: visible; white-space: normal; } /* 설정 줄: 이름 + ? + 오른쪽 스위치(체크박스 그대로 — role="switch") */ .yc-ovt-line.is-setting { gap: 6px; } .yc-ovt-line.is-setting .yc-ovt-line-name { flex: 0 1 auto; font-weight: var(--yc-fw-semi); cursor: pointer; } .yc-ovt-switch { -webkit-appearance: none; appearance: none; position: relative; flex: 0 0 auto; width: 40px; height: 24px; margin: 0 0 0 auto; border: 1px solid var(--yc-line); border-radius: 9999px; background: var(--yc-surface-2); cursor: pointer; transition: background-color var(--yc-motion) ease; } .yc-ovt-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--yc-text-3-aa); transition: transform var(--yc-motion) ease; } .yc-ovt-switch:checked { border-color: var(--yc-accent); background: var(--yc-accent); } .yc-ovt-switch:checked::after { transform: translateX(16px); background: var(--yc-on-accent); } .yc-ovt-switch:focus-visible { outline: 2px solid var(--yc-focus); outline-offset: 2px; } .yc-ovt-switch:disabled { opacity: .55; cursor: progress; } /* T-7 [운영 팀 요금]·[협력 관리] 운영 팀 줄(partner-ui.js opsRowHtml — 앱·팀 콘솔 공용): 머리 줄 → 팀원·세금계산서 줄 → 동작 줄 하나(+ ⋯) */ .yc-ops-list { margin: 0; padding: 0; list-style: none; } .yc-ops-list > li + li { border-top: 1px solid var(--yc-line); } .yc-ops-row { display: grid; gap: 4px; padding: 12px 0; } .yc-ops-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; } .yc-ops-name { margin: 0; color: var(--yc-text); font-size: 14px; font-weight: var(--yc-fw-bold); } .yc-ops-fee { margin: 0; color: var(--yc-text); font-size: 13px; font-variant-numeric: tabular-nums; } .yc-ops-sub { margin: 0; color: var(--yc-text-2); font-size: 12px; line-height: 1.5; } .yc-ops-note { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; margin: 0; color: var(--yc-text-2); font-size: 12px; } .yc-ops-note b { color: var(--yc-danger-aa); } .yc-ops-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; } .yc-ops-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--yc-line); border-radius: var(--yc-radius-control); background: var(--yc-surface); color: var(--yc-text-2); font-size: 13px; font-weight: var(--yc-fw-semi); cursor: pointer; } .yc-ops-btn:hover { background: var(--yc-surface-2); color: var(--yc-text); } .yc-ops-btn.is-primary { border-color: transparent; background: var(--yc-accent); color: var(--yc-on-accent); font-weight: var(--yc-fw-bold); } .yc-ops-btn.is-primary:hover { background: var(--yc-accent-hover); } .yc-ops-btn:focus-visible { outline: 2px solid var(--yc-focus); outline-offset: 2px; } /* T-2 [스케줄] 한 주 표 칸 = 옅은 면 칩 하나(콘솔 표 전용 .yc-tw-chip — 앱 목록 .yc-tw-state 그대로), 아이콘 없음 */ :root { --yc-tw-note-soft: color-mix(in srgb, var(--yc-c-ssg) 16%, var(--yc-surface)); } /* 칩이 칸을 채우므로 날짜 열 폭을 같게(자동 폭이면 머리 글자 '근무 N'·'·' 에 따라 칩 폭이 달라 보였다) — 팀원 열 220 + 날짜 일곱 열 같은 폭 */ .yc-tw-table { table-layout: fixed; } .yc-tw-table thead th:first-child { width: 220px; } .yc-tw-table tbody td { padding: 4px; } .yc-tw-table .yc-tw-cell { min-height: 44px; padding: 0; } .yc-tw-chip { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 36px; padding: 0 6px; border: 1px solid transparent; border-radius: 8px; color: var(--yc-text-2); font-size: 12px; font-weight: var(--yc-fw-bold); white-space: nowrap; } .yc-tw-chip[data-s="work"] { border-color: color-mix(in srgb, var(--yc-accent) 24%, var(--yc-surface)); background: var(--yc-accent-soft); color: var(--yc-accent); } .yc-tw-chip[data-s="off"] { border-color: var(--yc-line); background: repeating-linear-gradient(135deg, var(--yc-surface-2) 0 5px, var(--yc-surface) 5px 10px); color: var(--yc-text-2); } .yc-tw-chip[data-s="custom"] { background: var(--yc-tw-note-soft); color: var(--yc-text); } .yc-tw-chip[data-s="standby"] { border-color: var(--yc-line); background: var(--yc-surface); color: var(--yc-text-2); } .yc-tw-chip[data-s="none"] { color: var(--yc-text-3-aa); font-weight: var(--yc-fw-regular); } .yc-tw-table tbody td.is-today { background: color-mix(in srgb, var(--yc-accent) 4%, var(--yc-surface)); } button.yc-tw-cell:hover { background: none; } button.yc-tw-cell:hover .yc-tw-chip { border-color: var(--yc-accent); } /* T-3 [커뮤니티] 팀 공지 칸(콘솔 전용 ycTeamNoticeRender): 카드 → 구분선 줄 */ .yc-tn-list { border: 1px solid var(--yc-line); border-radius: var(--yc-radius-card); background: var(--yc-surface); } .yc-tn-row { display: grid; gap: 2px; padding: 10px 14px; } .yc-tn-row + .yc-tn-row { border-top: 1px solid var(--yc-line); } .yc-tn-row-top { display: flex; align-items: center; gap: 6px; min-width: 0; } .yc-tn-tags { display: inline-flex; flex: 0 0 auto; gap: 4px; } .yc-tn-row .yc-tn-title { flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .yc-tn-date { flex: 0 0 auto; color: var(--yc-text-3-aa); font-size: 12px; font-variant-numeric: tabular-nums; } .yc-tn-row-sub { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 12px; } .yc-tn-row-sub .yc-tf-acts { margin-top: 0; } /* T-5 [기사 모집 공고](fixed-post-ui.js 콘솔 갈래 — 앱 카드는 그대로): 줄 = 제목·계약 종류·지역 | 상태 | 만료 | 연락 | [모집 완료] + ⋯ */ .yc-fpc-list { border: 1px solid var(--yc-line); border-radius: var(--yc-radius-card); background: var(--yc-surface); } .yc-fpc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto auto; align-items: center; gap: 8px 20px; min-height: 60px; padding: 8px 12px 8px 16px; } .yc-fpc-row + .yc-fpc-row { border-top: 1px solid var(--yc-line); } .yc-fpc-title { display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0; color: var(--yc-text); font-size: 14px; font-weight: var(--yc-fw-bold); } .yc-fpc-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .yc-fpc-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 2px 0 0; color: var(--yc-text-2); font-size: 12px; } .yc-fpc-note { margin: 2px 0 0; color: var(--yc-text-2); font-size: 12px; } .yc-fpc-exp, .yc-fpc-contacts { color: var(--yc-text-2); font-size: 13px; white-space: nowrap; } .yc-fpc-acts { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; } .yc-fpc-acts .yc-bk-btn { min-height: 32px; padding: 0 12px; font-size: 13px; } /* T-7 CSV 대량 등록 미리보기: 오류 줄 = 위험 옅은 면 · 정상 = ok 칩 · 머리의 건수 칩 → 합계 한 줄(글자) */ .yc-csv-row > td { background: var(--yc-surface); } .yc-csv-row:hover > td { background: var(--yc-surface-2); } .yc-csv-row.is-error > td { background: var(--yc-danger-soft); } .yc-csv-errs { display: inline-block; max-width: 220px; color: var(--yc-danger-aa); font-size: 11px; font-weight: var(--yc-fw-bold); line-height: 1.4; white-space: normal; word-break: keep-all; } .yc-csv-ok { min-height: 22px; font-size: 11px; } #bulkPreviewContainer :is(#bulkTotalBadge, #bulkValidBadge, #bulkErrorBadge, #bulkSettleBadge) { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; color: var(--yc-text-2) !important; font-size: 13px; } #bulkPreviewContainer #bulkTotalBadge { color: var(--yc-text) !important; } #bulkPreviewContainer #bulkErrorBadge { color: var(--yc-danger-aa) !important; } /* T-7 단건 등록 창(#singleUploadModal): 입력은 면 바탕 + 1px 구분선 — 팀 콘솔만(body:not(.yc-app)). 앱 [팀] 머리 [오더 등록]의 같은 창(index.html)은 앱 파동 몫이라 그대로 */ body:not(.yc-app) #singleUploadModal form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) { border: 1px solid var(--yc-line) !important; background-color: var(--yc-surface) !important; } body:not(.yc-app) #singleUploadModal form :is(input, select, textarea):focus-visible { outline: 2px solid var(--yc-focus); outline-offset: 1px; } /* ⋯ 메뉴(이 파동의 줄들): 손가락 기기에서는 누르는 자리 44px */ @media (pointer: coarse) { :is(.yc-ops-more, .yc-ts-more, .yc-fpc-more, .yc-bk-member-more) > summary { min-width: 44px; min-height: 44px; } :is(.yc-ops-more, .yc-ts-more, .yc-fpc-more, .yc-bk-member-more) .yc-more-menu > :is(button, a) { min-height: 44px; } .yc-ops-btn { min-height: 44px; } } /* ===== OV-A2b 2026-10-17 ===== */ /* 팀 탭·기사 모집·협력 관리(설계 scratch/audit-r24/design/overhaul-2026-10-17/w-a2b-team-board-brief-2026-10-17.md · 메인 S1 판정 w-a2b-s1-review-2026-10-17.md). A2b-1 팀 찾기(Nextdoor·GroupMe·Strava 줄): 조절 줄 하나([필터•]·고른 조건 칩·[정렬 ▾] — 같은 테두리 결) · 모집 줄 3줄(구분선 — 테두리 카드 없음) + 오른쪽 [합류 신청] 테두리 · 바닥 한 줄 + ? */ .yc-tbc { display: flex; align-items: center; gap: 8px; min-width: 0; } .yc-tbc-btn { position: relative; flex: none; color: var(--yc-text); } .yc-tbc-btn > i { font-size: 12px; } .yc-tbc-chips { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; } .yc-tbc-chips::-webkit-scrollbar { display: none; } .yc-tbc-chips > .yc-pick-x { flex: none; } .yc-tbr-list { border-top: 1px solid var(--yc-line); } .yc-tbr { position: relative; padding: 12px 0; border-bottom: 1px solid var(--yc-line); } .yc-tbr-open { display: flex; align-items: flex-start; gap: 12px; min-width: 0; border-radius: var(--yc-radius-control); cursor: pointer; } .yc-tbr-open:focus-visible { outline: 2px solid var(--yc-focus); outline-offset: 2px; } .yc-tbr-main { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; } /* [합류 신청]·상태 글자는 1줄 오른쪽(줄 위쪽 고정) — 2·3줄이 행 폭을 다 쓴다(360에서 '팀원 N명 · 빈자리 N · 1순위 지역'이 잘리지 않게) */ .yc-tbr-l1 { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 40px; padding-right: 104px; } .yc-tbr-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--yc-fs-card); font-weight: var(--yc-fw-bold); line-height: 1.4; color: var(--yc-text); } .yc-tbr-l2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; line-height: 1.45; color: var(--yc-text-2); font-variant-numeric: tabular-nums; } .yc-tbr-l3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--yc-fs-meta); line-height: 1.45; color: var(--yc-text-3-aa); font-variant-numeric: tabular-nums; } .yc-tbr-apply, .yc-tbr-state { position: absolute; top: 12px; right: 0; } .yc-tbr-apply { min-height: 40px; padding: 0 12px; border-color: var(--yc-accent); color: var(--yc-accent); } .yc-tbr-apply:hover:not(:disabled) { background: var(--yc-accent-soft); color: var(--yc-accent); } .yc-tbr-state { display: inline-flex; align-items: center; min-height: 40px; font-size: var(--yc-fs-meta); font-weight: var(--yc-fw-semi); color: var(--yc-text-3-aa); white-space: nowrap; } .yc-tb-foot { display: flex; align-items: center; gap: 2px; margin: 0; font-size: var(--yc-fs-meta); line-height: 1.5; color: var(--yc-text-3-aa); } @media (pointer: coarse) { .yc-tbc-btn, .yc-tbr-apply { min-height: var(--yc-tap); } .yc-tbr-l1 { min-height: var(--yc-tap); } } /* A2b-2 커뮤니티(Reddit·BFF 고정 글): 공지 = 핀 머리 + 줄(분류 칩·제목·확인 N/M·[전문 보기] 작은 글자) · 이달의 팀원 옅은 띠 · 한 줄 글쓰기(초점이 가면 펼침) · 글 = 구분선 줄 + 본문 세 줄 접기. 글 줄은 팀 콘솔 [커뮤니티]도 같은 함수(ycTeamFeedRender — 메인 S1: 같은 줄이 맞다). 공지 줄은 앱만(main.js renderTeamNotices — 콘솔 공지 칸 ycTeamNoticeRender 는 W-T). */ .yc-ntr-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; } .yc-ntr-head-title { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: var(--yc-fw-bold); color: var(--yc-text); } .yc-ntr-head-title > i { color: var(--yc-accent); font-size: 12px; } .yc-ntr-count { margin-left: 2px; font-size: var(--yc-fs-meta); font-weight: var(--yc-fw-semi); color: var(--yc-text-3-aa); } .yc-ntr-list { border-top: 1px solid var(--yc-line); } .yc-ntr { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--yc-line); } .yc-ntr-l1 { display: flex; align-items: center; gap: 6px; min-width: 0; } .yc-ntr-pin { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: var(--yc-fw-bold); color: var(--yc-text-2); } .yc-ntr-pin > i { font-size: 10px; color: var(--yc-accent); } .yc-ntr-time { margin-left: auto; font-size: var(--yc-fs-meta); color: var(--yc-text-3-aa); font-variant-numeric: tabular-nums; white-space: nowrap; } .yc-ntr-title { display: block; width: 100%; min-height: 32px; padding: 0; border: 0; background: none; color: var(--yc-text); font-size: 14px; font-weight: var(--yc-fw-bold); line-height: 1.45; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; } .yc-ntr-title:hover, .yc-ntr-title:focus-visible { text-decoration: underline; } .yc-ntr-l3 { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; } .yc-ntr-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--yc-fs-meta); color: var(--yc-text-2); font-variant-numeric: tabular-nums; } .yc-ntr-acts { display: inline-flex; align-items: center; gap: 12px; flex: none; } .yc-tf-pickband { margin: 0 0 8px; padding: 8px 12px; border-radius: var(--yc-radius-control); background: var(--yc-accent-soft); } .yc-tf-compose { padding: 0; border: 0; background: none; gap: 6px; } .yc-tf-compose textarea { resize: none; } .yc-tf-compose[data-open="0"] textarea { height: 44px; overflow: hidden; } .yc-tf-compose[data-open="1"] #tfComposeBody { min-height: 96px; } /* 펼치면 네 줄 — id 로 올린다(.yc-product-ui :is(… textarea) 의 min-height 44px 가 특이도로 이기던 것) */ .yc-tf-compose[data-open="0"] .yc-tf-compose-foot { display: none; } .yc-tf-compose-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .yc-tf-list { border-top: 1px solid var(--yc-line); } .yc-tf-list > * + *, .yc-tf-list > * + .yc-jrow { margin-top: 0; } .yc-tf-list > .yc-jrow { padding: 12px 0; border: 0; border-bottom: 1px solid var(--yc-line); border-radius: 0; background: none; } .yc-tf-list > .yc-jrow.is-static:hover { background: none; } .yc-tf-body.is-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* 팀 배차 요청 받기 — 설정 한 줄 + 스위치(공지 아님) */ .yc-tswitch-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--yc-line); border-radius: var(--yc-radius-card); background: var(--yc-surface); } .yc-tswitch-text { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; } .yc-tswitch-title { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 10px; color: var(--yc-text); font-size: 14px; font-weight: var(--yc-fw-bold); line-height: 1.45; } .yc-tswitch-title > label { cursor: pointer; } .yc-tswitch-link { padding: 0; border: 0; background: none; color: var(--yc-accent); font-size: var(--yc-fs-meta); font-weight: var(--yc-fw-semi); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .yc-tswitch-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--yc-text-2); font-size: var(--yc-fs-meta); line-height: 1.45; } .yc-tswitch { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 46px; height: 28px; margin: 0; border: 0; border-radius: 999px; background: var(--yc-text-3); cursor: pointer; transition: background-color var(--yc-motion) ease; } .yc-tswitch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--yc-surface); transition: transform var(--yc-motion) ease; } .yc-tswitch::before { content: ''; position: absolute; left: -6px; right: -6px; top: 50%; height: var(--yc-tap); transform: translateY(-50%); } /* 누르는 자리 44px(보이는 스위치는 28px 그대로 — a.yc-tap-inline 과 같은 방식) */ .yc-tswitch:checked { background: var(--yc-accent); } .yc-tswitch:checked::after { transform: translateX(18px); } .yc-tswitch:focus-visible { outline: 2px solid var(--yc-focus); outline-offset: 2px; } .yc-tswitch:disabled { opacity: .55; cursor: not-allowed; } @media (pointer: coarse) { .yc-tswitch { margin: 8px 0; } .yc-ntr-title { min-height: var(--yc-tap); } [data-sortbar] select { min-height: var(--yc-tap); } } /* 정렬 막대의 [+ 조건] 고르기도 손가락 기기 44px(태블릿 폭 — 768 검사) */ /* A2b-3 스케줄(앱 목록만 — 팀 콘솔 표 layout 'table' 은 W-T): 팀원 줄 구분선 · 상태 칩 하나(Fresha 칸 규칙 — 근무 강조 옅은 면 · 휴무 회색 빗금 · 개인 일정 회색 면 · 대기 테두리 · 배차 없음 점선) */ .yc-tw-list { border-top: 1px solid var(--yc-line); } .yc-tw-list > * + *, .yc-tw-list > * + .yc-jrow { margin-top: 0; } .yc-tw-list > .yc-jrow { padding: 12px 0; border: 0; border-bottom: 1px solid var(--yc-line); border-radius: 0; background: none; } .yc-tw-list > .yc-jrow.is-static:hover { background: none; } .yc-tw-list .yc-tw-state { padding: 3px 10px; border: 1px solid var(--yc-line); border-radius: 999px; background: var(--yc-surface); color: var(--yc-text); } .yc-tw-list .yc-tw-state::before { display: none; } .yc-tw-list .yc-tw-state[data-s="work"] { border-color: transparent; background: var(--yc-accent-soft); color: var(--yc-accent); } .yc-tw-list .yc-tw-state[data-s="off"] { border-color: transparent; background: repeating-linear-gradient(135deg, var(--yc-surface-2) 0 5px, var(--yc-line) 5px 7px); color: var(--yc-text-2); } .yc-tw-list .yc-tw-state[data-s="custom"] { border-color: transparent; background: var(--yc-surface-2); } .yc-tw-list .yc-tw-state[data-s="none"] { border-style: dashed; color: var(--yc-text-3-aa); font-weight: var(--yc-fw-semi); } /* A2b-4 팀 관리 창(GroupMe·Mercury·Squarespace): 칸 [팀원][설정] 밑줄 탭 · 역할 소제목 + 사람 줄(구분선 · 사진 없이 첫 글자 원) · 동의는 글자 · 줄 ⋯ · 설정 = 좌석 한 줄 → 스위치 둘 → 줄 · 바닥 [기사 초대] 고정 */ .yc-tms-tabs { display: flex; gap: 4px; padding: 0 24px; border-bottom: 1px solid var(--yc-line); flex-shrink: 0; } .yc-tms-tabs > button { flex: 1 1 0; min-height: var(--yc-tap); padding: 0 8px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--yc-text-2); font-size: var(--yc-fs-body); font-weight: var(--yc-fw-bold); cursor: pointer; } .yc-tms-tabs > button[aria-selected="true"] { border-bottom-color: var(--yc-accent); color: var(--yc-accent); } .yc-tms-tabs > button:focus-visible { outline: 2px solid var(--yc-focus); outline-offset: -2px; } .yc-tms-group + .yc-tms-group { margin-top: 16px; } .yc-tms-role { display: flex; align-items: baseline; gap: 6px; margin: 0 0 4px; color: var(--yc-text); font-size: 13px; font-weight: var(--yc-fw-bold); } .yc-tms-role > span { color: var(--yc-text-3-aa); font-size: var(--yc-fs-meta); font-weight: var(--yc-fw-semi); } .yc-tms-person { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 0; border-bottom: 1px solid var(--yc-line); } .yc-tms-pmain { display: grid; gap: 1px; flex: 1 1 auto; min-width: 0; } .yc-tms-pname { display: flex; align-items: center; gap: 6px; overflow: hidden; color: var(--yc-text); font-size: var(--yc-fs-body); font-weight: var(--yc-fw-bold); white-space: nowrap; } .yc-tms-psub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--yc-text-2); font-size: var(--yc-fs-meta); } .yc-tms-consent { flex: none; color: var(--yc-ok-aa); font-size: var(--yc-fs-meta); font-weight: var(--yc-fw-semi); white-space: nowrap; } .yc-tms-pmore { width: 40px; height: 40px; border-color: transparent; } .yc-tms-empty { margin: 4px 0 8px; color: var(--yc-text-2); font-size: 13px; line-height: 1.5; } #teamSheetPaneMembers .yc-team-sheet-links, #teamSheetPaneSettings .yc-team-sheet-links { margin-top: 12px; } #teamSheetPaneMembers .yc-tms-people:not(:empty) + .yc-team-sheet-links { border-top: 0; } /* 사람 줄 끝 구분선 아래에 한 번 더 긋지 않는다 */ .yc-tms-person .yc-team-menu > button { justify-content: flex-start; } /* 사람 줄 ⋯ 메뉴는 글자만 왼쪽 정렬(부팀장 임명·팀원 제외·전화·대화 — 아이콘 없이 같은 결) */ .yc-tms-person .yc-team-menu .yc-chat-team-btn { margin-left: 0; } .yc-tms-person .yc-team-menu .yc-chat-team-btn i { display: none; } .yc-team-menu > a { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 12px; border-radius: var(--yc-radius-control); color: var(--yc-text); font-size: var(--yc-fs-body); font-weight: var(--yc-fw-semi); text-decoration: none; } .yc-team-menu > a:hover { background: var(--yc-surface-2); } .yc-tms-seat { padding: 12px; border: 1px solid var(--yc-line); border-radius: var(--yc-radius-card); background: var(--yc-surface); } .yc-tms-seat-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; color: var(--yc-text-2); font-size: 13px; } .yc-tms-seat-line b { color: var(--yc-text); font-weight: var(--yc-fw-bold); } .yc-tms-seat-note { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--yc-line); font-size: 11px; } .yc-tms-ops { margin: 10px 0 0; padding: 8px 12px; border-radius: var(--yc-radius-control); background: var(--yc-ok-soft); color: var(--yc-text); font-size: var(--yc-fs-meta); font-weight: var(--yc-fw-semi); } .yc-tms-switches { margin-top: 12px; border-top: 1px solid var(--yc-line); } .yc-tms-switch { display: flex; align-items: center; gap: 4px; min-height: 52px; border-bottom: 1px solid var(--yc-line); } .yc-tms-switch-label { min-width: 0; color: var(--yc-text); font-size: var(--yc-fs-body); font-weight: var(--yc-fw-semi); cursor: pointer; } .yc-tms-switch > .yc-tswitch { margin-left: auto; } #teamSheetPaneSettings .yc-tms-switches:not(.hidden) + .yc-team-sheet-links { margin-top: 0; border-top: 0; } /* 스위치 둘 바로 아래 줄 여섯 — 구분선을 두 번 긋지 않는다 */ .yc-tms-code { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: var(--yc-radius-control); background: var(--yc-surface-2); } .yc-tms-code-label { display: inline-flex; align-items: center; gap: 6px; color: var(--yc-text-2); font-size: var(--yc-fs-meta); font-weight: var(--yc-fw-bold); } .yc-tms-code-val { color: var(--yc-text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; font-weight: var(--yc-fw-bold); letter-spacing: .04em; user-select: all; } /* A2b-5 기사 모집(Glassdoor·LinkedIn 줄): 간략 행 3줄(계약 칩·택배사 배지·등록자 … 경과일 / 제목 / 근무 … 금액 + '등록자가 밝힌 값') · 왼쪽 색 띠·테두리 → 구분선(상세히 카드도) · 머리 고지 한 줄 */ .yc-fp-list { gap: 0; border-top: 1px solid var(--yc-line); } .yc-fp-row { padding: 12px 0; border: 0; border-bottom: 1px solid var(--yc-line); border-radius: 0; background: none; } .yc-fp-row:focus-visible { outline-offset: -2px; } .yc-fp-row-title { font-weight: var(--yc-fw-bold); } .yc-fp-row-owner { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--yc-text-2); font-size: var(--yc-fs-meta); font-weight: var(--yc-fw-semi); } .yc-fp-row-ago { flex: none; margin-left: auto; color: var(--yc-text-3-aa); font-size: var(--yc-fs-meta); white-space: nowrap; } .yc-fp-row-sub > .yc-fp-claim { flex: none; } .yc-fp-card { border: 0; border-bottom: 1px solid var(--yc-line); border-radius: 0; background: none; } .yc-fp-open { padding: 12px 0 4px; } .yc-fp-open:focus-visible { border-radius: 0; } .yc-fp-actions { padding: 0 0 12px; } /* A2b-6 협력 관리 창(Mercury 줄 · Xero 탭 건수): 밑줄 탭 + 건수 · 줄 = 상호 + 상태 칩 + 주 동작 하나(받은 요청 [수락]) · 거절·요청 거두기·해지는 ⋯ · 수수료율 공개 = 한 줄 + ? + [바꾸기] */ .yc-pt-tabs { display: flex; gap: 4px; padding: 0 16px; border-bottom: 1px solid var(--yc-line); } .yc-pt-tabs > button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 1 1 0; min-height: var(--yc-tap); padding: 0 6px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--yc-text-2); font-size: var(--yc-fs-body); font-weight: var(--yc-fw-bold); white-space: nowrap; cursor: pointer; } .yc-pt-tabs > button[aria-selected="true"] { border-bottom-color: var(--yc-accent); color: var(--yc-accent); } .yc-pt-tabs > button:focus-visible { outline: 2px solid var(--yc-focus); outline-offset: -2px; } .yc-pt-count { color: var(--yc-text-3-aa); font-size: var(--yc-fs-meta); font-variant-numeric: tabular-nums; } .yc-pt-tabs > button[aria-selected="true"] .yc-pt-count { color: var(--yc-accent); } .yc-pt-list { border-top: 1px solid var(--yc-line); } .yc-pt-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--yc-line); } .yc-pt-name { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 0; color: var(--yc-text); font-size: var(--yc-fs-body); font-weight: var(--yc-fw-bold); } .yc-pt-acts { display: flex; align-items: center; gap: 6px; flex: none; } .yc-pt-more { width: 40px; height: 40px; border-color: transparent; } .yc-pt-fee { padding: 12px; border: 1px solid var(--yc-line); border-radius: var(--yc-radius-card); background: var(--yc-surface); } .yc-pt-fee-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .yc-pt-fee-title { display: inline-flex; align-items: center; gap: 2px; color: var(--yc-text); font-size: 13px; font-weight: var(--yc-fw-bold); } .yc-pt-fee-more { margin-top: 6px; } .yc-pt-fee-more > summary { display: inline-flex; align-items: center; min-height: var(--yc-tap); color: var(--yc-accent); font-size: var(--yc-fs-meta); font-weight: var(--yc-fw-semi); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; list-style: none; } .yc-pt-fee-more > summary::-webkit-details-marker { display: none; } .yc-pt-fee-more[open] > summary { text-decoration: none; color: var(--yc-text-2); } .yc-tf-act[hidden] { display: none !important; } /* 세 줄을 넘지 않는 글의 [더 보기]는 숨긴 채(.yc-tf-act 의 inline-flex 가 hidden 속성을 이기지 않게) */ /* ===== OV-C 2026-10-17 ===== */ /* W-C 관리 콘솔(디자인 전면 개편 v3 — 설계 scratch/audit-r24/design/overhaul-2026-10-17/w-c-admin-console-brief-2026-10-17.md · 메인 S1 판정 w-c-s1-review-2026-10-17.md). 관리 콘솔 화면 구역(#view-overview·#view-verification·#view-payouts·#view-operations·#view-system) 안에서만 — 공용 틀(#adminSidebar·.yc-console-head)·팀 콘솔 구역은 건드리지 않는다. 색은 토큰만. */ /* 종합 대시보드: 흐름 칸 넷(위 띠는 주 색 하나 — 0·모름은 구분선 색과 옅은 숫자) + 떨어진 요약 칸 · 아래 할 일 표 + 오른쪽 좁은 열 */ #view-overview .yc-ov-top { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--yc-space-4); align-items: stretch; } #view-overview .yc-ov-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--yc-surface); border: 1px solid var(--yc-line); border-radius: var(--yc-radius-card); overflow: hidden; } #view-overview .yc-ov-flow-cell { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 124px; padding: 18px 40px 16px 18px; border: 0; border-left: 1px solid var(--yc-line); background: var(--yc-surface); color: var(--yc-text); text-align: left; cursor: pointer; transition: background-color var(--yc-motion) ease; } #view-overview .yc-ov-flow-cell:first-child { border-left: 0; } #view-overview .yc-ov-flow-cell::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--yc-accent); } #view-overview .yc-ov-flow-cell::after { content: '›'; position: absolute; top: 14px; right: 16px; color: var(--yc-text-3-aa); font-size: 20px; line-height: 1; pointer-events: none; } #view-overview .yc-ov-flow-cell:hover { background: var(--yc-accent-soft); } #view-overview .yc-ov-flow-go { display: inline-flex; align-items: center; gap: 8px; min-height: 24px; padding: 0; border: 0; background: none; font: inherit; font-size: var(--yc-fs-body); font-weight: var(--yc-fw-semi); color: var(--yc-text-2); text-align: left; cursor: pointer; } #view-overview .yc-ov-flow-go::after { content: ''; position: absolute; inset: 0; border-radius: inherit; } #view-overview .yc-ov-flow-go:focus-visible { outline: none; } #view-overview .yc-ov-flow-go:focus-visible::after { outline: 2px solid var(--yc-focus); outline-offset: -2px; } #view-overview .yc-ov-flow-go > i { width: 16px; color: var(--yc-accent); font-size: 14px; text-align: center; } #view-overview .yc-ov-flow-num { margin-top: 4px; font-size: 32px; line-height: 1.1; font-weight: var(--yc-fw-bold); color: var(--yc-text); font-variant-numeric: tabular-nums; } #view-overview .yc-ov-flow-sub { font-size: var(--yc-fs-meta); color: var(--yc-text-2); } #view-overview .yc-ov-flow-cell:is(.is-zero, .is-unknown)::before { background: var(--yc-line); } #view-overview .yc-ov-flow-cell:is(.is-zero, .is-unknown) .yc-ov-flow-num { color: var(--yc-text-3-aa); } #view-overview .yc-ov-flow-cell:is(.is-zero, .is-unknown) .yc-ov-flow-go > i { color: var(--yc-text-3-aa); } #view-overview .yc-ov-flow .yc-kpi-unknown { font-size: 18px !important; line-height: 1.6 !important; color: var(--yc-text-3-aa) !important; } #view-overview .yc-ad-summary { flex-direction: column; align-items: stretch; justify-content: center; gap: 4px; min-height: 0; padding: 14px 16px; font-size: 13px; } #view-overview .yc-ad-summary > .yc-ad-sum-item { display: block; min-height: 26px; line-height: 26px; text-align: left; } #view-overview .yc-ad-summary > .yc-ad-sum-item.is-link { min-height: 26px; padding: 0; } #view-overview .yc-ad-summary .yc-ov-ops { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; line-height: 1.5; } #view-overview .yc-ov-main { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--yc-space-4); align-items: start; margin-top: var(--yc-space-4); } #view-overview .yc-ov-tasks { display: flex; flex-direction: column; gap: var(--yc-space-3); min-width: 0; } #view-overview .yc-ov-side { min-width: 0; } #view-overview .yc-ov-panel { background: var(--yc-surface); border: 1px solid var(--yc-line); border-radius: var(--yc-radius-card); padding: 12px 16px 14px; } #view-overview .yc-ov-panel-title { margin: 0; min-height: 40px; display: flex; align-items: center; font-size: 15px; font-weight: var(--yc-fw-bold); color: var(--yc-text); border-bottom: 1px solid var(--yc-line); } #view-overview .yc-ov-activity { list-style: none; margin: 0; padding: 0; } #view-overview .yc-ov-activity-row { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 56px; padding: 6px 0; border-bottom: 1px solid var(--yc-line); } #view-overview .yc-ov-act-what { font-size: 13px; font-weight: var(--yc-fw-semi); color: var(--yc-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #view-overview .yc-ov-act-meta { font-size: 12px; color: var(--yc-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #view-overview .yc-ov-act-tag { margin-left: 6px; font-size: 11px; font-weight: var(--yc-fw-bold); color: var(--yc-danger-aa); } #view-overview .yc-ov-activity-note { padding: 12px 0; font-size: 13px; color: var(--yc-text-2); border-bottom: 1px solid var(--yc-line); } #view-overview .yc-ov-panel-link { margin-top: 10px; } #view-overview .yc-ov-kv { margin: 0; } #view-overview .yc-ov-kv > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; border-bottom: 1px solid var(--yc-line); font-size: 13px; } #view-overview .yc-ov-kv > div:last-child { border-bottom: 0; } #view-overview .yc-ov-kv dt { color: var(--yc-text-2); } #view-overview .yc-ov-kv dd { margin: 0; font-weight: var(--yc-fw-semi); color: var(--yc-text); text-align: right; } #view-overview .yc-ov-kv dd.is-danger { color: var(--yc-danger-aa); } #view-overview .yc-ov-kv dd.is-ok { color: var(--yc-ok-aa); } @media (max-width: 1279px) { #view-overview .yc-ov-top, #view-overview .yc-ov-main { grid-template-columns: minmax(0, 1fr); } #view-overview .yc-ad-summary { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 16px; } } /* 서류 심사: 왼쪽 갈래 열(세로 상자 탭) · 가운데 목록(검색 + [더 거르기 ▾], 줄 = 한 줄) · 오른쪽 판(머리 → 서류 그림 → 평면 묶음) */ #view-verification .yc-vf { gap: var(--yc-space-4); } #view-verification .yc-vf-cats { flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; width: 200px; min-height: 0; padding: 8px; align-self: flex-start; } #view-verification .yc-vf-cats .yc-boxtabs.is-flat { flex-direction: column; gap: 2px; overflow: visible; align-self: stretch; } #view-verification .yc-vf-cats .yc-boxtabs.is-flat .yc-boxtab { flex-wrap: wrap; justify-content: space-between; width: 100%; min-height: 44px; padding: 6px 10px; border-radius: var(--yc-radius-control); font-size: 14px; text-align: left; white-space: normal; } #view-verification .yc-vf-cats .yc-boxtab::after { display: none; } #view-verification .yc-vf-cats .yc-boxtab:hover { background: var(--yc-surface-2); } #view-verification .yc-vf-cats .yc-boxtab:is([aria-selected="true"], .is-active) { background: var(--yc-accent-soft); color: var(--yc-accent); } #view-verification .yc-vf-cats .yc-boxtab-count { margin-left: auto; color: var(--yc-text-2); font-weight: var(--yc-fw-semi); } #view-verification .yc-vf-cats .yc-boxtab:is([aria-selected="true"], .is-active) .yc-boxtab-count { color: var(--yc-accent); } #view-verification .yc-vf-cat-sub { flex-basis: 100%; font-size: 12px; font-weight: var(--yc-fw-regular); color: var(--yc-text-2); } #view-verification #userListPane { width: 440px; flex: 0 0 440px; max-width: none; } @media (min-width: 1680px) { #view-verification #userListPane { width: 520px; flex-basis: 520px; } } #view-verification .yc-vf-listhead { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--yc-line); } #view-verification .yc-vf-listhead .yc-bk-search { flex: 1 1 auto; width: auto; min-width: 0; } #view-verification .yc-vf-more { position: relative; flex: none; } #view-verification .yc-vf-more > summary { list-style: none; gap: 6px; } #view-verification .yc-vf-more > summary::-webkit-details-marker { display: none; } #view-verification .yc-vf-more.is-on > summary { border-color: var(--yc-accent); color: var(--yc-accent); } #view-verification .yc-vf-more-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; display: grid; gap: 10px; min-width: 240px; padding: 12px; background: var(--yc-surface); border: 1px solid var(--yc-line); border-radius: var(--yc-radius-card); box-shadow: var(--yc-shadow-pop); } #view-verification .yc-vf-more-field { display: grid; gap: 4px; font-size: 12px; font-weight: var(--yc-fw-semi); color: var(--yc-text-2); } #view-verification .yc-vf-more-field .yc-bk-select { width: 100%; } #view-verification .yc-vf-row { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px; border-left: 3px solid transparent; cursor: pointer; transition: background-color var(--yc-motion) ease; } #view-verification .yc-vf-row:hover { background: var(--yc-surface-2); } #view-verification .yc-vf-row.is-selected { background: var(--yc-accent-soft); border-left-color: var(--yc-accent); } #view-verification .yc-vf-row:focus-visible { outline: 2px solid var(--yc-focus); outline-offset: -2px; } #view-verification .yc-vf-row-who { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; } #view-verification .yc-vf-row-name { font-size: 14px; font-weight: var(--yc-fw-bold); color: var(--yc-text); } #view-verification .yc-vf-row-biz { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--yc-text-2); } #view-verification .yc-vf-row-docs { display: flex; flex: none; flex-wrap: nowrap; gap: 4px; } #view-verification .yc-vf-row-status { flex: none; } #view-verification .yc-vf-panel { overflow-y: auto; } #view-verification .yc-vf-head { padding: 16px; border-bottom: 1px solid var(--yc-line); } #view-verification .yc-vf-docs { flex: none; padding: 16px; border-bottom: 1px solid var(--yc-line); } #view-verification .yc-vf-viewer { height: clamp(320px, 56vh, 640px); background: var(--yc-surface-2); border: 1px solid var(--yc-line); border-radius: var(--yc-radius-card); } #view-verification .yc-vf-sections { flex: none; } #view-verification .yc-vf-sec { padding: 14px 16px; border-bottom: 1px solid var(--yc-line); } #view-verification .yc-vf-sec:last-child { border-bottom: 0; } #view-verification .yc-vf-sec-title { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: var(--yc-fw-bold); color: var(--yc-text); } #view-verification .yc-vf-sec-icon { width: 16px; color: var(--yc-text-2); font-size: 13px; text-align: center; } #view-verification .yc-vf-btn { min-height: 32px; padding: 0 12px; font-size: 13px; } #view-verification .yc-vf-btn.is-ok { color: var(--yc-ok-aa); border-color: color-mix(in srgb, var(--yc-ok) 45%, var(--yc-line)); } #view-verification .yc-vf-btn.is-danger { color: var(--yc-danger-aa); border-color: color-mix(in srgb, var(--yc-danger) 45%, var(--yc-line)); } #view-verification .yc-vf-linkline { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--yc-text-2); } #view-verification .yc-vf-linkline .yc-bk-link { font-size: 13px; } /* 지급: 밑줄 탭(카드 틀 없음) · 지급일 묶음 머리(굵은 날짜 + 옅은 건수·금액 | 회수 전 선지급 · [대량이체 파일] · [N건 이체 기록]) · 열 고정 표 · 줄 동작 [이체 기록] 테두리 + ⋯ */ #view-payouts > .yc-bk-toolbar { min-height: 0; padding: 0; background: transparent; border: 0; border-bottom: 1px solid var(--yc-line); border-radius: 0; } #view-payouts .yc-po-round { margin-bottom: var(--yc-space-5); } #view-payouts .yc-po-round-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 4px 0 10px; } #view-payouts .yc-po-round-title { margin: 0; font-size: 15px; font-weight: var(--yc-fw-bold); color: var(--yc-text); } #view-payouts .yc-po-round-meta { font-size: 13px; font-weight: var(--yc-fw-regular); color: var(--yc-text-2); } #view-payouts .yc-po-round-acts { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; } #view-payouts .yc-po-outstanding { margin-right: 4px; font-size: 12px; color: var(--yc-text-2); } #view-payouts .yc-po-outline-empty { margin: 0 0 8px; text-align: right; } #view-payouts .yc-po-btn { min-height: 32px; padding: 0 12px; font-size: 13px; } #view-payouts .yc-po-table { table-layout: fixed; border-collapse: collapse; min-width: 820px; } #view-payouts .yc-po-table th { padding: 8px 12px; background: var(--yc-surface-2); color: var(--yc-text-2); font-size: 12px; font-weight: var(--yc-fw-semi); border-bottom: 1px solid var(--yc-line); } #view-payouts .yc-po-table td { border-bottom: 1px solid var(--yc-line); } #view-payouts .yc-po-table .yc-po-col-pick { width: 44px; } #view-payouts .yc-po-table .yc-po-col-acts { width: 140px; } /* 열 고정 — 1024 에서도 표가 판 안에 들어온다(가로 스크롤 없음 · 줄 ⋯ 메뉴가 스크롤 상자에 잘리지 않게 감싸개는 overflow 없이) */ #view-payouts .yc-po-table .yc-po-col-acct { width: 200px; } #view-payouts .yc-po-table .yc-po-col-holder { width: 104px; } #view-payouts .yc-po-table .yc-po-col-amt { width: 116px; } #view-payouts .yc-po-table .yc-po-col-state { width: 112px; } #view-payouts .yc-po-table td.yc-po-cut { overflow: hidden; text-overflow: ellipsis; } #view-payouts .yc-po-row-acts { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; } /* 환경 설정 펼친 줄의 목록: 카드 안 카드 → 줄(구분선) · 신고된 줄은 왼쪽 위험 띠 · 단추는 작은 테두리(위험·주의는 글자색만) */ #view-operations .yc-ad-list-head { display: block; margin: 8px 0 2px; font-size: 12px; font-weight: var(--yc-fw-bold); color: var(--yc-text-2); } #view-operations .yc-ad-list-head.is-danger { color: var(--yc-danger-aa); } #view-operations .yc-ad-item { display: flex; flex-direction: column; gap: 4px; margin: 0 !important; padding: 10px 0 10px 10px; border-left: 3px solid transparent; border-bottom: 1px solid var(--yc-line); } #view-operations .yc-ad-item.is-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; } #view-operations .yc-ad-item.is-flagged { border-left-color: var(--yc-danger); } #view-operations .yc-ad-item-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } #view-operations .yc-ad-item-head.is-logo { justify-content: flex-start; gap: 12px; } #view-operations .yc-ad-item-title { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: var(--yc-fw-bold); color: var(--yc-text); } #view-operations .yc-ad-item-sub { font-weight: var(--yc-fw-regular); color: var(--yc-text-2); } #view-operations .yc-ad-item-tag { margin-left: 4px; padding: 0 6px; border-radius: 6px; background: var(--yc-surface-2); color: var(--yc-text-2); font-size: 11px; font-weight: var(--yc-fw-semi); } #view-operations .yc-ad-item-state { flex: none; font-size: 12px; font-weight: var(--yc-fw-semi); color: var(--yc-text-2); } #view-operations .yc-ad-item-state.is-ok { color: var(--yc-ok-aa); } #view-operations .yc-ad-item-state.is-danger { color: var(--yc-danger-aa); } #view-operations .yc-ad-item-meta, #view-operations .yc-ad-item-note { margin: 0; font-size: 12px; color: var(--yc-text-2); } #view-operations .yc-ad-item-body { margin: 0; font-size: 13px; color: var(--yc-text); white-space: pre-line; } #view-operations .yc-ad-item-flag { margin: 0; font-size: 12px; color: var(--yc-danger-aa); } #view-operations .yc-ad-item-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 2px; } #view-operations .yc-ad-item-msgs:not(:empty) { display: grid; gap: 4px; padding: 8px 10px; border-radius: var(--yc-radius-control); background: var(--yc-surface-2); } #view-operations .yc-ad-item-btn { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border: 1px solid var(--yc-line); border-radius: 8px; background: var(--yc-surface); color: var(--yc-text-2); font-size: 12px; font-weight: var(--yc-fw-semi); cursor: pointer; } #view-operations .yc-ad-item-btn:hover:not(:disabled) { background: var(--yc-surface-2); color: var(--yc-text); } #view-operations .yc-ad-item-btn:disabled { opacity: .55; cursor: not-allowed; } #view-operations .yc-ad-item-btn.is-accent { border-color: color-mix(in srgb, var(--yc-accent) 45%, var(--yc-line)); color: var(--yc-accent); } #view-operations .yc-ad-item-btn.is-warn { color: var(--yc-text); } #view-operations .yc-ad-item-btn.is-danger { border-color: color-mix(in srgb, var(--yc-danger) 45%, var(--yc-line)); color: var(--yc-danger-aa); } /* 데이터베이스 관리: 데이터 보정은 위험 구역(빨간 테두리 묶음) · 카드 격자 → 줄 */ #view-system .yc-ad-danger { padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--yc-danger) 55%, var(--yc-line)); border-radius: var(--yc-radius-card); background: var(--yc-surface); } #view-system .yc-ad-danger-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: var(--yc-fw-bold); color: var(--yc-text); } #view-system .yc-ad-fixlist { display: grid; } #view-system .yc-ad-fixrow { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; min-height: 52px; padding: 8px 0; border-top: 1px solid var(--yc-line); } #view-system .yc-ad-fixrow-name { font-size: 13px; font-weight: var(--yc-fw-bold); color: var(--yc-text); } #view-system .yc-ad-fixrow-desc { margin: 0; font-size: 12px; color: var(--yc-text-2); } #view-system .yc-ad-fixrow-acts { display: inline-flex; align-items: center; gap: 12px; } #view-system .yc-ad-fix-btn { min-height: 32px; padding: 0 12px; font-size: 13px; } @media (max-width: 1279px) { #view-system .yc-ad-fixrow { grid-template-columns: minmax(0, 1fr) auto; } #view-system .yc-ad-fixrow-desc { grid-column: 1 / -1; grid-row: 2; } } /* 판 머리 줄이 좁으면 줄을 바꾼다 — 서류 탭 ↔ 보기 도구, 구독 제목·칩 ↔ 조치(잘리지 않게) */ #view-verification .yc-vf-docbar { flex-wrap: wrap; row-gap: 8px; } #view-verification .yc-vf-docbar > #insDocViewerTools { margin-left: auto; } #view-verification .yc-vf-sechead { flex-wrap: wrap; row-gap: 8px; } #view-verification .yc-vf-sechead > #insSubActions { margin-left: auto; } #view-verification .yc-vf-sec-title { white-space: nowrap; } /* 1280~1679: 판에 폭을 더 준다(갈래 열 160 · 목록 372) · 판 안 사업자 과세 정보 4열 격자는 2열로 */ @media (min-width: 1280px) and (max-width: 1679px) { #view-verification .yc-vf-cats { width: 160px; padding: 6px; } #view-verification .yc-vf-cats .yc-boxtabs.is-flat .yc-boxtab { padding: 6px 8px; font-size: 13px; } #view-verification #userListPane { width: 372px; flex-basis: 372px; } #view-verification #insNtsSection .xl\:grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } #view-verification #insNtsSection .xl\:col-span-4 { grid-column: 1 / -1; } } @media (max-width: 1279px) { /* 좁은 PC(1024~1279): 갈래 열은 목록 위 가로 줄로, 목록 360 · 판은 나머지 */ #view-verification .yc-vf { display: grid; grid-template-columns: 360px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); } #view-verification .yc-vf-cats { grid-column: 1 / -1; width: auto; padding: 0 12px; align-self: stretch; } #view-verification .yc-vf-cats .yc-boxtabs.is-flat { flex-direction: row; gap: 4px; overflow-x: auto; } #view-verification .yc-vf-cats .yc-boxtabs.is-flat .yc-boxtab { flex-wrap: nowrap; width: auto; min-height: 44px; white-space: nowrap; gap: 6px; } #view-verification .yc-vf-cat-sub { display: none; } #view-verification #userListPane { width: auto; flex: none; min-height: 0; } #view-verification #inspectorPane { min-height: 0; } } /* ===== OV-A2a 2026-10-17 ===== */ /* 기사 앱 [더보기]·알림함·대화 방·멤버십·내 배차 조건·공개 프로필·내 정보(설계 scratch/audit-r24/design/overhaul-2026-10-17/w-a2a-driver-more-brief-2026-10-17.md · 메인 S1 판정 w-a2a-s1-review-2026-10-17.md · 레퍼런스 Linktree·Urban Company / Reddit·Superlist / Grab Driver·Noom / Wanderlog·Public·Coinbase / Artsy·Handshake·Citizen / Grab Driver·Uber Eats / Lyft). 토큰만 쓴다(원색 클래스 없음). */ .yc-icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } /* [더보기] 머리 — 아바타 · 이름 · 한 줄(멤버십·역할) · 슬로건 한 줄 옅게 · 인증 알약(미인증·심사 중·반려일 때만) · 연필. 카드·그림자 없음 */ .yc-more-head { display: flex; align-items: flex-start; gap: var(--yc-space-3); padding: var(--yc-space-2) 2px var(--yc-space-4); } .yc-more-avatar { flex: none; border-radius: 999px; cursor: pointer; } .yc-more-avatar:focus-visible { outline: 2px solid var(--yc-focus); outline-offset: 2px; } .yc-more-avatar-box { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 999px; overflow: hidden; background: var(--yc-surface-2); color: var(--yc-text-2); font-size: 24px; } .yc-more-head-main { flex: 1; min-width: 0; display: grid; gap: 2px; justify-items: start; } .yc-more-headname { margin: 0; color: var(--yc-text); font-size: var(--yc-fs-section); font-weight: var(--yc-fw-bold); line-height: 1.35; overflow-wrap: anywhere; } .yc-more-headsub { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; color: var(--yc-text-2); font-size: var(--yc-fs-body); line-height: 1.5; } /* 멤버십 칸(#membershipBadge — 옛 코드가 색 알약 클래스를 입히고 위 '점 + 글자' 규칙이 덮는다): 머리 한 줄 안에서는 점 없이 같은 크기 글자로(구분은 ' · ') */ #profileUserBlock #membershipBadge { font-size: inherit !important; } #profileUserBlock #membershipBadge::before { display: none; } .yc-more-headsep { color: var(--yc-text-3-aa); } #membershipBadge:empty + .yc-more-headsep, .yc-more-headsep:has(+ #profileSubTxt:empty) { display: none; } .yc-more-slogan { max-width: 100%; margin: 0; color: var(--yc-text-3-aa); font-size: 13px; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .yc-more-edit { flex: none; display: grid; place-items: center; width: var(--yc-tap); height: var(--yc-tap); padding: 0; border: 0; border-radius: 999px; background: none; color: var(--yc-text-2); cursor: pointer; } .yc-more-edit:hover { background: var(--yc-surface-2); color: var(--yc-text); } .yc-more-edit .yc-more-ico { width: 20px; height: 20px; } /* 묶음 셋(기사 메뉴 / 계정 관리 / 도움말) — 작은 회색 머리 + 한 상자 + 구분선(.yc-list.is-boxed · .yc-row) */ .yc-more-group { margin-bottom: var(--yc-space-5); } .yc-more-label { margin: 0 2px var(--yc-space-2); color: var(--yc-text-3-aa); font-size: 13px; font-weight: var(--yc-fw-semi); line-height: 1.4; } .yc-more-row { gap: var(--yc-space-3); min-height: 52px; padding: 12px var(--yc-space-4); } /* 숨은 줄이 섞여도 구분선은 보이는 줄 사이에만(첫 줄 위 이중선 없음) */ .yc-more-group .yc-list > .yc-row { border-top: 0; } .yc-more-group .yc-list > :not(.hidden) ~ :not(.hidden) { border-top: 1px solid var(--yc-line); } .yc-more-ico { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--yc-text-2); } /* 이름은 한 줄 그대로(줄어들지 않음) — 긴 상태 글자가 말줄임(…)으로 줄어든다(360 폭 '구독 관리' 두 줄 방지) */ .yc-more-name { flex: 1 0 auto; max-width: 100%; white-space: nowrap; color: var(--yc-text); font-size: var(--yc-fs-card); font-weight: var(--yc-fw-regular); line-height: 1.45; } .yc-more-status { flex: 0 1 auto; min-width: 0; color: var(--yc-text-2); font-size: 13px; font-weight: var(--yc-fw-regular); line-height: 1.4; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .yc-more-status:empty { display: none; } .yc-more-status.is-ok { color: var(--yc-ok-aa); } .yc-more-status.is-todo { color: var(--yc-accent); } .yc-more-status.is-attn { color: var(--yc-danger-aa); } .yc-more-status.yc-count-note { color: var(--yc-accent); font-weight: var(--yc-fw-semi); } .yc-more-chev { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--yc-text-3-aa); } /* 화면 모드 줄(test_ui_global 이 여는 태그를 고정 — 같은 줄 꼴로 맞춘다: 아이콘 · 이름 · 오른쪽 상태 글자 · ›) */ /* 화면 모드 줄도 위 구분선(앞 줄 '알림함'은 늘 보인다 — id 규칙이 구분선 규칙을 덮지 않게 여기서 그린다) */ #tab-profile .yc-more-group .yc-appearance-row { min-height: 52px; padding: 12px var(--yc-space-4); gap: var(--yc-space-3); border: 0; border-top: 1px solid var(--yc-line); background: var(--yc-surface); } #tab-profile .yc-more-group .yc-appearance-row:hover { background: var(--yc-surface-2); } #tab-profile .yc-more-group .yc-appearance-row-icon { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 0; background: none; color: var(--yc-text-2); } #tab-profile .yc-more-group .yc-appearance-row-copy { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--yc-space-3); } #tab-profile .yc-more-group .yc-appearance-row-copy strong { color: var(--yc-text); font-size: var(--yc-fs-card); font-weight: var(--yc-fw-regular); line-height: 1.45; } #tab-profile .yc-more-group .yc-appearance-row-copy > span { min-width: 0; color: var(--yc-text-2); font-size: 13px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #tab-profile .yc-more-group .yc-appearance-row > svg:last-child { flex: none; color: var(--yc-text-3-aa); } /* 알림함 — 제목의 앞 [분류]는 시각 왼쪽 작은 회색 글자(main.js ycSplitNotifTitle) · 본문 두 줄 · 안 읽음은 점만(배경 칠 없음) · 줄 테두리 대신 구분선 */ #notificationCenterList .yc-jlist.is-rows { border: 0; border-radius: 0; background: transparent; } #notificationCenterList .yc-nrow { padding-left: var(--yc-space-4); padding-right: var(--yc-space-4); } /* 제목 줄은 점(.yc-nrow-dot)과 글이 나란한 flex — 글을 따로 감싸야 한 줄 말줄임(…)이 보인다 */ .yc-nrow-title-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .yc-nrow-cat { max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--yc-text-3-aa); font-size: var(--yc-fs-meta); } .yc-nrow-cat::after { content: '·'; margin-left: 6px; color: var(--yc-text-3-aa); } #notificationCenterList .yc-nrow-body { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } /* 대화 방 — 상대 말 = 옅은 면(--yc-surface-2) · 내 말 = 강조색 · 읽기 전용 띠 한 줄 옅게 · 칩 6개까지 한 줄, 넘으면 세로 목록(chat-ui.js YC_CHAT_CHIP_ROW_MAX) */ .yc-chat-list { background: var(--yc-surface); } .yc-chat-msg.is-theirs { background: var(--yc-surface-2); border-color: transparent; } .yc-chat-ended { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--yc-surface); border-bottom: 1px solid var(--yc-line); color: var(--yc-text-3-aa); } .yc-chat-chips.is-list { flex-direction: column; gap: 0; max-height: min(198px, 30dvh); padding: 0; overflow-x: hidden; overflow-y: auto; } .yc-chat-chips.is-list .yc-chat-chip { width: 100%; min-height: var(--yc-tap); padding: 0 var(--yc-space-4); border: 0; border-radius: 0; text-align: left; font-weight: var(--yc-fw-regular); white-space: normal; } .yc-chat-chips.is-list .yc-chat-chip + .yc-chat-chip { border-top: 1px solid var(--yc-line); } .yc-chat-chips.is-list .yc-chat-chip.is-my { color: var(--yc-text); } .yc-chat-chips.is-list .yc-chat-chip.is-add { color: var(--yc-accent); border-style: solid; } /* 멤버십 — 제목 · 혜택 체크 목록 세로 셋 + ? · 상품 셋 한 줄 라디오(연간은 실제 결제액 크게) · 해지 한 줄. 배지·비교 상자·타일·팀 배너 없음 */ .yc-mb-head { padding: var(--yc-space-5) var(--yc-gutter) var(--yc-space-2); } .yc-mb-title { margin: 0 0 var(--yc-space-3); color: var(--yc-text); font-size: var(--yc-fs-title); font-weight: var(--yc-fw-bold); line-height: 1.3; letter-spacing: -.01em; } .yc-mb-benefits-row { display: flex; align-items: flex-start; gap: var(--yc-space-2); } .yc-mb-benefits { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--yc-space-2); } .yc-mb-benefits li { display: flex; align-items: center; gap: var(--yc-space-2); color: var(--yc-text); font-size: var(--yc-fs-card); line-height: 1.45; } .yc-mb-check { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--yc-ok-mark); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .yc-mb-plans { margin: var(--yc-space-3) var(--yc-gutter) 0; border: 1px solid var(--yc-line); border-radius: var(--yc-radius-card); background: var(--yc-surface); overflow: hidden; } .yc-mb-plan { display: flex; align-items: center; gap: var(--yc-space-3); min-height: 64px; padding: 12px var(--yc-space-4); cursor: pointer; transition: background-color var(--yc-motion) ease; } .yc-mb-plan + .yc-mb-plan { border-top: 1px solid var(--yc-line); } .yc-mb-plan:hover { background: var(--yc-surface-2); } .yc-mb-plan:has(input:focus-visible) { outline: 2px solid var(--yc-focus); outline-offset: -2px; } .yc-mb-radio { flex: none; width: 22px; height: 22px; border: 2px solid var(--yc-line); border-radius: 50%; background: var(--yc-surface); } .yc-mb-plan.is-selected .yc-mb-radio { border: 7px solid var(--yc-accent); } .yc-mb-plan.is-selected { background: var(--yc-accent-soft); } .yc-mb-plan-main { flex: 1; min-width: 0; display: grid; gap: 2px; } .yc-mb-plan-title { color: var(--yc-text); font-size: var(--yc-fs-body); font-weight: var(--yc-fw-semi); line-height: 1.45; } .yc-mb-plan-price { color: var(--yc-text-2); font-size: 13px; line-height: 1.45; } .yc-mb-plan-price b { color: var(--yc-text); font-size: var(--yc-fs-card); font-weight: var(--yc-fw-bold); font-variant-numeric: tabular-nums; } .yc-mb-plan.is-selected .yc-mb-plan-price b { color: var(--yc-accent); font-size: 20px; } .yc-mb-planlines { margin: var(--yc-space-2) var(--yc-gutter) 0; padding: 0; list-style: none; } .yc-mb-cancel-line { margin: var(--yc-space-3) var(--yc-gutter) 0; color: var(--yc-text-3-aa); font-size: 13px; line-height: 1.5; } /* 내 배차 조건 시트 — 항목 행 + 구분선 · 체크는 고르는 알약 · 바닥 [저장] 하나 · 알림 설정 한 줄(차종 줄·요약 칩·스위치 없음) */ .yc-prefs-sheet { display: flex; flex-direction: column; gap: 0; padding: var(--yc-space-2) var(--yc-space-5) var(--yc-space-5); background: var(--yc-surface); color: var(--yc-text); } .yc-prefs-head { display: flex; align-items: center; justify-content: space-between; gap: var(--yc-space-2); padding: var(--yc-space-2) 0; } .yc-prefs-title { margin: 0; font-size: var(--yc-fs-section); font-weight: var(--yc-fw-bold); } .yc-prefs-x { display: grid; place-items: center; width: var(--yc-tap); height: var(--yc-tap); margin-right: -10px; border: 0; border-radius: 999px; background: none; color: var(--yc-text-2); cursor: pointer; } .yc-prefs-lead { display: flex; align-items: center; gap: 2px; margin: 0 0 var(--yc-space-2); color: var(--yc-text-2); font-size: 13px; line-height: 1.5; } .yc-prefs-row { display: block; margin: 0; padding: var(--yc-space-3) 0; border: 0; border-top: 1px solid var(--yc-line); min-width: 0; } .yc-prefs-label { display: block; margin-bottom: var(--yc-space-2); padding: 0; color: var(--yc-text-2); font-size: var(--yc-fs-meta); font-weight: var(--yc-fw-semi); } .yc-prefs-input { width: 100%; min-height: var(--yc-tap); padding: 0 12px; border: 1px solid var(--yc-line); border-radius: var(--yc-radius-control); background: var(--yc-surface); color: var(--yc-text); font-size: 16px; } .yc-prefs-chips { display: flex; flex-wrap: wrap; gap: var(--yc-space-2); } .yc-prefs-chip { position: relative; display: inline-flex; cursor: pointer; } .yc-prefs-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; } .yc-prefs-chip span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--yc-line); border-radius: 999px; background: var(--yc-surface); color: var(--yc-text); font-size: var(--yc-fs-body); } .yc-prefs-chip input:checked + span { border-color: var(--yc-accent); background: var(--yc-accent-soft); color: var(--yc-accent); font-weight: var(--yc-fw-semi); } .yc-prefs-chip input:focus-visible + span { outline: 2px solid var(--yc-focus); outline-offset: 1px; } @media (pointer: coarse) { .yc-prefs-chip span { min-height: var(--yc-tap); } } .yc-prefs-save { width: 100%; min-height: var(--yc-btn-primary-h); margin-top: var(--yc-space-3); } .yc-prefs-foot { margin: var(--yc-space-2) 0 0; text-align: center; color: var(--yc-text-3-aa); font-size: 13px; line-height: 1.5; } .yc-prefs-foot .yc-link { font-size: 13px; } /* 공개 프로필 — 머리(이름·차종) · 숫자 줄(완료 오더 큰 숫자 하나 + 평가 작은 글자) · 줄 · 내 실적 */ .yc-pp-note { margin: 0; color: var(--yc-text-2); font-size: 13px; line-height: 1.5; } .yc-pp-card { border: 1px solid var(--yc-line); border-radius: var(--yc-radius-card); background: var(--yc-surface); } /* 창 본문 덩어리 사이 한 칸(안내 · 카드 · 숨기기 · 내 실적) · 카드 마지막 줄의 아래 선은 카드 테두리와 겹치므로 뺀다 */ [data-pp-body] > * + * { margin-top: var(--yc-space-3); } .yc-pp-card > :last-child { border-bottom: 0; } .yc-pp-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--yc-space-3); padding: 10px 0; border-bottom: 1px solid var(--yc-line); } .yc-pp-name { color: var(--yc-text); font-size: var(--yc-fs-card); font-weight: var(--yc-fw-bold); } .yc-pp-car { color: var(--yc-text-2); font-size: 13px; } .yc-pp-stat { padding: 12px 0; border-bottom: 1px solid var(--yc-line); } .yc-pp-num { margin: 0; color: var(--yc-text); font-size: 28px; font-weight: var(--yc-fw-bold); line-height: 1.2; font-variant-numeric: tabular-nums; } .yc-pp-num small { margin-left: 2px; color: var(--yc-text-2); font-size: var(--yc-fs-body); font-weight: var(--yc-fw-semi); } .yc-pp-numlabel { margin: 2px 0 0; color: var(--yc-text-2); font-size: 13px; } .yc-pp-rating { margin: 6px 0 0; color: var(--yc-text); font-size: 13px; font-weight: var(--yc-fw-semi); } .yc-pp-rating.is-muted { color: var(--yc-text-3-aa); font-weight: var(--yc-fw-regular); } .yc-pp-kv-sub { color: var(--yc-text-2); font-size: 11px; font-weight: var(--yc-fw-regular); } .yc-perf-more { padding: 6px 0 0; } /* 내 정보 창 — 묶음 머리 오른쪽은 상태 글자만(설명 글자 없음) · 옛 회색·색 알약(계좌·팀)도 같은 결의 글자로 */ .yc-pf-status { color: var(--yc-text-2); font-size: 12px; font-weight: var(--yc-fw-semi); white-space: nowrap; } #unifiedProfileModal :is(#memberProfileAccountBadge, #unifiedProfileTeamBadge) { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; font-size: 12px !important; font-weight: var(--yc-fw-semi) !important; white-space: nowrap; } /* ===== OV-SA 2026-10-18 ===== */ /* W-S 루프 A(회원 상태별 경험 — 메인 판단 scratch/audit-r24/design/overhaul-2026-10-17/w-s2-round1-decisions-2026-10-18.md §1-2~§1-9): 팀이 없는 기사의 [팀] 탭(team-board-ui.js) · 알림 설정 '팀 권유 받기'. 토큰만(색 값을 새로 정하지 않는다 — 꼬리 묶음 규칙). 레퍼런스: Fabric 쓰는 방식 라디오 · Tripsy 'Pending invites' 카드 · Lex 요청 줄 · Redfin 설명 한 줄 + 스위치. */ /* 용차콜 기본 제공 카드 — 머리 한 줄 + 수수료 줄 + 주 동작 하나 + 한 줄 목록 둘 */ .yc-dp-main { display: grid; gap: var(--yc-space-2); padding: var(--yc-space-4) var(--yc-gutter); background: var(--yc-surface); } .yc-dp-main + .yc-row { border-top: 1px solid var(--yc-line); } .yc-dp-fee { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--yc-space-2); color: var(--yc-text-2); font-size: var(--yc-fs-meta); line-height: 1.5; } .yc-dp-fee .yc-dp-link { font-size: var(--yc-fs-meta); } /* 설정 줄 '팀 권유 켜짐/꺼짐 · 바꾸기' — 조용한 한 줄 */ .yc-tbs-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; margin: 0; color: var(--yc-text-2); font-size: var(--yc-fs-meta); line-height: 1.5; } .yc-tbs-line .yc-link { font-size: var(--yc-fs-meta); } .yc-tswitch-sub.yc-tbs-closing { color: var(--yc-warn); font-weight: var(--yc-fw-semi); white-space: normal; } /* 팀 영역 머리 + ⋯ */ .yc-tba-head { display: flex; align-items: center; justify-content: space-between; gap: var(--yc-space-2); } .yc-tba-more .yc-more-menu { min-width: 220px; } .yc-tba-more .yc-more-menu > button { white-space: normal; } .yc-tbm-item { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; text-align: left; } .yc-tbm-label { color: var(--yc-text); } .yc-tbm-desc { color: var(--yc-text-2); font-size: var(--yc-fs-meta); font-weight: var(--yc-fw-regular); line-height: 1.4; } @media (pointer: coarse) { .yc-tba-more > summary { min-width: var(--yc-tap); min-height: var(--yc-tap); } .yc-tba-more .yc-more-menu > button { min-height: var(--yc-tap); } } /* 받은 제안 — 1건 카드(수락·거절 바로) · 여럿은 목록 창의 줄 */ .yc-tbo-card { display: grid; gap: var(--yc-space-2); padding: var(--yc-space-4); border: 1px solid var(--yc-accent); border-radius: var(--yc-radius-card); background: var(--yc-accent-soft); } .yc-tbo-head { display: flex; align-items: center; justify-content: space-between; gap: var(--yc-space-2); } .yc-tbo-acts { display: flex; gap: var(--yc-space-2); padding-top: var(--yc-space-1); } .yc-tbo-list { display: grid; margin: 0; padding: 0; list-style: none; } .yc-tbo-item { display: grid; gap: var(--yc-space-2); padding: var(--yc-space-4) 0; } .yc-tbo-item + .yc-tbo-item { border-top: 1px solid var(--yc-line); } /* 선택 카드 — 라디오 줄 둘(고른 줄은 주 색 테두리 + 옅은 면) + [계속] + 조용한 '나중에 정하기' */ .yc-tmc { display: grid; gap: var(--yc-space-3); padding: var(--yc-space-4); border: 1px solid var(--yc-line); border-radius: var(--yc-radius-card); background: var(--yc-surface); } .yc-tmc-opts { display: grid; gap: var(--yc-space-2); } .yc-tmc-opt { display: flex; align-items: flex-start; gap: var(--yc-space-3); min-height: 56px; padding: var(--yc-space-3) var(--yc-space-4); border: 1px solid var(--yc-line); border-radius: var(--yc-radius-control); background: var(--yc-surface); cursor: pointer; } .yc-tmc-opt:has(input:checked) { border-color: var(--yc-accent); background: var(--yc-accent-soft); } .yc-tmc-opt input { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--yc-accent); } .yc-tmc-text { display: grid; gap: 2px; min-width: 0; } .yc-tmc-label { color: var(--yc-text); font-size: var(--yc-fs-card); font-weight: var(--yc-fw-semi); line-height: 1.45; } .yc-tmc-desc { color: var(--yc-text-2); font-size: var(--yc-fs-meta); line-height: 1.45; } .yc-tmc-later { justify-self: center; } /* ===== OV-SE 2026-10-18 ===== */ /* W-S2 루프 E(인증 전) — 준비 카드 한 장을 [용차] 맨 위로(E-01 — 탭 본문 여백에 맞춘 바깥 여백) · 조용한 줄(선택 항목 — 필수 n/m 밖, 머리 다음 할 일이 되지 않는다) */ .yc-ready-card.is-feed { margin: var(--yc-space-3) var(--yc-space-4) 0; } .yc-ready-item.is-optional { color: var(--yc-text-2); } .yc-ready-item.is-optional > i { color: var(--yc-text-3); } /* ===== OV-SB 2026-10-18 ===== */ /* 상태 비교 루프 B(팀원·부팀장·기사 팀장·기사·주선사 — 메인 판단 scratch/audit-r24/design/overhaul-2026-10-17/w-s2-round1-decisions-2026-10-18.md §2). 토큰만. */ /* B-01: [팀] 머리 제목 = 팀 이름 — 긴 이름은 한 줄 말줄임(역할 작은 글자는 옆에 그대로) */ #teamHeaderTitle { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .yc-team-head-title > #teamDashboardPlanBadge { flex: none; } /* B-12: 부팀장 머리 아래 한 줄 '소속 기사 N명 ›' — 팀장의 '팀원 n/N명 [관리]' 줄과 같은 결(누르는 줄 전체) */ .yc-team-members-line { width: 100%; min-height: var(--yc-tap); color: var(--yc-text); font-weight: var(--yc-fw-semi); text-align: left; cursor: pointer; } .yc-team-members-line > i { color: var(--yc-text-3-aa); font-size: 12px; } .yc-team-members-line:hover { background: var(--yc-surface-2); } .yc-team-members-line:focus-visible { outline: 2px solid var(--yc-focus); outline-offset: 2px; } /* B-23: [내 팀] 독립 창 — 덩어리 사이 구분선 한 줄, 테두리 상자·색 바탕 없음(레퍼런스 Any Distance 내 클럽) */ .yc-mts-list > * + * { margin-top: 0; } .yc-mts-leader { margin: 0; padding: 0 0 12px; border-bottom: 1px solid var(--yc-line); color: var(--yc-text-2); font-size: var(--yc-fs-body); } .yc-mts-sec { padding: 12px 0; border-bottom: 1px solid var(--yc-line); } .yc-mts-consent { display: flex; align-items: flex-start; gap: 8px; color: var(--yc-text); font-size: 13px; line-height: 1.5; cursor: pointer; } .yc-mts-foot { display: flex; justify-content: flex-end; padding-top: 4px; } .yc-mts-foot .yc-link { font-size: 13px; } /* C-46·C-47·B-31: [협력 주선사] 협력 요청 양식은 접힌 보조 한 줄 '+ 협력 요청'(details) — 펼친 양식 안에만 고지 확인란 */ .yc-pt-fold > summary { list-style: none; display: inline-flex; align-items: center; min-height: var(--yc-tap); font-size: 13px; } .yc-pt-fold > summary::-webkit-details-marker { display: none; } .yc-pt-fold > summary:focus-visible { outline: 2px solid var(--yc-focus); outline-offset: 2px; } .yc-pt-fold[open] > summary { color: var(--yc-text); text-decoration: none; } /* 앱 [팀 > 배차 현황] 오더 0건 빈 상태는 팀원 0 의 B-06 빈 상태가 보일 때 숨긴다 — 빈 상태는 한 틀(메인 2026-10-18 J-7) */ #teamZeroMembers:not(.hidden) ~ #view-broker-dispatch [data-yc-noorders] { display: none; } /* ===== OV-SC 2026-10-18 ===== */ /* W-S 루프 C — 상태별 첫 화면(메인 판단 scratch/audit-r24/design/overhaul-2026-10-17/w-s2-round1-decisions-2026-10-18.md §4-9·15): 팀 콘솔 [배차 현황] 맨 위 한 장 '할 일 N — <일>' + 주 버튼 하나 + 조용한 보조 줄(broker-pc.js bkSyncStateCard) · [협력 관리 > 협력 팀] 협력 0 빈 상태의 보조 줄·상태 메모(partner-ui.js) — 토큰만 */ .yc-bk-state { display: grid; gap: var(--yc-space-2); margin: 0 0 var(--yc-space-4); padding: var(--yc-space-4); border: 1px solid var(--yc-line); border-radius: var(--yc-radius-card); background: var(--yc-surface); } .yc-bk-state-main { display: flex; align-items: center; justify-content: space-between; gap: var(--yc-space-3); flex-wrap: wrap; } .yc-bk-state-head { margin: 0; color: var(--yc-text); font-size: 15px; font-weight: var(--yc-fw-bold); line-height: 1.4; } .yc-bk-state-sub { margin: 0; color: var(--yc-text-2); font-size: 13px; line-height: 1.5; } .yc-bk-state-sub .yc-bk-link { margin-left: 2px; } .yc-pt-first-more { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--yc-space-4); margin: 0; } .yc-pt-first-link { display: inline-flex; align-items: center; gap: 4px; color: var(--yc-text-2); font-size: var(--yc-fs-meta); } .yc-pt-first-link .yc-link { font-size: var(--yc-fs-meta); } .yc-pt-first-more.is-start { justify-content: flex-start; } .yc-pt-memo { margin: 0; color: var(--yc-text-2); font-size: var(--yc-fs-meta); line-height: 1.5; text-align: center; } /* ===== OV-RUNS 2026-10-18 ===== */ /* [운행] 맨 위 전환 줄(runs-tab-2026-10-18 §B-3 3차 — 메인 정정: 2차 알약 칩 56×44·42×44 가 엄지로 누르기 어렵다는 사용자 지적). 토큰만(색은 .yc-pick 그대로). 두 버튼이 줄 폭을 반씩(index.html #runsSegToggle grid grid-cols-2 gap-2 — 줄 여백 16px 안) · 버튼 = 칸 폭 전부(display:flex)·높이 52px(주 버튼 높이 토큰)·글자 15px 굵게 가운데 · 건수는 글자 뒤 같은 크기. 고른 버튼 = .yc-pick 켜진 모양(채운 면) · 안 고른 버튼 = .yc-pick 테두리. 휴대폰(600px 이하) 규칙: 버튼마다 줄 폭의 45% 이상·높이 48px 이상(scripts/test_runs_tab.mjs ②-2). 레퍼런스 Wise Bill splits 전폭 두 칸 트랙. */ #runsSegToggle .yc-pick { display: flex; justify-content: center; gap: 6px; min-height: var(--yc-btn-primary-h); font-size: 15px; } /* 넓은 화면(640px 이상 — 넓은 휴대폰 틀 640~1023 · PC 1024 이상의 기사 앱 틀 미리보기·왼쪽 메뉴 화면, §B-3 3차 PC·넓은 휴대폰 틀 정렬 메인 2026-10-18): 전환 줄은 [일정] 안쪽 가운데 열 (styles.css 넓은 휴대폰 틀 #tab-schedule > * · 미리보기 body.mobile-preview-mode #tab-schedule > * — 폭 --yc-col-max, 구간 시작 640 은 styles.css 넓은 휴대폰 틀 묶음과 같은 값)과 같은 폭으로 가운데. 640~1023 은 줄 여백(px-4 16px)과 [일정] 구역 여백(p-4 16px)이 같아 열이 700 보다 좁은 폭(틀 732 미만)에서도 두 끝이 같다. [운행 > 정산] 안쪽이 더 넓은 것은 그대로(줄이 내용보다 좁은 것은 허용 · 넓은 것은 불가). 휴대폰(600px 이하) 값은 바꾸지 않는다. */ @media (min-width: 640px) { #runsSegToggle { max-width: var(--yc-col-max); margin-left: auto; margin-right: auto; } } /* ===== ALIVE 2026-10-18 ===== */ /* 빈 화면 활동감(결정 alive-lists-2026-10-18.md §B-2·§C·§D · 코덱스 판정 A3 2026-10-18 — 옅은 처리는 보조 요소만): 끝난 카드([용차] 배차 완료·운행 완료 · [기사 모집] 상세히 모집 완료)는 면만 바탕(--yc-page)으로 낮춘다 — 제목·금액 글자는 모집 중과 같은 글자색 그대로(본문을 흐리게 하지 않는다, 투명도 없음). 경계는 끝난 구획 머리의 작은 제목('배차된 오더'·'모집 완료'· '마감된 모집')과 줄마다 칩이 맡는다. 토큰을 다시 가리킬 뿐 — 원색 없음. */ :is(.yc-jrow, .yc-fp-row, .yc-fp-card, .yc-tbr).is-closed { --yc-surface: var(--yc-page); } /* ===== RUNS-D8 2026-10-19 ===== */ /* [운행 > 정산] 두 보기 단추(운송 수입 | 운송료 지급 — #settlementRoleSegmentContainer, 기존 상자 탭 .yc-boxtab·이름·role tab·aria-selected 그대로 · DSG-UX-RUNS D8 2026-10-19): 자기 등록 오더가 있는 기사·주선사 인증 기사에게도 보이게 되어 휴대폰 조작감 규칙(화면 전환 단추 = 줄 폭의 45% 이상·높이 48px 이상)을 맞춘다 — 두 단추가 줄을 반씩(사이 8px) · 높이 52px(주 버튼 높이 토큰) · 글자 15px 가운데. 고른 단추 = 글자 굵게 + 아래 강조 선(.yc-boxtab 그대로). 토큰만(시험 scripts/test_runs_d8.mjs ④). */ #settlementRoleSegmentContainer .yc-boxtabs { gap: var(--yc-space-2); } #settlementRoleSegmentContainer .yc-boxtab { flex: 1 1 0; justify-content: center; font-size: 15px; min-height: var(--yc-btn-primary-h); } /* 초점 테두리는 단추 안쪽으로 — 두 단추가 줄 끝까지 차서 바깥쪽 테두리를 줄(.yc-boxtabs 가로 넘침 상자)이 잘랐다(2026-10-19 390 키보드 캡처: 왼쪽 선만 보임). */ #settlementRoleSegmentContainer .yc-boxtab:focus-visible { outline-offset: -3px; } /* ===== LANDING-AI 2026-10-19 ===== */ /* 오더 등록 한 화면(DSG-UX-LANDING 1차 — 메인 결정 landing-ai-one-screen-2026-10-19.md §1 · 코덱스 지시 landing-ai-design-1.md). 토큰만(원색 없음). ① AI 입력(공용 열린 칸 .yc-qf.is-open — 이 창 #uploadModal 안에서만 크기를 바꾼다: 공용 조각의 기본 모양·기사 모집 공고 창은 그대로) — 머리 한 줄 15px 굵게 · [사진 첨부]·[AI로 채우기] 48px, [AI로 채우기]가 줄의 남는 폭(휴대폰 규칙: 주 동작 = 줄 안쪽 폭 45% 이상·높이 48px 이상) · 결과 칸 상태(data-ai-state) 테두리 ② 다른 방법 줄([직접 입력]·[직전 오더 불러오기]) = 반반 48px 글자 단추(보조 위계 — 채운 면·테두리 없음) ③ 그룹 셋(details.yc-upload-fold): 접힌 머리 = 1px 줄 카드 56px(머리 전체가 누르는 자리) · 펼친 머리 = 구역 제목(줄 없음·48px) · 값 요약·입력할 칸 · 오른쪽 입력/수정/접기 + 꺾쇠 ④ 등록 전 확인 카드 한 장(요약 줄 + 주의 줄 + 필수 동의) · ⑤ 바닥 [등록하기] 52px(마크업 min-h) · 긴급 중지 aria-disabled 흐림 · 머리 [새로 작성] 글자 단추 */ #uploadModal .yc-qf-head.text-xs { font-size: 15px !important; font-weight: var(--yc-fw-bold); line-height: 1.4; } #uploadModal .yc-qf-tools [data-ai-go] { min-height: 48px; } #uploadModal .yc-qf-tools [data-ai-go="photo"] { flex: 0 0 auto; } #uploadModal .yc-qf-tools [data-ai-go="text"] { flex: 1 1 auto; } #uploadModal .yc-ai-result[data-ai-state] [data-ai-lead], #uploadModal .yc-ai-result[data-ai-state] > p:only-child { color: var(--yc-text); font-weight: var(--yc-fw-semi); } #uploadModal .yc-ai-result[data-ai-state="ok"] { border-color: color-mix(in srgb, var(--yc-ok) 45%, var(--yc-line)); } #uploadModal .yc-ai-result:is([data-ai-state="partial"], [data-ai-state="rules"], [data-ai-state="limit"], [data-ai-state="stale"]) { border-color: color-mix(in srgb, var(--yc-warn) 45%, var(--yc-line)); } #uploadModal .yc-ai-result[data-ai-state="failed"] { border-color: color-mix(in srgb, var(--yc-danger) 45%, var(--yc-line)); } #uploadModal .yc-upload-alt { display: flex; gap: var(--yc-space-2); margin-top: var(--yc-space-2); } #uploadModal .yc-upload-alt-btn { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 0 8px; border: 0; border-radius: var(--yc-radius-control); background: transparent; color: var(--yc-accent); font-size: 14px; font-weight: var(--yc-fw-semi); line-height: 1.3; text-align: center; word-break: keep-all; cursor: pointer; transition: background-color var(--yc-motion) ease; } @media (hover: hover) { #uploadModal .yc-upload-alt-btn:hover { background: var(--yc-accent-soft); } .yc-upload-group-head:hover { background: var(--yc-surface-2); } } /* 손가락 기기는 누른 뒤 회색이 남지 않게 */ #uploadModal .yc-upload-alt-btn:focus-visible { outline: 2px solid var(--yc-focus); outline-offset: -2px; } /* 손가락 기기의 단추 공통 44px(styles.css @media (pointer: coarse) button:not([disabled]) — 특정도 0,1,1)보다 위에서 엄지 규칙 크기를 지킨다(#uploadModal 접두 — 1,1,0) */ #uploadModal #uploadSubmitBtn { min-height: 52px; } .yc-upload-fold > summary { list-style: none; } .yc-upload-fold > summary::-webkit-details-marker { display: none; } .yc-upload-group-head { display: flex; align-items: center; gap: var(--yc-space-3); min-height: 56px; padding: 10px 14px; border: 1px solid var(--yc-line); border-radius: var(--yc-radius-card); background: var(--yc-surface); color: var(--yc-text); cursor: pointer; user-select: none; transition: background-color var(--yc-motion) ease; } .yc-upload-group-head:focus-visible { outline: 2px solid var(--yc-focus); outline-offset: 2px; } .yc-upload-fold[open] > .yc-upload-group-head { min-height: 48px; padding: 4px 2px; border-color: transparent; background: transparent; } .yc-upload-group-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .yc-upload-group-title { font-size: 15px; font-weight: var(--yc-fw-bold); line-height: 1.4; color: var(--yc-text); } .yc-upload-group-main { font-size: 14px; font-weight: var(--yc-fw-semi); line-height: 1.45; color: var(--yc-text); overflow-wrap: anywhere; word-break: keep-all; font-variant-numeric: tabular-nums; } .yc-upload-group-sub { font-size: 12px; line-height: 1.45; color: var(--yc-text-2); overflow-wrap: anywhere; word-break: keep-all; } .yc-upload-group[data-state="todo"] .yc-upload-group-sub { color: var(--yc-accent); font-weight: var(--yc-fw-semi); } .yc-upload-fold[open] > .yc-upload-group-head :is(.yc-upload-group-main, .yc-upload-group-sub) { display: none; } .yc-upload-group-edit { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: var(--yc-fw-semi); color: var(--yc-accent); } .yc-upload-group-edit::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--yc-motion); } .yc-upload-fold[open] > .yc-upload-group-head .yc-upload-group-edit::after { transform: translateY(2px) rotate(-135deg); } .yc-upload-group-body { padding-top: var(--yc-space-2); } .yc-upload-confirm { margin-top: var(--yc-space-4); padding: 14px 14px 12px; border: 1px solid var(--yc-line); border-radius: var(--yc-radius-card); background: var(--yc-surface); } .yc-upload-confirm-title { margin: 0; font-size: 15px; font-weight: var(--yc-fw-bold); line-height: 1.4; color: var(--yc-text); } #uploadModal .yc-upload-confirm .yc-upload-recap { border: 0; border-radius: 0; padding: 0; background: transparent; } .yc-upload-recap-row[data-tone="bad"] .yc-upload-recap-main { color: var(--yc-danger-aa); } .yc-upload-recap-row[data-tone="muted"] .yc-upload-recap-main { color: var(--yc-text-2); font-weight: var(--yc-fw-regular); } #uploadModal .yc-upload-confirm #uploadUrgentWarningBanner { margin-top: var(--yc-space-2); } .yc-upload-confirm-legal { margin-top: var(--yc-space-2); padding-top: var(--yc-space-3); border-top: 1px solid var(--yc-line); } #uploadModal .yc-upload-confirm-legal .yc-ov-legal-box { margin-top: 0; } #uploadModal .yc-upload-confirm-legal label { min-height: 44px; } #uploadModal .yc-upload-confirm-legal input[type="checkbox"] { flex: none; width: 20px; height: 20px; } #uploadSubmitBtn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; } .yc-upload-new { min-height: 36px; padding: 0 10px; border: 0; border-radius: var(--yc-radius-control); background: transparent; color: var(--yc-text-2); font-size: 13px; font-weight: var(--yc-fw-semi); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .yc-upload-new:hover { color: var(--yc-text); } /* ===== SUBS-b 2026-10-20 ===== */ /* PAY-CAP ④(메인 판정 — 구독 보완 후속): 관리 콘솔 [구독 관리] 구독 결제 내역 표 — 열 폭 고정(R4 콘솔 표 규칙 '열 고정'). 열 아홉의 합 888px + 비고는 나머지 — 1280 폭의 상자(.yc-bk-tablewrap 974px) 안에서 표 안 가로 넘침 0. 칸 여백은 R4 [용차콜 정산] 표의 좁은 폭 규칙과 같은 8px. 열 폭은 한 줄로 있어야 하는 것의 실측 폭 + 여백(1280 Chrome — 날짜 2026-10-10 75.9px · 기간 앞 '2026-10-10 ~' 91.1px · 금액 5,220,000원 79.3px · 결제수단 배지 '신용/체크카드' 86.6px · 띄어쓰기 없는 상태 배지 '관리자지급' 73px · 세금계산서 배지 '발행완료' 56px — scratch/evidence/2026-10-20-subs-parity/shots/measure-ledger-before.json). 긴 칸(회원·주문번호)은 한 줄 말줄임(제목에 전체), 비고는 칸 말줄임, 결제일시·이용 기간은 띄어쓰기에서만 줄 바꿈(날짜는 쪼개지 않는다), 배지(결제 상태·결제수단·세금계산서 — td.yc-sl-chip)는 배지 안에서 띄어쓰기로 줄 바꿈(칸에 잘려 숨지 않는다). */ .yc-ad-subledger { table-layout: fixed; } .yc-ad-subledger :is(thead th, tbody td) { padding-left: 8px; padding-right: 8px; } .yc-ad-subledger th.yc-sl-when { width: 96px; } .yc-ad-subledger th.yc-sl-member { width: 104px; } .yc-ad-subledger th.yc-sl-plan { width: 104px; } .yc-ad-subledger th.yc-sl-amount { width: 100px; } .yc-ad-subledger th.yc-sl-status { width: 96px; } .yc-ad-subledger th.yc-sl-method { width: 108px; } .yc-ad-subledger th.yc-sl-period { width: 112px; } .yc-ad-subledger th.yc-sl-tax { width: 80px; } .yc-ad-subledger th.yc-sl-order { width: 88px; } .yc-ad-subledger td { overflow: hidden; overflow-wrap: break-word; } .yc-ad-subledger td.yc-sl-chip > span { display: inline-block; max-width: 100%; } .yc-ad-subledger .yc-sl-line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ===== CMS-CONSENT 2026-10-20 ===== */ /* 계좌 자동 출금 동의 창(코덱스 판정 1차 파동 A — /Users/ks/Documents/app/uiux-audit-2026-10-18/cms-consent-verdict-1.md C2·C3·C4, 결정 codex-round1-fixes-2026-10-20.md §2 · 마크업 index.html #ycCmsConsentModal): 세 구역(출금 계좌 / 출금 안내와 동의 / 서명) — 구역 사이 1px 구분선 · 입력·선택 48px·글자 16px · 본문·힌트 14px·행간 1.5 · 동의 줄은 문장 전체가 누르는 자리 44px 이상 · 접기('전문 보기')·[다시 쓰기] 44px · 사진 단추 같은 줄 반폭 48px · 주 버튼 전폭 52px(고정 단추 없음). 색은 공통 토큰만(새 강조색 없음 — 오류 = 위험 글자·테두리, 선택·체크 = 강조). 서명 칸은 면 토큰 위에 글자색 획(main.js ycCmsSignRedraw 가 칸의 color 로 긋는다 — 어두운 모드에서 획이 보이게, 동의서 그림의 획은 따로 검정). 어두운 모드 대비는 scripts/test_cms_thebill.mjs B-C2 가 수치로 본다. */ #ycCmsConsentModal .yc-cms { display: flex; flex-direction: column; gap: var(--yc-space-5); } .yc-cms-sec { display: flex; flex-direction: column; gap: var(--yc-space-3); margin: 0; } .yc-cms-sec + .yc-cms-sec { padding-top: var(--yc-space-5); border-top: 1px solid var(--yc-line); } .yc-cms-sec-title { margin: 0; font-size: var(--yc-fs-card); font-weight: var(--yc-fw-bold); line-height: 1.4; color: var(--yc-text); } .yc-cms-purpose { margin: 0; font-size: var(--yc-fs-body); font-weight: var(--yc-fw-semi); line-height: 1.5; color: var(--yc-text); } .yc-cms-meta { margin: 0; font-size: var(--yc-fs-body); line-height: 1.5; color: var(--yc-text-2); overflow-wrap: anywhere; } .yc-cms-field { display: flex; flex-direction: column; } .yc-cms-label { display: block; margin: 0 0 6px; font-size: var(--yc-fs-body); font-weight: var(--yc-fw-bold); line-height: 1.5; color: var(--yc-text); } .yc-cms-hint { margin: -2px 0 8px; font-size: var(--yc-fs-body); line-height: 1.5; color: var(--yc-text-2); } #ycCmsConsentModal .yc-role-desc { font-size: var(--yc-fs-body); line-height: 1.5; } .yc-cms-input { box-sizing: border-box; display: block; width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--yc-text-3-aa); border-radius: var(--yc-radius-control); background: var(--yc-surface); color: var(--yc-text); font-size: 16px; font-weight: var(--yc-fw-semi); line-height: 1.4; } .yc-cms-input.is-num { font-variant-numeric: tabular-nums; letter-spacing: .02em; } .yc-cms-input::placeholder { color: var(--yc-text-3-aa); font-weight: var(--yc-fw-regular); } .yc-cms-input:focus { border-color: var(--yc-accent); outline: 2px solid var(--yc-focus); outline-offset: 1px; } .yc-cms-input[readonly] { background: var(--yc-surface-2); border-color: var(--yc-line); } .yc-cms-input[aria-invalid="true"] { border-color: var(--yc-danger-aa); box-shadow: inset 0 0 0 1px var(--yc-danger-aa); } .yc-cms-err { margin: 6px 0 0; font-size: var(--yc-fs-body); font-weight: var(--yc-fw-semi); line-height: 1.5; color: var(--yc-danger-aa); } .yc-cms-field.is-invalid .yc-role-body, #ycCmsConsentModal .yc-cms-field.is-invalid .yc-cms-pick-btn { border-color: var(--yc-danger-aa); } /* 코덱스 2차 판정 C2 보완(round2-visual-review-2026-10-21.md:14-20 · round2-main-verdict-2026-10-21.md:35-41): 이 창의 편집 입력(.yc-cms-input — readonly 제외)·사진 선택 단추·계좌 명의 카드(고르지 않은 것)·서명 칸 경계만 --yc-text-3-aa(면 대비 밝음 4.97:1 · 어두움 4.98:1 — 옛 --yc-line 은 어두운 모드 1.30:1). 구분선·요약 상자·전문 상자·읽기 전용 칸은 --yc-line 그대로, 고른 카드(accent)·초점·오류(danger) 색은 그대로. 수치는 scripts/test_cms_thebill.mjs B-C2d. */ #ycCmsConsentModal .yc-role-row > input:not(:checked) + .yc-role-body { border-color: var(--yc-text-3-aa); } /* 어두운 모드 공용 입력 규칙(위 [data-theme="dark"] :is(input…) — border-color: var(--yc-line) !important)이 .yc-cms-input 의 경계 토큰을 덮어 1.30:1 로 남았다(2026-10-21 게이트 B-C2d 출력 inputBorder 1.3). 이 창의 편집 입력만 같은 세기로 되살린다 — 읽기 전용·초점·오류 상태는 제외(공용 규칙·기존 의미 그대로) */ [data-theme="dark"] #ycCmsConsentModal .yc-cms-input:not([readonly]):not(:focus):not([aria-invalid="true"]) { border-color: var(--yc-text-3-aa) !important; } /* 같은 공용 규칙이 초점(accent)·오류(danger) 경계도 덮어 어두운 모드에서는 바깥선·안쪽 그림자만 남았다(2026-10-21 wave-a 경계 표 360-dark 초점 1.3·오류 1.3) — 밝은 모드와 같은 뜻으로 되살린다(이 창만) */ [data-theme="dark"] #ycCmsConsentModal .yc-cms-input:not([readonly]):focus { border-color: var(--yc-accent) !important; } [data-theme="dark"] #ycCmsConsentModal .yc-cms-input[aria-invalid="true"] { border-color: var(--yc-danger-aa) !important; } #ycCmsConsentModal .yc-cms-field.is-invalid .yc-role-row > input:not(:checked) + .yc-role-body { border-color: var(--yc-danger-aa); } .yc-cms-pick, .yc-cms-preview { display: grid; grid-template-columns: 1fr 1fr; gap: var(--yc-space-2); align-items: center; } /* 창 아이디를 앞에 — 손가락 기기 44px 규칙(styles.css button:not([disabled]))이 클래스 하나보다 세서 48px 가 44px 로 눌린다 */ #ycCmsConsentModal .yc-cms-pick-btn { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 48px; padding: 0 10px; border: 1px solid var(--yc-text-3-aa); border-radius: var(--yc-radius-control); background: var(--yc-surface); color: var(--yc-text); font-size: 15px; font-weight: var(--yc-fw-bold); line-height: 1.3; cursor: pointer; } #ycCmsConsentModal .yc-cms-pick-btn:hover { background: var(--yc-surface-2); } .yc-cms-thumb { display: block; box-sizing: border-box; width: 100%; height: 112px; border: 1px solid var(--yc-line); border-radius: var(--yc-radius-control); background: var(--yc-surface-2); } .yc-cms-summary { display: grid; grid-template-columns: max-content 1fr; gap: 6px 12px; margin: 0; padding: 12px 14px; border: 1px solid var(--yc-line); border-radius: var(--yc-radius-card); background: var(--yc-surface-2); font-size: var(--yc-fs-body); line-height: 1.5; } .yc-cms-summary dt { margin: 0; color: var(--yc-text-2); font-weight: var(--yc-fw-semi); white-space: nowrap; } .yc-cms-summary dd { margin: 0; color: var(--yc-text); overflow-wrap: anywhere; } .yc-cms-full > summary { display: flex; align-items: center; gap: 8px; min-height: var(--yc-tap); font-size: var(--yc-fs-body); font-weight: var(--yc-fw-semi); line-height: 1.4; color: var(--yc-text-2); cursor: pointer; list-style: none; text-decoration: underline; text-underline-offset: 3px; } .yc-cms-full > summary::-webkit-details-marker { display: none; } .yc-cms-full > summary::after { content: ''; flex: none; width: 7px; height: 7px; margin-top: -3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); } .yc-cms-full[open] > summary::after { margin-top: 3px; transform: rotate(-135deg); } .yc-cms-full-body { display: flex; flex-direction: column; gap: var(--yc-space-2); margin-top: 4px; padding: 12px 14px; border: 1px solid var(--yc-line); border-radius: var(--yc-radius-card); background: var(--yc-surface-2); font-size: var(--yc-fs-body); line-height: 1.6; color: var(--yc-text-2); } .yc-cms-full-title { margin: 0; font-weight: var(--yc-fw-bold); color: var(--yc-text); } .yc-cms-full-text { margin: 0; } .yc-cms-clauses { display: flex; flex-direction: column; gap: 4px; } .yc-cms-clauses p { margin: 0; } .yc-cms-clauses .is-head { margin-top: 6px; font-weight: var(--yc-fw-bold); color: var(--yc-text); } .yc-cms-clauses .is-body { white-space: pre-line; } .yc-cms-agreebox { display: flex; flex-direction: column; padding: 2px 14px; border: 1px solid var(--yc-line); border-radius: var(--yc-radius-card); background: var(--yc-surface-2); } .yc-cms-agreebox.is-invalid { border-color: var(--yc-danger-aa); } .yc-cms-agree-row { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 4px 0; font-size: var(--yc-fs-body); font-weight: var(--yc-fw-semi); line-height: 1.5; color: var(--yc-text); cursor: pointer; -webkit-tap-highlight-color: transparent; } .yc-cms-agree-row + .yc-cms-agree-row { border-top: 1px solid var(--yc-line); } .yc-cms-agree-row.is-all { font-size: 15px; font-weight: var(--yc-fw-bold); } .yc-cms-agree-row > input[type="checkbox"] { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--yc-accent); cursor: pointer; } .yc-cms-req { color: var(--yc-accent); font-weight: 800; } .yc-cms-sign-head { display: flex; align-items: center; justify-content: space-between; gap: var(--yc-space-2); } .yc-cms-clear { display: inline-flex; align-items: center; justify-content: center; min-width: var(--yc-tap); min-height: var(--yc-tap); margin-right: -10px; padding: 0 10px; border: 0; background: none; color: var(--yc-text-2); font-size: var(--yc-fs-body); font-weight: var(--yc-fw-semi); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .yc-cms-sign { display: block; box-sizing: border-box; width: 100%; height: 144px; border: 1px solid var(--yc-text-3-aa); border-radius: var(--yc-radius-card); background: var(--yc-surface); color: var(--yc-text); } .yc-cms-sign:focus { outline: 2px solid var(--yc-focus); outline-offset: 2px; } .yc-cms-sign[aria-invalid="true"] { border-color: var(--yc-danger-aa); box-shadow: inset 0 0 0 1px var(--yc-danger-aa); } .yc-cms-form-err { margin: 0; font-size: var(--yc-fs-body); font-weight: var(--yc-fw-semi); line-height: 1.5; color: var(--yc-danger-aa); } /* 창 몸통이 세로 flex 라 flex: none — 없으면 손가락 기기 44px 규칙(styles.css pointer: coarse)이 최소값이 되어 52px 가 44px 로 줄어든다 */ .yc-cms-submit { display: flex; flex: none; align-items: center; justify-content: center; gap: 6px; width: 100%; height: var(--yc-btn-primary-h); min-height: var(--yc-btn-primary-h); border: 0; border-radius: var(--yc-radius-control); background: var(--yc-accent); color: var(--yc-on-accent); font-size: 16px; font-weight: 800; cursor: pointer; } .yc-cms-submit:hover { background: var(--yc-accent-hover); } .yc-cms-submit:disabled { opacity: .6; cursor: not-allowed; } /* [결제·정산] 창의 출금 동의 행 — 은행 등록 실패·은행 해지 사유(위험 글자) + [계좌 다시 등록](C1 — main.js ycPmCardHtml) */ .yc-pm-bank-fail { color: var(--yc-danger-aa); font-size: 13px; font-weight: var(--yc-fw-semi); line-height: 1.45; overflow-wrap: anywhere; } .yc-pm-redo { display: inline-flex; align-items: center; justify-content: center; min-height: var(--yc-tap); padding: 0 12px; border: 1px solid var(--yc-line); border-radius: var(--yc-radius-control); background: var(--yc-surface); color: var(--yc-text); font-size: 13px; font-weight: var(--yc-fw-bold); white-space: nowrap; cursor: pointer; } /* ===== CODEX-SUBS 2026-10-20 ===== */ /* DSG-UX-SUBS(코덱스 판정 uiux-audit-2026-10-18/subs-parity-verdict-1.md · 메인 결정 codex-round1-fixes-2026-10-20.md §3) — 토큰만. S3 플랜 변경 창: '바꿀 상품'·'적용 시점' 묶음 머리(legend). 적용 시점은 상품 카드(파란 2px 테두리 상자)와 다른 한 상자 안의 줄 둘 — 고른 줄은 옅은 강조 면 + 강조 글자(:45), 줄 높이 56px(선택지 높이를 줄이지 않는다 — :43). 요약 상자(즉시: 오늘 결제 N원 — 크게 · 예약: 오늘 결제 없음 / M월 D일부터 상품 / 그날 N원), 이후 결제 일정 접기(:46-48). S4 운영 팀 시작 창: 좌석 요금표 접기(:55) · 등록 카드 줄의 [카드 등록](:54 — 화면 전환 버튼이라 48px, 휴대폰 폭(≤600px)에서는 줄 아래 전폭: CLAUDE.md §5 휴대폰 조작감 ①) · 그 등록 창(결제수단 변경)을 시작 창(겹 창 z 9999) 위로. S4 관리 콘솔 구독 결제 내역: 첫 칸 펼침 단추 · 행 상세(주문번호·비고 전체·원문 — :56) — 표 고정 폭은 그대로(SUBS-b 묶음). */ .yc-pc-group { border: 0; margin: 0; padding: 0; min-width: 0; } .yc-pc-legend { display: block; margin-bottom: var(--yc-space-2); padding: 0; font-size: var(--yc-fs-meta); font-weight: var(--yc-fw-bold); color: var(--yc-text-2); } .yc-pc-when { border: 1px solid var(--yc-line); border-radius: var(--yc-radius-card); background: var(--yc-surface); overflow: hidden; } .yc-pc-when-row { display: flex; align-items: flex-start; gap: var(--yc-space-2); min-height: 56px; padding: var(--yc-space-3) var(--yc-space-4); cursor: pointer; } .yc-pc-when-row + .yc-pc-when-row { border-top: 1px solid var(--yc-line); } .yc-pc-when-row.is-on { background: var(--yc-accent-soft); } .yc-pc-when-row.is-on .yc-pc-when-title { color: var(--yc-accent); } .yc-pc-when-row.is-disabled { cursor: not-allowed; } .yc-pc-when-row.is-disabled .yc-pc-when-title { color: var(--yc-text-3-aa); } .yc-pc-when-title { display: block; font-size: 13px; font-weight: var(--yc-fw-bold); color: var(--yc-text); } .yc-pc-when-sub { display: block; margin-top: 2px; font-size: var(--yc-fs-meta); color: var(--yc-text-2); line-height: 1.5; } .yc-pc-sum { padding: var(--yc-space-3) var(--yc-space-4); border: 1px solid var(--yc-line); border-radius: var(--yc-radius-card); background: var(--yc-surface-2); } .yc-pc-sum-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--yc-space-2); font-size: var(--yc-fs-body); font-weight: var(--yc-fw-bold); color: var(--yc-text); } .yc-pc-sum-amount { font-size: var(--yc-fs-section); font-weight: var(--yc-fw-bold); color: var(--yc-accent); white-space: nowrap; } .yc-pc-sum-line { margin-top: var(--yc-space-1); font-size: var(--yc-fs-meta); color: var(--yc-text-2); line-height: 1.5; } .yc-pc-sum-line.is-strong { font-size: 13px; font-weight: var(--yc-fw-bold); color: var(--yc-text); } .yc-pc-sum-row { display: flex; justify-content: space-between; gap: var(--yc-space-2); margin-top: var(--yc-space-1); font-size: 13px; color: var(--yc-text-2); } .yc-pc-sum-row-amount { font-weight: var(--yc-fw-bold); color: var(--yc-text); white-space: nowrap; } .yc-pc-later > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: var(--yc-fs-meta); font-weight: var(--yc-fw-bold); color: var(--yc-text-2); } .yc-pc-later > div { padding: 0 var(--yc-space-1) var(--yc-space-2); font-size: var(--yc-fs-meta); } .yc-ops-seattable > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: var(--yc-fs-meta); font-weight: var(--yc-fw-bold); color: var(--yc-text-2); } .yc-ops-seattable > p { margin-top: var(--yc-space-1); } /* 접기 머리의 펼침 표시 — 가입·동의 기록 · 이후 결제 일정 · 좌석 요금표(글자 오른쪽 꺾쇠, 팀 콘솔 관리 판 .yc-bk-fold 와 같은 모양 — 접힌 줄이 그냥 글자로 보이지 않게) */ :is(#manageRecordsFold, .yc-pc-later, .yc-ops-seattable) > summary { gap: var(--yc-space-2); list-style: none; } :is(#manageRecordsFold, .yc-pc-later, .yc-ops-seattable) > summary::-webkit-details-marker { display: none; } :is(#manageRecordsFold, .yc-pc-later, .yc-ops-seattable) > summary::after { content: ''; flex: none; width: 6px; height: 6px; border-right: 1.5px solid var(--yc-text-2); border-bottom: 1.5px solid var(--yc-text-2); transform: translateY(-2px) rotate(45deg); } :is(#manageRecordsFold, .yc-pc-later, .yc-ops-seattable)[open] > summary::after { transform: translateY(1px) rotate(-135deg); } .yc-ops-card-row { display: flex; align-items: center; justify-content: space-between; gap: var(--yc-space-2); padding: 10px; border: 1px solid var(--yc-line); border-radius: var(--yc-radius-card); } .yc-ops-card-btn { flex: none; min-height: 48px; padding: 0 var(--yc-space-3); border: 1px solid var(--yc-line); border-radius: var(--yc-radius-control); background: var(--yc-surface); color: var(--yc-accent); font-size: 13px; font-weight: var(--yc-fw-bold); cursor: pointer; } /* 48px 은 손가락 기기 styles.css button:not([disabled]) { min-height: 44px }(명시도 0,1,1)보다 앞서야 해서 줄 안 선택자(0,2,0)로 한 번 더 — 휴대폰 폭은 글자 줄 아래 전폭 */ .yc-ops-card-row > .yc-ops-card-btn { min-height: 48px; } @media (max-width: 600px) { .yc-ops-card-row { flex-wrap: wrap; } .yc-ops-card-row > .yc-ops-card-btn { flex: 1 1 100%; } } #modalCardChange.yc-modal-top { z-index: 10001 !important; } .yc-ad-subledger .yc-sl-toggle { display: inline-flex; align-items: flex-start; gap: 4px; min-height: 32px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; } .yc-ad-subledger .yc-sl-chev::before { content: '▸'; display: inline-block; color: var(--yc-text-3-aa); } .yc-ad-subledger .yc-sl-toggle[aria-expanded="true"] .yc-sl-chev::before { content: '▾'; } .yc-ad-subledger tr.yc-sl-detail > td { padding: var(--yc-space-3) var(--yc-space-4); background: var(--yc-surface-2); } .yc-sl-dl { display: grid; gap: var(--yc-space-2); max-width: 640px; margin: 0; font-size: var(--yc-fs-meta); color: var(--yc-text); } .yc-sl-dl > div { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--yc-space-2); } .yc-sl-dl dt { font-weight: var(--yc-fw-bold); color: var(--yc-text-2); } .yc-sl-dl dd { margin: 0; overflow-wrap: anywhere; word-break: break-all; } .yc-sl-raw { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11px; color: var(--yc-text-2); max-height: 240px; overflow: auto; } /* ===== TESTGRANT 2026-10-20 ===== */ /* 코덱스 판정 DSG-UX-ADMIN-TESTGRANT T1·T2(/Users/ks/Documents/app/uiux-audit-2026-10-18/admin-testgrant-verdict-1.md:19-39 — 결정 codex-round1-fixes-2026-10-20 §4): 관리 콘솔 [테스트 계정 관리] 카드의 '주선 자격' 목록 — 목록 제목(h4 #testAccountHead)은 스크롤 상자 밖, 상자 높이는 min(50vh, 400px) 이하에서 6행 반(56px × 6.5 = 364px — 1440×900 에서 6행 + 다음 줄 일부가 보여 스크롤을 알린다), 가로 스크롤 없음, 줄 56px 이상·이름 14px·아이디·상태 12px. 자격 상태 네 벌의 색(테스트 부여 = 정보 색 · 서류 승인 = 기존 승인 색 · 미부여 = 중립 · 대상 아님 = 옅게 — 글자가 달라 색만으로 가르지 않는다), 회원 상세 한 줄(#insTestGrantLine)도 같은 칩. ⋯ 메뉴 크기(44×44·항목 44px)는 공용 하한(.yc-more — 이 파일 앞쪽 콘솔 '⋯ 더 보기' 규칙)에서 올렸다. 토큰만 쓴다(원색 없음 — test_r4_admin_console ⑦). */ #testAccountList.yc-tg-list { max-height: min(50vh, 400px, calc(56px * 6.5)); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; } #testAccountList.yc-tg-list:focus { outline: none; } #testAccountList .yc-tg-row { min-height: 56px; padding-top: 5px; padding-bottom: 5px; } /* ⋯(44) + 위아래 5 + 아래 줄 1 = 56 — ⋯ 없는 줄도 같은 56 */ #testAccountList .yc-tg-row:focus { outline: none; } #testAccountList .yc-tg-row:focus-visible { outline: 2px solid var(--yc-focus); outline-offset: -2px; } #testAccountList .yc-tg-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: var(--yc-fw-bold); line-height: 20px; color: var(--yc-text); } #testAccountList .yc-tg-role { font-size: 12px; font-weight: var(--yc-fw-semi); color: var(--yc-text-2); } #testAccountList .yc-tg-id { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 18px; color: var(--yc-text-2); } #testAccountList .yc-tg-side { display: flex; flex: none; align-items: center; gap: 8px; } :is(#testAccountList, #insTestGrantLine) .yc-tg-state { flex: none; font-size: 12px; font-weight: var(--yc-fw-semi); line-height: 18px; color: var(--yc-text-2); white-space: nowrap; } :is(#testAccountList, #insTestGrantLine) .yc-tg-state[data-broker-grant="test"] { color: var(--yc-accent); } :is(#testAccountList, #insTestGrantLine) .yc-tg-state[data-broker-grant="document"] { color: var(--yc-ok-aa); } :is(#testAccountList, #insTestGrantLine) .yc-tg-state[data-broker-grant="na"] { color: var(--yc-text-3-aa); } #insTestGrantLine.yc-tg-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; line-height: 18px; color: var(--yc-text-2); } #insTestGrantLine .yc-tg-line-head { font-weight: var(--yc-fw-semi); } /* 회원 상세 머리 배지(insBrokerBadge): 자격이 테스트 부여면 글자 '테스트 주선 자격' + 정보 색(T1 상태 색과 같은 accent — 메인 지시 2026-10-20). 배지의 옛 원색 클래스는 자동 색 구역이 !important 로 덮으므로(:is(.yc-ad-tone) .text-purple-700 등) id 선택자 + !important 로 덮는다. 서류 승인 배지는 그대로. */ #insBrokerBadge.is-test-grant { color: var(--yc-accent) !important; border-color: color-mix(in srgb, var(--yc-accent) 45%, var(--yc-line)) !important; } /* ===== HEADER 2026-10-20 ===== */ /* DSG-UX-HEADER(코덱스 판정 /Users/ks/Documents/app/uiux-audit-2026-10-18/header-tools-verdict-1.md:21-35 · 메인 결정 codex-round1-fixes-2026-10-20.md §5) — 색은 토큰만. 앱 머리줄 한 줄 = 로고 / 화면 모드 / 알림 / [관리](관리자) · [콘솔](콘솔에서 넘어온 화주·주선사): 높이 64px · 좌우 16px · 단추 사이 8px(묶음 gap-2) · 화면 모드·알림 44×44(아이콘 20px) · [관리]·[콘솔] 48×48 글자 14px. 회원 머리줄 구성은 그대로(판정 :14) — 크기·여백만 맞춘다. */ .yc-product-ui .desktop-workspace > header.yc-app-head { min-height: 64px; padding: 0 16px; box-sizing: border-box; } /* 줄은 flex 가운데 — 48px 단추 + 구분선 1px 도 64 안 */ .yc-app-head .yc-head-icon { position: relative; display: inline-grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: var(--yc-radius-control); background: transparent; color: var(--yc-text-2); cursor: pointer; } .yc-app-head .yc-head-icon:hover { background: var(--yc-surface-2); color: var(--yc-text); } .yc-app-head .yc-head-icon > i { font-size: 20px; line-height: 1; } .yc-product-ui .desktop-workspace > header.yc-app-head .yc-head-tool { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: 48px; min-height: 48px; padding: 0 12px; border: 1px solid var(--yc-line); border-radius: var(--yc-radius-control); background: var(--yc-surface); color: var(--yc-text); font-size: var(--yc-fs-body); font-weight: var(--yc-fw-bold); line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; } .yc-product-ui .desktop-workspace > header.yc-app-head .yc-head-tool:hover { background: var(--yc-surface-2); } .yc-app-head :is(.yc-head-icon, .yc-head-tool):focus-visible { outline: 2px solid var(--yc-focus); outline-offset: 2px; } /* 미리보기 중에만 머리 아래 한 줄(판정 :26): 지금 보는 역할(말줄임 — 역할이 맨 앞) + [관리자 화면으로 돌아가기] 48px(줄지 않음). 관리자 미리보기(#ycPreviewLine)·테스트 계정으로 보기(utils.js mountBar)가 같은 모양 */ .yc-preview-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-shrink: 0; width: 100%; min-height: 64px; padding: 8px 16px; box-sizing: border-box; border-bottom: 1px solid var(--yc-line); background: color-mix(in srgb, var(--yc-warn) 14%, var(--yc-surface)); color: var(--yc-text); font-size: 13px; font-weight: var(--yc-fw-bold); line-height: 1.35; } .yc-preview-line-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .yc-preview-line .yc-preview-line-btn { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: 48px; min-height: 48px; padding: 0 12px; border: 0; border-radius: var(--yc-radius-control); background: var(--yc-accent); color: var(--yc-on-accent); font: inherit; font-size: var(--yc-fs-body); font-weight: var(--yc-fw-bold); white-space: nowrap; cursor: pointer; } .yc-preview-line .yc-preview-line-btn:hover:not(:disabled) { background: var(--yc-accent-hover); } .yc-preview-line .yc-preview-line-btn:focus-visible { outline: 2px solid var(--yc-focus); outline-offset: 2px; } .yc-preview-line .yc-preview-line-btn:disabled { opacity: .6; cursor: progress; } /* 관리자 도구 창(main.js ycOpenAdminTools — 공용 JS 창 ycOpenDialog): 차례 현재 화면 → 콘솔 이동 → 테스트 계정으로 보기 · 행 48px · 본문 14px · 휴대폰은 아래 시트, 640 이상은 가운데 */ .yc-admin-tools { position: fixed; inset: 0; z-index: 9990; display: flex; align-items: flex-end; justify-content: center; } /* 바탕 막은 다른 JS 창과 같은 bg-black/50(main.js) — 이 묶음은 토큰만 */ .yc-admin-tools-panel { width: 100%; max-width: 420px; max-height: calc(100dvh - 24px); overflow-y: auto; box-sizing: border-box; padding: 4px 16px max(16px, env(safe-area-inset-bottom)); border: 1px solid var(--yc-line); border-radius: 20px 20px 0 0; background: var(--yc-surface); color: var(--yc-text); box-shadow: var(--yc-shadow-pop); } @media (min-width: 640px) { .yc-admin-tools { align-items: center; padding: 16px; } .yc-admin-tools-panel { border-radius: 20px; padding-bottom: 16px; } } .yc-admin-tools-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 56px; } .yc-admin-tools-head h2 { margin: 0; font-size: var(--yc-fs-card); font-weight: var(--yc-fw-bold); color: var(--yc-text); } .yc-admin-tools-close { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; margin-right: -8px; border: 0; border-radius: var(--yc-radius-control); background: transparent; color: var(--yc-text-2); cursor: pointer; } .yc-admin-tools-close:hover { background: var(--yc-surface-2); color: var(--yc-text); } .yc-admin-tools-sec { padding: 8px 0; border-top: 1px solid var(--yc-line); } .yc-admin-tools-sec h3 { margin: 4px 0; font-size: 13px; font-weight: var(--yc-fw-semi); color: var(--yc-text-3-aa); } .yc-admin-tools .yc-admin-tools-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; margin: 0; padding: 0 12px; box-sizing: border-box; border: 0; border-radius: var(--yc-radius-control); background: transparent; color: var(--yc-text); font: inherit; font-size: var(--yc-fs-body); line-height: 1.4; text-align: left; text-decoration: none; cursor: pointer; } .yc-admin-tools .yc-admin-tools-row:hover { background: var(--yc-surface-2); } .yc-admin-tools .yc-admin-tools-row.is-static { cursor: default; background: var(--yc-surface-2); } .yc-admin-tools-main { font-weight: var(--yc-fw-semi); } .yc-admin-tools-sub { font-size: 13px; color: var(--yc-text-2); } .yc-admin-tools-chev { flex: none; color: var(--yc-text-3-aa); } .yc-admin-tools :is(button, a):focus-visible { outline: 2px solid var(--yc-focus); outline-offset: -2px; } /* 관리 콘솔 [본사 총괄 | 팀 콘솔] 전환(판정 :34-35 — 본사 총괄에 오더 등록 입구를 더하지 않고 전환을 분명히): 누르는 자리 44px 이상 · 사이드바를 접은 폭(아이콘만 — 1024~1279 기본)은 두 단추를 위아래로 세워 칸마다 44×44 · 이름은 aria-label · 지금 고른 쪽은 aria-pressed(admin.html·admin-pc.js switchConsoleWorkspace) */ #consoleWorkspaceSwitcher .yc-ws-btn { min-height: 44px; } aside#adminSidebar.collapsed #consoleWorkspaceSwitcher { padding-left: 8px; padding-right: 8px; } aside#adminSidebar.collapsed #consoleWorkspaceSwitcher > div { flex-direction: column; padding: 2px; } aside#adminSidebar.collapsed #consoleWorkspaceSwitcher .yc-ws-btn { flex: none; width: 100%; min-width: 44px; padding-left: 0; padding-right: 0; }