/* 회원 로그인 후 영역 — 좌측 사이드바 SaaS 셸 (dream-app-shell) 서버가 로그인 시 주입 → 이 CSS가 즉시 적용(FOUC 0). 기존 dream-data-platform/dream-open 토큰을 베이스로 확장. 폰트는 외부 CDN을 쓰지 않는다 — gen2는 dream-tokens.css가 self-host Pretendard Variable을 공급하고, gen1은 아래 fallback 스택으로 자립한다(2026-08-08 Google Fonts CDN 로드 제거). */ :root { --app-sidebar-w: 264px; --app-sidebar-collapsed: 72px; --app-topbar-h: 56px; /* 회원 본문의 최대 폭. 고정 상한을 두면 광폭 모니터에서 화면 절반이 빈 채로 남는다 (2026-08-08 실측: 2560px에서 1136px 공백). 화면이 커지면 같이 커지되, 폼 한 줄이 끝없이 늘어나지 않도록 위쪽만 묶는다. */ --app-content-max: min(max(1760px, 78vw), 2400px); --app-bg: #f0ede4; --app-amber: #E8A33D; --app-coral: #F2785C; --app-green: #146b55; --app-green-soft: #e3f2ec; --app-navy: #121922; --app-ink: #151a1f; --app-ink2: #2a333b; --app-muted: #68737c; --app-line: #d6dad5; --app-card-shadow: 0 6px 20px rgba(18,25,34,.06); --app-hover-shadow: 0 14px 40px rgba(20,107,85,.12); } /* ── 로그인 회원 모드: 헤더 메뉴 숨기고 사이드바 자리 확보 ── */ body.member-authed { background: var(--dv-bg-page, #faf9f6); } body.member-authed .topbar .main-nav, body.member-authed .topbar .nav-links, body.member-authed .topbar .top-actions, body.member-authed .topbar .mobile-toggle, body.member-authed .mobile-menu { display: none !important; } body.member-authed .service-dock, body.member-authed .service-tabbar { display: none !important; } body.member-authed .dream-channel-widget { display: none !important; } /* 앱 셸에서는 좌측 패널이 전체 내비게이션을 담당하므로 빈 공통 헤더를 제거한다. */ body.member-authed .topbar { display: none !important; } body.member-authed .topbar .brand { display: none !important; } body.member-authed .topbar .topbar-inner { padding-left: calc(var(--app-sidebar-w) + 20px); transition: none; } body.member-authed.app-collapsed .topbar .topbar-inner { padding-left: calc(var(--app-sidebar-collapsed) + 20px); } /* 본문을 사이드바 폭만큼 밀기 */ body.member-authed main, body.member-authed > main { width: calc(100% - var(--app-sidebar-w)); min-width: 0; margin-left: var(--app-sidebar-w); transition: none; } body.member-authed.app-collapsed main { width: calc(100% - var(--app-sidebar-collapsed)); margin-left: var(--app-sidebar-collapsed); } body.member-authed { overflow-x: hidden; /* gen2: dream-tokens.css의 --dv-font-ui(self-host Pretendard Variable)가 이긴다. gen1: 아래 fallback 스택 — 값은 dream-tokens.css의 --dv-font-ui와 동일하게 유지할 것. */ font-family: var(--dv-font-ui, "Pretendard Variable", Pretendard, system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif); } /* 로그인 회원 앱 모드: 본문은 읽기 폭 안에서 가운데 정렬한다. max-width 를 통째로 풀면 광폭 모니터에서 콘텐츠가 사이드바에 붙고 오른쪽 1/3이 빈 채로 남는다 — 2026-08-07 감사에서 "중앙 공백" 체감의 공통 뿌리로 확인된 지점. */ body.member-authed main.member-main, body.member-authed main.feature-main, body.member-authed main.service-workspace-main { padding: 22px 28px 48px; } body.member-authed .member-dash, body.member-authed .feature-main .container, body.member-authed .service-workspace-shell, body.member-authed .deck-studio, body.member-authed .community-console { width: 100%; max-width: var(--app-content-max); min-width: 0; margin-left: auto; margin-right: auto; } body.member-authed .feature-hero, body.member-authed .feature-shell, body.member-authed .service-workspace-shell, body.member-authed .service-product-host, body.member-authed .deck-studio, body.member-authed .deck-studio-grid, body.member-authed .community-console, body.member-authed .community-main { min-width: 0; } body.member-authed .deck-studio-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, 340px); grid-template-areas: "sources results" "intake results"; } body.member-authed.make-deck-page .deck-command { min-height: 0; /* 자료실 드롭존이 머리 우측에 산다(2026-08-19 대표 지시 Image #79). */ grid-template-columns: minmax(0, 1fr) auto; gap: 5px 16px; align-items: center; padding: 14px 16px; } /* 자료실 버튼(구 label) — 버튼화 보정 + 클릭 진입점임을 보이게. */ .make-deck-page button.source-dropzone { font: inherit; cursor: pointer; } /* 화면 전체 드래그 중 — 자료실이 도착점임을 밝힌다. */ body.is-file-dragging .source-dropzone.source-dropzone-compact { border-color: var(--dv-primary, #2c55e0); border-style: solid; background: #eef3ff; box-shadow: 0 0 0 4px rgba(44, 85, 224, .14); } body.member-authed.make-deck-page .deck-command .label, body.member-authed.make-deck-page .deck-command-meter, body.member-authed.make-deck-page .deck-advisory-link { display: none; } body.member-authed.make-deck-page .deck-command h1 { max-width: none; font-size: clamp(20px, 2vw, 24px); line-height: 1.18; } body.member-authed.make-deck-page .deck-command p { max-width: 96ch; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 1; -webkit-box-orient: vertical; font-size: 12.5px; } body.member-authed .service-nav-strip { grid-template-columns: minmax(0, 1fr); } body.member-authed .feature-shell { grid-template-columns: minmax(280px, 320px) minmax(0, 1fr); } body.member-authed .feature-shell.no-rail { grid-template-columns: minmax(280px, 320px) minmax(0, 1fr); } body.member-authed .feature-shell > .feature-rail { display: none; } body.member-authed .feature-sidebar { width: 100%; min-width: 0; padding-right: 15px !important; } body.member-authed .feature-content { min-width: 0; } body.member-authed .tt-hero { min-height: 0; padding: 18px 20px; grid-template-columns: minmax(0, 1fr) minmax(250px, 320px); gap: 18px; align-items: center; } body.member-authed .tt-hero > div { min-width: 0; display: grid; grid-template-columns: minmax(360px, 1fr) minmax(230px, auto); grid-template-areas: "label stats" "title stats" "copy stats" "search search"; column-gap: 20px; align-items: center; } body.member-authed .tt-hero .label { grid-area: label; } body.member-authed .tt-hero h1 { grid-area: title; margin: 4px 0 0; } body.member-authed .tt-hero p { grid-area: copy; margin-top: 8px; } body.member-authed .tt-hero .tt-stats { grid-area: stats; margin-top: 0; justify-content: flex-end; align-self: center; } body.member-authed .tt-hero .tt-herobar { grid-area: search; max-width: none; width: 100%; margin-top: 14px; } body.member-authed .tt-hero figure { height: 158px; max-width: 320px; justify-self: end; } /* ── 사이드바 ── */ .app-sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: var(--app-sidebar-w); z-index: 60; display: flex; flex-direction: column; gap: 2px; background: #fff; border-right: 1px solid var(--dv-border, #c9c5bb); box-shadow: none; padding: 14px 14px 12px; overflow: hidden; transition: none; } body.app-collapsed .app-sidebar { width: var(--app-sidebar-collapsed); padding-left: 10px; padding-right: 10px; } .app-nav-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: thin; } /* 로고 */ .app-sidebar .app-brand { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 6px 0 8px; text-decoration: none; margin-bottom: 6px; } .app-sidebar .app-brand .mark { width: 32px; height: 32px; border-radius: 9px; flex: none; background: linear-gradient(135deg, var(--dv-trust, #13294b), var(--dv-primary, #2c55e0)); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 14px; } .app-sidebar .app-brand .word { display: grid; line-height: 1.15; } .app-sidebar .app-brand .word strong { font-size: 14px; color: var(--dv-text-strong, #14181f); font-weight: 800; } .app-sidebar .app-brand .word small { font-size: 11px; color: var(--dv-text-muted, #636b79); } body.app-collapsed .app-sidebar .app-brand .word { display: none; } /* 정체성 박스(.app-identity)는 2026-08-20 대표 지시로 사이드바에서 걷어냈다. 그 자리를 자료실 메뉴가 대신하므로 아래 .is-vault-item이 박스의 표면 문법을 물려받는다. */ /* 그룹 */ .app-navgroup { display: grid; gap: 2px; padding: 8px 0 4px; } .app-navgroup + .app-navgroup { border-top: 1px solid var(--dv-border, #c9c5bb); margin-top: 4px; } .app-navgroup > .grp-label { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--dv-text-muted, #636b79); padding: 6px 10px 2px; } .app-navgroup .grp-hint { margin: -2px 8px 4px; color: var(--dv-warning-text, #6d4300); font-size: 11px; font-weight: 800; } .app-navgroup.is-exec-group .app-navitem, .app-navgroup.is-management-group .app-navitem { height: 38px; font-size: 13px; } .app-navgroup.is-exec-group .app-navitem svg, .app-navgroup.is-management-group .app-navitem svg { width: 18px; height: 18px; } .app-navgroup.is-network-group { gap: 4px; margin-top: 7px; padding: 8px 8px 9px; border: 1px solid var(--dv-border, #c9c5bb); border-radius: 12px; background: var(--dv-bg-subtle, #f2f0ec); box-shadow: none; } .app-navgroup + .app-navgroup.is-network-group { border-top: 1px solid var(--dv-border, #c9c5bb); } .app-navgroup.is-network-group > .grp-label { padding: 5px 8px 0; color: var(--dv-text-muted, #636b79); } body.app-collapsed .app-navgroup > .grp-label { opacity: 0; height: 8px; padding: 0; } body.app-collapsed .app-navgroup .grp-hint { display: none; } body.app-collapsed .app-navgroup.is-network-group { padding: 6px 0 4px; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .app-nav-more { margin-top: 4px; } .app-nav-more summary { height: 38px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-radius: 10px; color: var(--dv-text-muted, #636b79); cursor: pointer; list-style: none; font-size: 12.5px; font-weight: 800; } .app-nav-more summary::-webkit-details-marker { display: none; } .app-nav-more summary:hover { background: var(--dv-bg-subtle, #f2f0ec); color: var(--dv-text, #2e3440); } .app-nav-more summary b { min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--dv-bg-selected, #e9edf9); color: var(--dv-primary, #2c55e0); font-size: 11px; } .app-nav-more-list { display: grid; gap: 2px; padding-top: 2px; } .app-nav-more:not([open]) > .app-nav-more-list { display: none; } body.app-collapsed .app-nav-more summary { justify-content: center; padding: 0; } body.app-collapsed .app-nav-more summary span, body.app-collapsed .app-nav-more summary b { display: none; } /* 메뉴 항목 */ .app-navitem { position: relative; display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 12px; border-radius: 10px; text-decoration: none; color: var(--dv-text, #2e3440); font-size: 14px; font-weight: 700; white-space: nowrap; transition: background .15s ease, color .15s ease; } .app-navitem svg { width: 20px; height: 20px; flex: none; stroke: currentColor; } .app-navitem .lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; } .app-navitem:hover { background: var(--dv-bg-subtle, #f2f0ec); color: var(--dv-text-strong, #14181f); } .app-navitem.active { background: var(--dv-bg-selected, #e9edf9); color: var(--dv-primary, #2c55e0); } /* active 왼쪽 선은 DESIGN.md Navigation이 승인한 표현. 값은 gen2(dream-app-shell-v2.css L165~174)와 동일하게 맞춘다. */ .app-navitem.active::before { content: ""; position: absolute; left: 0; top: 11px; bottom: 11px; width: 2px; border-radius: 2px; background: var(--dv-primary, #2c55e0); } /* 자료실: 지워진 정체성 박스의 표면 문법(1px 경계 + 옅은 틴트)을 그대로 물려받되 줄 높이·아이콘·글자는 다른 메뉴와 똑같이 둔다 — 같은 줄에 서면서 한 칸만 도드라지게. 틴트는 --dv-trust-soft(정체성 박스 값) 대신 중립 틴트를 쓴다. trust-soft가 선택 표면(--dv-bg-selected)과 거의 같은 색이라, 그대로 쓰면 안 눌렀는데도 "지금 여기"로 보여 현재 위치 표시를 잡아먹는다. */ .app-navitem.is-vault-item { box-sizing: border-box; margin: 2px 0 3px; border: 1px solid var(--dv-border, #c9c5bb); background: var(--dv-bg-subtle, #f2f0ec); color: var(--dv-text-strong, #14181f); } /* 호버는 중성 진한 선까지만 — 코발트 경계는 활성(현재 위치) 몫으로 남긴다. */ .app-navitem.is-vault-item:hover { border-color: var(--dv-border-strong, #767d89); background: var(--dv-bg-selected, #e9edf9); color: var(--dv-text-strong, #14181f); } .app-navitem.is-vault-item.active { border-color: var(--dv-primary, #2c55e0); background: var(--dv-bg-selected, #e9edf9); color: var(--dv-primary, #2c55e0); } /* 활성 왼쪽 선이 경계선 위에 겹쳐 반쯤 잘리지 않도록 테두리 바깥으로 1px 물린다. */ .app-navitem.is-vault-item.active::before { left: -1px; } .app-navitem.is-network-item { height: 34px; gap: 10px; padding: 0 10px; border-radius: 8px; font-size: 12.5px; } .app-navitem.is-network-item svg { width: 18px; height: 18px; } .app-navitem.is-network-item:hover { background: var(--dv-bg-subtle, #f2f0ec); color: var(--dv-text-strong, #14181f); } .app-navitem.is-network-item.active { background: var(--dv-bg-selected, #e9edf9); color: var(--dv-primary, #2c55e0); box-shadow: color-mix(in srgb, var(--dv-primary, #2c55e0) 12%, transparent); } .app-navitem.is-network-item.active::before { top: 8px; bottom: 8px; /* 주의 골드는 실제 주의 상태에만 쓴다(Rare Accent). 내비 active는 실행 그린. */ background: var(--dv-primary, #2c55e0); } /* 홈 항목도 다른 내비와 같은 선택 표면 문법을 쓴다(gen2 dream-app-shell-v2.css L156~163과 동일). */ .app-navitem.is-home { height: 50px; margin: 2px 0 5px; background: var(--dv-bg-selected, #e9edf9); color: var(--dv-primary, #2c55e0); box-shadow: none; } .app-navitem.is-home:hover { background: var(--dv-bg-selected, #e9edf9); color: var(--dv-primary-hover, #2143c0); } .app-navitem.is-home.active { background: var(--dv-bg-selected, #e9edf9); color: var(--dv-primary, #2c55e0); } .app-navitem.is-home.active::before { background: var(--dv-primary, #2c55e0); top: 10px; bottom: 10px; } .app-navitem .new-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dv-danger, #b42318); flex: none; } .app-navitem[hidden] { display: none !important; } .app-navitem .app-nav-status { flex: none; min-height: 20px; display: inline-flex; align-items: center; padding: 0 7px; border-radius: 999px; background: var(--dv-warning-surface, #fff5e4); border: 1px solid color-mix(in srgb, var(--dv-warning-accent, #e8a33d) 45%, var(--dv-warning-surface, #fff5e4)); color: var(--dv-warning-text, #6d4300); font-size: 10px; font-weight: 800; } body.app-collapsed .app-navitem { justify-content: center; padding: 0; } body.app-collapsed .app-navitem .lbl, body.app-collapsed .app-navitem .new-dot, body.app-collapsed .app-navitem .app-nav-status { display: none; } /* 하단 분리 블록 */ .app-sidebar .app-bottom { flex: none; margin-top: 0; padding-top: 8px; border-top: 1px solid var(--dv-border, #c9c5bb); display: grid; gap: 6px; } .app-account { min-height: 64px; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid transparent; border-radius: 8px; background: var(--dv-bg-subtle, #f2f0ec); text-decoration: none; cursor: pointer; } .app-account:hover { border-color: var(--dv-border, #c9c5bb); background: var(--dv-bg-subtle, #f2f0ec); } .app-account.is-logged-in { border-color: color-mix(in srgb, var(--dv-success-text, #0d5b47) 35%, var(--dv-success-surface, #e7f4ee)); background: var(--dv-success-surface, #e7f4ee); } .app-account.is-logged-in:hover { border-color: var(--dv-primary, #2c55e0); background: var(--dv-success-surface, #e7f4ee); } .app-account.is-auth-error { border-color: color-mix(in srgb, var(--dv-danger, #b42318) 35%, var(--dv-danger-surface, #fef0ee)); background: var(--dv-danger-surface, #fef0ee); } .app-account .av { width: 36px; height: 36px; border-radius: 50%; flex: none; background: var(--dv-bg-selected, #e9edf9); color: var(--dv-primary, #2c55e0); display: grid; place-items: center; font-weight: 800; font-size: 13px; overflow: hidden; } .app-account.is-logged-in .av { color: #fff; background: var(--dv-primary, #2c55e0); box-shadow: none; } .app-account.is-auth-error .av { color: #fff; background: var(--dv-danger, #b42318); } .app-account .av img { width: 100%; height: 100%; object-fit: cover; } .app-account .meta { min-width: 0; display: grid; gap: 1px; line-height: 1.2; overflow: hidden; } .app-account .app-auth-state { display: inline-flex; align-items: center; gap: 5px; color: var(--dv-text-muted, #636b79); font-size: 10px; font-weight: 800; } .app-account .app-auth-state > span { width: 6px; height: 6px; border-radius: 50%; background: var(--dv-border-strong, #767d89); } .app-account.is-logged-in .app-auth-state { color: var(--dv-primary, #2c55e0); } .app-account.is-logged-in .app-auth-state > span { background: var(--dv-success-text, #0d5b47); box-shadow: none; } .app-account.is-auth-error .app-auth-state { color: var(--dv-danger, #b42318); } .app-account.is-auth-error .app-auth-state > span { background: var(--dv-danger, #b42318); } .app-account .meta strong { font-size: 13px; font-weight: 700; color: var(--dv-text-strong, #14181f); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-account .meta small { font-size: 11px; color: var(--dv-text-muted, #636b79); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.app-collapsed .app-account .meta { display: none; } /* 계정 메뉴 팝오버 — 계정 설정/계정 카드 클릭 시(2026-07-05). */ .app-account-menu { position: fixed; z-index: 90; min-width: 218px; padding: 8px; border: 1px solid var(--dv-border, #c9c5bb); border-radius: 12px; background: #fff; box-shadow: var(--dv-shadow-overlay, 0 18px 48px rgba(23, 33, 29, 0.18)); display: grid; gap: 2px; animation: aam-in .16s ease-out; } @keyframes aam-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .app-account-menu .aam-head { display: grid; gap: 1px; padding: 8px 10px 10px; border-bottom: 1px solid var(--dv-border, #c9c5bb); margin-bottom: 4px; } .app-account-menu .aam-head strong { font-size: 13.5px; color: var(--dv-text-strong, #14181f); } .app-account-menu .aam-head small { font-size: 11.5px; color: var(--dv-text-muted, #636b79); overflow: hidden; text-overflow: ellipsis; } .app-account-menu .aam-head span { width: max-content; max-width: 100%; margin-top: 5px; padding: 3px 7px; border-radius: 999px; background: var(--dv-bg-selected, #e9edf9); color: var(--dv-primary, #2c55e0); font-size: 10px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-account-menu a, .app-account-menu button { display: block; width: 100%; text-align: left; padding: 9px 10px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 13px; font-weight: 650; color: var(--dv-text, #2e3440); text-decoration: none; cursor: pointer; } .app-account-menu a:hover, .app-account-menu button:hover { background: var(--dv-bg-subtle, #f2f0ec); color: var(--dv-text-strong, #14181f); } .app-account-menu .danger { color: var(--dv-danger, #b42318); } .app-account-menu .danger:hover { background: var(--dv-danger-surface, #fef0ee); } /* 토글 버튼(탑바에 주입) */ .app-toggle { position: fixed; top: 5px; left: calc(var(--app-sidebar-w) - 8px); z-index: 70; width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--dv-border, #c9c5bb); background: #fff; color: var(--dv-text, #2e3440); cursor: pointer; display: grid; place-items: center; transition: none; box-shadow: none; } body.app-collapsed .app-toggle { left: calc(var(--app-sidebar-collapsed) - 6px); } .app-toggle svg { width: 16px; height: 16px; stroke: currentColor; fill: none; } /* 모바일 오버레이 */ .app-scrim { position: fixed; inset: 0; z-index: 55; background: rgba(12,18,26,.4); opacity: 0; pointer-events: none; transition: opacity .2s ease; } /* 모바일 상단 바의 화면 이름 — 데스크톱에선 숨김 */ .app-mobile-title { display: none; } @media (max-width: 1024px) { .app-mobile-title { display: block; position: fixed; top: 0; left: 62px; right: 96px; z-index: 66; height: 54px; line-height: 54px; color: var(--dv-text-strong, #14181f); font-size: 15.5px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; } } /* ── 인증 확정 전 중립 상태 (2026-08-20) ── 예전에는 확인 중에도 로그인 게이트를 먼저 그렸다가, 응답이 오면 회원 본화면으로 되돌렸다. 대표 실측으로 화면이 통째로 두 번 뒤집히는 것이 확인돼(본화면 → 게이트 → 본화면) 확인 중에는 이 조용한 로딩 한 장만 남긴다. 게이트도 본화면도 그리지 않는다. */ .app-auth-pending { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 40vh; margin: 0; padding: 24px 16px; color: var(--dv-text-muted, #636b79); font-size: 13px; } .app-auth-pending-spinner { width: 16px; height: 16px; flex: none; border: 2px solid var(--dv-border, #c9c5bb); border-top-color: var(--dv-text-muted, #636b79); border-radius: 50%; animation: appAuthPendingSpin .8s linear infinite; } @keyframes appAuthPendingSpin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .app-auth-pending-spinner { animation: none; } } /* 확인 중에는 본화면 골격(사이드바·정적 자리표시자)을 보여주지 않는다 — 확정 뒤 한 번만 그린다. 상단바도 마찬가지다. 앱 셸에서 상단바는 비로그인 쪽 화면에만 있고 회원 화면은 좌측 레일이 그 자리를 대신한다. 확인 중에 상단바를 띄우면 그것부터가 "비로그인" 쪽으로 찍는 것이 된다. */ body.app-auth-loading .app-sidebar, body.app-auth-loading .app-toggle, body.app-auth-loading .app-scrim, body.app-auth-loading .app-mobile-title, body.app-auth-loading .topbar, body.app-auth-loading .mobile-menu { display: none !important; } body.app-auth-loading main { margin-left: 0 !important; width: 100% !important; } body.app-auth-loading main > :not(#appAuthPending) { display: none !important; } .app-login-gate { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 14px; padding: 13px 15px; border: 1px solid var(--dv-border, #c9c5bb); border-radius: 12px; background: var(--dv-trust-soft, #eaeef8); box-shadow: none; } .app-login-gate-copy { min-width: 0; display: grid; gap: 3px; } .app-login-gate-copy strong { color: var(--dv-text-strong, #14181f); font-size: 14px; line-height: 1.3; } .app-login-gate-copy span { color: var(--dv-text-muted, #636b79); font-size: 12px; line-height: 1.45; } /* 연합 로그인 버튼은 구글 관례(흰 바탕 + 공식 G 마크)를 따른다 — 플랫폼 색으로 칠하면 구글 버튼처럼 보이지 않는다(2026-08-11 대표 지적). 재시도 버튼도 같은 중립형을 쓴다. */ .app-login-gate-button { min-height: 36px; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 10px; padding: 0 16px; border: 1px solid var(--dv-border, #c9c5bb); border-radius: 10px; background: #fff; color: var(--dv-text-strong, #14181f); font-size: 13px; font-weight: 800; text-decoration: none; cursor: pointer; box-shadow: none; } .app-login-gate-button:hover { border-color: var(--dv-text-muted, #636b79); background: #fff; color: var(--dv-text-strong, #14181f); } .app-login-gate-glogo { width: 18px; height: 18px; flex: none; } /* 회사 자료 분석은 서버 작업 원장에 남아 페이지가 바뀌어도 계속된다. 이 셸 표시는 현재 회사의 실제 작업 상태만 다시 읽으며, 본문을 가리는 fixed overlay를 만들지 않는다. */ .app-company-analysis-activity { position: sticky; top: 12px; z-index: 44; width: 100%; max-width: var(--app-content-max); min-width: 0; box-sizing: border-box; margin: 0 auto 14px; overflow: hidden; border: 1px solid var(--dv-primary, #2c55e0); border-radius: 8px; background: var(--dv-bg-surface, #fff); box-shadow: 0 8px 24px rgba(20, 31, 58, .08); } .app-company-analysis-activity[hidden] { display: none !important; } .app-company-analysis-row { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 11px; min-width: 0; padding: 11px 12px 10px; } .app-company-analysis-mark { position: relative; width: 10px; height: 10px; border: 2px solid var(--dv-primary, #2c55e0); border-radius: 2px; } .app-company-analysis-mark::after { content: ""; position: absolute; inset: 2px; background: var(--dv-primary, #2c55e0); } .app-company-analysis-copy { display: grid; min-width: 0; gap: 2px; } .app-company-analysis-heading { display: flex; min-width: 0; align-items: baseline; gap: 8px; } .app-company-analysis-heading strong { overflow: hidden; color: var(--dv-text-strong, #14181f); font-size: 13.5px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .app-company-analysis-heading b { flex: none; color: var(--dv-primary, #2c55e0); font-size: 12px; font-variant-numeric: tabular-nums; } .app-company-analysis-copy p { overflow: hidden; min-width: 0; margin: 0; color: var(--dv-text-muted, #636b79); font-size: 12px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .app-company-analysis-row > a { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 13px; border: 1px solid var(--dv-border, #c9c5bb); border-radius: 8px; background: var(--dv-bg-surface, #fff); color: var(--dv-primary, #2c55e0); font-size: 12.5px; font-weight: 800; text-decoration: none; white-space: nowrap; } .app-company-analysis-row > a:hover { border-color: var(--dv-primary, #2c55e0); } .app-company-analysis-row > a:focus-visible { outline: 3px solid var(--dv-focus, rgba(44, 85, 224, .24)); outline-offset: 2px; } .app-company-analysis-rail { position: relative; height: 3px; overflow: hidden; background: var(--dv-border, #c9c5bb); } .app-company-analysis-rail > span { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--dv-primary, #2c55e0); transition: width .28s ease-out; } .app-company-analysis-rail > i { position: absolute; top: 0; bottom: 0; left: -24%; width: 24%; background: color-mix(in srgb, var(--dv-bg-surface, #fff) 78%, transparent); transform: translateX(0); animation: app-company-analysis-scan 1.15s linear infinite; } .app-company-analysis-live { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; } @keyframes app-company-analysis-scan { to { transform: translateX(520%); } } body[data-company-analysis-active="true"]:not(.make-deck-page) .company-agent-strip[data-company-agent-state="busy"] { display: none !important; } body[data-company-analysis-paused="true"] .app-company-analysis-rail > i { animation-play-state: paused; } /* The member dashboard contains static placeholders before data load; never expose them without a settled session. */ body.member-page.app-auth-required .member-dash { display: none; } @media (max-width: 1180px) and (min-width: 1025px) { body.member-authed .feature-shell, body.member-authed .feature-shell.no-rail { grid-template-columns: 1fr !important; } body.member-authed .feature-sidebar, body.member-authed .feature-content, body.member-authed .feature-rail, body.member-authed .deck-source-panel, body.member-authed .deck-intake-panel, body.member-authed .deck-result-stack, body.member-authed .deck-preview, body.member-authed .deck-room { width: 100%; max-width: 100%; min-width: 0; } body.member-authed .feature-sidebar, body.member-authed .feature-rail, body.member-authed .deck-source-panel, body.member-authed .deck-room { position: static; } body.member-authed .deck-source-panel, body.member-authed .deck-intake-panel, body.member-authed .deck-result-stack { max-height: none; overflow: visible; } } @media (max-width: 1024px) { body.member-authed main, body.member-authed > main { width: 100% !important; margin-left: 0 !important; } body.member-authed main.member-main, body.member-authed main.feature-main, body.member-authed main.service-workspace-main { padding: 58px 16px 40px; } body.member-authed .feature-hero, body.member-authed .feature-shell, body.member-authed .feature-shell.no-rail, body.member-authed .service-nav-strip, body.member-authed .advisory-hero, body.member-authed .deck-command, body.member-authed .community-console, body.member-authed .community-hero { grid-template-columns: 1fr !important; } body.member-authed .feature-sidebar, body.member-authed .feature-content, body.member-authed .feature-rail, body.member-authed .deck-source-panel, body.member-authed .deck-intake-panel, body.member-authed .deck-result-stack, body.member-authed .deck-preview, body.member-authed .deck-room, body.member-authed .community-rail, body.member-authed .community-main, body.member-authed .community-side { width: 100%; max-width: 100%; min-width: 0; } body.member-authed .feature-sidebar, body.member-authed .feature-rail, body.member-authed .deck-source-panel, body.member-authed .deck-room, body.member-authed .community-rail, body.member-authed .community-side { position: static; } body.member-authed.feature-page .feature-sidebar { padding-right: 15px !important; } body.member-authed .feature-sidebar > *, body.member-authed .feature-search, body.member-authed .filter-note, body.member-authed .feature-search input, body.member-authed .feature-search select, body.member-authed .feature-sidebar .btn { width: 100%; max-width: 100%; min-width: 0; } body.member-authed .topbar .topbar-inner { padding-left: 56px !important; } .app-login-gate { align-items: stretch; flex-direction: column; } .app-login-gate-button { width: 100%; } .app-company-analysis-activity { top: 62px; } /* 플로팅 토글이 스크롤된 본문 위에 그대로 겹치던 문제 — 토글 뒤에 반투명 고정 바를 깔아 본문이 바 아래로 지나가게 한다. 본문 상단 여백(58px)은 이미 확보되어 있다. */ body.member-authed::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 54px; z-index: 65; background: color-mix(in srgb, var(--dv-bg-page, #faf9f6) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--dv-border, #c9c5bb); } .app-sidebar { transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--dv-shadow-overlay, 0 18px 48px rgba(23, 33, 29, 0.18)); } body.app-mobile-open .app-sidebar { transform: translateX(0); } /* 서랍이 열리면 상단 바와 화면 제목은 서랍 위에 떠 있지 않도록 숨긴다 */ body.member-authed.app-mobile-open::before { display: none; } body.app-mobile-open .app-mobile-title { display: none; } body.app-mobile-open .app-scrim { opacity: 1; pointer-events: auto; } .app-toggle { left: 12px !important; } body.app-mobile-open .app-toggle { left: calc(var(--app-sidebar-w) - 44px) !important; } } @media (max-width: 640px) { body.member-authed main.member-main, body.member-authed main.feature-main, body.member-authed main.service-workspace-main { padding: 58px 12px 34px; } body.make-deck-page .deck-command { min-height: 0; gap: 10px; } body.make-deck-page .deck-command h1 { font-size: 24px; line-height: 1.13; } body.make-deck-page .deck-command p { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } body.make-deck-page .deck-command-meter { display: none; } body.make-deck-page .deck-advisory-link { padding: 10px 11px; } .app-company-analysis-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 9px 10px 8px; } .app-company-analysis-mark { display: none; } .app-company-analysis-row > a { min-height: 44px; padding-inline: 10px; font-size: 12px; } } @media (prefers-reduced-motion: reduce) { .app-sidebar, body.member-authed main, .app-toggle, .app-scrim { transition: none; } .app-company-analysis-rail > span { transition: none; } .app-company-analysis-rail > i { display: none; } } /* 기술거래: 회원 앱 모드 모바일 overflow 방지 */ body.member-authed .tt-herobar, body.member-authed .tt-grid, body.member-authed .tt-card, body.member-authed .tt-card *, body.member-authed .tt-modal, body.member-authed .tt-modal-card, body.member-authed .tt-modal-card * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; } body.member-authed .tt-herobar { width: 100%; } body.member-authed .tt-herobar input { min-width: 0; } body.member-authed .tt-modal { padding: 12px; } body.member-authed .tt-modal-card { width: min(640px, calc(100vw - 24px)); } @media (max-width: 1280px) { body.member-authed .tt-hero { grid-template-columns: minmax(0, 1fr); } body.member-authed .tt-hero figure { display: none; } } @media (max-width: 640px) { body.member-authed .tt-hero { padding: 16px; } body.member-authed .tt-hero > div { grid-template-columns: 1fr; grid-template-areas: "label" "title" "copy" "stats" "search"; } body.member-authed .tt-hero .tt-stats { justify-content: stretch; } body.member-authed .tt-hero .tt-stat { flex: 1 1 90px; } body.member-authed .tt-herobar { display: grid; grid-template-columns: 1fr; } body.member-authed .tt-herobar .btn { width: 100%; } } /* ════════════════════════════════════════════════════════════ 회원 인사이트 대시보드 (member.html, Phase 3) 오늘의 액션 히어로 + 통계 카운트업 + 브리핑/인사이트 2열 + 추천 지원사업 + 도구 ════════════════════════════════════════════════════════════ */ @media (min-width: 1025px) { body.member-authed main.member-main { padding: 22px 28px 48px; } } .member-dash { max-width: 1240px; margin: 0 auto; display: grid; gap: 18px; } body.member-authed #savedWork { scroll-margin-top: 72px; } .member-dash .dash-secthead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 4px 2px 0; } .member-dash .dash-secthead h2 { font-size: 17px; font-weight: 800; color: var(--dv-text-strong, #14181f); margin: 0; } .member-dash .dash-secthead .sub { font-size: 12.5px; color: var(--dv-text-muted, #636b79); } .member-dash .dash-secthead .head-link { min-height: 38px; padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--dv-primary, #2c55e0) 18%, transparent); border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; color: var(--dv-primary, #2c55e0); text-decoration: none; white-space: nowrap; background: var(--dv-bg-surface, #ffffff); } .member-dash .dash-secthead .head-link:hover { text-decoration: underline; } /* ── 오늘의 액션 히어로 ── */ .dash-hero { position: relative; overflow: hidden; border-radius: 18px; padding: 30px 32px; color: #fff; background: radial-gradient(130% 150% at 100% 0%, color-mix(in srgb, var(--dv-rail-accent, #e8b64c) 32%, transparent), transparent 56%), linear-gradient(135deg, linear-gradient(135deg, var(--dv-trust, #13294b) 0%, var(--dv-rail-bg, #0f1c31) 100%)); box-shadow: none; display: grid; grid-template-columns: 1fr minmax(220px, 300px); gap: 26px; align-items: center; } .dash-hero .hero-copy { display: grid; gap: 11px; } .dash-hero .hero-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--dv-rail-ink, #c8d2e2); display: inline-flex; align-items: center; gap: 8px; } .dash-hero .hero-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dv-warning-accent, #e8a33d); box-shadow: color-mix(in srgb, var(--dv-rail-accent, #e8b64c) 25%, transparent); } .dash-hero h1 { font-size: 25px; line-height: 1.32; font-weight: 800; margin: 0; letter-spacing: -.01em; } .dash-hero h1 em { font-style: normal; color: var(--dv-rail-accent, #e8b64c); } .dash-hero p { font-size: 14px; line-height: 1.6; color: var(--dv-rail-ink, #c8d2e2); margin: 0; max-width: 56ch; } .dash-hero .hero-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; } .dash-hero .hero-btn { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 18px; border-radius: 11px; font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; border: 0; transition: transform .15s ease, box-shadow .15s ease; } .dash-hero .hero-btn svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; } .dash-hero .hero-btn.solid { background: #fff; color: var(--dv-trust, #13294b); } .dash-hero .hero-btn.ghost { background: color-mix(in srgb, var(--dv-rail-ink-strong, #ffffff) 12%, transparent); color: #fff; border: 1px solid color-mix(in srgb, var(--dv-rail-ink-strong, #ffffff) 30%, transparent); } .dash-hero .hero-btn:hover { transform: translateY(-2px); box-shadow: none; } /* 우측 추천 미니카드 */ .dash-hero .hero-aside { background: color-mix(in srgb, var(--dv-rail-ink-strong, #ffffff) 10%, transparent); border: 1px solid color-mix(in srgb, var(--dv-rail-ink-strong, #ffffff) 18%, transparent); border-radius: 14px; padding: 16px 17px; display: grid; gap: 7px; backdrop-filter: blur(4px); } .dash-hero .hero-aside .ha-label { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--dv-rail-accent, #e8b64c); } .dash-hero .hero-aside .ha-title { font-size: 14px; font-weight: 700; line-height: 1.45; color: #fff; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .dash-hero .hero-aside .ha-meta { font-size: 12px; color: color-mix(in srgb, var(--dv-bg-surface, #ffffff) 78%, transparent); } .dash-hero .hero-aside a.ha-go { min-height: 36px; padding: 7px 10px; border: 1px solid color-mix(in srgb, var(--dv-rail-ink-strong, #ffffff) 24%, transparent); border-radius: 10px; font-size: 12.5px; font-weight: 700; color: #fff; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 5px; margin-top: 2px; background: color-mix(in srgb, var(--dv-rail-ink-strong, #ffffff) 10%, transparent); } .dash-hero .hero-aside a.ha-go::after { content: "→"; transition: transform .15s ease; } .dash-hero .hero-aside a.ha-go:hover::after { transform: translateX(3px); } @media (max-width: 860px) { .dash-hero { grid-template-columns: 1fr; padding: 26px 22px; } } /* ── 오늘의 1순위 ── */ /* 레이아웃 감사 L7(2026-08-09): 경로 스트립을 우측 컬럼이 아니라 카드 아래 가로 3분할 밴드로 — 카드가 전폭을 쓰고 스트립은 보조 계층으로 내려간다. */ .dash-focus-section { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: stretch; } .dash-focus-card, .dash-path-strip { border: 1px solid var(--dv-border, #c9c5bb); border-radius: 16px; background: #fff; box-shadow: none; } .dash-focus-card { display: grid; gap: 10px; padding: 20px 22px; } .dash-focus-card .focus-label { width: max-content; padding: 4px 9px; border-radius: 999px; background: var(--dv-bg-selected, #e9edf9); color: var(--dv-primary, #2c55e0); font-size: 11px; font-weight: 800; } .dash-focus-card h2 { margin: 0; color: var(--dv-text-strong, #14181f); font-size: 21px; line-height: 1.32; letter-spacing: 0; } .dash-focus-card p { margin: 0; max-width: 62ch; color: var(--dv-text-muted, #636b79); font-size: 13.5px; line-height: 1.55; } .dash-focus-card .focus-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 2px; } .dash-path-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; } .dash-path-strip a { min-width: 0; display: grid; gap: 5px; padding: 18px 16px; color: var(--dv-text-strong, #14181f); text-decoration: none; border-right: 1px solid var(--dv-border, #c9c5bb); } .dash-path-strip a:last-child { border-right: 0; } .dash-path-strip a:hover { background: var(--dv-bg-subtle, #f2f0ec); } .dash-path-strip span { width: 25px; height: 25px; border-radius: 8px; display: grid; place-items: center; background: var(--dv-warning-surface, #fff5e4); color: var(--dv-warning-text, #6d4300); font-size: 12px; font-weight: 800; } .dash-path-strip strong { font-size: 14px; line-height: 1.25; } .dash-path-strip small { color: var(--dv-text-muted, #636b79); font-size: 12px; line-height: 1.3; } @media (max-width: 900px) { .dash-focus-section { grid-template-columns: 1fr; } } @media (max-width: 640px) { .dash-focus-card { padding: 17px 18px; } .dash-focus-card h2 { font-size: 19px; } .dash-focus-card p { font-size: 13px; } .dash-path-strip { display: none; } } /* ── 통계 카드 4 ── */ .dash-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(208px, 1fr)); gap: 14px; } .dash-stat { background: #fff; border: 1px solid var(--dv-border, #c9c5bb); border-radius: 16px; padding: 16px 18px; box-shadow: none; display: grid; gap: 7px; transition: transform .15s ease, box-shadow .15s ease; } .dash-stat:hover { transform: translateY(-2px); box-shadow: none; } .dash-stat .stat-top { display: flex; align-items: center; justify-content: space-between; } .dash-stat .stat-label { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--dv-text-muted, #636b79); } .dash-stat .stat-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--dv-bg-selected, #e9edf9); color: var(--dv-primary, #2c55e0); flex: none; } .dash-stat .stat-ic svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; } .dash-stat .stat-num { font-size: 28px; font-weight: 800; color: var(--dv-text-strong, #14181f); font-variant-numeric: tabular-nums; line-height: 1.05; } .dash-stat .stat-sub { font-size: 12px; color: var(--dv-text-muted, #636b79); } .dash-stat.amber .stat-ic { background: var(--dv-warning-surface, #fff5e4); color: var(--dv-warning-text, #6d4300); } .dash-stat.coral .stat-ic { background: var(--dv-danger-surface, #fef0ee); color: var(--dv-danger, #b42318); } .dash-stat.navy .stat-ic { background: var(--dv-trust-soft, #eaeef8); color: var(--dv-trust, #13294b); } .dash-stat.green .stat-ic { background: var(--dv-success-surface, #e7f4ee); color: var(--dv-success-text, #0d5b47); } /* ── 저장한 관심 업무 워크벤치 ── */ .saved-workbench { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; overflow: hidden; border: 1px solid var(--dv-border, #c9c5bb); border-radius: 18px; background: #fff; box-shadow: none; } /* .saved-summary 요약 블록(중복 헤딩 + 전체 저장/확인 대기/기업현황 타일)은 케이스 인박스·접힘 요약 줄과 중복이라 제거됐다(2026-08-17 4겹 중복 통합). */ .saved-list-panel { min-width: 0; display: grid; grid-template-rows: auto 1fr; } .saved-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 18px 8px; } .saved-list-head strong { font-size: 15px; color: var(--dv-text-strong, #14181f); } .saved-list-head span { color: var(--dv-text-muted, #636b79); font-size: 12px; } .saved-work-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 12px; padding: 4px 12px 14px; } .saved-work-list[data-saved-work-genre-count="1"] { grid-template-columns: minmax(0, 1fr); } .saved-work-list > .dash-empty { grid-column: 1 / -1; } .saved-work-group { min-width: 0; display: grid; gap: 9px; padding: 12px; border: 1px solid var(--dv-border, #c9c5bb); border-radius: var(--dv-radius, 8px); background: var(--dv-bg-subtle, #f2f0ec); } .saved-work-group-head { min-width: 0; display: flex; align-items: start; justify-content: space-between; gap: 12px; padding: 1px 2px 2px; } .saved-work-group-head > span { min-width: 0; display: grid; gap: 2px; } .saved-work-group-head h3 { margin: 0; color: var(--dv-text-strong, #14181f); font-size: 14px; font-weight: 750; line-height: 1.35; } .saved-work-group-head small { color: var(--dv-text-muted, #636b79); font-size: 11.5px; line-height: 1.4; } .saved-work-group-head > b { flex: none; color: var(--dv-text-muted, #636b79); font-size: 12px; font-variant-numeric: tabular-nums; } .saved-work-group-list { display: grid; gap: 8px; } .saved-work-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px 14px; border: 1px solid var(--dv-border, #c9c5bb); border-radius: 13px; text-decoration: none; background: #fff; transition: background .15s ease, border-color .15s ease, transform .15s ease; } .saved-work-item:hover { transform: translateY(-1px); border-color: var(--dv-border-strong, #767d89); background: var(--dv-bg-subtle, #f2f0ec); } .saved-work-item .saved-main { min-width: 0; display: grid; gap: 5px; } .saved-work-item .saved-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .saved-work-item .saved-kind { font-size: 10.5px; font-weight: 800; color: var(--dv-primary, #2c55e0); background: var(--dv-bg-selected, #e9edf9); padding: 3px 8px; border-radius: 999px; } .saved-work-item .saved-status { font-size: 11px; color: var(--dv-text-muted, #636b79); } .saved-work-item .saved-title { color: var(--dv-text-strong, #14181f); font-size: 14px; font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; } .saved-work-item .saved-summary-text { color: var(--dv-text-muted, #636b79); font-size: 12.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .saved-work-item .saved-go { color: var(--dv-primary, #2c55e0); font-size: 12.5px; font-weight: 800; white-space: nowrap; } /* 저장 뒤 공고·회사 사실이 달라졌다는 서버 판정 배지 — programs.html 의 저장 카드 배지와 같은 앰버 규약. 구형 모니터 수칙: 틴트(#fff4de, 흰색 대비 RGB 합산 44)만으로 구분하지 않고 보이는 1px 경계를 짝으로 둔다. */ .saved-work-item .saved-stale-flag { display: inline-block; margin-top: 4px; padding: 2px 8px; border: 1px solid #d9ab4e; border-radius: 6px; background: #fff4de; color: #6b4e08; font-size: 11.5px; font-weight: 700; line-height: 1.4; width: fit-content; } .saved-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; } .company-memory-panel { display: grid; gap: 14px; margin-top: 14px; padding: 18px; border: 1px solid var(--dv-border, #c9c5bb); border-radius: 18px; background: #fff; box-shadow: none; } .company-memory-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: start; } .company-memory-head .label { font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--dv-primary, #2c55e0); } .company-memory-head h3 { margin: 4px 0 0; color: var(--dv-text-strong, #14181f); font-size: 18px; line-height: 1.25; } .company-memory-head p { margin: 6px 0 0; color: var(--dv-text-muted, #636b79); font-size: 13px; line-height: 1.5; } .company-memory-metrics { display: grid; grid-template-columns: repeat(3, minmax(86px, 1fr)); gap: 8px; min-width: 286px; } .company-memory-metrics span { display: grid; gap: 3px; padding: 10px 11px; border: 1px solid var(--dv-border, #c9c5bb); border-radius: 12px; background: var(--dv-bg-subtle, #f2f0ec); } .company-memory-metrics b { color: var(--dv-text-strong, #14181f); font-size: 18px; line-height: 1; font-variant-numeric: tabular-nums; } .company-memory-metrics small { color: var(--dv-text-muted, #636b79); font-size: 11px; line-height: 1.2; } /* .memory-pipeline("케이스 진행 현황" 상태 분포 바)와 .memory-pulse-item 타일은 케이스 인박스의 완주율·카운터·막힘 바와 같은 수치의 반복이라 제거됐다(2026-08-17 통합). */ /* ── 케이스 보관 — 즉시 보관 + 실행 취소 토스트 + "보관됨 N건" 복원 접힘 ── */ .case-archive-toast { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0 0; padding: 10px 14px; border: 1px solid var(--dv-border, #c9c5bb); border-radius: 12px; background: var(--dv-bg-subtle, #f2f0ec); color: var(--dv-text-strong, #14181f); font-size: 13px; line-height: 1.4; } .case-archive-toast[hidden] { display: none !important; } .case-archive-toast button { flex: none; border: 1px solid var(--dv-border, #c9c5bb); border-radius: 8px; padding: 5px 11px; background: var(--dv-bg-surface, #ffffff); color: var(--dv-primary, #2c55e0); font-size: 12px; font-weight: 700; cursor: pointer; } .case-archive-fold { margin-top: 10px; border: 1px solid var(--dv-border, #c9c5bb); border-radius: 12px; background: var(--dv-bg-surface, #ffffff); } .case-archive-fold[hidden] { display: none !important; } .case-archive-fold > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; cursor: pointer; list-style: none; color: var(--dv-text-muted, #636b79); font-size: 12.5px; font-weight: 650; } .case-archive-fold > summary::-webkit-details-marker { display: none; } .case-archive-fold > summary b { color: var(--dv-text-strong, #14181f); font-variant-numeric: tabular-nums; } .case-archive-list { margin: 0; padding: 0 14px 12px; list-style: none; display: grid; gap: 8px; } .case-archive-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border: 1px solid var(--dv-border, #c9c5bb); border-radius: 10px; background: var(--dv-bg-subtle, #f2f0ec); } .case-archive-main { min-width: 0; display: grid; gap: 2px; } .case-archive-main strong { color: var(--dv-text-strong, #14181f); font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; } .case-archive-main small { color: var(--dv-text-muted, #636b79); font-size: 11.5px; } .case-archive-list button { flex: none; border: 1px solid var(--dv-border, #c9c5bb); border-radius: 8px; padding: 5px 11px; background: var(--dv-bg-surface, #ffffff); color: var(--dv-primary, #2c55e0); font-size: 12px; font-weight: 700; cursor: pointer; } .company-agent-card { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 12px; padding: 14px; border: 1px solid var(--dv-border, #c9c5bb); border-radius: 14px; background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--dv-warning-accent, #e8a33d) 13%, transparent), transparent 38%), linear-gradient(135deg, var(--dv-bg-surface, #ffffff), var(--dv-trust-soft, #eaeef8)); } .company-agent-main { min-width: 0; display: grid; align-content: start; gap: 8px; } .company-agent-main .label { color: var(--dv-primary, #2c55e0); font-size: 10.5px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; } .company-agent-main strong { color: var(--dv-text-strong, #14181f); font-size: 17px; line-height: 1.3; overflow-wrap: anywhere; } .company-agent-main p { margin: 0; color: var(--dv-text-muted, #636b79); font-size: 12.5px; line-height: 1.5; } .company-agent-evidence { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 2px; } .agent-evidence { min-width: 0; display: grid; /* 2026-08-19 대표 지시(Image #78): 건수 값은 라벨 아래가 아니라 라벨 오른쪽 빈자리에. 같은 날 2차(Image #84): 세 칸의 제목 줄 높이가 제각각 — 칸 내용을 최상단에 붙인다. */ grid-template-columns: minmax(0, 1fr) auto; align-items: center; align-content: start; gap: 2px 8px; padding: 9px 10px; border: 1px solid var(--dv-border, #c9c5bb); border-radius: 11px; background: #fff; } .agent-evidence b { grid-column: 1; } .agent-evidence strong { grid-column: 2; justify-self: end; } .agent-evidence small { grid-column: 1 / -1; } .agent-evidence b { color: var(--dv-text-muted, #636b79); font-size: 10px; line-height: 1.2; } .agent-evidence strong { color: var(--dv-text-strong, #14181f); font-size: 13px; line-height: 1.2; } .agent-evidence small { color: var(--dv-text-muted, #636b79); font-size: 10.5px; line-height: 1.35; /* 한 칸(투자센터)의 긴 문단이 세 칸 균형을 깨던 문제(Image #85) — 상세는 2줄로 접는다. 전체 설명은 아래 실행 순서 제안이 이어받으므로 정보 손실이 아니다. */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .agent-evidence.ready, .agent-evidence.active { border-color: color-mix(in srgb, var(--dv-success-text, #0d5b47) 22%, var(--dv-bg-surface, #ffffff)); background: var(--dv-success-surface, #e7f4ee); } .agent-evidence.missing { border-color: color-mix(in srgb, var(--dv-warning-accent, #e8a33d) 45%, var(--dv-bg-surface, #ffffff)); background: var(--dv-warning-surface, #fff5e4); } #companyAgentOrchestratorForm { display: grid; gap: 7px; margin-top: 2px; } #companyAgentOrchestratorForm label { color: var(--dv-text-muted, #636b79); font-size: 11px; font-weight: 800; } #companyAgentOrchestratorForm > div { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; } #companyAgentOrchestratorForm input { min-width: 0; width: 100%; height: 34px; padding: 0 10px; border: 1px solid var(--dv-border, #c9c5bb); border-radius: 9px; background: #fff; color: var(--dv-text-strong, #14181f); font-size: 12.5px; } #companyAgentOrchestratorForm input:focus { outline: 2px solid color-mix(in srgb, var(--dv-primary, #2c55e0) 18%, transparent); border-color: var(--dv-primary, #2c55e0); } #companyAgentOrchestratorForm button { min-height: 34px; white-space: nowrap; } .company-agent-orchestrator-result { min-width: 0; display: grid; gap: 8px; padding: 10px; border: 1px solid var(--dv-border, #c9c5bb); border-radius: 10px; background: color-mix(in srgb, var(--dv-bg-surface, #ffffff) 86%, transparent); } .company-agent-orchestrator-result[hidden] { display: none; } .integrated-support-panel { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--dv-border, #c9c5bb); border-radius: 14px; background: var(--dv-bg-page, #faf9f6); } .integrated-support-panel[hidden] { display: none; } .integrated-support-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: start; } .integrated-support-head .label { color: var(--dv-primary, #2c55e0); font-size: 10.5px; font-weight: 850; letter-spacing: .08em; } .integrated-support-head h3 { margin: 4px 0 0; color: var(--dv-text-strong, #14181f); font-size: 17px; line-height: 1.3; } .integrated-support-head p { margin: 5px 0 0; color: var(--dv-text-muted, #636b79); font-size: 12.5px; line-height: 1.45; } .integrated-support-metrics { display: grid; grid-template-columns: repeat(3, minmax(70px, 1fr)); gap: 7px; min-width: 232px; } .integrated-support-metrics span { display: grid; gap: 2px; padding: 9px 10px; border: 1px solid var(--dv-border, #c9c5bb); border-radius: 10px; background: #fff; } .integrated-support-metrics b { color: var(--dv-text-strong, #14181f); font-size: 16px; line-height: 1; } .integrated-support-metrics small { color: var(--dv-text-muted, #636b79); font-size: 10.5px; } .integrated-support-packages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .integrated-support-package { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px; border: 1px solid var(--dv-border, #c9c5bb); border-radius: 12px; background: #fff; } .integrated-support-package span { color: var(--dv-primary, #2c55e0); font-size: 10px; font-weight: 850; } .integrated-support-package strong { display: block; margin-top: 2px; color: var(--dv-text-strong, #14181f); font-size: 13px; line-height: 1.3; } .integrated-support-package p { margin: 4px 0 0; color: var(--dv-text-muted, #636b79); font-size: 11.5px; line-height: 1.4; } .integrated-support-orders { display: grid; gap: 5px; margin: 9px 0 0; padding: 0; list-style: none; } .integrated-support-orders li { min-width: 0; display: grid; gap: 2px; padding: 7px 8px; border: 1px solid var(--dv-border, #c9c5bb); border-radius: 9px; background: var(--dv-bg-surface, #ffffff); } .integrated-support-orders li.active, .integrated-support-orders li.ready { border-color: color-mix(in srgb, var(--dv-success-text, #0d5b47) 22%, var(--dv-bg-surface, #ffffff)); background: var(--dv-success-surface, #e7f4ee); } .integrated-support-orders li.external_needed, .integrated-support-orders li.setup_needed { border-color: color-mix(in srgb, var(--dv-warning-accent, #e8a33d) 40%, var(--dv-bg-surface, #ffffff)); background: var(--dv-warning-surface, #fff5e4); } .integrated-support-orders b { color: var(--dv-text-strong, #14181f); font-size: 11.5px; line-height: 1.25; overflow-wrap: anywhere; } .integrated-support-orders b em { margin-left: 4px; color: var(--dv-primary, #2c55e0); font-size: 10px; font-style: normal; font-weight: 850; white-space: nowrap; } .integrated-support-orders small { color: var(--dv-text-muted, #636b79); font-size: 10.5px; line-height: 1.35; overflow-wrap: anywhere; } .integrated-support-orders .integrated-support-gap { color: var(--dv-warning-text, #6d4300); } .integrated-support-package a { display: inline-grid; place-items: center; min-width: 42px; min-height: 32px; padding: 0 9px; border-radius: 9px; background: var(--dv-bg-selected, #e9edf9); color: var(--dv-primary, #2c55e0); font-size: 12px; font-weight: 850; text-decoration: none; } .validation-evidence-ladder { min-width: 0; display: grid; gap: 10px; padding: 12px; border: 1px solid var(--dv-border, #c9c5bb); border-radius: 12px; background: var(--dv-bg-surface, #ffffff); } .validation-evidence-ladder[hidden] { display: none; } .validation-ladder-head { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; } .validation-ladder-head .label { color: var(--dv-primary, #2c55e0); font-size: 10px; font-weight: 850; letter-spacing: .04em; } .validation-ladder-head strong { display: block; margin-top: 2px; color: var(--dv-text-strong, #14181f); font-size: 13.5px; line-height: 1.25; } .validation-ladder-head p { margin: 4px 0 0; color: var(--dv-text-muted, #636b79); font-size: 11.5px; line-height: 1.4; overflow-wrap: anywhere; } .validation-ladder-head a { padding: 8px 10px; border-radius: 9px; background: var(--dv-primary, #2c55e0); color: #fff; font-size: 11px; font-weight: 850; text-decoration: none; white-space: nowrap; } .validation-ladder-steps { min-width: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; } .validation-ladder-step { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "num label" "status status" "detail detail"; gap: 4px 7px; padding: 9px; border: 1px solid var(--dv-border, #c9c5bb); border-radius: 10px; background: #fff; color: inherit; text-decoration: none; } .validation-ladder-step span { grid-area: num; width: 22px; height: 22px; display: inline-grid; place-items: center; border-radius: 7px; background: var(--dv-bg-selected, #e9edf9); color: var(--dv-primary, #2c55e0); font-size: 10px; font-weight: 900; } .validation-ladder-step strong { grid-area: label; min-width: 0; color: var(--dv-text-strong, #14181f); font-size: 12px; line-height: 1.2; overflow-wrap: anywhere; } .validation-ladder-step em { grid-area: status; color: var(--dv-primary, #2c55e0); font-size: 10px; font-style: normal; font-weight: 850; } .validation-ladder-step small { grid-area: detail; color: var(--dv-text-muted, #636b79); font-size: 10.5px; line-height: 1.35; overflow-wrap: anywhere; } .validation-ladder-step.ready, .validation-ladder-step.active { border-color: color-mix(in srgb, var(--dv-success-text, #0d5b47) 22%, var(--dv-bg-surface, #ffffff)); background: var(--dv-success-surface, #e7f4ee); } .validation-ladder-step.external_needed, .validation-ladder-step.setup_needed { border-color: color-mix(in srgb, var(--dv-warning-accent, #e8a33d) 40%, var(--dv-bg-surface, #ffffff)); background: var(--dv-warning-surface, #fff5e4); } .integrated-support-capabilities { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; } .integrated-capability { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "priority name status" "detail detail detail"; gap: 4px 7px; padding: 9px; border: 1px solid var(--dv-border, #c9c5bb); border-radius: 10px; background: #fff; color: inherit; text-decoration: none; } .integrated-capability:hover { border-color: var(--dv-border-strong, #767d89); } .integrated-capability span { grid-area: priority; color: var(--dv-primary, #2c55e0); font-size: 10px; font-weight: 900; } .integrated-capability strong { grid-area: name; min-width: 0; color: var(--dv-text-strong, #14181f); font-size: 12px; line-height: 1.2; overflow-wrap: anywhere; } .integrated-capability em { grid-area: status; color: var(--dv-text-muted, #636b79); font-size: 10px; font-style: normal; font-weight: 800; } .integrated-capability small { grid-area: detail; color: var(--dv-text-muted, #636b79); font-size: 10.5px; line-height: 1.4; overflow-wrap: anywhere; } .integrated-capability.active, .integrated-capability.ready { border-color: color-mix(in srgb, var(--dv-success-text, #0d5b47) 22%, var(--dv-bg-surface, #ffffff)); background: var(--dv-success-surface, #e7f4ee); } .integrated-capability.external_needed, .integrated-capability.setup_needed { border-color: color-mix(in srgb, var(--dv-warning-accent, #e8a33d) 45%, var(--dv-bg-surface, #ffffff)); background: var(--dv-warning-surface, #fff5e4); } .agent-workspace-panel { display: grid; gap: 10px; padding: 13px; border: 1px solid var(--dv-border, #c9c5bb); border-radius: 14px; background: color-mix(in srgb, var(--dv-trust-soft, #eaeef8) 45%, var(--dv-bg-surface, #ffffff)); } .agent-workspace-panel[hidden] { display: none; } .agent-workspace-head { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; } .agent-workspace-head .label { color: var(--dv-trust, #13294b); font-size: 10px; font-weight: 850; letter-spacing: .04em; } .agent-workspace-head strong { display: block; margin-top: 2px; color: var(--dv-text-strong, #14181f); font-size: 14px; line-height: 1.25; } .agent-workspace-head p { margin: 4px 0 0; color: var(--dv-text-muted, #636b79); font-size: 11.5px; line-height: 1.45; overflow-wrap: anywhere; } .agent-workspace-metrics { min-width: 218px; display: grid; grid-template-columns: repeat(3, minmax(64px, 1fr)); gap: 7px; } .agent-workspace-metrics span { display: grid; gap: 2px; padding: 8px 9px; border: 1px solid var(--dv-border, #c9c5bb); border-radius: 10px; background: #fff; } .agent-workspace-metrics b { color: var(--dv-text-strong, #14181f); font-size: 15px; line-height: 1; } .agent-workspace-metrics small { color: var(--dv-text-muted, #636b79); font-size: 10.5px; } .agent-workspace-lanes { min-width: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; } .agent-workspace-card { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label status" "output output" "detail detail" "sources sources" "required required"; gap: 4px 7px; padding: 10px; border: 1px solid var(--dv-border, #c9c5bb); border-radius: 10px; background: #fff; color: inherit; text-decoration: none; } .agent-workspace-card:hover { border-color: var(--dv-border-strong, #767d89); background: var(--dv-bg-subtle, #f2f0ec); } .agent-workspace-card span { grid-area: label; color: var(--dv-trust, #13294b); font-size: 10px; font-weight: 900; overflow-wrap: anywhere; } .agent-workspace-card em { grid-area: status; color: var(--dv-text-muted, #636b79); font-size: 10px; font-style: normal; font-weight: 850; white-space: nowrap; } .agent-workspace-card strong { grid-area: output; color: var(--dv-text-strong, #14181f); font-size: 12.5px; line-height: 1.25; overflow-wrap: anywhere; } .agent-workspace-card small { grid-area: detail; color: var(--dv-text-muted, #636b79); font-size: 10.5px; line-height: 1.35; overflow-wrap: anywhere; } .agent-workspace-card b { grid-area: sources; display: flex; flex-wrap: wrap; gap: 4px; } .agent-workspace-card i { display: inline-flex; align-items: center; min-height: 20px; padding: 2px 5px; border-radius: 6px; background: var(--dv-trust-soft, #eaeef8); color: var(--dv-trust, #13294b); font-size: 9.5px; font-style: normal; font-weight: 900; line-height: 1; } .agent-workspace-card p { grid-area: required; margin: 0; color: var(--dv-text-muted, #636b79); font-size: 10px; line-height: 1.35; overflow-wrap: anywhere; } .agent-workspace-card.ready, .agent-workspace-card.active { border-color: color-mix(in srgb, var(--dv-success-text, #0d5b47) 22%, var(--dv-bg-surface, #ffffff)); background: var(--dv-success-surface, #e7f4ee); } .agent-workspace-card.in_review { border-color: color-mix(in srgb, var(--dv-primary, #2c55e0) 18%, var(--dv-bg-surface, #ffffff)); background: var(--dv-trust-soft, #eaeef8); } .agent-workspace-card.needs_materials, .agent-workspace-card.setup_needed { border-color: color-mix(in srgb, var(--dv-warning-accent, #e8a33d) 40%, var(--dv-bg-surface, #ffffff)); background: var(--dv-warning-surface, #fff5e4); } .agent-workspace-guardrails { display: grid; gap: 5px; } .agent-workspace-guardrails span { color: var(--dv-text-muted, #636b79); font-size: 11.5px; line-height: 1.45; overflow-wrap: anywhere; } .submission-package-panel { display: grid; gap: 10px; padding: 13px; border: 1px solid var(--dv-border, #c9c5bb); border-radius: 14px; background: var(--dv-bg-page, #faf9f6); } .submission-package-panel[hidden] { display: none; } .submission-package-head { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; } .submission-package-head .label { color: var(--dv-primary, #2c55e0); font-size: 10px; font-weight: 850; letter-spacing: .04em; } .submission-package-head strong { display: block; margin-top: 2px; color: var(--dv-text-strong, #14181f); font-size: 14px; line-height: 1.25; } .submission-package-head p { margin: 4px 0 0; color: var(--dv-text-muted, #636b79); font-size: 11.5px; line-height: 1.45; overflow-wrap: anywhere; } .submission-package-metrics { min-width: 218px; display: grid; grid-template-columns: repeat(3, minmax(64px, 1fr)); gap: 7px; } .submission-package-metrics span { display: grid; gap: 2px; padding: 8px 9px; border: 1px solid var(--dv-border, #c9c5bb); border-radius: 10px; background: #fff; } .submission-package-metrics b { color: var(--dv-text-strong, #14181f); font-size: 15px; line-height: 1; } .submission-package-metrics small { color: var(--dv-text-muted, #636b79); font-size: 10.5px; } .submission-package-cards { min-width: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; } .submission-package-card { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label status" "output output" "detail detail" "required required" "formats formats"; gap: 4px 7px; padding: 10px; border: 1px solid var(--dv-border, #c9c5bb); border-radius: 10px; background: #fff; color: inherit; text-decoration: none; } .submission-package-card:hover { border-color: var(--dv-border-strong, #767d89); background: var(--dv-bg-surface, #ffffff); } .submission-package-card span { grid-area: label; color: var(--dv-primary, #2c55e0); font-size: 10px; font-weight: 900; overflow-wrap: anywhere; } .submission-package-card em { grid-area: status; color: var(--dv-text-muted, #636b79); font-size: 10px; font-style: normal; font-weight: 850; white-space: nowrap; } .submission-package-card strong { grid-area: output; color: var(--dv-text-strong, #14181f); font-size: 12.5px; line-height: 1.25; overflow-wrap: anywhere; } .submission-package-card small { grid-area: detail; color: var(--dv-text-muted, #636b79); font-size: 10.5px; line-height: 1.35; overflow-wrap: anywhere; } .submission-package-card p { grid-area: required; margin: 0; color: var(--dv-text-muted, #636b79); font-size: 10px; line-height: 1.35; overflow-wrap: anywhere; } .submission-package-card b { grid-area: formats; display: flex; flex-wrap: wrap; gap: 4px; } .submission-package-card i { display: inline-flex; align-items: center; min-height: 20px; padding: 2px 5px; border-radius: 6px; background: var(--dv-bg-selected, #e9edf9); color: var(--dv-primary, #2c55e0); font-size: 9.5px; font-style: normal; font-weight: 900; line-height: 1; } .submission-package-card.ready { border-color: color-mix(in srgb, var(--dv-success-text, #0d5b47) 22%, var(--dv-bg-surface, #ffffff)); background: var(--dv-success-surface, #e7f4ee); } .submission-package-card.active { border-color: color-mix(in srgb, var(--dv-success-text, #0d5b47) 22%, var(--dv-bg-surface, #ffffff)); background: var(--dv-success-surface, #e7f4ee); } .submission-package-card.needs_materials, .submission-package-card.setup_needed { border-color: color-mix(in srgb, var(--dv-warning-accent, #e8a33d) 40%, var(--dv-bg-surface, #ffffff)); background: var(--dv-warning-surface, #fff5e4); } .submission-package-guardrails { display: grid; gap: 5px; } .submission-package-guardrails span { color: var(--dv-text-muted, #636b79); font-size: 11.5px; line-height: 1.45; overflow-wrap: anywhere; } .product-planning-panel { display: grid; gap: 10px; padding: 13px; border: 1px solid var(--dv-border, #c9c5bb); border-radius: 14px; background: var(--dv-bg-page, #faf9f6); } .product-planning-panel[hidden] { display: none; } .product-planning-head { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; } .product-planning-head .label { color: var(--dv-primary, #2c55e0); font-size: 10px; font-weight: 850; letter-spacing: .04em; } .product-planning-head strong { display: block; margin-top: 2px; color: var(--dv-text-strong, #14181f); font-size: 14px; line-height: 1.25; } .product-planning-head p { margin: 4px 0 0; color: var(--dv-text-muted, #636b79); font-size: 11.5px; line-height: 1.45; overflow-wrap: anywhere; } .product-planning-metrics { min-width: 218px; display: grid; grid-template-columns: repeat(3, minmax(64px, 1fr)); gap: 7px; } .product-planning-metrics span { display: grid; gap: 2px; padding: 8px 9px; border: 1px solid var(--dv-border, #c9c5bb); border-radius: 10px; background: #fff; } .product-planning-metrics b { color: var(--dv-text-strong, #14181f); font-size: 15px; line-height: 1; } .product-planning-metrics small { color: var(--dv-text-muted, #636b79); font-size: 10.5px; } .product-planning-cards { min-width: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; } .product-planning-card { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label status" "output output" "detail detail" "required required"; gap: 4px 7px; padding: 10px; border: 1px solid var(--dv-border, #c9c5bb); border-radius: 10px; background: #fff; color: inherit; text-decoration: none; } .product-planning-card:hover { border-color: var(--dv-border-strong, #767d89); background: var(--dv-bg-subtle, #f2f0ec); } .product-planning-card span { grid-area: label; color: var(--dv-primary, #2c55e0); font-size: 10px; font-weight: 900; overflow-wrap: anywhere; } .product-planning-card em { grid-area: status; color: var(--dv-text-muted, #636b79); font-size: 10px; font-style: normal; font-weight: 850; white-space: nowrap; } .product-planning-card strong { grid-area: output; color: var(--dv-text-strong, #14181f); font-size: 12.5px; line-height: 1.25; overflow-wrap: anywhere; } .product-planning-card small { grid-area: detail; color: var(--dv-text-muted, #636b79); font-size: 10.5px; line-height: 1.35; overflow-wrap: anywhere; } .product-planning-card p { grid-area: required; margin: 0; color: var(--dv-text-muted, #636b79); font-size: 10px; line-height: 1.35; overflow-wrap: anywhere; } .product-planning-card.ready, .product-planning-card.active { border-color: color-mix(in srgb, var(--dv-success-text, #0d5b47) 22%, var(--dv-bg-surface, #ffffff)); background: var(--dv-success-surface, #e7f4ee); } .product-planning-card.needs_materials, .product-planning-card.setup_needed { border-color: color-mix(in srgb, var(--dv-warning-accent, #e8a33d) 40%, var(--dv-bg-surface, #ffffff)); background: var(--dv-warning-surface, #fff5e4); } .product-planning-guardrails { display: grid; gap: 5px; } .product-planning-guardrails span { color: var(--dv-text-muted, #636b79); font-size: 11.5px; line-height: 1.45; overflow-wrap: anywhere; } .artifact-layer-panel { display: grid; gap: 10px; padding: 13px; border: 1px solid var(--dv-border, #c9c5bb); border-radius: 14px; background: var(--dv-bg-page, #faf9f6); } .artifact-layer-panel[hidden] { display: none; } .validation-experiment-panel { display: grid; gap: 10px; padding: 13px; border: 1px solid var(--dv-border, #c9c5bb); border-radius: 14px; background: color-mix(in srgb, var(--dv-trust-soft, #eaeef8) 45%, var(--dv-bg-surface, #ffffff)); } .validation-experiment-panel[hidden] { display: none; } .validation-experiment-head { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; } .validation-experiment-head .label { color: var(--dv-primary, #2c55e0); font-size: 10px; font-weight: 850; letter-spacing: .04em; } .validation-experiment-head strong { display: block; margin-top: 2px; color: var(--dv-text-strong, #14181f); font-size: 14px; line-height: 1.25; } .validation-experiment-head p { margin: 4px 0 0; color: var(--dv-text-muted, #636b79); font-size: 11.5px; line-height: 1.45; overflow-wrap: anywhere; } .validation-experiment-metrics { min-width: 218px; display: grid; grid-template-columns: repeat(3, minmax(64px, 1fr)); gap: 7px; } .validation-experiment-metrics span { display: grid; gap: 2px; padding: 8px 9px; border: 1px solid var(--dv-border, #c9c5bb); border-radius: 10px; background: #fff; } .validation-experiment-metrics b { color: var(--dv-text-strong, #14181f); font-size: 15px; line-height: 1; } .validation-experiment-metrics small { color: var(--dv-text-muted, #636b79); font-size: 10.5px; } .validation-experiment-cards { min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .validation-experiment-card { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "level status" "title title" "output output" "detail detail" "required required"; gap: 4px 8px; padding: 10px; border: 1px solid var(--dv-border, #c9c5bb); border-radius: 10px; background: #fff; color: inherit; text-decoration: none; } .validation-experiment-card:hover { border-color: var(--dv-border-strong, #767d89); background: var(--dv-bg-subtle, #f2f0ec); } .validation-experiment-card span { grid-area: level; color: var(--dv-primary, #2c55e0); font-size: 10px; font-weight: 900; } .validation-experiment-card strong { grid-area: title; color: var(--dv-text-strong, #14181f); font-size: 12.5px; line-height: 1.25; overflow-wrap: anywhere; } .validation-experiment-card em { grid-area: status; color: var(--dv-text-muted, #636b79); font-size: 10px; font-style: normal; font-weight: 850; white-space: nowrap; } .validation-experiment-card small { grid-area: output; color: var(--dv-text-strong, #14181f); font-size: 10.5px; line-height: 1.35; overflow-wrap: anywhere; } .validation-experiment-card p { grid-area: detail; margin: 0; color: var(--dv-text-muted, #636b79); font-size: 10.5px; line-height: 1.35; overflow-wrap: anywhere; } .validation-experiment-card b { grid-area: required; color: var(--dv-primary, #2c55e0); font-size: 10px; line-height: 1.35; overflow-wrap: anywhere; } .validation-experiment-card.ready, .validation-experiment-card.active { border-color: color-mix(in srgb, var(--dv-success-text, #0d5b47) 22%, var(--dv-bg-surface, #ffffff)); background: var(--dv-success-surface, #e7f4ee); } .validation-experiment-card.next { border-color: color-mix(in srgb, var(--dv-primary, #2c55e0) 25%, var(--dv-bg-surface, #ffffff)); background: var(--dv-bg-selected, #e9edf9); } .validation-experiment-card.external_needed, .validation-experiment-card.needs_materials, .validation-experiment-card.setup_needed { border-color: color-mix(in srgb, var(--dv-warning-accent, #e8a33d) 40%, var(--dv-bg-surface, #ffffff)); background: var(--dv-warning-surface, #fff5e4); } .validation-experiment-guardrails { display: grid; gap: 5px; } .validation-experiment-guardrails span { display: block; margin: 0; color: var(--dv-text-muted, #636b79); font-size: 11.5px; line-height: 1.45; overflow-wrap: anywhere; } .artifact-layer-head { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; } .artifact-layer-head .label { color: var(--dv-warning-text, #6d4300); font-size: 10px; font-weight: 850; letter-spacing: .04em; } .artifact-layer-head strong { display: block; margin-top: 2px; color: var(--dv-text-strong, #14181f); font-size: 14px; line-height: 1.25; } .artifact-layer-head p { margin: 4px 0 0; color: var(--dv-text-muted, #636b79); font-size: 11.5px; line-height: 1.45; overflow-wrap: anywhere; } .artifact-layer-metrics { min-width: 218px; display: grid; grid-template-columns: repeat(3, minmax(64px, 1fr)); gap: 7px; } .artifact-layer-metrics span { display: grid; gap: 2px; padding: 8px 9px; border: 1px solid var(--dv-border, #c9c5bb); border-radius: 10px; background: #fff; } .artifact-layer-metrics b { color: var(--dv-text-strong, #14181f); font-size: 15px; line-height: 1; } .artifact-layer-metrics small { color: var(--dv-text-muted, #636b79); font-size: 10.5px; } .artifact-layer-formats { min-width: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; } .artifact-format-card { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "format count" "output output" "status status" "detail detail"; gap: 4px 7px; padding: 10px; border: 1px solid var(--dv-border, #c9c5bb); border-radius: 10px; background: #fff; color: inherit; text-decoration: none; } .artifact-format-card:hover { border-color: color-mix(in srgb, var(--dv-warning-accent, #e8a33d) 55%, var(--dv-bg-surface, #ffffff)); background: var(--dv-bg-subtle, #f2f0ec); } .artifact-format-card span { grid-area: format; color: var(--dv-warning-text, #6d4300); font-size: 10px; font-weight: 900; } .artifact-format-card b { grid-area: count; color: var(--dv-text-muted, #636b79); font-size: 10.5px; line-height: 1.2; white-space: nowrap; } .artifact-format-card strong { grid-area: output; min-width: 0; color: var(--dv-text-strong, #14181f); font-size: 12.5px; line-height: 1.25; overflow-wrap: anywhere; } .artifact-format-card em { grid-area: status; color: var(--dv-primary, #2c55e0); font-size: 10.5px; font-style: normal; font-weight: 850; } .artifact-format-card small { grid-area: detail; color: var(--dv-text-muted, #636b79); font-size: 10.5px; line-height: 1.35; overflow-wrap: anywhere; } .artifact-format-card.ready { border-color: color-mix(in srgb, var(--dv-success-text, #0d5b47) 22%, var(--dv-bg-surface, #ffffff)); background: var(--dv-success-surface, #e7f4ee); } .artifact-format-card.in_review { border-color: color-mix(in srgb, var(--dv-primary, #2c55e0) 18%, var(--dv-bg-surface, #ffffff)); background: var(--dv-trust-soft, #eaeef8); } .artifact-format-card.needs_materials, .artifact-format-card.setup_needed { border-color: color-mix(in srgb, var(--dv-warning-accent, #e8a33d) 40%, var(--dv-bg-surface, #ffffff)); background: var(--dv-warning-surface, #fff5e4); } .orchestrator-result-head { display: flex; align-items: center; gap: 8px; min-width: 0; } .orchestrator-result-head strong { min-width: 0; color: var(--dv-text-strong, #14181f); font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; } .orchestrator-steps { display: grid; gap: 6px; } .orchestrator-step { min-width: 0; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px; border: 1px solid var(--dv-border, #c9c5bb); border-radius: 9px; background: #fff; color: inherit; text-decoration: none; } .orchestrator-step:hover { border-color: var(--dv-border-strong, #767d89); background: var(--dv-bg-subtle, #f2f0ec); } .orchestrator-step b { width: 26px; height: 26px; display: inline-grid; place-items: center; border-radius: 8px; background: var(--dv-bg-selected, #e9edf9); color: var(--dv-primary, #2c55e0); font-size: 11px; } .orchestrator-step span { min-width: 0; display: grid; gap: 2px; } .orchestrator-step strong { color: var(--dv-text-strong, #14181f); font-size: 12px; line-height: 1.3; overflow-wrap: anywhere; } .orchestrator-step small { color: var(--dv-text-muted, #636b79); font-size: 11px; line-height: 1.35; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .orchestrator-step em { color: var(--dv-primary, #2c55e0); font-size: 10.5px; font-style: normal; font-weight: 850; white-space: nowrap; } .orchestrator-guardrail { padding-top: 7px; border-top: 1px solid var(--dv-border, #c9c5bb); } .orchestrator-result-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 7px; border-top: 1px solid var(--dv-border, #c9c5bb); } .orchestrator-save-status { min-width: 0; color: var(--dv-text-muted, #636b79); font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; } .company-agent-plan { min-width: 0; display: grid; gap: 8px; padding: 11px; border: 1px solid var(--dv-border, #c9c5bb); border-radius: 12px; background: var(--dv-bg-surface, #ffffff); } .company-agent-plan-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .company-agent-plan-head strong { color: var(--dv-text-strong, #14181f); font-size: 13.5px; } .company-agent-plan-head span { flex: none; padding: 4px 8px; border-radius: 999px; background: var(--dv-bg-selected, #e9edf9); color: var(--dv-primary, #2c55e0); font-size: 10.5px; font-weight: 850; } .company-agent-steps { display: grid; gap: 7px; } .company-agent-step { min-width: 0; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 9px; border: 1px solid var(--dv-border, #c9c5bb); border-radius: 10px; background: #fff; color: inherit; text-decoration: none; } .company-agent-step:hover { border-color: var(--dv-border-strong, #767d89); background: var(--dv-bg-subtle, #f2f0ec); } .company-agent-step b { width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: 9px; background: var(--dv-bg-selected, #e9edf9); color: var(--dv-primary, #2c55e0); font-size: 12px; } .company-agent-step span { min-width: 0; display: grid; gap: 2px; } .company-agent-step strong { color: var(--dv-text-strong, #14181f); font-size: 12.5px; line-height: 1.3; overflow-wrap: anywhere; } .company-agent-step small { color: var(--dv-text-muted, #636b79); font-size: 11.5px; line-height: 1.35; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .company-agent-step em { color: var(--dv-primary, #2c55e0); font-size: 11px; font-style: normal; font-weight: 850; white-space: nowrap; } .company-memory-grid { /* 업무 보드(wide 열)는 케이스 인박스와 중복이라 제거 — 다음 할 일·리스크 2열만 남는다. */ display: grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: 12px; align-items: stretch; } .memory-column { min-width: 0; display: grid; align-content: start; gap: 10px; padding: 13px; border: 1px solid var(--dv-border, #c9c5bb); border-radius: 14px; background: var(--dv-bg-page, #faf9f6); } .memory-column-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; } .memory-column-head strong { color: var(--dv-text-strong, #14181f); font-size: 14px; } .memory-column-head span { color: var(--dv-text-muted, #636b79); font-size: 11.5px; white-space: nowrap; } /* .memory-case-board(상태별 케이스 카드 보드)는 케이스 인박스 카드와 완전 중복이라 제거됐다(2026-08-17 통합). */ .memory-empty { margin: 0; color: var(--dv-text-muted, #636b79); font-size: 12px; line-height: 1.4; } .memory-action-item, .memory-risk-item { min-width: 0; display: grid; gap: 4px; padding: 9px 10px; border: 1px solid var(--dv-border, #c9c5bb); border-radius: 10px; background: #fff; text-decoration: none; } .memory-action-item:hover, .memory-risk-item:hover { border-color: var(--dv-border-strong, #767d89); background: var(--dv-bg-subtle, #f2f0ec); } .memory-action-item strong, .memory-risk-item strong { color: var(--dv-text-strong, #14181f); font-size: 12.5px; line-height: 1.35; overflow-wrap: anywhere; } .memory-action-item span, .memory-risk-item span { color: var(--dv-text-muted, #636b79); font-size: 11.5px; line-height: 1.35; } .memory-list { display: grid; gap: 7px; } .memory-risk-item.high { border-color: color-mix(in srgb, var(--dv-danger, #b42318) 30%, var(--dv-bg-surface, #ffffff)); background: var(--dv-danger-surface, #fef0ee); } .memory-dataroom { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 2px; } .memory-dataroom div { display: grid; gap: 2px; min-width: 0; padding: 8px; border: 1px solid var(--dv-border, #c9c5bb); border-radius: 10px; background: #fff; } .memory-dataroom span { color: var(--dv-text-muted, #636b79); font-size: 10.5px; } .memory-dataroom b { color: var(--dv-text-strong, #14181f); font-size: 15px; line-height: 1; } .memory-dataroom p { grid-column: 1 / -1; margin: 2px 0 0; color: var(--dv-text-muted, #636b79); font-size: 11.5px; line-height: 1.45; } /* "지금 이어갈 한 가지" 큐는 해체됐다(2026-08-12) — 완료/취소 피드백 배너만 남아 케이스 인박스 안([data-case-inbox-feedback])에서 산다. 클래스명은 기존 계약 유지. */ .growth-action-feedback { min-width: 0; display: flex; align-items: center; gap: 12px; padding: 11px 18px; border: 1px solid color-mix(in srgb, var(--dv-success-text, #0d5b47) 22%, var(--dv-bg-surface, #ffffff)); border-radius: 8px; background: var(--dv-success-surface, #e7f4ee); } .growth-action-feedback.is-error { border-top-color: color-mix(in srgb, var(--dv-danger, #b42318) 30%, var(--dv-danger-surface, #fef0ee)); background: var(--dv-danger-surface, #fef0ee); } .growth-action-feedback > span { flex: 1; min-width: 0; display: grid; gap: 2px; } .growth-action-feedback strong { color: var(--dv-text-strong, #14181f); font-size: 13px; } .growth-action-feedback small { color: var(--dv-text-muted, #636b79); font-size: 11.5px; line-height: 1.4; overflow-wrap: anywhere; } .company-action-dialog { width: min(520px, calc(100vw - 28px)); max-height: calc(100dvh - 40px); padding: 0; overflow: auto; border: 1px solid var(--dv-border, #c9c5bb); border-radius: 8px; background: #fff; box-shadow: var(--dv-shadow-overlay, 0 18px 48px rgba(23, 33, 29, 0.18)); } .company-action-dialog::backdrop { background: color-mix(in srgb, var(--dv-trust, #13294b) 46%, transparent); } .company-action-dialog form { display: grid; gap: 16px; padding: 22px; } .company-action-dialog-head { display: grid; gap: 5px; } .company-action-dialog-head .label { color: var(--dv-primary, #2c55e0); font-size: 11px; font-weight: 800; } .company-action-dialog-head h2 { margin: 0; color: var(--dv-text-strong, #14181f); font-size: 20px; line-height: 1.3; } .company-action-dialog-head p { margin: 0; color: var(--dv-text-muted, #636b79); font-size: 13px; line-height: 1.45; } .company-action-dialog label { min-width: 0; display: grid; gap: 7px; color: var(--dv-text, #2e3440); font-size: 12.5px; font-weight: 800; } .company-action-dialog input, .company-action-dialog textarea { width: 100%; min-width: 0; box-sizing: border-box; border: 1px solid var(--dv-border, #c9c5bb); border-radius: 8px; padding: 10px 11px; background: #fff; color: var(--dv-text-strong, #14181f); font: inherit; font-size: 13px; line-height: 1.5; } .company-action-dialog textarea { resize: vertical; } .company-action-dialog input:focus, .company-action-dialog textarea:focus { border-color: var(--dv-primary, #2c55e0); outline: 2px solid color-mix(in srgb, var(--dv-primary, #2c55e0) 18%, transparent); } .company-action-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; } .company-action-dialog-status { min-height: 18px; margin: 0; color: var(--dv-danger, #b42318); font-size: 12px; line-height: 1.4; } /* 페이지 머리 — 배너(.dash-hero)를 대체하는 한 줄 제목(2026-08-12 재배치). gen2 는 자체 컴팩트 헤더를 쓰므로 v2 가 숨긴다. */ .dash-page-head { display: grid; gap: 4px; padding: 4px 2px 0; } .dash-page-head h1 { margin: 0; color: var(--dv-text-strong, #14181f); font-size: 22px; line-height: 1.3; } .dash-page-head p { margin: 0; color: var(--dv-text-muted, #636b79); font-size: 13px; } .saved-history-details { min-width: 0; overflow: hidden; border: 1px solid var(--dv-border, #c9c5bb); border-radius: 8px; background: #fff; box-shadow: none; } .saved-history-details > .saved-workbench { border: 0; border-radius: 0; box-shadow: none; } .company-memory-details { min-width: 0; border-top: 1px solid var(--dv-border, #c9c5bb); } .saved-history-summary, .company-memory-details-summary { min-width: 0; display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; } .saved-history-summary { min-height: 54px; padding: 12px 16px; } .company-memory-details-summary { min-height: 44px; padding: 12px 0 0; } .saved-history-summary::-webkit-details-marker, .company-memory-details-summary::-webkit-details-marker { display: none; } .saved-history-summary > span, .company-memory-details-summary > span { flex: 1; min-width: 0; display: grid; gap: 2px; } .saved-history-summary strong, .company-memory-details-summary strong { color: var(--dv-text-strong, #14181f); font-size: 14px; line-height: 1.3; } .saved-history-summary small, .company-memory-details-summary small { color: var(--dv-text-muted, #636b79); font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; } .saved-history-summary em, .company-memory-details-summary em { flex: none; color: var(--dv-primary, #2c55e0); font-size: 12px; font-style: normal; font-weight: 800; white-space: nowrap; } .saved-history-summary::after, .company-memory-details-summary::after { content: ""; flex: none; width: 8px; height: 8px; margin: -4px 3px 0 4px; border-right: 2px solid var(--dv-text-muted, #636b79); border-bottom: 2px solid var(--dv-text-muted, #636b79); transform: rotate(45deg); } .saved-history-details[open] > .saved-history-summary::after, .company-memory-details[open] > .company-memory-details-summary::after { margin-top: 4px; transform: rotate(-135deg); } .saved-history-details[open] > .saved-history-summary { border-bottom: 1px solid var(--dv-border, #c9c5bb); background: var(--dv-bg-subtle, #f2f0ec); } .company-memory-details[open] > .company-memory-details-summary { padding-bottom: 12px; border-bottom: 1px solid var(--dv-border, #c9c5bb); } .saved-history-summary:hover, .company-memory-details-summary:hover { background: var(--dv-bg-subtle, #f2f0ec); } .growth-action-item:focus-within, .saved-history-summary:focus-visible, .company-memory-details-summary:focus-visible { outline: 2px solid var(--dv-primary, #2c55e0); outline-offset: -3px; } .saved-history-details:not([open]) > :not(summary), .company-memory-details:not([open]) > :not(summary) { display: none !important; } .company-memory-details-body { min-width: 0; display: grid; gap: 14px; padding-top: 14px; } @media (max-width: 980px) { .saved-workbench { grid-template-columns: 1fr; } .saved-work-list { grid-template-columns: 1fr; } .company-agent-card, .integrated-support-head, .agent-workspace-head, .submission-package-head, .product-planning-head, .validation-experiment-head, .artifact-layer-head, .company-memory-head, .company-memory-grid { grid-template-columns: 1fr; } .company-memory-metrics, .integrated-support-metrics, .agent-workspace-metrics, .submission-package-metrics, .product-planning-metrics, .validation-experiment-metrics, .artifact-layer-metrics { min-width: 0; } .integrated-support-packages { grid-template-columns: 1fr; } .validation-ladder-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .integrated-support-capabilities { grid-template-columns: repeat(2, minmax(0, 1fr)); } .agent-workspace-lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .submission-package-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .product-planning-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .validation-experiment-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .artifact-layer-formats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .growth-action-head, .growth-action-primary { grid-template-columns: 1fr; } .growth-action-metrics { justify-self: start; } .growth-action-actions { justify-content: flex-start; } .growth-action-list { grid-template-columns: 1fr; } .growth-action-item + .growth-action-item { border-top: 1px solid var(--dv-border, #c9c5bb); border-left: 0; } } @media (max-width: 640px) { .saved-list-head { padding-left: 14px; padding-right: 14px; } .saved-list-head { display: grid; justify-content: stretch; gap: 3px; } .saved-list-head span { justify-self: start; text-align: left; } .saved-work-item { grid-template-columns: 1fr; } .saved-work-item .saved-go { justify-self: start; } .company-memory-panel { padding: 14px; } .company-memory-metrics, .integrated-support-metrics, .agent-workspace-metrics, .agent-workspace-head, .agent-workspace-lanes, .submission-package-metrics, .submission-package-head, .submission-package-cards, .product-planning-metrics, .product-planning-head, .product-planning-cards, .validation-experiment-metrics, .validation-experiment-head, .validation-experiment-cards, .artifact-layer-metrics, .artifact-layer-head, .artifact-layer-formats, .validation-ladder-head, .validation-ladder-steps, .integrated-support-capabilities, .company-agent-evidence, .company-agent-orchestrator div, .memory-dataroom { grid-template-columns: 1fr; } .company-agent-step { grid-template-columns: 28px minmax(0, 1fr); } .company-agent-step em { grid-column: 2; } .orchestrator-step { grid-template-columns: 26px minmax(0, 1fr); } .orchestrator-step em { grid-column: 2; } .memory-column-head { display: grid; } .growth-action-feedback { align-items: flex-start; padding-inline: 14px; } .company-action-dialog form { padding: 18px; } .company-action-dialog-actions .btn { flex: 1; } .saved-history-summary { min-height: 52px; padding: 12px 14px; } .saved-history-summary small, .company-memory-details-summary small { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .company-memory-details-body { gap: 12px; padding-top: 12px; } } /* ── 2열 카드(브리핑 | 인사이트) ── */ .dash-cols { display: grid; grid-template-columns: 1.05fr 1fr; gap: 16px; align-items: start; } @media (max-width: 1080px) { .dash-cols { grid-template-columns: 1fr; } } .dash-card { background: #fff; border: 1px solid var(--dv-border, #c9c5bb); border-radius: 16px; box-shadow: none; overflow: hidden; } .dash-card > .card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px 8px; } .dash-card > .card-head h2 { font-size: 16px; font-weight: 800; margin: 0; color: var(--dv-text-strong, #14181f); display: flex; align-items: center; gap: 8px; } .dash-card > .card-head .head-link { min-height: 38px; padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--dv-primary, #2c55e0) 18%, transparent); border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; color: var(--dv-primary, #2c55e0); text-decoration: none; background: var(--dv-bg-surface, #ffffff); cursor: pointer; white-space: nowrap; } .dash-card > .card-head .head-link:hover { text-decoration: underline; } .dash-card .card-body { padding: 2px 12px 14px; display: grid; gap: 4px; } @media (max-width: 640px) { .dash-card > .card-head { display: grid; grid-template-columns: 1fr; align-items: start; } .dash-card > .card-head .head-link { width: 100%; } } @media (max-width: 1180px) { .member-dash, .member-dash > section { min-width: 0; max-width: 100%; } /* 2026-08-12 재배치와 동일 순서: 머리 → 마스터 → 성장 기록 → 업무별 진행 상태 → 오늘의 1순위 → 빠른 실행 → 통계 → 케어 → 브리핑 → 지원사업 → 도구 */ .member-dash .dash-page-head { order: 0; } .member-dash #companyPlanWorkspace { order: 1; } .member-dash #companyMemorySection { order: 2; } .member-dash #savedWork { order: 3; } .member-dash .dash-focus-section { order: 4; } .member-dash .dash-quick-section { order: 5; } .member-dash .dash-stats { order: 6; } .member-dash .dash-care-section { order: 7; } .member-dash .dash-brief-section { order: 8; } .member-dash .dash-program-section { order: 9; } .member-dash .dash-tools-section { order: 10; } .member-dash .dash-quick { display: flex !important; width: 100%; max-width: 100%; min-width: 0; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; padding: 1px 18px 4px 1px; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); } .member-dash .dash-quick::-webkit-scrollbar { display: none; } .member-dash .quick-card { min-width: 0; flex: 0 0 156px; min-height: 104px; padding: 12px; border-radius: 12px; scroll-snap-align: start; } .member-dash .quick-card .qc-ic { width: 32px; height: 32px; border-radius: 9px; } .member-dash .quick-card .qc-title { font-size: 13px; } .member-dash .quick-card .qc-sub { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } } @media (max-width: 780px) { .member-dash { gap: 12px; } .member-dash .dash-secthead { align-items: start; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; padding-top: 0; } .member-dash .dash-secthead .sub { grid-column: 1 / -1; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .member-dash .dash-hero { min-height: 0; padding: 18px 16px; border-radius: 14px; gap: 12px; } .member-dash .dash-hero .hero-copy { gap: 8px; } .member-dash .dash-hero h1 { font-size: 24px; line-height: 1.16; } .member-dash .dash-hero p { display: -webkit-box; overflow: hidden; font-size: 13px; line-height: 1.45; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .member-dash .dash-hero .hero-cta { gap: 8px; margin-top: 2px; } .member-dash .dash-hero .hero-btn { flex: 1 1 140px; min-height: 44px; justify-content: center; padding: 0 12px; border-radius: 10px; font-size: 13px; } .member-dash .dash-hero .hero-aside { padding: 12px; } .member-dash .dash-stats::-webkit-scrollbar { display: none; } } @media (max-width: 640px) { .member-dash .dash-stats { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; padding: 1px 18px 4px 1px; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); } .member-dash .dash-stat { flex: 0 0 146px; min-height: 98px; padding: 10px; border-radius: 12px; gap: 4px; scroll-snap-align: start; } .member-dash .dash-stat .stat-label { font-size: 10px; letter-spacing: 0; line-height: 1.2; text-transform: none; } .member-dash .dash-stat .stat-ic { width: 28px; height: 28px; border-radius: 8px; } .member-dash .dash-stat .stat-num { font-size: 22px; } .member-dash .dash-stat .stat-sub { font-size: 11px; line-height: 1.25; } .member-dash .saved-list-panel { max-height: none; overflow: visible; } .member-dash .saved-work-list { max-height: none; overflow: visible; padding-bottom: 12px; } } /* ── 피드/브리핑 항목(공통) ── */ .feed-item { display: grid; gap: 4px; padding: 11px 12px; border-radius: 12px; text-decoration: none; transition: background .15s ease; } .feed-item:hover { background: var(--dv-bg-subtle, #f2f0ec); } .feed-item .fi-top { display: flex; align-items: center; gap: 8px; } .feed-item .fi-pill { font-size: 10px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--dv-trust-soft, #eaeef8); color: var(--dv-trust, #13294b); white-space: nowrap; } .fi-pill.gold { background: var(--dv-warning-surface, #fff5e4); color: var(--dv-warning-text, #6d4300); } .fi-pill.blue { background: var(--dv-trust-soft, #eaeef8); color: var(--dv-trust, #13294b); } .fi-pill.violet { background: var(--dv-trust-soft, #eaeef8); color: var(--dv-trust, #13294b); } .fi-pill.red { background: var(--dv-danger-surface, #fef0ee); color: var(--dv-danger, #b42318); } .feed-item .fi-title { font-size: 13.5px; font-weight: 700; color: var(--dv-text-strong, #14181f); line-height: 1.4; } .feed-item .fi-sum { font-size: 12.5px; color: var(--dv-text-muted, #636b79); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .feed-item.linked .fi-title::after { content: " ↗"; color: var(--dv-text-muted, #636b79); font-weight: 400; } /* ── 추천 지원사업 ── */ .dash-prog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(244px, 1fr)); gap: 14px; } /* 회사 인사이트 전폭 그리드(2026-08-19 대표 지시: 인사이트를 업무현황에 크게) — feed-item 을 카드로 세워 2~3열로 배치한다. 토큰·기존 카드 문법만 사용. */ .member-dash .dash-insight-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; } .member-dash .dash-insight-grid .feed-item { display: grid; gap: 6px; align-content: start; padding: 15px 16px; border: 1px solid var(--dv-border, #c9c5bb); border-radius: 14px; background: var(--dv-bg-surface, #fff); text-decoration: none; } .member-dash .dash-insight-grid .feed-item .fi-title { font-size: 15px; font-weight: 750; line-height: 1.45; color: var(--dv-text-strong, #14181f); } .member-dash .dash-insight-grid .feed-item .fi-sum { font-size: 12.5px; line-height: 1.55; color: var(--dv-text-muted, #636b79); } .member-dash .dash-insight-grid .dash-empty { grid-column: 1 / -1; } .prog-card { background: #fff; border: 1px solid var(--dv-border, #c9c5bb); border-radius: 16px; padding: 16px 17px; box-shadow: none; display: grid; gap: 9px; transition: transform .15s ease, box-shadow .15s ease; text-decoration: none; } .prog-card:hover { transform: translateY(-2px); box-shadow: none; } .prog-card .pc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .prog-card .pc-cat { font-size: 11px; font-weight: 800; letter-spacing: .03em; color: var(--dv-trust, #13294b); background: var(--dv-trust-soft, #eaeef8); padding: 4px 9px; border-radius: 999px; } .prog-card .pc-score { font-size: 12px; font-weight: 800; color: var(--dv-text-strong, #14181f); font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 5px; } .prog-card .pc-score .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dv-warning-accent, #e8a33d); } .prog-card .pc-title { font-size: 14.5px; font-weight: 700; color: var(--dv-text-strong, #14181f); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .prog-card .pc-meta { font-size: 12px; color: var(--dv-text-muted, #636b79); } .prog-card .pc-bar { height: 6px; border-radius: 999px; background: var(--dv-bg-subtle, #f2f0ec); overflow: hidden; } .prog-card .pc-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--dv-primary, #2c55e0); } /* ── 에이전트 케어 알림 인박스 ── */ .dash-care-section { display: grid; gap: 12px; } .dash-care-section .care-count-badge { display: inline-block; min-width: 20px; padding: 1px 7px; margin-left: 6px; border-radius: 999px; background: var(--dv-danger, #b42318); color: #fff; font-size: 12px; font-weight: 800; vertical-align: middle; } .dash-care-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; } /* 심각도 문법: 기본 카드는 액센트선을 쓰지 않고, 실제 주의·위험일 때만 왼쪽 4px 선 + 상태 배경이 등장한다. 상태는 색만으로 전달하지 않는다 — .cc-sev 칩이 항상 문구를 함께 표시한다(member.html CARE_SEV_LABEL). */ .care-card { background: #fff; border: 1px solid var(--dv-border, #c9c5bb); border-radius: 14px; padding: 14px 16px; box-shadow: none; display: grid; gap: 7px; } .care-card[data-sev="high"] { border-color: color-mix(in srgb, var(--dv-danger, #b42318) 45%, var(--dv-border, #c9c5bb)); background: var(--dv-danger-surface, #fef0ee); } .care-card[data-sev="medium"] { border-color: color-mix(in srgb, var(--dv-warning-accent, #e8a33d) 55%, var(--dv-border, #c9c5bb)); background: var(--dv-warning-surface, #fff5e4); } .care-card .cc-sev { justify-self: start; font-size: 11px; font-weight: 800; letter-spacing: .03em; padding: 3px 9px; border-radius: 999px; background: var(--dv-trust-soft, #eaeef8); color: var(--dv-trust, #13294b); } /* 카드 배경이 이미 상태색이라 칩은 흰 표면 + 상태 잉크 + 실선 테두리로 분리한다(칩이 배경에 묻히지 않게). */ .care-card .cc-high { background: var(--dv-bg-surface, #fff); color: var(--dv-danger, #b42318); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dv-danger, #b42318) 35%, transparent); } .care-card .cc-medium { background: var(--dv-bg-surface, #fff); color: var(--dv-warning-text, #6d4300); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dv-warning-accent, #e8a33d) 55%, transparent); } .care-card .cc-title { font-size: 14.5px; font-weight: 700; color: var(--dv-text-strong, #14181f); line-height: 1.4; } .care-card .cc-body { font-size: 12.5px; color: var(--dv-text-muted, #636b79); line-height: 1.55; } .care-card .cc-actions { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 3px; } .care-card .cc-actions a, .care-card .cc-actions button { min-height: 34px; padding: 6px 13px; border-radius: var(--dv-radius, 8px); font-size: 12.5px; font-weight: 700; cursor: pointer; border: 1px solid transparent; text-decoration: none; display: inline-flex; align-items: center; } .care-card .cc-go { background: var(--dv-primary, #2c55e0); color: #fff; } .care-card .cc-seen { background: #fff; border-color: var(--dv-border, #c9c5bb); color: var(--dv-text-muted, #636b79); } .care-card .cc-dismiss { background: transparent; color: var(--dv-text-muted, #636b79); } .care-card .cc-dismiss:hover { color: var(--dv-danger, #b42318); } .care-card.is-seen { opacity: .55; border-left: 1px solid var(--dv-border, #c9c5bb); border-color: var(--dv-border, #c9c5bb); background: #fff; } .care-card.is-seen .cc-seen { display: none; } /* ── 빠른 실행 그리드(기존 service-card 톤 맞춤) ── */ .dash-section-details { border: 1px solid var(--dv-border, #c9c5bb); border-radius: 16px; background: #fff; box-shadow: none; overflow: hidden; } .dash-section-summary { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 18px; cursor: pointer; list-style: none; } .dash-section-summary::-webkit-details-marker { display: none; } .dash-section-details:not([open]) > :not(summary) { display: none !important; } .dash-section-summary span { min-width: 0; display: grid; gap: 3px; } .dash-section-summary strong { color: var(--dv-text-strong, #14181f); font-size: 15px; line-height: 1.25; } .dash-section-summary small { color: var(--dv-text-muted, #636b79); font-size: 12.5px; line-height: 1.35; } .dash-section-summary em { flex: none; min-width: 46px; padding: 5px 9px; border-radius: 999px; background: var(--dv-bg-selected, #e9edf9); color: var(--dv-primary, #2c55e0); font-size: 12px; font-style: normal; font-weight: 800; text-align: center; } .dash-section-summary::after { content: "열기"; flex: none; min-width: 48px; min-height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--dv-border, #c9c5bb); border-radius: 999px; color: var(--dv-text-muted, #636b79); font-size: 12px; font-weight: 800; } .dash-section-details[open] .dash-section-summary { border-bottom: 1px solid var(--dv-border, #c9c5bb); } .dash-section-details[open] .dash-section-summary::after { content: "접기"; } @media (max-width: 640px) { .dash-section-summary em { display: none; } } .dash-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; } .dash-section-details .dash-quick { padding: 14px; } .quick-card { display: grid; gap: 6px; background: #fff; border: 1px solid var(--dv-border, #c9c5bb); border-radius: 14px; padding: 15px 16px; box-shadow: none; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; } .quick-card:hover { transform: translateY(-2px); box-shadow: none; } .quick-card .qc-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--dv-bg-selected, #e9edf9); color: var(--dv-primary, #2c55e0); } .quick-card .qc-ic svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 2; } .quick-card .qc-title { font-size: 14px; font-weight: 700; color: var(--dv-text-strong, #14181f); } .quick-card .qc-sub { font-size: 12px; color: var(--dv-text-muted, #636b79); line-height: 1.4; } /* 다른 화면으로 나가지 않고 아래 작업면에서 이어지는 카드를 구분한다. */ .quick-card .qc-where { font-size: 11px; font-weight: 700; color: var(--dv-primary, #2c55e0); } /* ── 도구 영역(AI 상담/상담요청/기업매칭) ── */ .dash-tools { background: #fff; border: 1px solid var(--dv-border, #c9c5bb); border-radius: 16px; box-shadow: none; overflow: hidden; } .dash-section-details .dash-tools { border: 0; border-radius: 0; box-shadow: none; } .dash-tools .tool-seg { display: flex; gap: 7px; padding: 13px 14px; border-bottom: 1px solid var(--dv-border, #c9c5bb); flex-wrap: wrap; } .dash-tools .tool-seg button { height: 36px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--dv-border, #c9c5bb); background: #fff; font-size: 13px; font-weight: 700; color: var(--dv-text, #2e3440); cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: background .15s ease, color .15s ease, border-color .15s ease; } .dash-tools .tool-seg button svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; } .dash-tools .tool-seg button:hover { background: var(--dv-bg-subtle, #f2f0ec); } .dash-tools .tool-seg button.active { background: var(--dv-primary, #2c55e0); color: #fff; border-color: var(--dv-primary, #2c55e0); } .dash-tools .tool-body { padding: 18px 20px 22px; } .dash-tools .tool-body > .tab-panel { display: none; } .dash-tools .tool-body > .tab-panel.active { display: block; } @media (max-width: 780px) { .member-dash .dash-hero .hero-aside { display: none !important; } } /* ── 스켈레톤 로딩 ── */ .sk-row { display: grid; gap: 6px; padding: 11px 12px; } .sk-line { height: 12px; border-radius: 6px; } .skeleton { position: relative; overflow: hidden; background: var(--dv-bg-subtle, #f2f0ec); } .skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); animation: dash-sk 1.3s infinite; } @keyframes dash-sk { 100% { transform: translateX(100%); } } @media (prefers-reduced-motion: reduce) { .skeleton::after { animation: none; } .dash-stat, .prog-card, .quick-card, .dash-hero .hero-btn { transition: none; } } /* ── 빈 상태 ── */ .dash-empty { text-align: center; padding: 24px 16px; color: var(--dv-text-muted, #636b79); font-size: 13px; } /* ════════════════════════════════════════════════════════════ 파트너 자문단 카드 (service.html 계약/특허, accounting.html — Phase 4) ════════════════════════════════════════════════════════════ */ .partner-advisory { margin: 0 0 20px; } .partner-advisory .pa-head { margin-bottom: 12px; } .partner-advisory .pa-head .label { font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--dv-warning-accent, #e8a33d); } .partner-advisory .pa-head strong { display: block; font-size: 18px; font-weight: 800; color: var(--dv-text-strong, #14181f); margin-top: 5px; } .partner-advisory .pa-head p { font-size: 13px; color: var(--dv-text-muted, #636b79); margin: 5px 0 0; line-height: 1.5; } /* 자료 공유 동의 체크 줄 — 44px 히트영역(접근성 게이트)과 체크박스 정렬. */ .partner-advisory .pa-consent-note { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 6px 0 0; color: var(--dv-text, #2e3440); font-size: 13px; font-weight: 700; line-height: 1.5; cursor: pointer; } .partner-advisory .pa-consent-note input { width: 18px; height: 18px; flex: none; accent-color: var(--dv-primary, #2c55e0); } .partner-advisory .pa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 14px; } .partner-card { background: #fff; border: 1px solid var(--dv-border, #c9c5bb); border-radius: 16px; padding: 22px 18px 18px; box-shadow: none; display: grid; justify-items: center; text-align: center; gap: 6px; transition: transform .15s ease, box-shadow .15s ease; } .partner-card:hover { transform: translateY(-3px); box-shadow: none; } .partner-card .pc-photo { position: relative; width: 96px; height: 96px; margin-bottom: 4px; } .partner-card .pc-photo img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 3px solid var(--dv-trust-soft, #eaeef8); background: var(--dv-bg-selected, #e9edf9); } .partner-card.verified .pc-photo img { border-color: var(--dv-primary, #2c55e0); } .partner-card .pc-badge { position: absolute; right: 1px; bottom: 1px; width: 27px; height: 27px; border-radius: 50%; background: var(--dv-primary, #2c55e0); color: #fff; display: grid; place-items: center; font-size: 14px; font-weight: 800; border: 2.5px solid #fff; } .partner-card .pc-name { font-size: 18px; font-weight: 800; color: var(--dv-text-strong, #14181f); margin-top: 2px; } .partner-card .pc-role { font-size: 12.5px; font-weight: 700; color: var(--dv-primary, #2c55e0); } .partner-card .pc-org { font-size: 12.5px; color: var(--dv-text-muted, #636b79); line-height: 1.45; max-width: 26ch; } .partner-card .pc-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 7px 0 3px; } .partner-card .pc-tags em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--dv-text, #2e3440); background: var(--dv-bg-selected, #e9edf9); padding: 4px 9px; border-radius: 999px; } .partner-card .pc-career { font-size: 12.5px; color: var(--dv-text-muted, #636b79); line-height: 1.5; } .partner-card .pc-cta { margin-top: 8px; height: 38px; padding: 0 20px; border-radius: 10px; border: 1px solid var(--dv-primary, #2c55e0); background: #fff; color: var(--dv-primary, #2c55e0); font-size: 13px; font-weight: 700; cursor: pointer; transition: background .15s ease, color .15s ease; } .partner-card .pc-cta:hover { background: var(--dv-primary, #2c55e0); color: #fff; } .partner-card .pc-cta:disabled { background: var(--dv-bg-selected, #e9edf9); color: var(--dv-primary, #2c55e0); border-color: var(--dv-bg-selected, #e9edf9); cursor: default; } .partner-advisory .pa-empty { color: var(--dv-text-muted, #636b79); font-size: 13px; padding: 16px; } /* 스켈레톤 카드 */ .partner-card.sk { min-height: 248px; gap: 10px; } .partner-card.sk .pc-photo { border-radius: 50%; } /* ════════════════════════════════════════════════════════════ 회계센터 (accounting.html — Phase 5) AI 재무제표 분석 ════════════════════════════════════════════════════════════ */ .acc-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 18px; align-items: start; } @media (max-width: 1080px) { .acc-grid { grid-template-columns: 1fr; } } .acc-card { background: #fff; border: 1px solid var(--dv-border, #c9c5bb); border-radius: 16px; box-shadow: none; padding: 20px; } .acc-card h2 { font-size: 16px; font-weight: 800; color: var(--dv-text-strong, #14181f); margin: 0 0 4px; } .acc-card .acc-sub { font-size: 12.5px; color: var(--dv-text-muted, #636b79); margin: 0 0 14px; line-height: 1.5; } /* 드롭존 */ .acc-drop { border: 2px dashed var(--dv-border, #c9c5bb); border-radius: 14px; padding: 26px 18px; text-align: center; cursor: pointer; transition: border-color .15s ease, background .15s ease; display: block; } .acc-drop:hover, .acc-drop.drag { border-color: var(--dv-primary, #2c55e0); background: var(--dv-bg-selected, #e9edf9); } .acc-drop input { display: none; } .acc-drop .ad-plus { width: 46px; height: 46px; border-radius: 12px; background: var(--dv-bg-selected, #e9edf9); color: var(--dv-primary, #2c55e0); display: grid; place-items: center; margin: 0 auto 10px; font-size: 26px; font-weight: 300; line-height: 1; } .acc-drop strong { display: block; font-size: 14px; color: var(--dv-text-strong, #14181f); font-weight: 700; } .acc-drop small { display: block; font-size: 12px; color: var(--dv-text-muted, #636b79); margin-top: 4px; } .acc-drop .ad-files { margin-top: 10px; font-size: 12.5px; color: var(--dv-primary, #2c55e0); font-weight: 700; word-break: break-all; } .acc-field { margin-top: 14px; } .acc-field label { display: block; font-size: 12px; font-weight: 700; color: var(--dv-text, #2e3440); margin-bottom: 6px; } .acc-field textarea { width: 100%; border: 1px solid var(--dv-border, #c9c5bb); border-radius: 10px; padding: 11px 12px; font: inherit; font-size: 13.5px; resize: vertical; min-height: 84px; box-sizing: border-box; } .acc-field textarea:focus { outline: 2px solid var(--dv-primary, #2c55e0); border-color: var(--dv-primary, #2c55e0); } .acc-run { margin-top: 14px; width: 100%; height: 46px; border: 0; border-radius: 11px; background: var(--dv-primary, #2c55e0); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; transition: opacity .15s ease, transform .15s ease; } .acc-run:hover { opacity: .93; transform: translateY(-1px); } .acc-run:disabled { opacity: .55; cursor: default; transform: none; } .acc-note { margin-top: 10px; font-size: 12px; color: var(--dv-text-muted, #636b79); line-height: 1.5; } /* 결과 */ .acc-result .acc-empty { text-align: center; padding: 34px 18px; color: var(--dv-text-muted, #636b79); } .acc-result .acc-empty .ae-ic { font-size: 38px; margin-bottom: 8px; } .acc-result .acc-empty strong { display: block; color: var(--dv-text, #2e3440); font-size: 14px; margin-bottom: 4px; } .acc-gauge-wrap { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } .acc-gauge { position: relative; width: 184px; height: 106px; flex: none; } .acc-gauge svg { width: 184px; height: 106px; display: block; } .acc-gauge .gv { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; } .acc-gauge .gv b { display: block; font-size: 34px; font-weight: 800; color: var(--dv-text-strong, #14181f); font-variant-numeric: tabular-nums; line-height: 1; } .acc-gauge .gv span { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; color: var(--dv-text-muted, #636b79); text-transform: uppercase; } .acc-grade-row { display: grid; gap: 8px; } .acc-grade { font-size: 13px; font-weight: 800; padding: 6px 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; width: fit-content; } .acc-grade.g-good { background: var(--dv-success-surface, #e7f4ee); color: var(--dv-success-text, #0d5b47); } .acc-grade.g-warn { background: var(--dv-warning-surface, #fff5e4); color: var(--dv-warning-text, #6d4300); } .acc-grade.g-risk { background: var(--dv-danger-surface, #fef0ee); color: var(--dv-danger, #b42318); } .acc-grade-row .agr-lead { font-size: 13px; color: var(--dv-text, #2e3440); line-height: 1.55; max-width: 34ch; } .acc-section-t { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--dv-text-muted, #636b79); margin: 18px 0 9px; } .acc-metric { display: grid; grid-template-columns: 11px minmax(150px, 1fr) minmax(120px, .9fr); align-items: center; gap: 11px; padding: 11px 13px; border: 1px solid var(--dv-border, #c9c5bb); border-radius: 11px; margin-bottom: 8px; } .acc-metric .am-sig { width: 11px; height: 11px; border-radius: 50%; flex: none; } .am-sig.good { background: var(--dv-success-text, #0d5b47); } .am-sig.warn { background: var(--dv-warning-accent, #e8a33d); } .am-sig.risk { background: var(--dv-danger, #b42318); } .acc-metric .am-body { min-width: 0; } .acc-metric .am-label { font-size: 13px; font-weight: 700; color: var(--dv-text-strong, #14181f); } /* 신호점(11px 색 원)만으로는 색각 이상·스크린리더에서 good/warn/risk 구분 불가(2026-08-12 검수: sigLabel 이 선언만 되고 미사용) — 텍스트 라벨을 함께 쓴다. */ .acc-metric .am-sig-label { font-style: normal; font-size: 11px; font-weight: 800; } .acc-metric .am-sig-label.good { color: var(--dv-success-text, #0d5b47); } .acc-metric .am-sig-label.warn { color: var(--dv-warning-text, #6d4300); } .acc-metric .am-sig-label.risk { color: var(--dv-danger, #b42318); } .acc-metric .am-note { font-size: 12px; color: var(--dv-text-muted, #636b79); line-height: 1.4; } .acc-metric .am-val { min-width: 0; font-size: 14px; font-weight: 800; color: var(--dv-text-strong, #14181f); font-variant-numeric: tabular-nums; line-height: 1.4; overflow-wrap: anywhere; text-align: right; white-space: normal; } @media (max-width: 560px) { .acc-metric { grid-template-columns: 11px minmax(0, 1fr); align-items: start; } .acc-metric .am-val { grid-column: 2; text-align: left; } } /* 리스크 심각도: high·medium만 왼쪽 4px 선 + 상태 배경을 받는다. low는 확인 정보라 선 없이 칩 문구로만 전달한다. */ /* 일부 파일 추출 실패 고지(A3-3) — 서버가 무음으로 삼키던 사실의 표면화. */ .acc-extraction-warn { display: grid; gap: 4px; margin: 10px 0 0; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--dv-warning-accent, #e8a33d) 45%, var(--dv-border, #c9c5bb)); border-radius: 8px; background: var(--dv-warning-surface, #fff5e4); } .acc-extraction-warn b { font-size: 13px; color: var(--dv-warning-text, #6d4300); } .acc-extraction-warn span { font-size: 12.5px; color: var(--dv-text, #2e3440); line-height: 1.55; } /* 리스크 심각도 분포 스택바(A3-2) — 서버 severity 의 클라 집계 시각화. */ .acc-risk-stack { display: grid; gap: 6px; margin: 2px 0 10px; } .acc-risk-stack .ars-bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--dv-bg-subtle, #f2f0ec); } .acc-risk-stack .ars-bar i { display: block; height: 100%; } .acc-risk-stack .ars-bar i.high { background: var(--dv-danger, #b42318); } .acc-risk-stack .ars-bar i.medium { background: var(--dv-warning-accent, #e8a33d); } .acc-risk-stack .ars-bar i.low { background: var(--dv-border-strong, #767d89); } .acc-risk-stack .ars-legend { display: flex; gap: 12px; font-size: 12px; font-variant-numeric: tabular-nums; } .acc-risk-stack .ars-legend .high { color: var(--dv-danger, #b42318); } .acc-risk-stack .ars-legend .medium { color: var(--dv-warning-text, #6d4300); } .acc-risk-stack .ars-legend .low { color: var(--dv-text-muted, #636b79); } .acc-risk { padding: 11px 13px; border-radius: 11px; border: 1px solid var(--dv-border, #c9c5bb); margin-bottom: 8px; background: #fff; } .acc-risk.high { border-color: color-mix(in srgb, var(--dv-danger, #b42318) 45%, var(--dv-border, #c9c5bb)); background: var(--dv-danger-surface, #fef0ee); } .acc-risk.medium { border-color: color-mix(in srgb, var(--dv-warning-accent, #e8a33d) 55%, var(--dv-border, #c9c5bb)); background: var(--dv-warning-surface, #fff5e4); } .acc-risk b { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--dv-text-strong, #14181f); } .acc-risk b .rs { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--dv-bg-subtle, #f2f0ec); color: var(--dv-text, #2e3440); } .acc-risk.high b .rs { background: var(--dv-bg-surface, #fff); color: var(--dv-danger, #b42318); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dv-danger, #b42318) 35%, transparent); } .acc-risk.medium b .rs { background: var(--dv-bg-surface, #fff); color: var(--dv-warning-text, #6d4300); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dv-warning-accent, #e8a33d) 55%, transparent); } .acc-risk.low b .rs { background: var(--dv-success-surface, #e7f4ee); color: var(--dv-success-text, #0d5b47); } .acc-risk p { margin: 4px 0 0; font-size: 12.5px; color: var(--dv-text-muted, #636b79); line-height: 1.5; } .acc-rec { padding: 11px 13px; border-radius: 11px; background: var(--dv-bg-selected, #e9edf9); margin-bottom: 8px; } .acc-rec b { display: block; font-size: 13px; color: var(--dv-primary, #2c55e0); } .acc-rec p { margin: 3px 0 0; font-size: 12.5px; color: var(--dv-text, #2e3440); line-height: 1.5; } .acc-dq { margin-top: 12px; font-size: 12px; color: var(--dv-text-muted, #636b79); font-style: italic; line-height: 1.5; } .acc-source { margin-top: 8px; font-size: 11px; color: var(--dv-text-muted, #636b79); } /* ── 자료센터 상단 경영지원 바로가기 (Phase 6) ── */ .deck-advisory-link { display: flex; align-items: center; gap: 13px; text-decoration: none; padding: 13px 15px; border-radius: 14px; border: 1px solid var(--dv-border, #c9c5bb); background: linear-gradient(135deg, var(--dv-trust-soft, #eaeef8), var(--dv-bg-surface, #ffffff)); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .deck-advisory-link:hover { transform: translateY(-2px); box-shadow: none; border-color: var(--dv-primary, #2c55e0); } .deck-advisory-link .dal-ic { width: 40px; height: 40px; border-radius: 11px; flex: none; display: grid; place-items: center; background: #fff; color: var(--dv-primary, #2c55e0); border: 1px solid var(--dv-border, #c9c5bb); } .deck-advisory-link .dal-ic svg { width: 20px; height: 20px; } .deck-advisory-link .dal-body { display: grid; gap: 2px; } .deck-advisory-link .dal-body strong { font-size: 14px; font-weight: 800; color: var(--dv-text-strong, #14181f); } .deck-advisory-link .dal-body small { font-size: 12px; color: var(--dv-text-muted, #636b79); line-height: 1.4; } .deck-advisory-link .dal-go { margin-left: auto; color: var(--dv-primary, #2c55e0); font-size: 18px; font-weight: 800; flex: none; } @media (prefers-reduced-motion: reduce) { .deck-advisory-link { transition: none; } } /* Case Inbox 스타일은 앱 셸 CSS 에 둔다 — 이 카드는 member.html 에만 붙는데 그 페이지는 dream-data-platform.css 를 싣지 않아 스타일이 통째로 안 먹혀 있었다 (2026-07-27 발견). 화면이 쓰는 CSS 안에 두어야 다시 어긋나지 않는다. */ /* Case Inbox — 회원이 서비스 화면을 돌아다니지 않고 자기 케이스의 진행·완료·막힌 것을 한 자리에서 본다. 완료 여부는 서버 판정을 그대로 표시한다(NSM 과 어긋나면 안 된다). */ .case-inbox { display: grid; gap: 12px; margin: 0 0 16px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: none; } .case-inbox-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .case-inbox-head h3 { margin: 4px 0 2px; font-size: 18px; color: var(--ink); } .case-inbox-head p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.6; } .case-inbox-metrics { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .case-inbox-metric { display: inline-flex; align-items: baseline; gap: 4px; padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--dv-bg-subtle, #f2f0ec); font-size: 12px; font-weight: 800; color: var(--dv-text-muted, #636b79); } .case-inbox-metric b { font-size: 15px; color: var(--ink); } .case-inbox-metric.is-done b { color: var(--dv-success-text, #0d5b47); } /* 긴급 카운터 — 해체된 큐에서 이관(2026-08-12). gen1 은 토큰 파일을 안 실으므로 폴백 병기. */ .case-inbox-metric.is-urgent b { color: var(--dv-danger, #b42318); } /* 완료/취소 피드백 배너가 인박스 안에 산다 — 비어 있으면 자리도 차지하지 않는다. */ [data-case-inbox-feedback]:empty { display: none; } [data-case-inbox-feedback] { margin-bottom: 10px; } /* 다음 할 일이 지정되지 않은 케이스 — 순환 CTA 대신 상태 텍스트(2026-08-18 여정 감사). */ .case-inbox-noaction { display: inline-flex; align-items: center; font-size: 12.5px; color: var(--muted); } /* 막힘 사유 — 칩 나열 대신 수평 바(2026-08-12): 어느 사유가 제일 크게 막는지 길이로 한눈에 읽힌다. 색 폴백은 gen1 앰버 계열을 잇는다. */ .case-inbox-blockers { display: grid; gap: 5px; max-width: 560px; } .case-inbox-blocker-row { display: grid; grid-template-columns: minmax(150px, auto) minmax(60px, 1fr) auto; align-items: center; gap: 10px; font-size: 11.5px; font-weight: 700; color: var(--dv-warning-text, #6d4300); } .case-inbox-blocker-row b { font-variant-numeric: tabular-nums; color: var(--ink); } .case-inbox-blocker-bar { height: 8px; border-radius: 999px; background: var(--dv-bg-subtle, #f2f0ec); overflow: hidden; } .case-inbox-blocker-bar i { display: block; height: 100%; border-radius: 999px; background: var(--dv-warning-accent, #e8a33d); } /* 완주율 도넛 — 섹션 대표 지표 하나(실데이터 summary 만 그린다). */ .case-inbox-donut { position: relative; display: inline-grid; justify-items: center; align-content: center; min-width: 64px; } .case-inbox-donut svg { grid-area: 1 / 1; } /* 복귀 버튼 공통 표식 — 다른 흐름에서 넘어와 일을 마치고 원래 자리로 돌아가는 버튼은 메탈릭 레인보우 아웃라인으로 어디서든 같은 모습으로 구별한다(2026-08-17 대표 지시). 구형 모니터 원칙: 옅은 틴트 금지, 2px 실선급 존재감. */ @property --dv-return-angle { syntax: ""; inherits: false; initial-value: 0deg; } /* 메탈릭 레인보우를 버튼 자신의 border 영역에 칠한다 — 오버레이 링이 아니라 외곽 라인 그 자체가 레인보우다(2026-08-17 대표 재지시). background-clip 이중 배경: 안쪽(padding-box)은 불투명 버튼 면, border-box 는 회전하는 conic 그라디언트. border 를 transparent 로 두면 그 그라디언트가 딱 테두리 링에만 보이고, 버튼 자신의 border-radius 로 클리핑되므로 별도 레이어 정렬이 없어 틀어질 여지가 원천적으로 0이다. a/button 태그 지정으로 투명 .btn.subtle 보다 우선. */ a.dv-return-beacon, button.dv-return-beacon { position: relative; isolation: isolate; /* 3px: 2026-08-18 대표 지시 — 다음 이동을 안내하는 레인보우는 기존보다 조금 더 두껍게. */ border: 3px solid transparent; /* 일렁임(2026-08-19 대표 3차): 가이드 링과 같은 역방향 스펙큘러 하이라이트를 겹친다. */ background: linear-gradient(var(--dv-bg-surface, #fff), var(--dv-bg-surface, #fff)) padding-box, conic-gradient(from calc(var(--dv-return-angle, 0deg) * -1.6), transparent 0 76%, rgba(255, 255, 255, .9) 86%, transparent 96%) border-box, conic-gradient(from var(--dv-return-angle, 0deg), #c9a227, #e8e3d2, #7fa8d9, #b58fd9, #6fbf9a, #d9a0b4, #c9a227) border-box; background-clip: padding-box, border-box, border-box; animation: dvReturnBeaconSpin 3.5s linear infinite; } a.dv-return-beacon:hover, a.dv-return-beacon:focus-visible, button.dv-return-beacon:hover, button.dv-return-beacon:focus-visible { animation-duration: 1.6s; } @keyframes dvReturnBeaconSpin { to { --dv-return-angle: 360deg; } } @media (prefers-reduced-motion: reduce) { a.dv-return-beacon, button.dv-return-beacon { animation: none; } } /* 할 일이 남은 포탈은 닫혀 있다 — 회색 정지 테두리. 완수되면 is-dormant 해제로 레인보우가 돈다. */ .dv-return-beacon.is-dormant { color: var(--dv-text-muted, #636b79); background: linear-gradient(var(--dv-bg-surface, #fff), var(--dv-bg-surface, #fff)) padding-box, linear-gradient(#b8bdb6, #d8dcd6) border-box; background-clip: padding-box, border-box; animation: none; } .dv-return-beacon.is-dormant canvas { display: none; } /* 가이드 하이라이트는 실제 target 자체에 붙는다. 2px 링을 target의 border box 안에 정확히 맞추며 버튼보다 큰 별도 배경면이나 위치 동기화용 overlay를 만들지 않는다. */ .dv-guide-active { position: relative; isolation: isolate; } /* 일렁임(2026-08-19 대표 3차 "레인보우 색상이 일렁일렁 거려야지"): 무지개 바퀴가 통째로 도는 것만으로는 얇은 링·메탈릭 저채도에서 변화가 안 보인다 — 역방향으로 도는 흰 스펙큘러 하이라이트 밴드를 무지개 위에 겹쳐 두 층의 상대 운동으로 빛이 훑고 지나가게. */ .dv-guide-active::after { content: ""; position: absolute; inset: 0; box-sizing: border-box; z-index: 1; padding: 2px; border-radius: inherit; background: conic-gradient(from calc(var(--dv-return-angle, 0deg) * -1.6), transparent 0 76%, rgba(255, 255, 255, .9) 86%, transparent 96%), conic-gradient(from var(--dv-return-angle, 0deg), #c9a227, #e8e3d2, #7fa8d9, #b58fd9, #6fbf9a, #d9a0b4, #c9a227); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; animation: dvReturnBeaconSpin 3.5s linear infinite; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .dv-guide-active::after { animation: none; } } /* 가이드 미러 — 레인보우로 지목한 버튼이 화면 밖일 때만 우측 하단(플로팅 채팅 위)에 나타나는 대리 버튼(2026-08-18 대표 지시: 안 보일 땐 플로팅으로, 스크롤로 원본이 보이면 사라지게). 라벨·클릭은 원본 그대로 위임하고 레인보우 외곽선도 같은 방식. */ .dv-guide-mirror { position: fixed; right: 24px; bottom: 92px; z-index: 71; max-width: min(320px, calc(100vw - 40px)); padding: 11px 18px; border: 0; border-radius: 8px; /* 링 방식 전환(2026-08-19) 후 캡슐 채움은 여기서 직접 — JS가 원본 버튼 색을 --guide-fill 로 넘긴다. */ background: var(--guide-fill, var(--dv-bg-surface, #fff)); color: var(--dv-text-strong, #14181f); font: inherit; font-size: 14px; font-weight: 800; line-height: 1.3; word-break: keep-all; cursor: pointer; box-shadow: 0 14px 32px rgba(23, 33, 29, .2); } body.sa-panel-open .dv-guide-mirror { display: none; } @media (max-width: 1024px) { .dv-guide-mirror { right: 16px; bottom: 76px; } } /* 블로커 행은 버튼이다 — 누르면 그 사유로 막힌 첫 카드로 이동(보여주기로 끝내지 않기). */ button.case-inbox-blocker-row { width: 100%; border: 0; background: none; padding: 0; font: inherit; text-align: left; cursor: pointer; min-height: 32px; } button.case-inbox-blocker-row:focus-visible { outline: 2px solid var(--dv-primary, #2c55e0); outline-offset: 2px; border-radius: 6px; } .case-inbox-item.is-spotlit { outline: 2px solid var(--dv-primary, #2c55e0); outline-offset: 2px; transition: outline-color .2s ease-out; } /* 12건 컷 안내 — 잘림은 침묵시키지 않는다. */ .case-inbox-more { list-style: none; padding: 9px 4px 0; border-top: 1px dashed var(--line); color: var(--muted); font-size: 11.5px; } .case-inbox-more a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } /* 미완료 카드의 '완료 기록'은 보조 행동 — 주 행동(이어가기)과 같은 무게로 두지 않는다. */ .case-inbox-complete-quiet { border: 0; background: none; padding: 0 2px; color: var(--muted); font: inherit; font-size: 11.5px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 44px; } /* 라벨은 도넛 밖이 아니라 안에 산다 — 밖에 두면 옆 지표 알약들과 세로 중심이 어긋난다(2026-08-17 대표 지적). */ .case-inbox-donut b { grid-area: 1 / 1; align-self: center; font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; transform: translateY(-5px); } .case-inbox-donut small { grid-area: 1 / 1; align-self: center; font-size: 9px; color: var(--muted); transform: translateY(8px); } .case-inbox-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; } .case-inbox-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--dv-bg-surface, #ffffff); } /* 좌측 상태 레일 — 목록을 훑을 때 "지금 손댈 수 있는 것"이 먼저 걸리게 한다. 색만으로 구분하지 않는다: 같은 상태를 배지와 아래 사유 줄이 글로 다시 말한다. */ .case-inbox-item-dot { width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: var(--dv-border, #c9c5bb); } .case-inbox-item.is-ready { border-color: color-mix(in srgb, var(--dv-warning-accent, #e8a33d) 45%, var(--dv-border, #c9c5bb)); background: var(--dv-warning-surface, #fff5e4); } .case-inbox-item.is-ready .case-inbox-item-dot { background: color-mix(in srgb, var(--dv-warning-accent, #e8a33d) 55%, var(--dv-warning-text, #6d4300)); box-shadow: color-mix(in srgb, var(--dv-warning-accent, #e8a33d) 16%, transparent); } .case-inbox-item.is-done { border-color: color-mix(in srgb, var(--dv-success-text, #0d5b47) 20%, var(--dv-bg-surface, #ffffff)); background: var(--dv-success-surface, #e7f4ee); } .case-inbox-item.is-done .case-inbox-item-dot { background: var(--dv-success-text, #0d5b47); } .case-inbox-item-main { min-width: 0; display: grid; gap: 3px; } /* 제목이 카드를 꽉 채우게(2026-08-12 대표 지적) — 2줄 고정 높이로 카드 높이를 정규화하고, 긴 제목은 말줄임. 짧은 제목도 같은 자리라 그리드가 들쭉날쭉하지 않다. */ .case-inbox-item-main strong { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 2.7em; font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.35; overflow-wrap: anywhere; } .case-inbox-item-main small { font-size: 11.5px; color: var(--muted); } /* 2026-08-22: 게이트 충족률 바를 걷어냈다. 그 값은 "닫을 준비"를 재는 자라 시작 전 업무가 전부 같아진다 — 실측으로 카드 11장이 막힌 사유까지 똑같이 "남은 것 2 · 50%" 였다. 같은 길이의 막대 11개는 정보가 0인 것보다 나쁘다("다들 비슷하게 진행 중"이라는 틀린 인상). 이제 배지가 남은 일을 글로 말한다(대표 지시). 되살리려면 진행률을 실제로 재는 축(예: 섹션 작성 수, 답한 문항 수)을 먼저 만들어야 한다 — 게이트 충족률로는 안 된다. */ /* 무엇이 완료를 막는지가 이 카드의 핵심 정보다 — 우측 구석 11px 보조문구가 아니라 제목 바로 아래 전용 줄로 둔다. */ .case-inbox-item-note { margin: 3px 0 0; display: flex; align-items: flex-start; gap: 5px; font-size: 12px; font-weight: 600; line-height: 1.45; color: var(--dv-warning-text, #6d4300); } .case-inbox-item-note svg { flex: none; margin-top: 1px; } .case-inbox-item-note span { font-weight: 500; color: var(--muted); } .case-inbox-item-note.is-done { color: var(--dv-success-text, #0d5b47); } .case-inbox-item-state { display: grid; justify-items: end; gap: 6px; text-align: right; /* 2026-08-22: 배지가 "남은 것 2 · 50%"(짧음)에서 "산출물 없음 · 실행 전"(김)으로 길어지자 이 칸이 버튼 자리를 잡아먹어 "완료 기록"·"보관" 글자가 세로로 찢어졌다 (실렌더 실측 29x96px). 폭 상한은 42% 그대로 두고 — 넓히면 카드가 길어져 모바일에서 추천이 화면 밖으로 밀리고 어시스턴트가 캡슐로 모핑된다(companyActionLoop 실측) — 배지가 접히게 해서 자리를 만든다. */ max-width: 42%; } /* 막힌 것을 보여주는 데서 끝나지 않게 — 그 자리에서 이어가거나 완료를 기록한다. */ .case-inbox-item-actions { display: flex; gap: 6px; justify-content: flex-end; } /* 버튼 글자는 접히면 안 된다. 2026-08-22: 배지가 "남은 것 2 · 50%"(짧음)에서 "산출물 없음 · 실행 전"(김)으로 바뀌자, nowrap 배지가 폭을 먹고 남은 자리에서 "완료 기록"·"보관" 이 한 글자씩 세로로 찢어졌다(실렌더 확인). 선택자를 이 목록 안으로 좁힌다 — .case-inbox-item-actions 클래스는 다른 화면에서도 쓰여, 넓게 걸면 엉뚱한 곳(어시스턴트 라벨 등)까지 흔든다. */ .case-inbox-item .case-inbox-item-actions > * { white-space: nowrap; } .case-inbox-badge { padding: 4px 10px; border-radius: 999px; background: var(--dv-bg-subtle, #f2f0ec); font-size: 11.5px; font-weight: 800; color: var(--dv-text-muted, #636b79); /* 남은 일을 글로 말하면서 문구가 길어졌다. 접게 두면 카드가 세로로 길어지고, 그러면 모바일에서 추천이 화면 밖으로 밀려 어시스턴트가 캡슐로 모핑된다(companyActionLoop 실측). 카드 높이를 지키기 위해 한 줄로 두고, 넘치면 말줄임으로 자른다 — 전문(全文)은 title 속성과 카드 안내 줄이 갖는다. */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .case-inbox-badge.is-ready { background: var(--dv-warning-surface, #fff5e4); color: var(--dv-warning-text, #6d4300); } .case-inbox-badge.is-done { background: var(--dv-success-text, #0d5b47); color: #fff; } @media (max-width: 720px) { .case-inbox-item { grid-template-columns: auto minmax(0, 1fr); } .case-inbox-item-state { grid-column: 2; justify-items: start; text-align: left; max-width: 100%; } .case-inbox-item-actions { justify-content: flex-start; } .app-login-gate-button, body.member-authed .member-dash :is(button, [role="button"], a.btn, .head-link) { min-height: 44px !important; } } @container deck-studio (max-width: 1024px) { body.member-authed .deck-studio-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "sources" "intake" "results"; } body.member-authed .deck-result-stack { position: static; } } /* 업무현황은 viewport가 아니라 실제 본문 폭을 기준으로 재배치한다. 접힌 사이드바, 브라우저 확대, 분할 화면에서도 카드 내부가 눌리거나 가로 스크롤로 숨지 않는다. */ .member-dash { container: member-dashboard / inline-size; } .member-dash :is(.dash-quick, .agent-workspace-lanes, .case-inbox-item, .growth-action-head) > * { min-width: 0; } .member-dash :is(.case-inbox-item-main, .case-inbox-item-state, .growth-action-copy, .agent-workspace-card) { overflow-wrap: anywhere; } @container member-dashboard (max-width: 1049px) { .member-dash .agent-workspace-lanes { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); } .member-dash .dash-quick { grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)) !important; overflow: visible !important; scroll-snap-type: none !important; } .member-dash .dash-quick > * { width: auto !important; min-width: 0 !important; scroll-snap-align: none !important; } .member-dash .growth-action-head { grid-template-columns: minmax(0, 1fr); } .member-dash .growth-action-metrics { justify-self: stretch; justify-content: flex-start; flex-wrap: wrap; overflow: visible !important; } } @container member-dashboard (max-width: 699px) { .member-dash .agent-workspace-lanes, .member-dash .dash-quick { grid-template-columns: minmax(0, 1fr) !important; } .member-dash .case-inbox-item { grid-template-columns: 9px minmax(0, 1fr); align-items: start; } .member-dash .case-inbox-item-state { grid-column: 2; width: 100%; max-width: none; justify-items: start; text-align: left; } .member-dash .case-inbox-item-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; } } .app-login-gate-button, .app-sidebar a, .member-dash .head-link, .member-dash :is(button, [role="button"], a.btn) { min-height: 44px !important; } @media (max-width: 720px) { .app-login-gate-button, .app-sidebar a, .member-dash .head-link { min-height: 44px !important; } }