/* KeepGong frontend baseline CSS — D51b * 실측 RemNote 토큰 (Specs/KeepGong/DesignSystem/KeepGongTokenSpec.lean) * Atlassian 8px grid spacing * * D52 cycle/d52-refine-ui: Stitch v8 + RemNote features 반영. * 멀티휴 accent(blue/cyan/purple) + Refine 분할 워크스페이스(.kg-topnav/.kg-refine-split/.kg-problem-card) * ← Specs/KeepGong/DesignSystem/RefineWorkspaceSpec.lean (@sync). 색은 ComponentStatus 파생. */ /* Noto Sans KR (디자이너 기준, 2026-06-04) — 한글/라틴 공통. 수식/코드만 JetBrains Mono. */ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;800;900&display=swap'); :root { /* Foundation / Color — synced from Figma `colors` collection (node 33:3, 2026-06-12). */ --base-grey-50: #f9fafb; --base-grey-100: #f2f4f6; --base-grey-200: #e5e8eb; --base-grey-300: #d1d6db; --base-grey-400: #b0b8c1; --base-grey-500: #8b95a1; --base-grey-600: #6b7684; --base-grey-700: #4e5968; --base-grey-800: #333d4b; --base-grey-900: #191f28; --base-grey-950: #0b0c0e; --base-blue-50: #edf4fd; --base-blue-100: #c5ddf9; --base-blue-200: #9cc6f6; --base-blue-300: #73aff3; --base-blue-400: #4997f2; --base-blue-500: #1e80f1; --base-blue-600: #0f68ce; --base-blue-700: #0d519f; --base-blue-800: #0b3a71; --base-blue-900: #072343; --base-blue-950: #030c17; --base-red-50: #ffeeee; --base-red-100: #ffd4d6; --base-red-200: #feafb4; --base-red-300: #fb8890; --base-red-400: #f66570; --base-red-500: #f04452; --base-red-600: #e42939; --base-red-700: #d22030; --base-red-800: #bc1b2a; --base-red-900: #a51926; --base-red-950: #48070e; --base-orange-50: #fff3e0; --base-orange-100: #ffe0b0; --base-orange-200: #ffcd80; --base-orange-300: #ffbd51; --base-orange-400: #ffa927; --base-orange-500: #fe9800; --base-orange-600: #fb8800; --base-orange-700: #f57800; --base-orange-800: #ed6700; --base-orange-900: #e45600; --base-orange-950: #752d00; --base-yellow-50: #fff9e7; --base-yellow-100: #ffefbf; --base-yellow-200: #ffe69b; --base-yellow-300: #ffdd78; --base-yellow-400: #ffd158; --base-yellow-500: #ffc342; --base-yellow-600: #ffb331; --base-yellow-700: #faa131; --base-yellow-800: #ee8f11; --base-yellow-900: #dd7d02; --base-yellow-950: #a25e07; --base-green-50: #f0faf6; --base-green-100: #aeefd5; --base-green-200: #76e4b8; --base-green-300: #3fd599; --base-green-400: #15c47e; --base-green-500: #03b26c; --base-green-600: #02a262; --base-green-700: #068d57; --base-green-800: #0b754b; --base-green-900: #0f563a; --base-green-950: #18513a; --base-teal-50: #edf8f8; --base-teal-100: #bce9e9; --base-teal-200: #89d8d8; --base-teal-300: #58c7c7; --base-teal-400: #30b6b6; --base-teal-500: #18a5a5; --base-teal-600: #109595; --base-teal-700: #0c8585; --base-teal-800: #097575; --base-teal-900: #076565; --base-teal-950: #074a4a; --base-purple-50: #f9f0fc; --base-purple-100: #edccf8; --base-purple-200: #da9bef; --base-purple-300: #c770e4; --base-purple-400: #b44bd7; --base-purple-500: #a234c7; --base-purple-600: #9128b4; --base-purple-700: #8222a2; --base-purple-800: #73228e; --base-purple-900: #65237b; --base-purple-950: #3c0e3c; --semantic-background-default: #ffffff; --semantic-background-subtle: var(--base-grey-50); --semantic-background-dimmed: #0000008f; --semantic-background-inverse: var(--base-grey-900); --semantic-background-strong: var(--base-grey-100); --semantic-fill-brand: var(--base-blue-400); --semantic-fill-secondary: var(--base-teal-300); --semantic-fill-default: #ffffff; --semantic-fill-danger: var(--base-red-500); --semantic-fill-info: var(--base-teal-500); --semantic-fill-inverse: var(--base-grey-900); --semantic-fill-muted: var(--base-grey-100); --semantic-fill-strong: var(--base-grey-200); --semantic-fill-subtle: var(--base-grey-50); --semantic-fill-success: var(--base-green-500); --semantic-fill-warning: var(--base-yellow-500); --semantic-text-primary: var(--base-grey-900); --semantic-text-secondary: var(--base-grey-700); --semantic-text-secondary-brand: var(--base-teal-700); --semantic-text-brand: var(--base-blue-600); --semantic-text-danger: var(--base-red-600); --semantic-text-disabled: var(--base-grey-400); --semantic-text-inverse: #ffffff; --semantic-text-success: var(--base-green-600); --semantic-text-tertiary: var(--base-grey-500); --semantic-text-muted: var(--semantic-text-tertiary); --semantic-text-warning: var(--base-orange-600); --semantic-icon-brand: var(--base-blue-500); --semantic-icon-danger: var(--base-red-500); --semantic-icon-disabled: var(--base-grey-400); --semantic-icon-inverse: #ffffff; --semantic-icon-primary: var(--base-grey-900); --semantic-icon-secondary: var(--base-grey-700); --semantic-icon-success: var(--base-green-500); --semantic-icon-tertiary: var(--base-grey-500); --semantic-icon-muted: var(--semantic-icon-tertiary); --semantic-border-danger: var(--base-red-500); --semantic-border-default: var(--base-grey-200); --semantic-border-focus: var(--base-blue-500); --semantic-border-strong: var(--base-grey-300); --semantic-border-subtle: var(--base-grey-100); --semantic-state-brand-hover: var(--base-blue-600); --semantic-state-danger-hover: var(--base-red-600); --semantic-state-disabled-content: var(--base-grey-400); --semantic-state-disabled-fill: var(--base-grey-100); --semantic-state-inverse-hover: var(--base-grey-800); --semantic-state-success-hover: var(--base-green-600); --semantic-status-brand-content-strong: var(--base-blue-700); --semantic-status-brand-soft-fill: var(--base-blue-50); --semantic-status-brand-subtle: var(--base-blue-100); --semantic-status-danger-border: var(--base-red-200); --semantic-status-danger-soft-fill: var(--base-red-50); --semantic-status-info-border: var(--base-purple-500); --semantic-status-info-soft-fill: var(--base-purple-50); --semantic-status-info-solid-fill: var(--base-purple-600); --semantic-status-neutral-soft-fill: var(--base-grey-100); --semantic-status-neutral-solid-fill: var(--base-grey-800); --semantic-status-secondary-border: var(--base-teal-200); --semantic-status-secondary-content: var(--base-teal-600); --semantic-status-secondary-soft-fill: var(--base-teal-50); --semantic-status-secondary-subtle: var(--base-teal-100); --semantic-status-success-border: var(--base-green-200); --semantic-status-success-soft-fill: var(--base-green-50); --semantic-status-warning-border: var(--base-orange-200); --semantic-status-warning-soft-fill: var(--base-orange-50); /* Legacy aliases kept stable while code migrates to foundation tokens. */ --color-bg: var(--semantic-background-default); --color-surface: var(--semantic-background-subtle); --color-sunken: var(--semantic-background-strong); --color-text: var(--semantic-text-primary); --color-text-2: var(--semantic-text-secondary); --color-text-muted: var(--semantic-text-tertiary); --color-text-subtle: var(--semantic-text-tertiary); --color-border: var(--semantic-border-default); --color-divider: var(--semantic-border-subtle); --color-accent: var(--semantic-fill-brand); --color-accent-cyan: var(--semantic-fill-secondary); --color-accent-purple: var(--base-purple-500); --color-accent-soft: var(--base-blue-100); --color-accent-2: var(--base-blue-300); --color-accent-bg: var(--semantic-status-brand-soft-fill); --color-accent-border: var(--semantic-status-brand-subtle); --color-success: var(--semantic-fill-success); --color-warning: var(--semantic-fill-warning); --color-danger: var(--semantic-fill-danger); --color-info: var(--semantic-fill-info); /* Historical numbered aliases are still referenced by pre-token components. Keep every reference valid while those call sites migrate to semantic names. */ --color-text-1: var(--semantic-text-primary); --color-text-3: var(--semantic-text-tertiary); --color-surface-1: var(--semantic-background-subtle); --color-surface-2: var(--semantic-background-strong); --color-danger-text: var(--semantic-text-danger); /* Refine 검수 상태 (RefineWorkspaceSpec.RefineStatusColor — ComponentStatus 파생) */ --color-status-verified-surface: #E6FAEC; /* 구조 확인됨 (ok/approved) */ --color-status-verified-text: #006E2A; --color-status-review-surface: #FFF4E5; /* ★ 검토 필요 (needsFix = 안되는 부분) */ --color-status-review-text: #E65100; --semantic-button-pressed-scale: 0.9; /* ── Semantic roles (역할 기반 — 컴포넌트는 위 primitive 대신 이 역할 변수를 사용) ── * @sync Specs/KeepGong/DesignSystem/KeepGongTokenSpec.lean § 9 * 디자인시스템.md: "원재료는 직접 쓰지 않고 역할 토큰으로 참조" */ /* background */ --bg-page: var(--color-bg); --bg-raised: var(--color-surface); --bg-sunken: var(--color-sunken); /* fill (면 색) */ --fill-primary: var(--semantic-fill-brand); --fill-primary-hover: var(--semantic-state-brand-hover); --fill-soft: var(--color-accent-bg); /* 선택/활성 연한 강조 면 */ --fill-neutral: var(--semantic-fill-muted); --fill-inverse: var(--semantic-fill-inverse); /* 어두운(잉크) 면 */ /* text */ --text-primary: var(--semantic-text-primary); --text-secondary: var(--semantic-text-secondary); --text-muted: var(--semantic-text-muted); --text-subtle: var(--color-text-subtle); --text-inverse: var(--semantic-text-inverse); --text-accent: var(--color-accent); /* icon */ --icon-default: var(--text-secondary); --icon-muted: var(--text-muted); --icon-accent: var(--color-accent); /* border */ --border-default: var(--semantic-border-default); --border-strong: var(--semantic-border-strong); --border-divider: var(--semantic-border-default); --border-focus: var(--semantic-border-focus); /* state (disabled 는 색이 아니라 opacity) */ --state-hover: var(--semantic-fill-subtle); --state-pressed: var(--semantic-fill-strong); --state-selected: var(--color-accent-bg); --state-disabled-opacity: 0.3; /* 디자인시스템.md: disabled = opacity 30% */ /* status */ --status-success: var(--color-success); --status-warning: var(--color-warning); --status-danger: var(--semantic-fill-danger); --status-info: var(--color-info); /* Spacing — Atlassian 8px grid */ --space-0: 0; --space-025: 2px; --space-050: 4px; --space-075: 6px; --space-100: 8px; --space-150: 12px; --space-200: 16px; --space-250: 20px; --space-300: 24px; --space-400: 32px; --space-500: 40px; --space-600: 48px; --space-800: 64px; --space-1000: 80px; /* Spacing roles (의미별 — 디자인시스템.md Gap/Padding/Margin) → space 그리드 * @sync Specs/KeepGong/DesignSystem/KeepGongTokenSpec.lean § 10 */ --gap-none: var(--space-0); --gap-2xs: var(--space-025); /* 2 label-description stack */ --gap-xs: var(--space-050); /* 4 */ --gap-sm: var(--space-075); /* 6 */ --gap-md: var(--space-100); /* 8 */ --gap-lg: var(--space-150); /* 12 */ --gap-xl: var(--space-250); /* 20 */ --gap-2xl: var(--space-400); /* 32 */ --pad-none: var(--space-0); --pad-2xs: var(--space-025); /* 2 tight capsule track inset */ --pad-sm: var(--space-100); /* 8 */ --pad-md: var(--space-150); /* 12 */ --pad-lg: var(--space-200); /* 16 */ --pad-xl: var(--space-250); /* 20 */ --pad-2xl: var(--space-300); /* 24 (28→24 스냅) */ --pad-3xl: var(--space-400); /* 32 */ --pad-4xl: var(--space-500); /* 40 */ --pad-5xl: var(--space-800); /* 64 */ --margin-none: var(--space-0); --margin-sm: var(--space-200); /* 16 작은 블록 */ --margin-md: var(--space-400); /* 32 기본 블록 */ --margin-section: var(--space-500); /* 40 섹션 간격 최대 */ --margin-page-x: var(--space-500); /* 40 페이지 좌우 */ --margin-page-top: var(--space-500); /* 40 페이지 상단 */ --margin-page-bottom: var(--space-1000); /* 80 페이지 하단 */ /* Radius — 디자이너 스케일 (디자인시스템.md, 2026-06-04). md=8 이 Input/Button/Tab 기본 */ --radius-none: 0; --radius-2xs: 2px; --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --border-width-default: 1px; --decision-trace-drawer-width: 640px; --decision-trace-layer-backdrop: 949; --decision-trace-layer-drawer: 950; --decision-trace-backdrop-scrim: rgba(15, 23, 42, 0.18); --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 999px; /* Size — 컴포넌트 height (디자인시스템.md). @sync KeepGongTokenSpec.lean § 12. width 는 Hug/Fill, 정사각 컨트롤은 height=width. */ --size-xs: 32px; /* 작은 보조 */ --size-sm: 36px; /* 작은 보조 */ --size-md: 48px; /* 기본 폼/버튼 */ --size-lg: 52px; /* 기본 폼/버튼 (Input 기본) */ --size-xl: 56px; /* 큰 입력/주요 액션 */ /* Layout */ --sidebar-width: 240px; --sidebar-collapsed-width: 80px; --right-panel-width: 320px; --workbench-list-min-width: 300px; --header-height: 56px; --max-content: 1280px; --max-reading: 720px; /* Refine 분할 워크스페이스 (RefineWorkspaceSpec.WorkspacePane — source 50 | structure 50) */ --color-surface-app: #FAF8FF; /* 분할 배경 (faint blue) */ --pane-source: 50; /* 좌 원본 비율 % (사용자 확정 5:5, 2026-06-10) */ --pane-structure: 50; /* 우 구조 비율 % */ --pane-gap: 8px; /* Typography — Noto Sans KR (디자이너 기준). 수식/코드만 mono */ --font-body: "Noto Sans KR", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; --font-display: "Noto Sans KR", -apple-system, system-ui, sans-serif; --font-mono: "JetBrains Mono", "Fira Code", Menlo, monospace; --text-style-display-large-font-size: 56px; --text-style-display-medium-font-size: 48px; --text-style-display-small-font-size: 40px; --text-style-title-large-font-size: 32px; --text-style-title-medium-font-size: 28px; --text-style-title-small-font-size: 24px; --text-style-heading-large-font-size: 22px; --text-style-heading-medium-font-size: 20px; --text-style-heading-small-font-size: 18px; --text-style-body-large-font-size: 18px; --text-style-body-medium-font-size: 16px; --text-style-body-small-font-size: 14px; --text-style-label-large-font-size: 16px; --text-style-label-medium-font-size: 14px; --text-style-label-small-font-size: 12px; --text-style-caption-medium-font-size: 12px; --text-style-caption-small-font-size: 11px; --text-style-display-line-height: 1.25; --text-style-title-line-height: 1.3; --text-style-heading-line-height: 1.4; --text-style-body-line-height: 1.6; --text-style-label-line-height: 1.4; --text-style-caption-line-height: 1.4; --text-style-weight-regular: 400; --text-style-weight-medium: 500; --text-style-weight-bold: 700; /* LatexRenderContractSpec §D144 — 해설 산문·수식 공통 세로 리듬. */ --solution-flow-line-height: var(--text-style-body-line-height); --solution-flow-line-gap: var(--space-025); /* Motion */ --motion-fast: 100ms; --motion-base: 150ms; --motion-medium: 250ms; --motion-slow: 400ms; --motion-easing: cubic-bezier(0.4, 0, 0.2, 1); /* Shadow — soft (organic). primitive(크기) + Figma role tokens */ --shadow-xs: 0 1px 2px rgba(41,41,54,0.04); --shadow-sm: 0 2px 4px rgba(41,41,54,0.06); --shadow-md: 0 4px 12px rgba(41,41,54,0.08); --shadow-lg: 0 8px 24px rgba(41,41,54,0.10); /* Foundation / Shadow — synced from Figma `Shadow/*` effect styles (nodes 477:1648, 1136:3). */ --shadow-dropdown: 0 8px 20px -4px rgba(0, 0, 0, 0.12); --shadow-modal: 0 12px 32px -8px rgba(20, 24, 31, 0.16); --shadow-card: 0 4px 12px -2px rgba(78, 89, 104, 0.10); --shadow-section: 0 8px 24px -8px rgba(78, 89, 104, 0.12); --shadow-snackbar: 0 12px 32px -8px rgba(78, 89, 104, 0.16); --effect-snackbar-bg-blur: 10px; } .kg-solution-flow { margin-top: var(--space-075); font-size: var(--text-style-body-small-font-size); line-height: var(--solution-flow-line-height); } .kg-solution-flow .kg-math { font-size: inherit; line-height: inherit; white-space: pre-line; } /* KaTeX 기본 1em 위·아래 여백은 빈 문단과 중첩돼 풀이 한 단계를 2~3줄로 만들었다. */ .kg-solution-flow .katex-display { margin-block: var(--solution-flow-line-gap); } /* Solution video scene book — @sync SolutionVideoEditorComponentsSpec §1-b. * Stitch screen 79d005d68a564e3696b01840918881b2를 기존 semantic token으로 정규화. */ .kg-video-book { margin-top: var(--margin-sm); padding: var(--pad-lg); border: 1px solid var(--semantic-border-default); border-radius: var(--radius-lg); background: var(--semantic-background-subtle); box-shadow: var(--shadow-section); } .kg-video-book__toolbar, .kg-video-job__head { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-lg); margin-bottom: var(--space-150); } .kg-video-book__spread { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-2xs); padding: var(--pad-md); border-radius: var(--radius-lg); background: var(--semantic-background-strong); } .kg-video-book__page { position: relative; min-width: 0; aspect-ratio: 16 / 9; overflow: hidden; display: grid; place-items: center; background: var(--semantic-background-default); box-shadow: var(--shadow-card); } .kg-video-book__page:first-child { border-radius: var(--radius-md) var(--radius-2xs) var(--radius-2xs) var(--radius-md); } .kg-video-book__page:nth-child(2) { border-radius: var(--radius-2xs) var(--radius-md) var(--radius-md) var(--radius-2xs); } .kg-video-book__page--empty { box-shadow: none; opacity: .52; } .kg-video-book__image { width: 100%; height: 100%; object-fit: contain; } .kg-video-book__loading { padding: var(--pad-xl); color: var(--semantic-text-tertiary); font-size: var(--text-style-body-small-font-size); text-align: center; } .kg-video-book__filmstrip { display: flex; gap: var(--gap-md); margin-top: var(--space-150); padding-bottom: var(--pad-2xs); overflow-x: auto; } .kg-video-book__thumb { flex: 0 0 70px; min-height: var(--size-md); border: 1px solid var(--semantic-border-default); border-radius: var(--radius-md); background: var(--semantic-background-default); color: var(--semantic-text-secondary); font-weight: 700; cursor: pointer; } .kg-video-book__thumb.is-active { border-color: var(--semantic-border-focus); color: var(--semantic-text-brand); box-shadow: 0 0 0 var(--space-025) var(--semantic-status-brand-subtle); } .kg-video-job { margin-top: var(--margin-sm); padding: var(--pad-xl); border-radius: var(--radius-lg); background: var(--semantic-background-inverse); color: var(--semantic-text-inverse); box-shadow: var(--shadow-modal); } .kg-video-job__stages { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap-sm); } .kg-video-job__stage { padding: var(--pad-sm); border: 1px solid var(--base-grey-700); border-radius: var(--radius-sm); color: var(--base-grey-400); font-size: var(--text-style-caption-small-font-size); font-weight: 700; text-align: center; } .kg-video-job__stage.is-active { border-color: var(--base-blue-300); color: var(--base-blue-100); background: var(--base-blue-900); } .kg-video-job__stage.is-verified { border-color: var(--base-green-300); color: var(--base-green-100); background: var(--base-green-950); } @media (max-width: 860px) { .kg-video-book__spread { grid-template-columns: 1fr; } .kg-video-book__page:nth-child(n) { border-radius: var(--radius-md); } .kg-video-job__stages { grid-template-columns: 1fr; } } * { box-sizing: border-box; } .kg-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* disabled = 별도 회색 variant 금지, opacity 30% (디자인시스템.md state 역할) */ :disabled, [aria-disabled="true"], .is-disabled { opacity: var(--state-disabled-opacity); pointer-events: none; cursor: not-allowed; } /* ════════════════════════════════════════════════ * Button component — 6 variant (디자인시스템.md Components/Button) * @sync Specs/KeepGong/DesignSystem/ButtonSpec.lean. 역할 변수만 사용. * ════════════════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--gap-xs); /* leading/trailing icon ↔ label */ height: 40px; /* Medium 기본 (W/H 토큰 바인딩 안 함, Figma 고정) */ min-width: 56px; /* size별 최소폭, 라벨 중앙정렬 */ padding: 0 var(--pad-lg); /* 좌우 16 (상하 0) */ border: none; border-radius: var(--radius-md); /* 8 */ font-family: var(--font-body); font-size: var(--text-style-label-medium-font-size); font-weight: var(--text-style-weight-medium); line-height: var(--text-style-label-line-height); letter-spacing: 0; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background var(--motion-fast) var(--motion-easing), border-color var(--motion-fast) var(--motion-easing), color var(--motion-fast) var(--motion-easing), transform var(--motion-fast) var(--motion-easing); transform-origin: center; } /* size — 높이 고정 32/40/48, 좌우 padding 12/16/20 */ .btn--sm { height: var(--size-xs); padding: 0 var(--pad-md); font-size: var(--text-style-label-small-font-size); min-width: var(--size-md); } .btn--lg { height: var(--size-md); padding: 0 var(--pad-xl); font-size: var(--text-style-label-large-font-size); min-width: var(--space-800); } /* icon-only = 정사각 (height=width) */ .btn--icon { width: 40px; min-width: 0; padding: 0; } .btn--icon.btn--sm { width: var(--size-xs); } .btn--icon.btn--lg { width: var(--size-md); } /* variants — 면(fill)/글자(text)/테두리(border) 역할 바인딩 */ .btn--cta { background: var(--semantic-fill-brand); color: var(--semantic-text-inverse); } .btn--cta:hover, .btn--cta:active { background: var(--semantic-state-brand-hover); } .btn--default { background: var(--semantic-fill-inverse); color: var(--semantic-text-inverse); } .btn--default:hover, .btn--default:active { background: var(--semantic-state-inverse-hover); } .btn--secondary { background: var(--semantic-fill-muted); color: var(--semantic-text-primary); } .btn--secondary:hover, .btn--secondary:active { background: var(--semantic-fill-strong); } .btn--tertiary { background: transparent; color: var(--semantic-text-secondary); } .btn--tertiary:hover, .btn--tertiary:active { background: var(--semantic-fill-subtle); } .btn--danger { background: var(--semantic-fill-danger); color: var(--semantic-text-inverse); } .btn--danger:hover, .btn--danger:active { background: var(--semantic-state-danger-hover); } .btn--inverse { background: var(--semantic-fill-default); color: var(--semantic-text-primary); border: 1px solid var(--semantic-border-default); } .btn--inverse:hover, .btn--inverse:active { background: var(--semantic-fill-muted); } /* pressed = hover 컬러 유지 + 중심 기준 90% visual surface (Figma Button node 52:195) */ .btn:active:not(:disabled):not([aria-disabled="true"]):not(.is-disabled) { transform: scale(var(--semantic-button-pressed-scale)); } /* disabled = opacity 30% → 위 전역 :disabled 규칙이 처리 */ /* ════════════════════════════════════════════════ * Input / Dropdown component (디자인시스템.md Components/Input·Dropdown) * @sync Specs/KeepGong/DesignSystem/InputSpec.lean. 역할 변수만 사용. * ════════════════════════════════════════════════ */ .field { --field-control-height: var(--space-500); /* Medium 40 */ --field-symbol-height: 93px; display: flex; flex-direction: column; gap: var(--gap-sm); /* 라벨↔필드 6 */ width: 100%; } .field--lg { --field-control-height: var(--space-600); --field-symbol-height: 101px; } .field--md { --field-control-height: var(--space-500); --field-symbol-height: 93px; } .field--sm { --field-control-height: var(--space-400); --field-symbol-height: 85px; } .field--symbol { min-height: var(--field-symbol-height); } .field-label { /* Label(14/Medium), 라벨 + 우측 액션 */ display: flex; justify-content: space-between; align-items: center; gap: var(--gap-md); font-size: var(--text-style-label-medium-font-size); font-weight: var(--text-style-weight-medium); line-height: var(--text-style-label-line-height); color: var(--text-secondary); } .field-action { /* 라벨 오른쪽 액션 = text/accent */ appearance: none; display: inline-flex; align-items: center; justify-content: center; min-height: 24px; margin: 0; padding: 0 var(--pad-sm); background: transparent; border: 0; border-radius: var(--radius-xs); font-size: var(--text-style-caption-medium-font-size); font-weight: var(--text-style-weight-medium); line-height: var(--text-style-caption-line-height); color: var(--text-accent); cursor: pointer; transition: background var(--motion-fast), color var(--motion-fast), box-shadow var(--motion-fast); } .field-action:hover { background: var(--state-hover); color: var(--text-accent); } .field-action:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--border-focus) 18%, transparent); } :root { --select-chevron-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNy42OTkyIDEwLjAwMDgpIj48cGF0aCBkPSJNMy43NzUgNC40NzVMMC4xNSAwLjg1QzAuMSAwLjggMC4wNjI1IDAuNzQ1ODMzIDAuMDM3NSAwLjY4NzVDMC4wMTI1IDAuNjI5MTY3IDAgMC41NjY2NjcgMCAwLjVDMCAwLjM2NjY2NyAwLjA0NTgzMzMgMC4yNSAwLjEzNzUgMC4xNUMwLjIyOTE2NyAwLjA1IDAuMzUgMCAwLjUgMEg4LjFDOC4yNSAwIDguMzcwODMgMC4wNSA4LjQ2MjUgMC4xNUM4LjU1NDE3IDAuMjUgOC42IDAuMzY2NjY3IDguNiAwLjVDOC42IDAuNTMzMzMzIDguNTUgMC42NSA4LjQ1IDAuODVMNC44MjUgNC40NzVDNC43NDE2NyA0LjU1ODMzIDQuNjU4MzMgNC42MTY2NyA0LjU3NSA0LjY1QzQuNDkxNjcgNC42ODMzMyA0LjQgNC43IDQuMyA0LjdDNC4yIDQuNyA0LjEwODMzIDQuNjgzMzMgNC4wMjUgNC42NUMzLjk0MTY3IDQuNjE2NjcgMy44NTgzMyA0LjU1ODMzIDMuNzc1IDQuNDc1WiIgZmlsbD0iYmxhY2siLz48L2c+PC9zdmc+"); } .input--lg, .select-menu--lg, .select-option--lg { --field-control-height: var(--space-600); /* 48 */ --select-option-height: var(--size-lg); /* 52 */ } .input--md, .select-menu--md, .select-option--md { --field-control-height: var(--space-500); /* 40 */ --select-option-height: var(--space-600); /* 48 */ } .input--sm, .select-menu--sm, .select-option--sm { --field-control-height: var(--space-400); /* 32 */ --select-option-height: var(--space-500); /* 40 */ } .input-control { display: inline-flex; align-items: center; gap: var(--gap-xs); width: 100%; height: var(--field-control-height); padding: 0 var(--pad-lg); background: var(--bg-page); border: 1px solid var(--border-default); border-radius: var(--radius-md); color: var(--text-primary); transition: border-color var(--motion-fast), box-shadow var(--motion-fast), background var(--motion-fast); } .input { display: block; width: 100%; min-width: 0; height: var(--field-control-height); padding: 0 var(--pad-lg); /* 16 */ background: var(--bg-page); border: 1px solid var(--border-default); border-radius: var(--radius-md); /* 8 */ font-family: var(--font-body); font-size: var(--text-style-body-medium-font-size); line-height: var(--text-style-body-line-height); color: var(--text-primary); transition: border-color var(--motion-fast), box-shadow var(--motion-fast); } .input-control .input { flex: 1 1 auto; height: 100%; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; } .input--sm.input, .input-control.input--sm .input { font-size: var(--text-style-body-small-font-size); } .input::placeholder { color: var(--text-subtle); } /* text/subtle */ .input:focus, .input.input--focused, .input-control:focus-within, .input-control.input--focused, .field--focused .input, .field--focused .input-control, .select-trigger.input--focused, .select-trigger.input--open { outline: none; border-color: var(--border-focus); /* accent */ box-shadow: 0 0 0 3px color-mix(in srgb, var(--border-focus) 15%, transparent); } .input-control .input:focus { box-shadow: none; } .input__affordance { flex: 0 0 var(--space-250); width: var(--space-250); height: var(--space-250); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; color: var(--icon-muted); font-size: var(--text-style-label-medium-font-size); line-height: 1; opacity: 1; transform: translateX(0); transition: flex-basis var(--motion-medium) var(--motion-easing), width var(--motion-medium) var(--motion-easing), margin var(--motion-medium) var(--motion-easing), opacity var(--motion-fast) var(--motion-easing), transform var(--motion-medium) var(--motion-easing); } .input__affordance--leading { margin-left: calc(var(--pad-lg) * -0.5); } .input__affordance--trailing { margin-right: calc(var(--pad-lg) * -0.5); } .input-control.input--search.input--has-value .input__affordance--search { flex-basis: 0; width: 0; margin-left: 0; opacity: 0; transform: translateX(-3px); pointer-events: none; } .input__affordance-icon, .input__clear-icon { width: var(--space-200); height: var(--space-200); display: block; } .input__clear { appearance: none; flex: 0 0 auto; width: var(--space-250); height: var(--space-250); margin-right: calc(var(--pad-lg) * -0.5); display: inline-flex; align-items: center; justify-content: center; padding: 0; background: transparent; border: 0; border-radius: var(--radius-full); color: var(--icon-muted); cursor: pointer; opacity: 1; transform: translateX(0); transition: background var(--motion-fast) var(--motion-easing), color var(--motion-fast) var(--motion-easing), box-shadow var(--motion-fast) var(--motion-easing), opacity var(--motion-fast) var(--motion-easing), transform var(--motion-medium) var(--motion-easing); } .input__clear:hover { background: var(--state-hover); color: var(--text-secondary); } .input__clear:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--border-focus) 18%, transparent); } .input__clear[hidden] { display: none; } .input-control.input--search .input::placeholder { color: var(--text-muted); } .input.input--disabled, .input-control.input--disabled, .select-trigger.input--disabled { background: var(--bg-sunken); cursor: not-allowed; } .input-control.input--disabled { opacity: var(--state-disabled-opacity); pointer-events: none; } .input-control.input--disabled .input:disabled { opacity: 1; } .field-helper { /* Caption */ font-size: var(--text-style-caption-medium-font-size); line-height: var(--text-style-caption-line-height); color: var(--text-muted); } /* error = border + helper + status color 동시 (색 하나에 의존 금지) */ .field--error .input, .field--error .input-control, .input.input--error, .input-control.input--error, .select-trigger.input--error { border-color: var(--status-danger); } .field--error .input:focus, .field--error .input-control:focus-within, .input.input--error:focus, .input-control.input--error:focus-within, .select-trigger.input--error:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-danger) 15%, transparent); } .field--error .field-helper { color: var(--status-danger); } /* Dropdown — 닫힌 field 는 .input 재사용, 열린 목록 = .select-menu */ .select-trigger { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--gap-md); width: 100%; text-align: left; cursor: pointer; } .input__value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .input__value.is-placeholder { color: var(--text-subtle); } .select-trigger__chevron { flex: 0 0 auto; width: var(--space-200); height: var(--space-200); display: inline-flex; align-items: center; justify-content: center; color: var(--icon-muted); background: currentColor; -webkit-mask: var(--select-chevron-mask) center / contain no-repeat; mask: var(--select-chevron-mask) center / contain no-repeat; mask-mode: alpha; transition: transform var(--motion-fast) var(--motion-easing); } .select-trigger.input--open .select-trigger__chevron { transform: rotate(180deg); } .select-menu { --select-option-height: var(--space-600); width: 100%; background: var(--bg-raised); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-dropdown); padding: 0; display: flex; flex-direction: column; gap: 0; height: calc(var(--select-option-height) * 4); overflow-y: auto; } .select-option { display: flex; align-items: center; gap: var(--gap-sm); width: 100%; height: var(--select-option-height); padding: 0 var(--pad-md); /* 12 */ border: 0; border-radius: var(--radius-sm); /* 6 */ background: transparent; font-family: var(--font-body); font-size: var(--text-style-label-medium-font-size); font-weight: var(--text-style-weight-medium); line-height: var(--text-style-label-line-height); color: var(--text-primary); text-align: left; cursor: pointer; } .select-option:hover, .select-option--hover { background: var(--semantic-fill-muted); } .select-option[aria-selected="true"], .select-option.is-selected { background: var(--state-selected); /* accent bg */ color: var(--text-accent); } .select-option__check { flex: 0 0 var(--space-200); width: var(--space-200); color: currentColor; visibility: hidden; line-height: 1; } .select-option[aria-selected="true"] .select-option__check, .select-option.is-selected .select-option__check { visibility: visible; } /* option disabled = opacity 30% → 전역 :disabled / .is-disabled 규칙 */ /* ════════════════════════════════════════════════ * Tab component (디자인시스템.md Components/Tab) * @sync Specs/KeepGong/DesignSystem/TabSpec.lean. 역할 변수만 사용. * ════════════════════════════════════════════════ */ :root { --tab-capsule-page-info-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIj4KPHN2ZyB4PSIyLjUwMDgiIHk9IjMuNzQ4OCIgd2lkdGg9IjE5IiBoZWlnaHQ9IjE2LjUiIHZpZXdCb3g9IjAgMCAxOSAxNi41IiBvdmVyZmxvdz0idmlzaWJsZSIgZmlsbD0ibm9uZSI+PHBhdGggaWQ9InBhZ2VfaW5mbyIgZD0iTTEyLjU4NzUgMTUuNDEyNUMxMS44NjI1IDE0LjY4NzUgMTEuNSAxMy44IDExLjUgMTIuNzVDMTEuNSAxMS43IDExLjg2MjUgMTAuODEyNSAxMi41ODc1IDEwLjA4NzVDMTMuMzEyNSA5LjM2MjUgMTQuMiA5IDE1LjI1IDlDMTYuMyA5IDE3LjE4NzUgOS4zNjI1IDE3LjkxMjUgMTAuMDg3NUMxOC42Mzc1IDEwLjgxMjUgMTkgMTEuNyAxOSAxMi43NUMxOSAxMy44IDE4LjYzNzUgMTQuNjg3NSAxNy45MTI1IDE1LjQxMjVDMTcuMTg3NSAxNi4xMzc1IDE2LjMgMTYuNSAxNS4yNSAxNi41QzE0LjIgMTYuNSAxMy4zMTI1IDE2LjEzNzUgMTIuNTg3NSAxNS40MTI1Wk0xNi40ODc1IDEzLjk4NzVDMTYuODI5MiAxMy42NDU4IDE3IDEzLjIzMzMgMTcgMTIuNzVDMTcgMTIuMjY2NyAxNi44MjkyIDExLjg1NDIgMTYuNDg3NSAxMS41MTI1QzE2LjE0NTggMTEuMTcwOCAxNS43MzMzIDExIDE1LjI1IDExQzE0Ljc2NjcgMTEgMTQuMzU0MiAxMS4xNzA4IDE0LjAxMjUgMTEuNTEyNUMxMy42NzA4IDExLjg1NDIgMTMuNSAxMi4yNjY3IDEzLjUgMTIuNzVDMTMuNSAxMy4yMzMzIDEzLjY3MDggMTMuNjQ1OCAxNC4wMTI1IDEzLjk4NzVDMTQuMzU0MiAxNC4zMjkyIDE0Ljc2NjcgMTQuNSAxNS4yNSAxNC41QzE1LjczMzMgMTQuNSAxNi4xNDU4IDE0LjMyOTIgMTYuNDg3NSAxMy45ODc1Wk04LjUgMTMuNzVIMi41QzIuMjE2NjcgMTMuNzUgMS45NzkxNyAxMy42NTQyIDEuNzg3NSAxMy40NjI1QzEuNTk1ODMgMTMuMjcwOCAxLjUgMTMuMDMzMyAxLjUgMTIuNzVDMS41IDEyLjQ2NjcgMS41OTU4MyAxMi4yMjkyIDEuNzg3NSAxMi4wMzc1QzEuOTc5MTcgMTEuODQ1OCAyLjIxNjY3IDExLjc1IDIuNSAxMS43NUg4LjVDOC43ODMzMyAxMS43NSA5LjAyMDgzIDExLjg0NTggOS4yMTI1IDEyLjAzNzVDOS40MDQxNyAxMi4yMjkyIDkuNSAxMi40NjY3IDkuNSAxMi43NUM5LjUgMTMuMDMzMyA5LjQwNDE3IDEzLjI3MDggOS4yMTI1IDEzLjQ2MjVDOS4wMjA4MyAxMy42NTQyIDguNzgzMzMgMTMuNzUgOC41IDEzLjc1Wk0xLjA4NzUgNi40MTI1QzAuMzYyNSA1LjY4NzUgMCA0LjggMCAzLjc1QzAgMi43IDAuMzYyNSAxLjgxMjUgMS4wODc1IDEuMDg3NUMxLjgxMjUgMC4zNjI1IDIuNyAwIDMuNzUgMEM0LjggMCA1LjY4NzUgMC4zNjI1IDYuNDEyNSAxLjA4NzVDNy4xMzc1IDEuODEyNSA3LjUgMi43IDcuNSAzLjc1QzcuNSA0LjggNy4xMzc1IDUuNjg3NSA2LjQxMjUgNi40MTI1QzUuNjg3NSA3LjEzNzUgNC44IDcuNSAzLjc1IDcuNUMyLjcgNy41IDEuODEyNSA3LjEzNzUgMS4wODc1IDYuNDEyNVpNNC45ODc1IDQuOTg3NUM1LjMyOTE3IDQuNjQ1ODMgNS41IDQuMjMzMzMgNS41IDMuNzVDNS41IDMuMjY2NjcgNS4zMjkxNyAyLjg1NDE3IDQuOTg3NSAyLjUxMjVDNC42NDU4MyAyLjE3MDgzIDQuMjMzMzMgMiAzLjc1IDJDMy4yNjY2NyAyIDIuODU0MTcgMi4xNzA4MyAyLjUxMjUgMi41MTI1QzIuMTcwODMgMi44NTQxNyAyIDMuMjY2NjcgMiAzLjc1QzIgNC4yMzMzMyAyLjE3MDgzIDQuNjQ1ODMgMi41MTI1IDQuOTg3NUMyLjg1NDE3IDUuMzI5MTcgMy4yNjY2NyA1LjUgMy43NSA1LjVDNC4yMzMzMyA1LjUgNC42NDU4MyA1LjMyOTE3IDQuOTg3NSA0Ljk4NzVaTTE2LjUgNC43NUgxMC41QzEwLjIxNjcgNC43NSA5Ljk3OTE3IDQuNjU0MTcgOS43ODc1IDQuNDYyNUM5LjU5NTgzIDQuMjcwODMgOS41IDQuMDMzMzMgOS41IDMuNzVDOS41IDMuNDY2NjcgOS41OTU4MyAzLjIyOTE3IDkuNzg3NSAzLjAzNzVDOS45NzkxNyAyLjg0NTgzIDEwLjIxNjcgMi43NSAxMC41IDIuNzVIMTYuNUMxNi43ODMzIDIuNzUgMTcuMDIwOCAyLjg0NTgzIDE3LjIxMjUgMy4wMzc1QzE3LjQwNDIgMy4yMjkxNyAxNy41IDMuNDY2NjcgMTcuNSAzLjc1QzE3LjUgNC4wMzMzMyAxNy40MDQyIDQuMjcwODMgMTcuMjEyNSA0LjQ2MjVDMTcuMDIwOCA0LjY1NDE3IDE2Ljc4MzMgNC43NSAxNi41IDQuNzVaIiBmaWxsPSJibGFjayIvPjwvc3ZnPgo8L3N2Zz4="); } /* 1depth line tab — Label/Large + hug padding + primary underline */ .tabs--line { position: relative; display: inline-flex; gap: var(--gap-none); border-bottom: 1px solid var(--border-divider); } .tabs--line__indicator { position: absolute; bottom: 0; left: 0; width: var(--tab-line-indicator-width, 0px); height: 2px; background: var(--text-primary); opacity: var(--tab-line-indicator-opacity, 0); transform: translateX(var(--tab-line-indicator-x, 0px)); transition: transform var(--motion-medium) var(--motion-easing), width var(--motion-medium) var(--motion-easing), opacity var(--motion-fast) var(--motion-easing); pointer-events: none; } .tab--line { position: relative; display: inline-flex; align-items: center; justify-content: center; height: auto; min-width: 0; padding: var(--pad-sm) var(--pad-md) calc(var(--pad-sm) + 2px); background: none; border: none; font-family: var(--font-body); font-size: var(--text-style-label-large-font-size); font-weight: var(--text-style-weight-regular); line-height: var(--text-style-label-line-height); letter-spacing: 0; color: var(--text-muted); cursor: pointer; transition: color var(--motion-fast) var(--motion-easing), font-weight var(--motion-fast) var(--motion-easing); } .tab--line:hover, .tab--line.tab--hover { color: var(--text-secondary); font-weight: var(--text-style-weight-bold); } .tab--line.is-selected { color: var(--text-primary); font-weight: var(--text-style-weight-bold); } .tab--line.is-selected::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: var(--text-primary); } .tabs--line.has-moving-indicator .tab--line.is-selected::after { display: none; } .tab--line:disabled, .tab--line.tab--disabled { color: var(--semantic-text-disabled); font-weight: var(--text-style-weight-regular); pointer-events: none; cursor: not-allowed; } /* 2depth capsule tab — Label/Medium-Medium 14px + 채워진 pill */ .tabs--capsule { position: relative; display: inline-flex; align-items: center; gap: var(--gap-none); min-height: var(--size-md); /* track/example height 48 */ padding: var(--space-050); background: var(--semantic-fill-muted); border-radius: var(--radius-xl); overflow: hidden; } .tabs--capsule--sm { min-height: var(--size-xs); /* track height 32 */ padding: var(--pad-2xs); /* 2px inset -> 28px metric */ } .tabs--capsule__indicator { position: absolute; top: var(--space-050); left: 0; width: var(--tab-capsule-indicator-width, 0px); height: calc(100% - (var(--space-050) * 2)); border-radius: var(--radius-lg); background: var(--semantic-fill-default); opacity: var(--tab-capsule-indicator-opacity, 0); transform: translateX(var(--tab-capsule-indicator-x, var(--space-050))); transition: transform var(--motion-medium) var(--motion-easing), width var(--motion-medium) var(--motion-easing), opacity var(--motion-fast) var(--motion-easing); pointer-events: none; } .tabs--capsule--sm .tabs--capsule__indicator { top: var(--pad-2xs); height: calc(100% - (var(--pad-2xs) * 2)); transform: translateX(var(--tab-capsule-indicator-x, var(--pad-2xs))); } .tab--capsule { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--gap-sm); height: var(--space-500); /* 40 */ padding: 0 var(--pad-lg); border: none; border-radius: var(--radius-lg); font-family: var(--font-body); font-size: var(--text-style-label-medium-font-size); font-weight: var(--text-style-weight-medium); line-height: var(--text-style-label-line-height); letter-spacing: 0; color: var(--text-muted); background: transparent; cursor: pointer; transition: background var(--motion-fast) var(--motion-easing), color var(--motion-fast) var(--motion-easing); } .tab--capsule:hover, .tab--capsule.tab--hover { background: var(--state-hover); color: var(--text-secondary); } .tab--capsule.is-selected { background: var(--semantic-fill-default); color: var(--text-primary); } .tabs--capsule.has-moving-indicator .tab--capsule.is-selected, .tabs--capsule.has-moving-indicator .tab--capsule.is-selected:hover { background: transparent; } @media (prefers-reduced-motion: reduce) { .tabs--line__indicator, .tabs--capsule__indicator { transition: none; } } .tab--capsule--text-only { min-width: 58px; overflow: hidden; } .tab--capsule--text-icon { min-width: 80px; overflow: hidden; } .tab--capsule--icon-only { width: var(--space-500); min-width: var(--space-500); padding: 0; } .tabs--capsule--sm .tab--capsule { height: 28px; } .tabs--capsule--sm .tab--capsule--icon-only { width: 28px; min-width: 28px; } .tab--capsule__icon { flex: 0 0 auto; display: block; width: var(--space-200); height: var(--space-200); color: currentColor; } .tab--capsule__icon--page-info { background: currentColor; -webkit-mask: var(--tab-capsule-page-info-mask) center / contain no-repeat; mask: var(--tab-capsule-page-info-mask) center / contain no-repeat; mask-mode: alpha; } .tab--capsule__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tab--capsule:disabled, .tab--capsule.tab--disabled { opacity: var(--state-disabled-opacity); pointer-events: none; cursor: not-allowed; } /* ════════════════════════════════════════════════ * Checkbox / Radio (디자인시스템.md Components/Checkbox·Radio) * @sync Specs/KeepGong/DesignSystem/CheckboxRadioSpec.lean * ════════════════════════════════════════════════ */ .check, .radio { box-sizing: border-box; display: inline-flex; align-items: center; width: min(100%, 360px); height: 44px; min-height: 44px; gap: var(--gap-md); padding: 0; border: none; border-radius: 0; background: transparent; cursor: pointer; transition: opacity var(--motion-fast) var(--motion-easing); } .check__box, .radio__box { flex: 0 0 24px; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-page); border: 1.5px solid var(--border-default); color: var(--text-inverse); /* 체크/점 아이콘 색 */ font-size: 13px; transition: background var(--motion-fast), border-color var(--motion-fast), box-shadow var(--motion-fast) var(--motion-easing); } .check__box { border-radius: var(--radius-xs); } /* 작은 사각 */ .radio__box { position: relative; border-radius: var(--radius-full); color: transparent; font-size: 0; } /* 선택 = fill/primary 면 + accent 테두리 (+ 안의 아이콘) 함께 */ .check.is-checked .check__box, .check.is-indeterminate .check__box { background: var(--fill-primary); border-color: var(--fill-primary); } .radio.is-checked .radio__box { background: var(--bg-page); border: 2px solid var(--fill-primary); } .radio.is-checked .radio__box::after { content: ""; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--fill-primary); } .check.is-focused .check__box, .radio.is-focused .radio__box, .check:focus-within .check__box, .radio:focus-within .radio__box { border-color: var(--border-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--border-focus) 18%, transparent); } .check__copy, .radio__copy { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; overflow: hidden; line-height: 1.4; } .check__label, .radio__label { color: var(--text-primary); font-size: var(--text-style-label-large-font-size); font-weight: var(--text-style-weight-medium); line-height: var(--text-style-label-line-height); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .check__description, .radio__description { color: var(--text-secondary); font-size: var(--text-style-caption-medium-font-size); font-weight: var(--text-style-weight-regular); line-height: var(--text-style-caption-line-height); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ════════════════════════════════════════════════ * Number Stepper (디자인시스템.md Components/Number Stepper) * @sync Specs/KeepGong/DesignSystem/NumberStepperSpec.lean * ════════════════════════════════════════════════ */ .stepper { --stepper-width: 144px; --stepper-height: var(--size-md); --stepper-action-size: var(--space-400); --stepper-icon-remove-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIj4KPHN2ZyB4PSI0Ljk5OTIiIHk9IjEwLjk5OTIiIHdpZHRoPSIxNCIgaGVpZ2h0PSIyIiB2aWV3Qm94PSIwIDAgMTQgMiIgb3ZlcmZsb3c9InZpc2libGUiIGZpbGw9Im5vbmUiPjxwYXRoIGlkPSJyZW1vdmUiIGQ9Ik0xIDJDMC43MTY2NjcgMiAwLjQ3OTE2NyAxLjkwNDE3IDAuMjg3NSAxLjcxMjVDMC4wOTU4MzMzIDEuNTIwODMgMCAxLjI4MzMzIDAgMUMwIDAuNzE2NjY3IDAuMDk1ODMzMyAwLjQ3OTE2NyAwLjI4NzUgMC4yODc1QzAuNDc5MTY3IDAuMDk1ODMzMyAwLjcxNjY2NyAwIDEgMEgxM0MxMy4yODMzIDAgMTMuNTIwOCAwLjA5NTgzMzMgMTMuNzEyNSAwLjI4NzVDMTMuOTA0MiAwLjQ3OTE2NyAxNCAwLjcxNjY2NyAxNCAxQzE0IDEuMjgzMzMgMTMuOTA0MiAxLjUyMDgzIDEzLjcxMjUgMS43MTI1QzEzLjUyMDggMS45MDQxNyAxMy4yODMzIDIgMTMgMkgxWiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+Cjwvc3ZnPgo="); --stepper-icon-add-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIj4KPHN2ZyB4PSI0Ljk5OTIiIHk9IjQuOTk5MiIgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiB2aWV3Qm94PSIwIDAgMTQgMTQiIG92ZXJmbG93PSJ2aXNpYmxlIiBmaWxsPSJub25lIj48cGF0aCBpZD0iYWRkIiBkPSJNNiA4SDFDMC43MTY2NjcgOCAwLjQ3OTE2NyA3LjkwNDE3IDAuMjg3NSA3LjcxMjVDMC4wOTU4MzMzIDcuNTIwODMgMCA3LjI4MzMzIDAgN0MwIDYuNzE2NjcgMC4wOTU4MzMzIDYuNDc5MTcgMC4yODc1IDYuMjg3NUMwLjQ3OTE2NyA2LjA5NTgzIDAuNzE2NjY3IDYgMSA2SDZWMUM2IDAuNzE2NjY3IDYuMDk1ODMgMC40NzkxNjcgNi4yODc1IDAuMjg3NUM2LjQ3OTE3IDAuMDk1ODMzMyA2LjcxNjY3IDAgNyAwQzcuMjgzMzMgMCA3LjUyMDgzIDAuMDk1ODMzMyA3LjcxMjUgMC4yODc1QzcuOTA0MTcgMC40NzkxNjcgOCAwLjcxNjY2NyA4IDFWNkgxM0MxMy4yODMzIDYgMTMuNTIwOCA2LjA5NTgzIDEzLjcxMjUgNi4yODc1QzEzLjkwNDIgNi40NzkxNyAxNCA2LjcxNjY3IDE0IDdDMTQgNy4yODMzMyAxMy45MDQyIDcuNTIwODMgMTMuNzEyNSA3LjcxMjVDMTMuNTIwOCA3LjkwNDE3IDEzLjI4MzMgOCAxMyA4SDhWMTNDOCAxMy4yODMzIDcuOTA0MTcgMTMuNTIwOCA3LjcxMjUgMTMuNzEyNUM3LjUyMDgzIDEzLjkwNDIgNy4yODMzMyAxNCA3IDE0QzYuNzE2NjcgMTQgNi40NzkxNyAxMy45MDQyIDYuMjg3NSAxMy43MTI1QzYuMDk1ODMgMTMuNTIwOCA2IDEzLjI4MzMgNiAxM1Y4WiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+Cjwvc3ZnPgo="); box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: var(--gap-xs); width: var(--stepper-width); height: var(--stepper-height); padding: var(--pad-sm); background: var(--bg-page); border: 1.5px solid var(--border-default); border-radius: var(--radius-full); transition: border-color var(--motion-fast) var(--motion-easing), background var(--motion-fast) var(--motion-easing); } .stepper--md { --stepper-width: 144px; --stepper-height: var(--size-md); --stepper-action-size: var(--space-400); } .stepper--sm { --stepper-width: 128px; --stepper-height: var(--space-500); --stepper-action-size: var(--space-300); } .stepper--focused { background: var(--semantic-fill-subtle); border-color: var(--border-focus); border-width: 2px; } .stepper:focus-within { background: var(--semantic-fill-subtle); border-color: var(--border-focus); border-width: 2px; } .stepper:has(.stepper__btn:hover:not(:disabled)), .stepper:has(.stepper__btn.stepper__btn--hover:not(:disabled)), .stepper:has(.stepper__btn.is-hover:not(:disabled)) { border-color: var(--border-strong); } .stepper__btn { /* minus / plus — 개별 hover */ flex: 0 0 var(--stepper-action-size); width: var(--stepper-action-size); height: var(--stepper-action-size); align-self: center; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; border-radius: var(--radius-full); color: var(--text-secondary); font-size: 0; cursor: pointer; } .stepper__btn:hover:not(:disabled), .stepper__btn.stepper__btn--hover:not(:disabled), .stepper__btn.is-hover:not(:disabled) { background: var(--semantic-fill-muted); } .stepper__btn::before { content: ""; width: var(--space-300); height: var(--space-300); background: currentColor; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: var(--space-300) var(--space-300); mask-size: var(--space-300) var(--space-300); -webkit-mask-mode: alpha; mask-mode: alpha; } .stepper__btn[aria-label="감소"]::before { -webkit-mask-image: var(--stepper-icon-remove-mask); mask-image: var(--stepper-icon-remove-mask); } .stepper__btn[aria-label="증가"]::before { -webkit-mask-image: var(--stepper-icon-add-mask); mask-image: var(--stepper-icon-add-mask); } /* 최소값 minus 비활성 = action opacity 25% (전역 disabled row 는 .is-disabled opacity 30%) */ .stepper__btn:disabled { opacity: 0.25; cursor: not-allowed; } .stepper__value { /* 중앙 정렬, Label/Large-Medium */ flex: 0 0 56px; width: 56px; height: 100%; min-width: 0; display: inline-flex; align-items: center; justify-content: center; text-align: center; padding: 0; border: 0; background: transparent; outline: none; font-size: var(--text-style-label-large-font-size); font-weight: var(--text-style-weight-medium); line-height: var(--text-style-label-line-height); color: var(--text-primary); font-family: inherit; appearance: textfield; } .stepper__value::-webkit-outer-spin-button, .stepper__value::-webkit-inner-spin-button { appearance: none; margin: 0; } .stepper--sm .stepper__value { font-size: var(--text-style-label-medium-font-size); } /* ════════════════════════════════════════════════ * Badge / Tag Chip (디자인시스템.md Components/Badge·Label·Tag Chip) * @sync Specs/KeepGong/DesignSystem/BadgeChipSpec.lean. Label = .type-label. * ════════════════════════════════════════════════ */ .badge { /* Caption/Small-Medium 11px + small-only 24px pill */ --badge-soft-bg: var(--semantic-status-neutral-soft-fill); --badge-soft-text: var(--text-secondary); --badge-solid-bg: var(--semantic-status-neutral-solid-fill); --badge-solid-text: var(--semantic-text-inverse); --badge-outline-border: var(--semantic-border-strong); --badge-outline-text: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; height: var(--space-300); padding: 0 10px; border: 1px solid transparent; border-radius: var(--radius-full); gap: var(--gap-xs); font-size: var(--text-style-caption-small-font-size); font-weight: var(--text-style-weight-medium); line-height: var(--text-style-caption-line-height); white-space: nowrap; } .badge--neutral { --badge-soft-bg: var(--semantic-status-neutral-soft-fill); --badge-soft-text: var(--text-secondary); --badge-solid-bg: var(--semantic-status-neutral-solid-fill); --badge-solid-text: var(--semantic-text-inverse); --badge-outline-border: var(--semantic-border-strong); --badge-outline-text: var(--text-secondary); } .badge--brand { --badge-soft-bg: var(--semantic-status-brand-soft-fill); --badge-soft-text: var(--semantic-status-brand-content-strong); --badge-solid-bg: var(--semantic-fill-brand); --badge-solid-text: var(--semantic-text-inverse); --badge-outline-border: var(--semantic-status-brand-subtle); --badge-outline-text: var(--semantic-status-brand-content-strong); } .badge--secondary { --badge-soft-bg: var(--semantic-status-secondary-soft-fill); --badge-soft-text: var(--semantic-status-secondary-content); --badge-solid-bg: var(--semantic-status-secondary-content); --badge-solid-text: var(--semantic-text-inverse); --badge-outline-border: var(--semantic-status-secondary-border); --badge-outline-text: var(--semantic-status-secondary-content); } .badge--success { --badge-soft-bg: var(--semantic-status-success-soft-fill); --badge-soft-text: var(--semantic-text-success); --badge-solid-bg: var(--semantic-fill-success); --badge-solid-text: var(--semantic-text-inverse); --badge-outline-border: var(--semantic-status-success-border); --badge-outline-text: var(--semantic-text-success); } .badge--warning { --badge-soft-bg: var(--semantic-status-warning-soft-fill); --badge-soft-text: var(--semantic-text-warning); --badge-solid-bg: var(--semantic-fill-warning); --badge-solid-text: var(--semantic-text-primary); --badge-outline-border: var(--semantic-status-warning-border); --badge-outline-text: var(--semantic-text-warning); } .badge--danger { --badge-soft-bg: var(--semantic-status-danger-soft-fill); --badge-soft-text: var(--semantic-text-danger); --badge-solid-bg: var(--semantic-fill-danger); --badge-solid-text: var(--semantic-text-inverse); --badge-outline-border: var(--semantic-status-danger-border); --badge-outline-text: var(--semantic-text-danger); } .badge--info { --badge-soft-bg: var(--semantic-status-info-soft-fill); --badge-soft-text: var(--semantic-status-info-solid-fill); --badge-solid-bg: var(--semantic-status-info-solid-fill); --badge-solid-text: var(--semantic-text-inverse); --badge-outline-border: var(--semantic-status-info-border); --badge-outline-text: var(--semantic-status-info-solid-fill); } .badge--soft { background: var(--badge-soft-bg); color: var(--badge-soft-text); border-color: transparent; } .badge--solid { background: var(--badge-solid-bg); color: var(--badge-solid-text); border-color: transparent; } .badge--outline { background: transparent; color: var(--badge-outline-text); border-color: var(--badge-outline-border); } /* Tag Chip Neutral / Medium — Figma 162:54, 162:78, 162:102, 162:126. */ .chip { --chip-height: var(--space-500); --chip-border-width: 1.5px; --chip-letter-spacing: -0.01em; --chip-disabled-opacity: 0.65; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; gap: var(--gap-sm); height: var(--chip-height); padding: 0 var(--pad-lg); border: var(--chip-border-width) solid var(--semantic-border-default); border-radius: var(--radius-full); font-family: var(--font-body); font-size: var(--text-style-body-small-font-size); font-weight: var(--text-style-weight-bold); line-height: var(--text-style-body-line-height); letter-spacing: var(--chip-letter-spacing); white-space: nowrap; cursor: pointer; } .chip--neutral { background: var(--semantic-fill-default); color: var(--semantic-text-primary); } .chip--neutral:hover:not(:disabled):not(.is-selected) { background: var(--semantic-fill-subtle); border-color: var(--semantic-border-strong); } .chip--neutral.is-selected { background: var(--semantic-fill-inverse); border-color: var(--semantic-fill-inverse); color: var(--semantic-text-inverse); } .chip--neutral:disabled { background: var(--semantic-fill-subtle); border-color: var(--semantic-border-default); color: var(--semantic-text-disabled); opacity: var(--chip-disabled-opacity); cursor: not-allowed; } .chip:has(> .chip__dismiss-icon) { padding-inline-end: calc(var(--pad-lg) * 0.75); } .chip__dismiss-icon { flex: none; width: var(--space-300); height: var(--space-300); background: currentColor; mask: url("/assets/icons/close_small.svg") center / contain no-repeat; } .chip__remove { color: var(--text-muted); font-size: var(--text-style-caption-medium-font-size); cursor: pointer; } /* ════════════════════════════════════════════════ * Bullet (디자인시스템.md Components/Bullet) * @sync Specs/KeepGong/DesignSystem/BulletSpec.lean * ════════════════════════════════════════════════ */ :root { --bullet-line-caption-small: 15px; --bullet-line-caption-medium: 17px; --bullet-line-label-medium: 20px; --bullet-line-body-small: 22px; --bullet-line-body-medium: 26px; --bullet-line-heading-medium: 28px; --bullet-line-body-large: 29px; --bullet-dot-size: 34%; --bullet-ring-size: 58%; --bullet-shape-size: 48%; --bullet-dash-width: 56%; --bullet-dash-height: 2px; --bullet-symbol-size: 82%; --bullet-number-size: 58%; --bullet-arrow-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNC4wMDA4IDYuNDM2OCkiPjxwYXRoIGQ9Ik0xMi4xNSA2LjU2M0gxQzAuNzE2NjY3IDYuNTYzIDAuNDc5MTY3IDYuNDY3MTcgMC4yODc1IDYuMjc1NUMwLjA5NTgzMzMgNi4wODM4MyAwIDUuODQ2MzMgMCA1LjU2M0MwIDUuMjc5NjcgMC4wOTU4MzMzIDUuMDQyMTcgMC4yODc1IDQuODUwNUMwLjQ3OTE2NyA0LjY1ODgzIDAuNzE2NjY3IDQuNTYzIDEgNC41NjNIMTIuMTVMOS4zIDEuNzEzQzkuMSAxLjUxMyA5LjAwNDE3IDEuMjc5NjcgOS4wMTI1IDEuMDEzQzkuMDIwODMgMC43NDYzMzMgOS4xMTY2NyAwLjUxMyA5LjMgMC4zMTNDOS41IDAuMTEzIDkuNzM3NSAwLjAwODgzMzMzIDEwLjAxMjUgMC4wMDA1QzEwLjI4NzUgLTAuMDA3ODMzMzMgMTAuNTI1IDAuMDg4IDEwLjcyNSAwLjI4OEwxNS4zIDQuODYzQzE1LjQgNC45NjMgMTUuNDcwOCA1LjA3MTMzIDE1LjUxMjUgNS4xODhDMTUuNTU0MiA1LjMwNDY3IDE1LjU3NSA1LjQyOTY3IDE1LjU3NSA1LjU2M0MxNS41NzUgNS42OTYzMyAxNS41NTQyIDUuODIxMzMgMTUuNTEyNSA1LjkzOEMxNS40NzA4IDYuMDU0NjcgMTUuNCA2LjE2MyAxNS4zIDYuMjYzTDEwLjcyNSAxMC44MzhDMTAuNTI1IDExLjAzOCAxMC4yODc1IDExLjEzMzggMTAuMDEyNSAxMS4xMjU1QzkuNzM3NSAxMS4xMTcyIDkuNSAxMS4wMTMgOS4zIDEwLjgxM0M5LjExNjY3IDEwLjYxMyA5LjAyMDgzIDEwLjM3OTcgOS4wMTI1IDEwLjExM0M5LjAwNDE3IDkuODQ2MzMgOS4xIDkuNjEzIDkuMyA5LjQxM0wxMi4xNSA2LjU2M1oiIGZpbGw9ImJsYWNrIi8+PC9nPjwvc3ZnPg=="); --bullet-check-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNi40MjQ4IDcuNDI1NikiPjxwYXRoIGQ9Ik0zLjU3NSA2LjE3NUw5LjQ3NSAwLjI3NUM5LjY1ODMzIDAuMDkxNjY2NyA5Ljg5MTY3IDAgMTAuMTc1IDBDMTAuNDU4MyAwIDEwLjY5MTcgMC4wOTE2NjY3IDEwLjg3NSAwLjI3NUMxMS4wNTgzIDAuNDU4MzMzIDExLjE1IDAuNjkxNjY3IDExLjE1IDAuOTc1QzExLjE1IDEuMjU4MzMgMTEuMDU4MyAxLjQ5MTY3IDEwLjg3NSAxLjY3NUw0LjI3NSA4LjI3NUM0LjA3NSA4LjQ3NSAzLjg0MTY3IDguNTc1IDMuNTc1IDguNTc1QzMuMzA4MzMgOC41NzUgMy4wNzUgOC40NzUgMi44NzUgOC4yNzVMMC4yNzUgNS42NzVDMC4wOTE2NjY3IDUuNDkxNjcgMCA1LjI1ODMzIDAgNC45NzVDMCA0LjY5MTY3IDAuMDkxNjY2NyA0LjQ1ODMzIDAuMjc1IDQuMjc1QzAuNDU4MzMzIDQuMDkxNjcgMC42OTE2NjcgNCAwLjk3NSA0QzEuMjU4MzMgNCAxLjQ5MTY3IDQuMDkxNjcgMS42NzUgNC4yNzVMMy41NzUgNi4xNzVaIiBmaWxsPSJibGFjayIvPjwvZz48L3N2Zz4="); } .bullet { --bullet-frame-size: var(--bullet-line-body-medium); flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: var(--bullet-frame-size); height: var(--bullet-frame-size); color: var(--text-secondary); font-size: var(--bullet-frame-size); line-height: 1; } .bullet--line-caption-small { --bullet-frame-size: var(--bullet-line-caption-small); } .bullet--line-caption-medium { --bullet-frame-size: var(--bullet-line-caption-medium); } .bullet--line-label-medium { --bullet-frame-size: var(--bullet-line-label-medium); } .bullet--line-body-small { --bullet-frame-size: var(--bullet-line-body-small); } .bullet--line-body-medium { --bullet-frame-size: var(--bullet-line-body-medium); } .bullet--line-heading-medium { --bullet-frame-size: var(--bullet-line-heading-medium); } .bullet--line-body-large { --bullet-frame-size: var(--bullet-line-body-large); } .bullet__dot, .bullet__ring, .bullet__square, .bullet__diamond, .bullet__dash, .bullet__arrow, .bullet__check, .bullet__asterisk, .bullet__num { display: inline-flex; align-items: center; justify-content: center; color: currentColor; font-family: var(--font-body); line-height: 1; } .bullet__dot { width: var(--bullet-dot-size); height: var(--bullet-dot-size); border-radius: var(--radius-full); background: currentColor; } .bullet__ring { width: var(--bullet-ring-size); height: var(--bullet-ring-size); border: 2px solid currentColor; border-radius: var(--radius-full); } .bullet__square { width: var(--bullet-shape-size); height: var(--bullet-shape-size); background: currentColor; } .bullet__diamond { width: var(--bullet-shape-size); height: var(--bullet-shape-size); background: currentColor; transform: rotate(45deg); } .bullet__dash { width: var(--bullet-dash-width); height: var(--bullet-dash-height); border-radius: var(--radius-full); background: currentColor; } .bullet__arrow { width: var(--bullet-symbol-size); height: var(--bullet-symbol-size); background-color: var(--text-secondary); -webkit-mask: var(--bullet-arrow-mask) center / contain no-repeat; mask: var(--bullet-arrow-mask) center / contain no-repeat; mask-mode: alpha; } .bullet__check { width: var(--bullet-symbol-size); height: var(--bullet-symbol-size); background-color: var(--text-secondary); -webkit-mask: var(--bullet-check-mask) center / contain no-repeat; mask: var(--bullet-check-mask) center / contain no-repeat; mask-mode: alpha; } .bullet__asterisk::before { content: "*"; font-size: var(--bullet-symbol-size); font-weight: var(--text-style-weight-bold); line-height: 1; } .bullet__num { box-sizing: border-box; width: 100%; height: 100%; border-radius: var(--radius-full); font-size: var(--bullet-number-size); font-weight: var(--text-style-weight-bold); font-variant-numeric: tabular-nums; } .bullet__num--color { background: var(--fill-primary); color: var(--text-inverse); } .bullet__num--neutral { background: var(--bg-page); border: 1px solid var(--border-default); color: var(--text-secondary); } /* ════════════════════════════════════════════════ * Folder Tree (디자인시스템.md Components/Folder Tree) * @sync Specs/KeepGong/DesignSystem/FolderTreeSpec.lean * depth 는 row 의 --depth 커스텀 프로퍼티로 (left = 16 + 24 * depth). * ════════════════════════════════════════════════ */ :root { --tree-arrow-right-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIj4KPHN2ZyB4PSIxMC4wMDA4IiB5PSI3LjAwMDgiIHdpZHRoPSI1IiBoZWlnaHQ9IjEwIiB2aWV3Qm94PSIwIDAgNSAxMCIgb3ZlcmZsb3c9InZpc2libGUiIGZpbGw9Im5vbmUiPjxwYXRoIGlkPSJhcnJvd19yaWdodCIgZD0iTTAgMTBWMEw1IDVMMCAxMFoiIGZpbGw9ImJsYWNrIi8+PC9zdmc+Cjwvc3ZnPg=="); --tree-arrow-drop-down-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIj4KPHN2ZyB4PSI3LjY5OTIiIHk9IjEwLjAwMDgiIHdpZHRoPSI4LjYiIGhlaWdodD0iNC43IiB2aWV3Qm94PSIwIDAgOC42IDQuNyIgb3ZlcmZsb3c9InZpc2libGUiIGZpbGw9Im5vbmUiPjxwYXRoIGlkPSJhcnJvd19kcm9wX2Rvd24iIGQ9Ik0zLjc3NSA0LjQ3NUwwLjE1IDAuODVDMC4xIDAuOCAwLjA2MjUgMC43NDU4MzMgMC4wMzc1IDAuNjg3NUMwLjAxMjUgMC42MjkxNjcgMCAwLjU2NjY2NyAwIDAuNUMwIDAuMzY2NjY3IDAuMDQ1ODMzMyAwLjI1IDAuMTM3NSAwLjE1QzAuMjI5MTY3IDAuMDUgMC4zNSAwIDAuNSAwSDguMUM4LjI1IDAgOC4zNzA4MyAwLjA1IDguNDYyNSAwLjE1QzguNTU0MTcgMC4yNSA4LjYgMC4zNjY2NjcgOC42IDAuNUM4LjYgMC41MzMzMzMgOC41NSAwLjY1IDguNDUgMC44NUw0LjgyNSA0LjQ3NUM0Ljc0MTY3IDQuNTU4MzMgNC42NTgzMyA0LjYxNjY3IDQuNTc1IDQuNjVDNC40OTE2NyA0LjY4MzMzIDQuNCA0LjcgNC4zIDQuN0M0LjIgNC43IDQuMTA4MzMgNC42ODMzMyA0LjAyNSA0LjY1QzMuOTQxNjcgNC42MTY2NyAzLjg1ODMzIDQuNTU4MzMgMy43NzUgNC40NzVaIiBmaWxsPSJibGFjayIvPjwvc3ZnPgo8L3N2Zz4="); } .tree { display: flex; flex-direction: column; } .tree-row { box-sizing: border-box; display: flex; align-items: center; gap: var(--gap-xs); min-height: 44px; padding: var(--pad-md) var(--pad-lg); padding-left: calc(var(--pad-lg) + var(--space-300) * var(--depth, 0)); border-radius: var(--radius-lg); font-size: var(--text-style-label-medium-font-size); color: var(--text-secondary); font-weight: var(--text-style-weight-medium); line-height: var(--text-style-label-line-height); letter-spacing: 0; } .tree-row:hover, .tree-row.tree-row--hover { background: var(--state-hover); } .tree-row[hidden] { display: none; } .tree-row:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--border-focus) 18%, transparent); } .tree-row.is-selected { background: var(--semantic-fill-muted); color: var(--text-primary); } .tree-row.tree-row--disabled, .tree-row[aria-disabled="true"] { opacity: var(--state-disabled-opacity); cursor: not-allowed; } .tree-row.tree-row--disabled:hover, .tree-row[aria-disabled="true"]:hover { background: transparent; } .tree-row__toggle, .tree-row__icon { flex: 0 0 var(--text-style-heading-small-font-size); width: var(--text-style-heading-small-font-size); height: var(--text-style-heading-small-font-size); color: var(--icon-muted); font-size: var(--text-style-heading-small-font-size); display: block; } .tree-row__toggle-button, .tree-row__destination, .tree-row__create-button { min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; } .tree-row__toggle-button { flex: 0 0 var(--text-style-heading-small-font-size); width: var(--text-style-heading-small-font-size); height: var(--text-style-heading-small-font-size); display: grid; place-items: center; } .tree-row__destination { flex: 1 1 auto; display: flex; align-items: center; gap: var(--gap-xs); text-align: left; } .tree-row__create-button { flex: 0 0 28px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--radius-sm); color: var(--icon-muted); font-size: 18px; line-height: 1; opacity: 0; transition: opacity var(--motion-fast) var(--motion-easing), background var(--motion-fast) var(--motion-easing); } .tree-row:hover .tree-row__create-button, .tree-row:focus-within .tree-row__create-button, .tree-row.is-selected .tree-row__create-button { opacity: 1; } .tree-row__create-button:hover { background: var(--state-hover); color: var(--text-primary); } .tree-row__toggle-button:focus-visible, .tree-row__destination:focus-visible, .tree-row__create-button:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: var(--radius-sm); } .tree-row__toggle-button:disabled, .tree-row__destination:disabled { cursor: not-allowed; } .tree-row__toggle { background: currentColor; -webkit-mask: var(--tree-arrow-right-mask) center / contain no-repeat; mask: var(--tree-arrow-right-mask) center / contain no-repeat; mask-mode: alpha; transition: background var(--motion-fast) var(--motion-easing); } .tree-row[aria-expanded="true"] .tree-row__toggle { -webkit-mask: var(--tree-arrow-drop-down-mask) center / contain no-repeat; mask: var(--tree-arrow-drop-down-mask) center / contain no-repeat; mask-mode: alpha; } .tree-row__toggle--empty { background: none; -webkit-mask: none; mask: none; } .tree-row__icon { background-position: center; background-repeat: no-repeat; background-size: contain; } .tree-row__icon--folder { background-image: url("/assets/illustrations/folder.svg"); } .tree-row__icon--folder-open { background-image: url("/assets/illustrations/folder-open.svg"); } .tree-row__icon--file-pdf { background-image: url("/assets/illustrations/file-pdf.svg"); } .tree-row__label { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ════════════════════════════════════════════════ * Modal / Toast / Snack Bar (디자인시스템.md Components/Modal·Toast·Snack Bar) * @sync Specs/KeepGong/DesignSystem/OverlaySpec.lean * ════════════════════════════════════════════════ */ /* Modal — 흐름 차단 backdrop + surface + Shadow/modal */ .modal-backdrop { position: fixed; inset: 0; background: var(--semantic-background-dimmed); display: flex; align-items: center; justify-content: center; padding: var(--pad-lg); z-index: 80; } .modal { position: relative; /* modal__close 절대 배치 기준 */ width: 100%; max-width: 400px; background: var(--bg-page); border-radius: var(--radius-xl); box-shadow: var(--shadow-modal); padding: var(--pad-3xl); } /* 닫기 버튼 — snackbar__close 관례의 라이트 표면 판 (배경 클릭과 같은 on_dismiss). */ .modal__close { position: absolute; top: var(--pad-lg); right: var(--pad-lg); display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); cursor: pointer; } .modal__close-icon { display: block; width: 24px; height: 24px; object-fit: contain; opacity: 0.7; } .modal__close:hover { background: var(--bg-surface-hover, rgba(0, 0, 0, 0.06)); } .modal__close:hover .modal__close-icon { opacity: 1; } .modal--medium { max-width: 400px; } .modal--large { max-width: 640px; } .modal--danger { border: 1px solid var(--semantic-status-danger-border); } .modal--danger .modal__title { color: var(--semantic-text-danger); } .modal__header { display: flex; flex-direction: column; gap: var(--gap-sm); margin-bottom: var(--gap-xl); } .modal__title { margin: 0; font-family: var(--font-display); font-size: var(--text-style-heading-small-font-size); font-weight: var(--text-style-weight-bold); line-height: var(--text-style-heading-line-height); letter-spacing: 0; color: var(--text-primary); } .modal__description { margin: 0; font-family: var(--font-body); font-size: var(--text-style-body-medium-font-size); font-weight: var(--text-style-weight-regular); line-height: var(--text-style-body-line-height); letter-spacing: 0; color: var(--text-secondary); } .modal__body { display: flex; flex-direction: column; gap: var(--gap-lg); } .modal__footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--gap-sm); margin-top: var(--gap-xl); } /* Toast — content-area bottom-center, 아주 짧은 결과 피드백 */ .toast-stack { position: fixed; bottom: var(--space-500); left: calc(var(--sidebar-width) + ((100vw - var(--sidebar-width)) / 2)); z-index: 40; display: flex; flex-direction: column-reverse; align-items: center; gap: var(--gap-md); pointer-events: none; transform: translateX(-50%); } .kg-master-detail:has(.kg-sidebar.is-collapsed) .toast-stack { left: calc(var(--sidebar-collapsed-width) + ((100vw - var(--sidebar-collapsed-width)) / 2)); } .toast { position: fixed; bottom: var(--space-500); left: calc(var(--sidebar-width) + ((100vw - var(--sidebar-width)) / 2)); transform: translate(-50%, 0); display: inline-flex; align-items: center; gap: var(--gap-sm); justify-content: center; width: fit-content; max-width: min(314px, calc(100vw - var(--space-400))); min-height: var(--space-500); padding: var(--pad-sm) var(--pad-xl) var(--pad-sm) var(--pad-md); background: var(--semantic-background-dimmed); color: var(--text-inverse); border-radius: var(--radius-full); box-shadow: var(--shadow-snackbar); backdrop-filter: blur(var(--effect-snackbar-bg-blur)); -webkit-backdrop-filter: blur(var(--effect-snackbar-bg-blur)); font-size: var(--text-style-body-small-font-size); font-weight: 500; line-height: var(--text-style-body-line-height); z-index: 40; will-change: opacity, transform; animation: kg-toast-in var(--motion-medium) var(--motion-easing) both; } .toast__status-icon { display: inline-flex; flex: 0 0 24px; align-items: center; justify-content: center; width: 24px; height: 24px; color: var(--semantic-icon-success); background: var(--semantic-background-inverse); border-radius: var(--radius-full); } .toast__status-glyph { display: block; width: 20px; height: 20px; color: currentColor; fill: currentColor; } .toast__message { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Queue owns the viewport offset; stacked items must not inherit it again. */ .toast-stack .toast, .kg-master-detail:has(.kg-sidebar.is-collapsed) .toast-stack .toast { position: relative; inset: auto; transform: translateY(0); pointer-events: auto; animation-name: kg-toast-stack-in; } .toast.is-exiting { pointer-events: none; animation: kg-toast-out var(--motion-medium) var(--motion-easing) both; } .toast-stack .toast.is-exiting { animation-name: kg-toast-stack-out; } .kg-master-detail:has(.kg-sidebar.is-collapsed) .toast { left: calc(var(--sidebar-collapsed-width) + ((100vw - var(--sidebar-collapsed-width)) / 2)); } @keyframes kg-toast-in { from { opacity: 0; transform: translate(-50%, 20px); } to { opacity: 1; transform: translate(-50%, 0); } } @keyframes kg-toast-out { 0% { opacity: 1; transform: translate(-50%, 0); } 70% { opacity: 0.25; transform: translate(-50%, 4px); } 100% { opacity: 0; transform: translate(-50%, 8px); } } @keyframes kg-toast-stack-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes kg-toast-stack-out { 0% { opacity: 1; transform: translateY(0); } 70% { opacity: 0.25; transform: translateY(4px); } 100% { opacity: 0; transform: translateY(8px); } } /* Snack Bar — floating, 흐름 안 막음, Shadow/snackbar */ .snackbar { position: fixed; bottom: var(--space-300); left: 50%; transform: translate(-50%, 0); display: inline-flex; align-items: flex-start; gap: var(--gap-lg); width: min(640px, calc(100vw - var(--space-400))); padding: var(--pad-xl); background: var(--semantic-background-dimmed); color: var(--text-inverse); border-radius: var(--radius-lg); box-shadow: var(--shadow-snackbar); backdrop-filter: blur(var(--effect-snackbar-bg-blur)); -webkit-backdrop-filter: blur(var(--effect-snackbar-bg-blur)); font-size: var(--text-style-body-medium-font-size); z-index: 40; } .snackbar__icon { display: inline-flex; flex: 0 0 32px; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--semantic-background-inverse); border-radius: var(--radius-md); } .snackbar__icon-graphic { display: block; width: 20px; height: 20px; object-fit: contain; } .snackbar__content { display: flex; flex: 1 0 0; flex-direction: column; gap: var(--gap-sm); min-width: 0; width: 100%; } .snackbar__title { color: var(--text-inverse); font-size: var(--text-style-heading-large-font-size); font-weight: 700; line-height: var(--text-style-heading-line-height); } .snackbar__description { color: var(--text-inverse); font-size: var(--text-style-body-medium-font-size); font-weight: 400; line-height: var(--text-style-body-line-height); } .snackbar__actions { display: flex; justify-content: flex-end; gap: var(--gap-sm); width: 100%; } .snackbar__close { position: absolute; top: var(--pad-xl); right: var(--pad-xl); display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: rgba(255, 255, 255, 0.78); cursor: pointer; } .snackbar__close-icon { display: block; width: 24px; height: 24px; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.78; } .snackbar__close:hover { background: rgba(255, 255, 255, 0.12); color: var(--text-inverse); } .snackbar__close:hover .snackbar__close-icon { opacity: 1; } /* ════════════════════════════════════════════════ * Breadcrumb / Path Chip (디자인시스템.md Components/Breadcrumb) * @sync Specs/KeepGong/DesignSystem/BreadcrumbSpec.lean * ════════════════════════════════════════════════ */ .breadcrumb { display: inline-flex; align-items: center; } .crumb { /* 12px, 보조 정보 */ display: inline-flex; align-items: center; gap: var(--gap-sm); height: var(--size-sm); /* 36 */ padding: var(--pad-sm) var(--pad-sm) var(--pad-sm) 0; /* 상하 8 · 우 8(sep) · 좌 0 */ background: none; border: none; cursor: pointer; font-size: 12px; font-weight: 400; /* 기본 Regular */ color: var(--text-muted); } .crumb:hover { font-weight: 500; } /* hover Medium */ .crumb.is-current { font-weight: 700; color: var(--text-primary); cursor: default; } /* 현재 Bold */ .crumb--last { padding-right: var(--pad-md); } /* separator 없는 마지막 칩 = 우 12 */ .crumb__sep { color: var(--text-subtle); } /* ════════════════════════════════════════════════ * Empty State (디자인시스템.md Components/Empty State) — 단일 조합형 * @sync Specs/KeepGong/DesignSystem/EmptyStateSpec.lean * ════════════════════════════════════════════════ */ .empty-state { width: 100%; box-sizing: border-box; background: var(--semantic-background-default); border: 1px solid var(--semantic-border-subtle); border-radius: var(--radius-lg); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--gap-2xl); /* Message ↔ Action 32 */ padding: var(--pad-4xl) var(--pad-3xl) var(--pad-5xl); /* top40 좌우32 bottom64 */ } .empty-state__message { display: flex; flex-direction: column; align-items: center; gap: var(--gap-xl); width: 100%; } /* illust↔copy 20 */ .empty-state__illustration { width: 90px; height: 80px; flex: none; } .empty-state__copy { width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: var(--gap-lg); } /* title↔subtitle 12 */ .empty-state__title { font-family: var(--font-display); font-size: var(--text-style-heading-large-font-size); font-weight: 700; line-height: 1.4; letter-spacing: -.02em; color: var(--text-primary); margin: 0; } .empty-state__subtitle { font-size: var(--text-style-body-medium-font-size); line-height: 1.6; color: var(--text-secondary); margin: 0; } .empty-state__actions { display: flex; flex-direction: column; align-items: center; gap: var(--gap-xl); } /* chips↔buttons 20 */ .empty-state__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap-md); } /* chip 8 */ .empty-state__buttons { display: flex; gap: var(--gap-lg); } /* button row 12 */ /* ════════════════════════════════════════════════ * Standalone Notice (디자인시스템.md Components/Standalone Notice) * @sync Specs/KeepGong/DesignSystem/StandaloneNoticeSpec.lean * page-level surface: 640 fixed / Hug, 외곽 = page margin. * ════════════════════════════════════════════════ */ .notice { width: 640px; /* fixed — W/H 토큰 바인딩 안 함 */ display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--gap-2xl); /* message ↔ action 32 */ /* 외곽 여백 = page margin (Figma 는 auto layout padding 필드에 바인딩) */ padding: var(--margin-page-top) var(--margin-page-x) var(--margin-page-bottom); } .notice__buttons { display: flex; gap: var(--gap-lg); } /* button row 12 */ html, body { margin: 0; padding: 0; font-family: var(--font-body); font-size: 16px; color: var(--text-primary); background: var(--color-bg); -webkit-font-smoothing: antialiased; /* ★ 트랙패드 오버스크롤(rubber-band) 시 100vh 셸 아래 흰 배경 노출 방지 ("페이지 하단이 들려서 하얀 화면"). pane-body 스크롤이 문서로 체이닝되지 않게. */ overscroll-behavior: none; } /* Full-height workspaces own the viewport. Lock the document itself as well as its inner grid: a wheel gesture over non-scrollable sidebar chrome must not reuse a previous route's scroll position or expose blank body below the app. */ html:has(.kg-app-shell), body:has(.kg-app-shell) { width: 100%; height: 100%; overflow: hidden; } h1, h2, h3 { font-family: var(--font-display); font-weight: 700; margin: 0 0 var(--margin-sm) 0; } h1 { font-size: 36px; line-height: 45px; } h2 { font-size: 32px; line-height: 40px; } h3 { font-size: 24px; line-height: 32px; font-weight: 700; } /* 600→700: 3-weight 체계 */ p { margin: 0 0 var(--margin-sm) 0; color: var(--text-muted); } /* Typography text styles — Figma Text Style name과 1:1 매핑. * 예: Label/Large-Medium → TextStyle::LabelLargeMedium / .type-label-large-medium / * data-text-style="Label/Large-Medium". * @sync Specs/KeepGong/DesignSystem/KeepGongTokenSpec.lean § 3b. */ .type-display-large-regular, .type-display-large-medium, .type-display-large-bold, [data-text-style="Display/Large-Regular"], [data-text-style="Display/Large-Medium"], [data-text-style="Display/Large-Bold"] { font-family: var(--font-display); font-size: var(--text-style-display-large-font-size); line-height: var(--text-style-display-line-height); letter-spacing: 0; } .type-display-medium-regular, .type-display-medium-medium, .type-display-medium-bold, [data-text-style="Display/Medium-Regular"], [data-text-style="Display/Medium-Medium"], [data-text-style="Display/Medium-Bold"] { font-family: var(--font-display); font-size: var(--text-style-display-medium-font-size); line-height: var(--text-style-display-line-height); letter-spacing: 0; } .type-display-small-regular, .type-display-small-medium, .type-display-small-bold, [data-text-style="Display/Small-Regular"], [data-text-style="Display/Small-Medium"], [data-text-style="Display/Small-Bold"] { font-family: var(--font-display); font-size: var(--text-style-display-small-font-size); line-height: var(--text-style-display-line-height); letter-spacing: 0; } .type-title-large-regular, .type-title-large-medium, .type-title-large-bold, [data-text-style="Title/Large-Regular"], [data-text-style="Title/Large-Medium"], [data-text-style="Title/Large-Bold"] { font-family: var(--font-display); font-size: var(--text-style-title-large-font-size); line-height: var(--text-style-title-line-height); letter-spacing: 0; } .type-title-medium-regular, .type-title-medium-medium, .type-title-medium-bold, [data-text-style="Title/Medium-Regular"], [data-text-style="Title/Medium-Medium"], [data-text-style="Title/Medium-Bold"] { font-family: var(--font-display); font-size: var(--text-style-title-medium-font-size); line-height: var(--text-style-title-line-height); letter-spacing: 0; } .type-title-small-regular, .type-title-small-medium, .type-title-small-bold, [data-text-style="Title/Small-Regular"], [data-text-style="Title/Small-Medium"], [data-text-style="Title/Small-Bold"] { font-family: var(--font-display); font-size: var(--text-style-title-small-font-size); line-height: var(--text-style-title-line-height); letter-spacing: 0; } .type-heading-large-regular, .type-heading-large-medium, .type-heading-large-bold, [data-text-style="Heading/Large-Regular"], [data-text-style="Heading/Large-Medium"], [data-text-style="Heading/Large-Bold"] { font-family: var(--font-display); font-size: var(--text-style-heading-large-font-size); line-height: var(--text-style-heading-line-height); letter-spacing: 0; } .type-heading-medium-regular, .type-heading-medium-medium, .type-heading-medium-bold, [data-text-style="Heading/Medium-Regular"], [data-text-style="Heading/Medium-Medium"], [data-text-style="Heading/Medium-Bold"] { font-family: var(--font-display); font-size: var(--text-style-heading-medium-font-size); line-height: var(--text-style-heading-line-height); letter-spacing: 0; } .type-heading-small-regular, .type-heading-small-medium, .type-heading-small-bold, [data-text-style="Heading/Small-Regular"], [data-text-style="Heading/Small-Medium"], [data-text-style="Heading/Small-Bold"] { font-family: var(--font-display); font-size: var(--text-style-heading-small-font-size); line-height: var(--text-style-heading-line-height); letter-spacing: 0; } .type-body-large-regular, .type-body-large-medium, .type-body-large-bold, [data-text-style="Body/Large-Regular"], [data-text-style="Body/Large-Medium"], [data-text-style="Body/Large-Bold"] { font-family: var(--font-body); font-size: var(--text-style-body-large-font-size); line-height: var(--text-style-body-line-height); letter-spacing: 0; } .type-body-medium-regular, .type-body-medium-medium, .type-body-medium-bold, [data-text-style="Body/Medium-Regular"], [data-text-style="Body/Medium-Medium"], [data-text-style="Body/Medium-Bold"] { font-family: var(--font-body); font-size: var(--text-style-body-medium-font-size); line-height: var(--text-style-body-line-height); letter-spacing: 0; } .type-body-small-regular, .type-body-small-medium, .type-body-small-bold, [data-text-style="Body/Small-Regular"], [data-text-style="Body/Small-Medium"], [data-text-style="Body/Small-Bold"] { font-family: var(--font-body); font-size: var(--text-style-body-small-font-size); line-height: var(--text-style-body-line-height); letter-spacing: 0; } .type-label-large-regular, .type-label-large-medium, .type-label-large-bold, [data-text-style="Label/Large-Regular"], [data-text-style="Label/Large-Medium"], [data-text-style="Label/Large-Bold"] { font-family: var(--font-body); font-size: var(--text-style-label-large-font-size); line-height: var(--text-style-label-line-height); letter-spacing: 0; } .type-label-medium-regular, .type-label-medium-medium, .type-label-medium-bold, [data-text-style="Label/Medium-Regular"], [data-text-style="Label/Medium-Medium"], [data-text-style="Label/Medium-Bold"] { font-family: var(--font-body); font-size: var(--text-style-label-medium-font-size); line-height: var(--text-style-label-line-height); letter-spacing: 0; } .type-label-small-regular, .type-label-small-medium, .type-label-small-bold, [data-text-style="Label/Small-Regular"], [data-text-style="Label/Small-Medium"], [data-text-style="Label/Small-Bold"] { font-family: var(--font-body); font-size: var(--text-style-label-small-font-size); line-height: var(--text-style-label-line-height); letter-spacing: 0; } .type-caption-medium-regular, .type-caption-medium-medium, .type-caption-medium-bold, [data-text-style="Caption/Medium-Regular"], [data-text-style="Caption/Medium-Medium"], [data-text-style="Caption/Medium-Bold"] { font-family: var(--font-body); font-size: var(--text-style-caption-medium-font-size); line-height: var(--text-style-caption-line-height); letter-spacing: 0; } .type-caption-small-regular, .type-caption-small-medium, .type-caption-small-bold, [data-text-style="Caption/Small-Regular"], [data-text-style="Caption/Small-Medium"], [data-text-style="Caption/Small-Bold"] { font-family: var(--font-body); font-size: var(--text-style-caption-small-font-size); line-height: var(--text-style-caption-line-height); letter-spacing: 0; } .type-display-large-regular, .type-display-medium-regular, .type-display-small-regular, .type-title-large-regular, .type-title-medium-regular, .type-title-small-regular, .type-heading-large-regular, .type-heading-medium-regular, .type-heading-small-regular, .type-body-large-regular, .type-body-medium-regular, .type-body-small-regular, .type-label-large-regular, .type-label-medium-regular, .type-label-small-regular, .type-caption-medium-regular, .type-caption-small-regular, [data-text-style$="-Regular"] { font-weight: var(--text-style-weight-regular); } .type-display-large-medium, .type-display-medium-medium, .type-display-small-medium, .type-title-large-medium, .type-title-medium-medium, .type-title-small-medium, .type-heading-large-medium, .type-heading-medium-medium, .type-heading-small-medium, .type-body-large-medium, .type-body-medium-medium, .type-body-small-medium, .type-label-large-medium, .type-label-medium-medium, .type-label-small-medium, .type-caption-medium-medium, .type-caption-small-medium, [data-text-style$="-Medium"] { font-weight: var(--text-style-weight-medium); } .type-display-large-bold, .type-display-medium-bold, .type-display-small-bold, .type-title-large-bold, .type-title-medium-bold, .type-title-small-bold, .type-heading-large-bold, .type-heading-medium-bold, .type-heading-small-bold, .type-body-large-bold, .type-body-medium-bold, .type-body-small-bold, .type-label-large-bold, .type-label-medium-bold, .type-label-small-bold, .type-caption-medium-bold, .type-caption-small-bold, [data-text-style$="-Bold"] { font-weight: var(--text-style-weight-bold); } /* Legacy role aliases — 새 Figma Text Style 토큰으로 연결. */ .type-display { font-family: var(--font-display); font-size: var(--text-style-display-small-font-size); font-weight: var(--text-style-weight-bold); line-height: var(--text-style-display-line-height); letter-spacing: 0; } .type-title { font-family: var(--font-display); font-size: var(--text-style-title-large-font-size); font-weight: var(--text-style-weight-bold); line-height: var(--text-style-title-line-height); letter-spacing: 0; } .type-heading { font-family: var(--font-display); font-size: var(--text-style-heading-small-font-size); font-weight: var(--text-style-weight-bold); line-height: var(--text-style-heading-line-height); letter-spacing: 0; } .type-body { font-family: var(--font-body); font-size: var(--text-style-body-medium-font-size); font-weight: var(--text-style-weight-regular); line-height: var(--text-style-body-line-height); letter-spacing: 0; } .type-label { font-family: var(--font-body); font-size: var(--text-style-label-medium-font-size); font-weight: var(--text-style-weight-medium); line-height: var(--text-style-label-line-height); letter-spacing: 0; } .type-caption, .type-caption-sm { font-family: var(--font-body); font-size: var(--text-style-caption-medium-font-size); font-weight: var(--text-style-weight-regular); line-height: var(--text-style-caption-line-height); letter-spacing: 0; } .type-caption-xs { font-family: var(--font-body); font-size: var(--text-style-caption-small-font-size); font-weight: var(--text-style-weight-regular); line-height: var(--text-style-caption-line-height); letter-spacing: 0; } /* weight 보조 (Regular/Medium/Bold 만) */ .fw-regular { font-weight: 400; } .fw-medium { font-weight: 500; } .fw-bold { font-weight: 700; } .page { max-width: var(--max-reading); margin: 0 auto; /* 페이지 바깥 여백: 상단 40 / 좌우 40 / 하단 80 (디자인규칙.md Page Margin) */ padding: var(--margin-page-top) var(--margin-page-x) var(--margin-page-bottom); } /* ════════════════════════════════════════════════ * D51c Step 8 컴포넌트 클래스 — Stitch v3 시안 미러 * ════════════════════════════════════════════════ */ /* Master-detail layout (Sidebar + Main) */ .kg-master-detail { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); min-height: 100vh; background: var(--semantic-fill-subtle); } .kg-master-detail:has(.kg-sidebar.is-collapsed) { grid-template-columns: var(--sidebar-collapsed-width) minmax(0, 1fr); } /* ★풀하이트 앱 셸 페이지(kg-app-shell)에서는 최상위 grid 를 뷰포트에 **상한 고정** 한다. 기본 .kg-master-detail 은 min-height:100vh(하한만) → 자식(우 패널 콘텐츠)의 min-height:auto intrinsic 높이가 grid 행으로 합산 전파돼 페이지가 100vh 를 초과(사용자 "오른쪽 내용 펼치면 그만큼 내려감"). height:100vh + overflow:hidden + 단일 행 minmax(0,1fr) 로 grid 를 정확히 뷰포트로 잠그면, 내부 패널만 스크롤하고 페이지는 안 늘어난다. (WorkbenchViewportContainmentSpec) */ .kg-master-detail:has(.kg-app-shell) { position: fixed; inset: 0; width: 100%; height: 100vh; height: 100dvh; overflow: hidden; overscroll-behavior: none; grid-template-rows: minmax(0, 1fr); } .kg-main-detail { min-width: 0; padding: var(--pad-3xl); background: var(--semantic-fill-subtle); overflow-y: auto; } /* ★풀하이트 앱 셸(kg-app-shell: height:100vh + 내부 자체 스크롤)은 main-detail 의 패딩(상·하)이 100vh 위에 더해져 콘텐츠가 100vh 를 초과 → 페이지가 세로로 들뜨고 하단에 빈 공간이 생긴다 (사용자 지적 "밑에 들리는거"). upload-page 와 동일하게 패딩 0 + height:100vh + overflow:hidden 으로 셸이 뷰포트에 정확히 맞고 내부 패널만 스크롤하게 한다. (bundles/refine/variant/downloads 공통) */ .kg-main-detail:has(.kg-app-shell) { height: 100vh; padding: 0; overflow: hidden; } /* Sidebar */ .kg-sidebar { position: sticky; top: 0; height: 100vh; min-width: 0; box-sizing: border-box; background: var(--semantic-fill-default); border-right: 1px solid var(--semantic-border-default); padding: var(--pad-lg) var(--pad-md); display: flex; flex-direction: column; gap: var(--gap-md); overflow: visible; overscroll-behavior: none; z-index: 10; transition: width var(--motion-medium), padding var(--motion-medium); } .kg-sidebar-fixed-top, .kg-sidebar-fixed-bottom { width: 100%; flex: 0 0 auto; display: flex; flex-direction: column; gap: var(--gap-md); } .kg-sidebar-scroll { width: 100%; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--gap-md); overflow-y: auto; overflow-x: hidden; overscroll-behavior: none; } .kg-sidebar-scroll > .kg-nav-group:first-child > .kg-sidebar-divider { display: none; } .kg-nav-group--main > .kg-sidebar-divider { display: none; } .kg-sidebar-brand { width: 100%; height: 40px; display: flex; align-items: center; padding: 0 var(--pad-sm); } .kg-sidebar-logo { display: inline-flex; width: 88px; height: 20px; color: inherit; text-decoration: none; } .kg-sidebar-logo .kg-login-logo-full { width: 88px; height: 20px; } .kg-sidebar-collapse { position: absolute; top: 20px; right: -17px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--semantic-border-default); border-radius: var(--radius-full); background: var(--semantic-fill-default); color: var(--semantic-text-muted); box-shadow: var(--shadow-xs); cursor: pointer; z-index: 20; transition: background var(--motion-fast), color var(--motion-fast), transform var(--motion-fast); } .kg-sidebar-collapse:hover, .kg-sidebar-collapse:active { background: var(--semantic-fill-muted); color: var(--semantic-text-secondary); } .kg-sidebar-collapse:active { transform: scale(var(--semantic-button-pressed-scale)); } .kg-workspace-switcher { width: 100%; min-height: 54px; display: flex; align-items: center; gap: var(--gap-lg); padding: 0 var(--pad-md); border-radius: var(--radius-lg); color: inherit; text-decoration: none; transition: background var(--motion-fast), transform var(--motion-fast); transform-origin: center; } .kg-workspace-switcher:hover, .kg-workspace-switcher:active { background: var(--semantic-fill-subtle); } .kg-workspace-switcher:active { transform: scale(0.98); } .kg-workspace-mark { width: 44px; height: 44px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--semantic-text-inverse); border-radius: var(--radius-md); background: #EDF4FD; color: var(--semantic-fill-brand); } .kg-workspace-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0; } .kg-workspace-eyebrow { color: var(--semantic-text-muted); font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: -0.066px; } .kg-workspace-name { color: var(--semantic-text-primary); font-size: 14px; font-weight: 700; line-height: 1.4; letter-spacing: -0.14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kg-workspace-chevron { width: 18px; height: 18px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; color: var(--semantic-text-secondary); } .kg-sidebar-top { width: 100%; } .kg-sidebar-divider { width: 100%; height: 1px; flex: 0 0 auto; background: var(--semantic-border-default); } .kg-sidebar-spacer { flex: 1 1 auto; min-height: var(--space-300); } .kg-sidebar-bottom, .kg-sidebar-fixed-bottom { display: flex; flex-direction: column; width: 100%; } .kg-sidebar-bottom { gap: var(--gap-md); } .kg-sidebar-fixed-bottom { gap: var(--gap-xs); } .kg-sidebar-fixed-bottom .kg-nav-group { gap: var(--gap-xs); } .kg-sidebar-fixed-bottom .kg-sidebar-divider { margin-bottom: var(--gap-xs); } .kg-sidebar-fixed-bottom .kg-nav-group-label { height: 24px; } .kg-user-row { display: flex; align-items: center; gap: var(--gap-md); min-height: 68px; padding: 0 var(--pad-sm); border-radius: var(--radius-lg); color: var(--semantic-text-secondary); } .kg-avatar-tiny { width: 44px; height: 44px; flex: 0 0 auto; border-radius: var(--radius-full); background: var(--semantic-fill-brand); color: var(--semantic-text-inverse); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1.4; font-weight: 700; letter-spacing: -0.192px; } .kg-user-row > span:last-child { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .kg-user-name { flex: 0 1 auto; min-width: 0; display: block; color: var(--semantic-text-primary); font-size: 14px; font-weight: 700; line-height: 1.4; letter-spacing: -0.14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kg-user-meta { display: block; color: var(--semantic-text-muted); font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: -0.066px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kg-settings { color: var(--text-muted); cursor: pointer; } .kg-sidebar.is-collapsed { align-items: center; padding: var(--pad-lg) var(--pad-md); } .kg-sidebar.is-collapsed .kg-sidebar-fixed-top, .kg-sidebar.is-collapsed .kg-sidebar-scroll, .kg-sidebar.is-collapsed .kg-sidebar-fixed-bottom { align-items: center; } .kg-sidebar.is-collapsed .kg-sidebar-scroll { scrollbar-width: none; } .kg-sidebar.is-collapsed .kg-sidebar-scroll::-webkit-scrollbar { display: none; } .kg-sidebar.is-collapsed .kg-sidebar-brand { height: 40px; align-items: center; justify-content: center; padding: 0 var(--pad-sm); overflow: visible; } .kg-sidebar.is-collapsed .kg-sidebar-collapse { right: -20px; } .kg-sidebar.is-collapsed .kg-sidebar-logo { width: 18px; height: 20px; overflow: hidden; } .kg-sidebar.is-collapsed .kg-sidebar-logo .kg-login-logo-full { width: 88px; height: 20px; max-width: none; } .kg-sidebar.is-collapsed .kg-workspace-switcher { width: 56px; min-height: 52px; justify-content: center; gap: 0; padding: 0; } .kg-sidebar.is-collapsed .kg-workspace-text, .kg-sidebar.is-collapsed .kg-workspace-chevron, .kg-sidebar.is-collapsed .kg-nav-label { display: none; } .kg-sidebar.is-collapsed .kg-sidebar-top { display: flex; justify-content: center; } .kg-sidebar.is-collapsed .kg-cta-primary { width: 40px; min-height: 40px; height: 40px; padding: 0; font-size: 0; line-height: 0; overflow: hidden; } .kg-sidebar.is-collapsed .kg-cta-primary > span:not(.kg-sidebar-icon) { display: none; } .kg-sidebar.is-collapsed .kg-nav-group { align-items: center; } .kg-sidebar.is-collapsed .kg-nav-group-label { width: 56px; height: 24px; justify-content: center; padding: 0; font-size: 11px; line-height: 1.4; } .kg-sidebar.is-collapsed .kg-nav-list { width: 52px; align-items: center; } .kg-sidebar.is-collapsed .kg-nav-link, .kg-sidebar.is-collapsed .kg-nav-action { width: 52px; justify-content: center; gap: 0; padding: 0; } .kg-sidebar.is-collapsed .kg-nav-link--primary { width: 52px; min-height: 40px; } .kg-sidebar.is-collapsed .kg-nav-link--secondary, .kg-sidebar.is-collapsed .kg-nav-action { min-height: 40px; } .kg-sidebar.is-collapsed .kg-nav-badge { position: absolute; right: 12px; bottom: 10px; width: 8px; min-width: 8px; height: 8px; padding: 0; color: transparent; } .kg-sidebar.is-collapsed .kg-user-row { width: 56px; min-height: 64px; justify-content: center; gap: 0; padding: 0; } .kg-sidebar.is-collapsed .kg-user-row > span:last-child { display: none; } .kg-sidebar.is-collapsed .kg-avatar-tiny { width: 40px; height: 40px; } .kg-nav-group { width: 100%; display: flex; flex-direction: column; gap: var(--gap-md); } .kg-nav-group-label { height: 30px; display: flex; align-items: center; padding: 0 var(--pad-sm); color: var(--semantic-text-muted); font-size: 11px; line-height: 1.4; font-weight: 700; text-transform: uppercase; letter-spacing: -0.066px; } .kg-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--gap-xs); } .kg-nav-row { margin: 0; padding: 0; } .kg-drag-handle { color: var(--text-subtle); opacity: 0; font-size: 12px; width: 12px; transition: opacity var(--motion-fast); cursor: grab; } .kg-task-row:hover .kg-drag-handle { opacity: 1; } .kg-nav-bullet { display: none; } .kg-nav-link { width: 100%; display: flex; align-items: center; gap: var(--gap-md); border-radius: var(--radius-lg); color: var(--semantic-text-secondary); text-decoration: none; transition: background var(--motion-fast), color var(--motion-fast), transform var(--motion-fast); transform-origin: center; } .kg-nav-link--primary { min-height: 40px; padding: 0 var(--pad-md) 0 var(--pad-lg); font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: -0.14px; } .kg-nav-link--secondary, .kg-nav-action { min-height: 40px; padding: 0 var(--pad-md) 0 var(--pad-lg); font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: -0.14px; } .kg-nav-link:hover, .kg-nav-link:active, .kg-nav-action:hover, .kg-nav-action:active { background: var(--semantic-fill-subtle); } .kg-nav-link[aria-current="page"], .kg-nav-link.is-active { background: #EDF4FD; color: var(--semantic-state-brand-hover); font-weight: 700; } .kg-nav-link:active, .kg-nav-action:active { transform: scale(0.98); } .kg-nav-action { width: 100%; display: flex; align-items: center; gap: var(--gap-md); border: none; border-radius: var(--radius-lg); background: transparent; color: var(--semantic-text-secondary); font-family: var(--font-body); cursor: pointer; text-align: left; transition: background var(--motion-fast), color var(--motion-fast), transform var(--motion-fast); } .kg-nav-icon { width: 20px; height: 20px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; } .kg-nav-link--secondary .kg-nav-icon, .kg-nav-action .kg-nav-icon { width: 20px; height: 20px; } .kg-nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kg-nav-badge { min-width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; border-radius: var(--radius-full); background: var(--semantic-fill-danger); color: var(--semantic-text-inverse); font-size: 11px; font-weight: 500; line-height: 1.4; letter-spacing: -0.066px; } /* Buttons */ .kg-cta-primary { width: 100%; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: var(--gap-xs); background: var(--semantic-fill-brand); color: var(--semantic-text-inverse) !important; border: none; border-radius: var(--radius-md); padding: 0 var(--pad-xl); font-size: 14px; font-weight: 500; text-decoration: none; text-align: center; transition: background var(--motion-fast), transform var(--motion-fast); transform-origin: center; cursor: pointer; } .kg-cta-primary:hover, .kg-cta-primary:active { background: var(--semantic-state-brand-hover); } .kg-cta-primary:active { transform: scale(var(--semantic-button-pressed-scale)); } .kg-cta-primary:disabled, .kg-cta-primary:disabled:hover, .kg-cta-primary:disabled:active { background: var(--semantic-fill-muted); color: var(--semantic-text-disabled) !important; transform: none; cursor: not-allowed; } .kg-workspace-mark .kg-sidebar-icon, .kg-cta-primary .kg-sidebar-icon { width: 24px; height: 24px; flex: 0 0 auto; } .kg-nav-action .kg-sidebar-icon { width: 20px; height: 20px; flex: 0 0 auto; } .kg-sidebar-collapse .kg-sidebar-icon { width: 18px; height: 18px; flex: 0 0 auto; } .kg-sidebar-icon { width: 100%; height: 100%; display: block; background: currentColor; -webkit-mask-image: var(--kg-sidebar-icon-image); mask-image: var(--kg-sidebar-icon-image); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .kg-sidebar-icon--add { --kg-sidebar-icon-image: url("/assets/icons/add.svg"); } .kg-sidebar-icon--home { --kg-sidebar-icon-image: url("/assets/icons/home.svg"); } .kg-sidebar-icon--upload { --kg-sidebar-icon-image: url("/assets/icons/library_add.svg"); } .kg-sidebar-icon--refine { --kg-sidebar-icon-image: url("/assets/icons/contract_edit.svg"); } .kg-sidebar-icon--solution { --kg-sidebar-icon-image: url("/assets/icons/done_all.svg"); } .kg-sidebar-icon--variant { --kg-sidebar-icon-image: url("/assets/icons/featured_play_list.svg"); } .kg-sidebar-icon--download { --kg-sidebar-icon-image: url("/assets/icons/box.svg"); } .kg-sidebar-icon--library { --kg-sidebar-icon-image: url("/assets/icons/database.svg"); } .kg-sidebar-icon--workspace-bookmark { --kg-sidebar-icon-image: url("/assets/icons/workspace-bookmark.svg"); } .kg-sidebar-icon--test-paper { --kg-sidebar-icon-image: url("/assets/icons/article.svg"); } .kg-sidebar-icon--workspace { --kg-sidebar-icon-image: url("/assets/icons/enterprise.svg"); } .kg-sidebar-icon--account { --kg-sidebar-icon-image: url("/assets/icons/person.svg"); } .kg-sidebar-icon--admin { --kg-sidebar-icon-image: url("/assets/icons/home_storage.svg"); } .kg-sidebar-icon--concept { --kg-sidebar-icon-image: url("/assets/icons/filter.svg"); } .kg-sidebar-icon--rag { --kg-sidebar-icon-image: url("/assets/icons/alarm_smart_wake.svg"); } .kg-sidebar-icon--edge { --kg-sidebar-icon-image: url("/assets/icons/arrow_right_alt.svg"); } .kg-sidebar-icon--logout { --kg-sidebar-icon-image: url("/assets/icons/logout.svg"); } .kg-sidebar-icon--chevron-down { --kg-sidebar-icon-image: url("/assets/icons/arrow_drop_down.svg"); } .kg-sidebar-icon--menu-close { --kg-sidebar-icon-image: url("/assets/icons/arrow_menu_close.svg"); } .kg-sidebar-icon--menu-open { --kg-sidebar-icon-image: url("/assets/icons/arrow_menu_open.svg"); } /* Account settings */ .kg-account-page { position: relative; min-height: 100vh; margin: calc(-1 * var(--pad-3xl)); padding: var(--pad-4xl); display: flex; justify-content: center; background: var(--semantic-fill-default); } .kg-account-content { width: min(480px, 100%); min-height: calc(100vh - 80px); display: flex; flex-direction: column; } .kg-account-panel { width: 100%; display: flex; flex-direction: column; } .kg-account-header { height: 40px; display: flex; align-items: center; justify-content: space-between; } .kg-account-header h1 { margin: 0; color: var(--semantic-text-primary); font-size: 20px; font-weight: 700; line-height: 1.4; letter-spacing: -0.24px; } .kg-account-header .btn { width: 112px; } .kg-account-profile { position: relative; height: 120px; margin-top: 20px; display: flex; align-items: center; justify-content: center; } .kg-account-avatar { width: 80px; height: 80px; border-radius: var(--radius-full); background: var(--semantic-fill-brand); color: var(--semantic-text-inverse); display: inline-flex; align-items: center; justify-content: center; } .kg-account-avatar span { font-size: 32px; font-weight: 700; line-height: 1.4; letter-spacing: -0.384px; } .kg-account-avatar-image { width: 100%; height: 100%; display: block; border-radius: var(--radius-full); object-fit: cover; } .kg-account-avatar-edit { position: absolute; left: calc(50% + 10px); top: 68px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--semantic-border-default); border-radius: var(--radius-full); background: var(--semantic-fill-default); color: var(--semantic-text-primary); box-shadow: none; cursor: pointer; } .kg-account-avatar-edit::before { content: ""; width: 18px; height: 18px; display: block; background: currentColor; -webkit-mask: url("/assets/icons/profile-edit.svg") center / 18px 18px no-repeat; mask: url("/assets/icons/profile-edit.svg") center / 18px 18px no-repeat; } .kg-account-avatar-edit:hover, .kg-account-avatar-edit:active { color: var(--semantic-state-brand-hover); background: var(--semantic-fill-subtle); } .kg-account-form { margin-top: 20px; display: flex; flex-direction: column; gap: 20px; } .kg-account-field { display: flex; flex-direction: column; gap: 6px; } .kg-account-label { height: 20px; color: var(--semantic-text-primary); font-size: 14px; font-weight: 700; line-height: 1.4; letter-spacing: -0.14px; } .kg-account-input { width: 100%; height: 52px; box-sizing: border-box; background: var(--semantic-fill-default); } .kg-account-helper { color: var(--semantic-text-muted); font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: -0.066px; } .kg-account-wide-button, .kg-account-google-button { width: 100%; border: 1px solid var(--semantic-border-default); border-radius: var(--radius-md); font-family: var(--font-body); cursor: pointer; box-sizing: border-box; transition: background var(--motion-fast), border-color var(--motion-fast), transform var(--motion-fast); } .kg-account-wide-button { height: 40px; display: inline-flex; align-items: center; justify-content: center; background: var(--semantic-fill-muted); color: var(--semantic-text-primary); text-decoration: none; font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: -0.14px; } .kg-account-google-button { height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: var(--gap-sm); background: var(--semantic-fill-default); color: var(--semantic-text-primary); font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: -0.14px; } .kg-account-wide-button:hover, .kg-account-wide-button:active, .kg-account-google-button:hover, .kg-account-google-button:active { background: var(--semantic-fill-subtle); } .kg-account-wide-button:active, .kg-account-google-button:active { transform: scale(var(--semantic-button-pressed-scale)); } .kg-account-google-mark { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; color: #4285F4; font-size: 16px; font-weight: 700; line-height: 1; } .kg-account-actions { margin-top: auto; padding-top: var(--pad-4xl); display: flex; align-items: center; justify-content: space-between; } .kg-account-text-action { border: 0; padding: 0; background: transparent; color: var(--semantic-text-secondary); font-family: var(--font-body); font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: -0.14px; cursor: pointer; } .kg-account-text-action:hover, .kg-account-text-action:active { color: var(--semantic-text-primary); } .kg-account-text-action--danger { color: var(--semantic-text-danger); } .kg-account-text-action--danger:hover, .kg-account-text-action--danger:active { color: var(--semantic-state-danger-hover); } .kg-account-toast { position: fixed; left: calc(var(--sidebar-width) + ((100vw - var(--sidebar-width)) / 2)); bottom: var(--pad-4xl); transform: translateX(-50%); min-width: 218px; height: 40px; padding: 0 var(--pad-lg); display: inline-flex; align-items: center; justify-content: center; gap: var(--gap-sm); border-radius: var(--radius-full); background: var(--semantic-fill-inverse); color: var(--semantic-text-inverse); box-shadow: var(--shadow-md); font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: -0.14px; z-index: 1000; animation: kg-auth-toast-in var(--motion-medium) var(--motion-easing) both; } .kg-master-detail:has(.kg-sidebar.is-collapsed) .kg-account-toast { left: calc(var(--sidebar-collapsed-width) + ((100vw - var(--sidebar-collapsed-width)) / 2)); } .kg-account-toast-icon { width: 16px; height: 16px; border-radius: var(--radius-full); background: var(--semantic-text-inverse); color: var(--semantic-fill-inverse); position: relative; } .kg-account-toast-icon::before { content: ""; position: absolute; inset: 3px 2px; background: currentColor; -webkit-mask: url("/assets/icons/check_small.svg") center / contain no-repeat; mask: url("/assets/icons/check_small.svg") center / contain no-repeat; } .kg-account-modal-backdrop { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: var(--pad-lg); background: rgba(25, 31, 40, 0.56); animation: kg-account-modal-dim-in var(--motion-medium) var(--motion-easing) both; } .kg-profile-photo-modal { width: 400px; height: 555px; box-sizing: border-box; padding: 25px; display: flex; flex-direction: column; gap: 20px; border: 1px solid var(--semantic-border-default); border-radius: var(--radius-2xl); background: var(--semantic-fill-default); color: var(--semantic-text-primary); box-shadow: var(--shadow-modal); animation: kg-account-modal-in var(--motion-medium) var(--motion-easing) both; } .kg-profile-photo-modal-body { width: 350px; height: 445px; display: flex; flex-direction: column; gap: 12px; } .kg-profile-photo-modal-header { width: 350px; height: 97px; display: flex; flex-direction: column; gap: 8px; } .kg-profile-photo-modal-header h2, .kg-profile-photo-modal-header p { margin: 0; } .kg-profile-photo-modal-header h2 { color: var(--semantic-text-primary); font-size: 18px; font-weight: 700; line-height: 1.4; letter-spacing: 0; } .kg-profile-photo-modal-header p { color: var(--semantic-text-secondary); font-size: 16px; font-weight: 400; line-height: 1.6; letter-spacing: 0; } .kg-profile-photo-modal-summary { width: 350px; height: 120px; padding: 20px 0; box-sizing: border-box; display: flex; align-items: center; justify-content: center; } .kg-profile-photo-dropzone { width: 350px; height: 204px; box-sizing: border-box; padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 20px; border: 1px dashed #89D8D8; border-radius: var(--radius-md); background: var(--semantic-fill-default); } .kg-profile-photo-upload-copy { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; flex: 0 0 auto; } .kg-profile-photo-upload-icon { width: 40px; height: 40px; display: block; margin-bottom: 8px; background: url("/assets/icons/profile-cloud-upload.svg") center / 40px 40px no-repeat; } .kg-profile-photo-upload-title { width: 100%; color: var(--semantic-text-secondary); font-size: 14px; font-weight: 700; line-height: 1.4; letter-spacing: -0.14px; } .kg-profile-photo-upload-description { width: 100%; color: var(--semantic-text-muted); font-size: 14px; font-weight: 400; line-height: 1.6; letter-spacing: -0.14px; } .kg-profile-photo-upload-button { position: relative; width: 100%; height: 32px; min-height: 32px; flex: 0 0 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--semantic-fill-muted); color: var(--semantic-text-primary); font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: -0.096px; cursor: pointer; transition: background var(--motion-fast), transform var(--motion-fast); } .kg-profile-photo-upload-button:hover, .kg-profile-photo-upload-button:active { background: var(--semantic-fill-strong); } .kg-profile-photo-upload-button:active { transform: scale(var(--semantic-button-pressed-scale)); } .kg-profile-photo-upload-button input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .kg-profile-photo-file-item { width: 350px; height: 68px; flex: 0 0 68px; box-sizing: border-box; display: flex; align-items: center; gap: var(--gap-md); padding: var(--pad-md); border-radius: var(--radius-md); background: var(--semantic-fill-subtle); } .kg-profile-photo-file-icon { width: 24px; height: 24px; flex: 0 0 auto; display: block; color: #42CFC6; background: currentColor; -webkit-mask: url("/assets/icons/image.svg") center / 24px 24px no-repeat; mask: url("/assets/icons/image.svg") center / 24px 24px no-repeat; } .kg-profile-photo-file-name { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--semantic-text-secondary); font-size: 16px; font-weight: 500; line-height: 1.4; letter-spacing: -0.192px; } .kg-profile-photo-delete-button { width: 24px; height: 24px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--semantic-fill-danger); cursor: pointer; transition: background var(--motion-fast), transform var(--motion-fast), color var(--motion-fast); } .kg-profile-photo-delete-button:hover, .kg-profile-photo-delete-button:active { background: rgba(240, 68, 82, 0.08); color: var(--semantic-state-danger-hover); } .kg-profile-photo-delete-button:active { transform: scale(var(--semantic-button-pressed-scale)); } .kg-profile-photo-delete-button span { width: 20px; height: 20px; display: block; background: currentColor; -webkit-mask: url("/assets/icons/profile-delete.svg") center / 20px 20px no-repeat; mask: url("/assets/icons/profile-delete.svg") center / 20px 20px no-repeat; } .kg-profile-photo-modal-footer { width: 350px; height: 40px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; } .kg-profile-photo-button { width: 88px; height: 40px; padding: 0 16px; border: 0; border-radius: var(--radius-md); font-family: var(--font-body); font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: -0.14px; cursor: pointer; transition: background var(--motion-fast), transform var(--motion-fast); } .kg-profile-photo-button:active { transform: scale(var(--semantic-button-pressed-scale)); } .kg-profile-photo-button--secondary { background: var(--semantic-fill-muted); color: var(--semantic-text-primary); } .kg-profile-photo-button--secondary:hover, .kg-profile-photo-button--secondary:active { background: var(--semantic-fill-strong); } .kg-profile-photo-button--primary { background: var(--semantic-fill-brand); color: var(--semantic-text-inverse); } .kg-profile-photo-button--primary:hover, .kg-profile-photo-button--primary:active { background: var(--semantic-state-brand-hover); } .kg-account-reset-page { min-height: 100vh; margin: calc(-1 * var(--pad-3xl)); padding: 40px 24px 80px; box-sizing: border-box; display: flex; justify-content: center; background: var(--semantic-fill-default); } .kg-account-reset-content { width: 480px; max-width: 100%; display: flex; flex-direction: column; gap: 40px; } .kg-account-reset-breadcrumb { width: 480px; max-width: 100%; height: 36px; display: flex; align-items: center; } .kg-account-reset-path, .kg-account-reset-current { height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); color: var(--semantic-text-secondary); text-decoration: none; font-size: 12px; line-height: 1.4; letter-spacing: -0.096px; white-space: nowrap; } .kg-account-reset-path { gap: 6px; padding: 8px 8px 8px 0; font-weight: 400; } .kg-account-reset-current { padding: 8px 12px 8px 0; color: var(--semantic-text-primary); font-weight: 700; } .kg-account-reset-breadcrumb-arrow { width: 16px; height: 16px; display: block; background: currentColor; -webkit-mask: url("/assets/icons/arrow_forward_ios.svg") center / 16px 16px no-repeat; mask: url("/assets/icons/arrow_forward_ios.svg") center / 16px 16px no-repeat; } .kg-account-reset-section { width: 480px; max-width: 100%; display: flex; flex-direction: column; gap: 32px; } .kg-account-reset-intro { width: 100%; display: flex; flex-direction: column; gap: 12px; } .kg-account-reset-intro h1, .kg-account-reset-intro p { margin: 0; } .kg-account-reset-intro h1 { color: var(--semantic-text-primary); font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -0.6px; } .kg-account-reset-intro p { color: var(--semantic-text-secondary); font-size: 14px; font-weight: 400; line-height: 1.6; letter-spacing: -0.14px; } .kg-account-reset-form { width: 100%; display: flex; flex-direction: column; gap: 20px; } .kg-account-reset-field { width: 100%; display: block; } .kg-account-reset-input { width: 100%; height: 52px; box-sizing: border-box; padding: 0 16px; border: 1px solid var(--semantic-border-default); border-radius: var(--radius-md); background: var(--semantic-fill-default); color: var(--semantic-text-primary); font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 1.6; letter-spacing: -0.192px; transition: border-color var(--motion-fast), box-shadow var(--motion-fast); } .kg-account-reset-input::placeholder { color: var(--semantic-text-muted); } .kg-account-reset-input:focus { outline: none; border-color: var(--semantic-fill-brand); box-shadow: 0 0 0 3px rgba(73, 151, 242, 0.16); } .kg-account-reset-submit { width: 100%; height: 48px; border: 0; border-radius: var(--radius-md); background: var(--semantic-fill-brand); color: var(--semantic-text-inverse); font-family: var(--font-body); font-size: 16px; font-weight: 500; line-height: 1.4; letter-spacing: -0.192px; cursor: pointer; transition: background var(--motion-fast), transform var(--motion-fast); } .kg-account-reset-submit:hover, .kg-account-reset-submit:active { background: var(--semantic-state-brand-hover); } .kg-account-reset-submit:active { transform: scale(var(--semantic-button-pressed-scale)); } @keyframes kg-account-modal-dim-in { from { opacity: 0; } to { opacity: 1; } } @keyframes kg-account-modal-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (max-width: 432px) { .kg-account-reset-page { margin: calc(-1 * var(--pad-lg)); padding: 32px 16px 64px; } .kg-profile-photo-modal { width: calc(100vw - 32px); } .kg-profile-photo-modal, .kg-profile-photo-modal-body, .kg-profile-photo-modal-header, .kg-profile-photo-modal-summary, .kg-profile-photo-dropzone, .kg-profile-photo-file-item, .kg-profile-photo-modal-footer { max-width: 100%; } } .kg-btn-primary { width: 100%; background: var(--semantic-fill-brand); color: var(--semantic-text-inverse); border: none; border-radius: var(--radius-md); padding: 12px 16px; font-size: 14px; /* 버튼 라벨 = Label (15→14) */ font-weight: 500; cursor: pointer; transition: background var(--motion-fast), transform var(--motion-fast); transform-origin: center; } .kg-btn-primary:hover, .kg-btn-primary:active { background: var(--semantic-state-brand-hover); } .kg-btn-primary:active:not(:disabled) { transform: scale(var(--semantic-button-pressed-scale)); } .kg-btn-ghost { background: transparent; border: none; color: var(--semantic-text-secondary); padding: 10px 20px; font-size: 14px; font-weight: 500; cursor: pointer; border-radius: var(--radius-md); transition: background var(--motion-fast), transform var(--motion-fast); transform-origin: center; } .kg-btn-ghost:hover, .kg-btn-ghost:active { background: var(--semantic-fill-subtle); } .kg-btn-ghost:active { transform: scale(var(--semantic-button-pressed-scale)); } .kg-btn-ghost-purple { background: var(--semantic-fill-default); border: 1px solid var(--color-accent-purple); color: var(--color-accent-purple); padding: 8px 16px; font-size: 13px; font-weight: 500; cursor: pointer; border-radius: var(--radius-md); } .kg-btn-google { width: 100%; background: var(--semantic-fill-default); color: var(--semantic-text-primary); border: 1px solid var(--semantic-border-default); border-radius: var(--radius-md); padding: 12px 16px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-size: 14px; /* 버튼 라벨 = Label (15→14) */ font-weight: 500; cursor: pointer; transition: background var(--motion-fast), transform var(--motion-fast); transform-origin: center; } .kg-btn-google:hover, .kg-btn-google:active { background: var(--semantic-fill-muted); } .kg-btn-google:active { transform: scale(var(--semantic-button-pressed-scale)); } /* Inputs */ .kg-input { width: 100%; height: var(--size-lg); /* Input 기본 (size/lg 52) */ padding: 14px 16px; border: 1px solid var(--border-default); border-radius: var(--radius-md); font-size: 16px; /* 입력 텍스트 = Body */ font-family: inherit; color: var(--text-primary); background: #FFFFFF; transition: border-color var(--motion-fast), box-shadow var(--motion-fast); box-sizing: border-box; } .kg-input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(73, 151, 242, 0.15); } .kg-field-label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-secondary); font-weight: 500; } /* Heading w/ accent */ .kg-h1-accent { font-family: var(--font-display); font-size: 36px; line-height: 45px; font-weight: 700; /* 800→700: 디자이너 3-weight 체계(Regular/Medium/Bold) */ letter-spacing: -0.02em; margin: 0 0 8px 0; } .kg-h2-accent { font-family: var(--font-display); font-size: 24px; line-height: 32px; font-weight: 700; margin: 0 0 16px 0; } .kg-login-h2 { font-family: var(--font-display); font-size: 32px; line-height: 40px; font-weight: 700; margin: 0; letter-spacing: -0.01em; } /* Backlink chip */ .kg-backlink-chip { display: inline-flex; align-items: center; padding: 2px 8px; background: var(--color-accent-bg); color: var(--text-accent); font-size: 11px; font-weight: 700; /* 600→700: 디자이너 3-weight 체계 (강조=Bold) */ border-radius: var(--radius-full); margin-left: 4px; } .kg-breadcrumb-chip { padding: 4px 12px; background: var(--color-accent-bg); color: var(--text-accent); font-size: 13px; font-weight: 500; border-radius: var(--radius-full); } /* Dotted purple dropzone (organic affordance) */ .kg-dropzone { border: 2px dashed #7C3AED; background: rgba(124, 58, 237, 0.04); border-radius: var(--radius-lg); padding: 24px 32px; display: flex; align-items: center; gap: 16px; } /* Task list */ .kg-task-list { background: #FFFFFF; border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; } .kg-task-row { display: flex; align-items: center; gap: 12px; padding: 16px; border-bottom: 1px solid var(--border-divider); cursor: pointer; transition: background var(--motion-fast); } .kg-task-row:last-child { border-bottom: none; } .kg-task-row:hover { background: var(--color-surface); } /* Login screen full-page form */ .kg-auth-screen { display: grid; grid-template-columns: minmax(420px, 600px) minmax(420px, 1fr); align-items: center; gap: var(--gap-2xl); min-height: 100vh; padding: clamp(32px, 4.45vw, 64px); background: var(--bg-page); } .kg-login-screen { min-height: 100vh; --kg-login-hero-w: 600px; --kg-login-page-h: min(900px, calc(100vh - 124px)); display: flex; align-items: center; justify-content: center; padding: 62px 64px; background: #FFFFFF; overflow: auto; } .kg-login-hero { flex: 0 0 var(--kg-login-hero-w); height: var(--kg-login-page-h); } .kg-login-hero-image { width: 100%; height: 100%; border-radius: 40px; background: #F4F7FB url("/assets/keepgong-auth-visual.png") center / cover no-repeat; overflow: hidden; } .kg-auth-visual { min-height: min(900px, calc(100vh - 128px)); width: 100%; border-radius: var(--radius-2xl); background: var(--fill-soft) url("/assets/keepgong-auth-visual.png") center / cover no-repeat; box-shadow: var(--shadow-xs); } .kg-auth-panel { min-height: min(900px, calc(100vh - 128px)); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--pad-2xl); } .kg-auth-logo { display: inline-flex; margin-bottom: var(--margin-section); /* 48→40: generic lg 폐기, 섹션 간격(≤40) */ color: inherit; text-decoration: none; } .kg-auth-form { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: var(--gap-2xl); } .kg-auth-form--signup { gap: var(--gap-xl); } .kg-auth-heading { display: flex; flex-direction: column; gap: var(--gap-md); } .kg-auth-title { margin: 0; font-size: 24px; line-height: 1.3; font-weight: 700; letter-spacing: 0; color: var(--text-primary); } .kg-auth-copy { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-muted); } .kg-auth-fields { display: flex; flex-direction: column; gap: var(--gap-xl); } .kg-auth-check { display: flex; align-items: flex-start; gap: var(--gap-md); font-size: 13px; line-height: 1.6; color: var(--text-secondary); cursor: pointer; } .kg-auth-check input { flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--semantic-fill-brand); } .kg-auth-submit { height: var(--size-md); padding: 0 var(--pad-lg); font-size: 16px; } .kg-auth-secondary-action { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--pad-lg); border-radius: var(--radius-md); background: var(--semantic-fill-muted); color: var(--semantic-text-primary); text-decoration: none; font-size: 16px; font-weight: 500; transition: background var(--motion-fast), transform var(--motion-fast); transform-origin: center; } .kg-auth-secondary-action:hover, .kg-auth-secondary-action:active { background: var(--semantic-fill-strong); } .kg-auth-secondary-action:active { transform: scale(var(--semantic-button-pressed-scale)); } .kg-login-surface { position: relative; flex: 0 0 712px; height: var(--kg-login-page-h); max-width: 100%; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 24px 24px 64px; background: #FFFFFF; } .kg-auth-toast { position: absolute; left: 50%; bottom: -24px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: var(--gap-sm); max-width: min(340px, calc(100vw - 40px)); padding: var(--pad-sm) var(--pad-md); border-radius: var(--radius-full); background: rgba(25, 31, 40, 0.72); color: var(--semantic-text-inverse); box-shadow: var(--shadow-snackbar); backdrop-filter: blur(var(--effect-snackbar-bg-blur)); -webkit-backdrop-filter: blur(var(--effect-snackbar-bg-blur)); transform: translateX(-50%); z-index: 10; animation: kg-auth-toast-in var(--motion-medium) var(--motion-easing) both; } .kg-auth-toast.is-exiting { animation: kg-auth-toast-out 260ms var(--motion-easing) both; pointer-events: none; } .kg-auth-toast > span:last-child { width: 260px; max-width: calc(100vw - 104px); color: var(--semantic-text-inverse); font-size: 14px; font-weight: 500; line-height: 1.6; letter-spacing: -0.14px; white-space: nowrap; } .kg-auth-toast-icon { width: 24px; height: 24px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full); background: var(--semantic-fill-inverse); color: var(--semantic-text-inverse); } .kg-auth-toast-icon-glyph { width: 20px; height: 20px; display: block; } @keyframes kg-auth-toast-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } } @keyframes kg-auth-toast-out { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, 8px); } } .kg-login-form { width: 340px; max-width: 100%; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; } .kg-login-logo { position: relative; display: block; width: 176px; height: 40px; flex: 0 0 auto; color: inherit; text-decoration: none; } .kg-login-logo-full { display: block; width: 176px; height: 40px; overflow: visible; } .kg-login-logo-symbol { position: absolute; left: 0; top: 0; width: 34.727px; height: 38.173px; } .kg-login-logo-symbol img { position: absolute; display: block; max-width: none; } .kg-login-logo-union { left: 0; top: 6.36px; width: 28.878px; height: 31.811px; } .kg-login-logo-tail { left: 14.58px; top: 16.97px; width: 20.147px; height: 16.171px; } .kg-login-logo-star { left: 24.65px; top: 0; width: 8.748px; height: 8.748px; } .kg-login-logo-type { position: absolute; left: 41.09px; top: 10.07px; width: 134.253px; height: 29.845px; } .kg-login-content { width: 100%; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 32px; } .kg-login-fields { width: 100%; min-width: 0; display: flex; flex-direction: column; gap: 20px; } .kg-login-google { width: 100%; height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 16px; padding: 0 16px; border: 1px solid var(--semantic-border-default); border-radius: 10px; background: var(--semantic-fill-default); color: var(--semantic-text-primary); font-family: var(--font-body); font-size: 16px; font-weight: 500; line-height: 24px; letter-spacing: -0.24px; cursor: pointer; transition: background var(--motion-fast), border-color var(--motion-fast), box-shadow var(--motion-fast), transform var(--motion-fast); transform-origin: center; } .kg-login-google:hover, .kg-login-google:active { background: var(--semantic-fill-muted); border-color: var(--semantic-border-default); } .kg-login-google:active { transform: scale(var(--semantic-button-pressed-scale)); } .kg-login-google:focus-visible, .kg-login-input:focus-visible, .kg-login-submit:focus-visible, .kg-login-signup a:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(73, 151, 242, 0.22); } .kg-login-google img { width: 24px; height: 24px; flex: 0 0 auto; } .kg-login-divider { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; } .kg-login-divider span { flex: 1 1 0; height: 1px; background: var(--semantic-border-default); } .kg-login-divider small { flex: 0 0 auto; color: var(--semantic-text-muted); font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: -0.066px; } .kg-login-field { display: flex; flex-direction: column; gap: 6px; width: 100%; } .kg-login-label-row { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; color: var(--semantic-text-primary); font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: -0.14px; } .kg-login-label-row > span:first-child { flex: 1 1 auto; min-width: 0; } .kg-login-label-row a { flex: 0 1 auto; min-width: 0; color: var(--semantic-state-brand-hover); text-decoration: none; text-align: right; } .kg-login-label-row a:hover { text-decoration: underline; } .kg-login-input { width: 100%; height: 52px; padding: 0 16px; border: 1px solid var(--semantic-border-default); border-radius: 8px; background: var(--semantic-fill-default); color: var(--semantic-text-primary); font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 1.6; letter-spacing: -0.192px; transition: border-color var(--motion-fast), box-shadow var(--motion-fast); } .kg-login-input::placeholder { color: var(--semantic-text-muted); opacity: 1; } .kg-login-input:focus { outline: none; border-color: var(--semantic-fill-brand); } .kg-login-password-field { position: relative; display: block; width: 100%; } .kg-login-password-field .kg-login-input { padding-right: 48px; } .kg-login-visibility { position: absolute; right: 10px; top: 50%; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 8px; background: transparent; color: var(--semantic-text-muted); transform: translateY(-50%); transition: background var(--motion-fast), transform var(--motion-fast); cursor: pointer; } .kg-login-visibility:hover { background: var(--semantic-fill-muted); } .kg-login-visibility:active { transform: translateY(-50%) scale(var(--semantic-button-pressed-scale)); } .kg-login-icon { width: 24px; height: 24px; flex: 0 0 auto; display: inline-block; vertical-align: middle; } .kg-login-error { width: 100%; padding: 10px 12px; border: 1px solid rgba(239, 68, 68, 0.24); border-radius: 8px; background: rgba(239, 68, 68, 0.08); color: #B91C1C; font-size: 13px; line-height: 1.5; } .kg-login-submit { width: 100%; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0 20px; border: none; border-radius: 8px; background: var(--semantic-fill-brand); color: var(--semantic-text-inverse); font-family: var(--font-body); font-size: 16px; font-weight: 500; line-height: 1.4; letter-spacing: -0.192px; text-align: center; cursor: pointer; transition: background var(--motion-fast), box-shadow var(--motion-fast), opacity var(--motion-fast), transform var(--motion-fast); transform-origin: center; } .kg-login-submit:hover, .kg-login-submit:active { background: var(--semantic-state-brand-hover); } .kg-login-submit:active:not(:disabled) { transform: scale(var(--semantic-button-pressed-scale)); } .kg-login-submit:disabled { opacity: var(--state-disabled-opacity); cursor: not-allowed; } .kg-login-signup { width: 100%; display: flex; align-items: center; gap: 12px; } .kg-login-signup p { flex: 1 1 auto; min-width: 0; margin: 0; color: var(--semantic-text-primary); font-size: 14px; font-weight: 400; line-height: 1.4; letter-spacing: -0.14px; } .kg-login-signup a { flex: 0 0 auto; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 0 16px; border-radius: 8px; color: var(--semantic-text-secondary); text-decoration: none; font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: -0.14px; transition: background var(--motion-fast), transform var(--motion-fast); transform-origin: center; } .kg-login-signup a:hover, .kg-login-signup a:active { background: var(--semantic-fill-muted); } .kg-login-signup a:active { transform: scale(var(--semantic-button-pressed-scale)); } /* Sign-up screen — Keep Gong Design ver.1.0 */ .kg-signup-screen { min-height: 100vh; display: flex; flex-direction: column; align-items: center; background: var(--semantic-fill-default); overflow: auto; } .kg-signup-logo-header { width: 640px; max-width: 100%; height: 120px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; } .kg-signup-surface { width: 640px; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 24px 80px; background: var(--semantic-fill-default); } .kg-signup-breadcrumb { width: 340px; max-width: 100%; height: 36px; display: flex; align-items: center; } .kg-signup-path-chip { min-width: 0; height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 8px 8px 0; border-radius: 8px; color: var(--semantic-text-secondary); text-decoration: none; font-size: 12px; font-weight: 400; line-height: 1.4; letter-spacing: -0.096px; white-space: nowrap; } .kg-signup-path-chip--active { padding-right: 12px; color: var(--semantic-text-primary); font-weight: 700; } .kg-signup-path-chip[href]:hover { color: var(--semantic-text-primary); } .kg-signup-content { width: 340px; max-width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 32px; } .kg-signup-intro { width: 100%; } .kg-signup-title { width: 100%; margin: 0; color: var(--semantic-text-primary); font-family: var(--font-display); font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -0.6px; } .kg-signup-form { width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 20px; } .kg-signup-field { width: 100%; display: flex; flex-direction: column; gap: 6px; } .kg-signup-label { display: flex; align-items: center; width: 100%; min-height: 20px; color: var(--semantic-text-primary); font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: -0.14px; } .kg-signup-input-wrap { position: relative; width: 100%; height: 52px; display: flex; align-items: center; gap: 8px; overflow: hidden; border: 1px solid var(--semantic-border-default); border-radius: 8px; background: var(--semantic-fill-default); transition: border-color var(--motion-fast), box-shadow var(--motion-fast); } .kg-signup-input { width: 100%; height: 100%; min-width: 0; padding: 0 16px; border: none; outline: none; background: transparent; color: var(--semantic-text-primary); font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 1.6; letter-spacing: -0.192px; } .kg-signup-input::placeholder { color: var(--semantic-text-muted); opacity: 1; } .kg-signup-input-wrap:focus-within { border-color: var(--semantic-fill-brand); box-shadow: 0 0 0 3px rgba(73, 151, 242, 0.18); } .kg-signup-field.is-error .kg-signup-input-wrap { border-width: 2px; border-color: var(--semantic-border-danger); box-shadow: none; } .kg-signup-input-wrap--with-icon .kg-signup-input { padding-right: 48px; } .kg-signup-helper { margin: 0; font-size: 12px; font-weight: 400; line-height: 1.4; letter-spacing: -0.096px; } .kg-signup-helper--danger { color: var(--semantic-text-danger); } .kg-signup-password-group { width: 100%; display: flex; flex-direction: column; gap: 12px; } .kg-signup-password-rules { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px; border: 1px solid var(--semantic-border-default); border-radius: 8px; background: var(--semantic-fill-muted); } .kg-signup-password-rules p { width: 100%; margin: 0; color: var(--semantic-text-primary); font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: -0.14px; } .kg-signup-rule { display: flex; align-items: center; gap: 6px; min-height: 20px; color: var(--semantic-text-secondary); font-size: 14px; font-weight: 400; line-height: 1.4; letter-spacing: -0.14px; } .kg-signup-rule.is-unmet { color: var(--semantic-text-danger); } .kg-signup-rule.is-unmet .kg-signup-rule-dot { background: var(--semantic-icon-danger); } .kg-signup-rule.is-met { color: var(--semantic-text-success); } .kg-signup-rule-mark { width: 20px; height: 20px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; } .kg-signup-rule-dot { width: 6px; height: 6px; display: block; border-radius: 999px; background: var(--semantic-icon-muted); } .kg-signup-rule .kg-signup-icon--check-small { display: none; color: var(--semantic-icon-success); } .kg-signup-rule.is-met .kg-signup-rule-dot { display: none; } .kg-signup-rule.is-met .kg-signup-icon--check-small { display: inline-block; } .kg-signup-visibility { position: absolute; right: 8px; top: 50%; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 8px; background: transparent; color: var(--semantic-text-muted); transform: translateY(-50%); transition: background var(--motion-fast), transform var(--motion-fast); cursor: pointer; } .kg-signup-visibility:hover { background: var(--semantic-fill-muted); } .kg-signup-visibility:active { transform: translateY(-50%) scale(var(--semantic-button-pressed-scale)); } .kg-signup-checkbox { position: relative; width: 100%; min-height: 44px; display: flex; align-items: center; gap: 8px; color: var(--semantic-text-primary); cursor: pointer; } .kg-signup-checkbox input { position: absolute; left: 4px; top: 10px; width: 24px; height: 24px; margin: 0; opacity: 0; cursor: pointer; } .kg-signup-checkbox-control { width: 24px; height: 24px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--semantic-border-default); border-radius: 6px; background: var(--semantic-fill-default); color: var(--semantic-text-inverse); transition: background var(--motion-fast), border-color var(--motion-fast), transform var(--motion-fast); } .kg-signup-checkbox-control .kg-signup-icon { opacity: 0; } .kg-signup-checkbox input:checked + .kg-signup-checkbox-control { border-width: 2px; border-color: var(--semantic-fill-brand); background: var(--semantic-fill-brand); } .kg-signup-checkbox input:checked + .kg-signup-checkbox-control .kg-signup-icon { opacity: 1; } .kg-signup-checkbox:active .kg-signup-checkbox-control { transform: scale(var(--semantic-button-pressed-scale)); } .kg-signup-checkbox input:focus-visible + .kg-signup-checkbox-control { box-shadow: 0 0 0 3px rgba(73, 151, 242, 0.22); } .kg-signup-checkbox-label { flex: 1 1 auto; min-width: 0; color: var(--semantic-text-primary); font-size: 16px; font-weight: 500; line-height: 1.4; letter-spacing: -0.192px; } .kg-signup-policy-link { color: var(--semantic-state-brand-hover); text-decoration: underline; text-underline-offset: 2px; font: inherit; } .kg-signup-policy-link:hover { color: var(--semantic-fill-brand); } .kg-signup-submit { width: 100%; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0 20px; border: none; border-radius: 8px; background: var(--semantic-fill-brand); color: var(--semantic-text-inverse); font-family: var(--font-body); font-size: 16px; font-weight: 500; line-height: 1.4; letter-spacing: -0.192px; cursor: pointer; transition: background var(--motion-fast), box-shadow var(--motion-fast), opacity var(--motion-fast), transform var(--motion-fast); transform-origin: center; } .kg-signup-submit:hover, .kg-signup-submit:active { background: var(--semantic-state-brand-hover); } .kg-signup-submit:active:not(:disabled) { transform: scale(var(--semantic-button-pressed-scale)); } .kg-signup-submit:focus-visible, .kg-signup-signin a:focus-visible, .kg-signup-path-chip[href]:focus-visible, .kg-signup-input-wrap:focus-within, .kg-signup-visibility:focus-visible { outline: none; } .kg-signup-submit:focus-visible, .kg-signup-signin a:focus-visible, .kg-signup-path-chip[href]:focus-visible, .kg-signup-visibility:focus-visible { box-shadow: 0 0 0 3px rgba(73, 151, 242, 0.22); } .kg-signup-message { width: 100%; padding: 10px 12px; border-radius: 8px; font-size: 13px; line-height: 1.5; } .kg-signup-message--danger { border: 1px solid rgba(240, 68, 82, 0.28); background: rgba(240, 68, 82, 0.08); color: var(--semantic-text-danger); } .kg-signup-message--success { border: 1px solid rgba(2, 162, 98, 0.24); background: rgba(2, 162, 98, 0.08); color: var(--semantic-text-success); } .kg-signup-signin { width: 100%; min-height: 40px; display: flex; align-items: center; gap: 12px; } .kg-signup-signin p { flex: 1 1 auto; min-width: 0; margin: 0; color: var(--semantic-text-primary); font-size: 14px; font-weight: 400; line-height: 1.4; letter-spacing: -0.14px; } .kg-signup-signin a { height: 40px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 0 16px; border-radius: 8px; color: var(--semantic-text-secondary); text-decoration: none; font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: -0.14px; transition: background var(--motion-fast), transform var(--motion-fast); transform-origin: center; } .kg-signup-signin a:hover, .kg-signup-signin a:active { background: var(--semantic-fill-muted); } .kg-signup-signin a:active { transform: scale(var(--semantic-button-pressed-scale)); } .kg-password-reset-content { width: 340px; max-width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 32px; } .kg-password-reset-intro { width: 100%; display: flex; flex-direction: column; gap: 12px; } .kg-password-reset-description { width: 100%; margin: 0; color: var(--semantic-text-secondary); font-size: 14px; font-weight: 400; line-height: 1.6; letter-spacing: -0.14px; word-break: keep-all; } .kg-password-reset-form { width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 20px; } .kg-password-reset-breadcrumb--hidden { opacity: 0; pointer-events: none; } .kg-password-reset-links { width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 6px; } .kg-password-reset-link-row { width: 100%; min-height: 40px; display: flex; align-items: center; gap: 12px; } .kg-password-reset-link-row p { flex: 1 1 auto; min-width: 0; margin: 0; color: var(--semantic-text-primary); font-size: 14px; font-weight: 400; line-height: 1.4; letter-spacing: -0.14px; } .kg-password-reset-link-row a { height: 40px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 0 16px; border-radius: 8px; color: var(--semantic-text-secondary); text-decoration: none; font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: -0.14px; transition: background var(--motion-fast), transform var(--motion-fast); transform-origin: center; } .kg-password-reset-link-row a:hover, .kg-password-reset-link-row a:active { background: var(--semantic-fill-muted); } .kg-password-reset-link-row a:active { transform: scale(var(--semantic-button-pressed-scale)); } .kg-password-reset-link-row a:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(73, 151, 242, 0.22); } .kg-password-expiration-screen { min-height: 100vh; display: flex; flex-direction: column; align-items: center; background: var(--semantic-fill-default); } .kg-password-expiration-surface { width: 640px; max-width: 100%; min-height: calc(100vh - 120px); display: flex; flex-direction: column; align-items: center; gap: 32px; padding: 40px 40px 80px; } .kg-password-expiration-message { width: min(480px, 100%); display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center; } .kg-password-expiration-illustration { position: relative; width: 80px; height: 80px; display: block; overflow: hidden; } .kg-password-expiration-asset { position: absolute; display: block; pointer-events: none; } .kg-password-expiration-asset--cloud { left: 2.8px; top: 6.2px; width: 75px; height: 45.4px; } .kg-password-expiration-asset--lightning { left: 30.7px; top: 33.7px; width: 19.1px; height: 39.4px; } .kg-password-expiration-copy { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; } .kg-password-expiration-title { width: 100%; margin: 0; color: var(--semantic-text-primary); font-family: var(--font-body); font-size: 28px; font-weight: 700; line-height: 1.3; letter-spacing: -0.7px; word-break: keep-all; } .kg-password-expiration-description { width: 100%; margin: 0; color: var(--semantic-text-secondary); font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 1.6; letter-spacing: -0.192px; word-break: keep-all; } .kg-password-expiration-button { width: min(480px, 100%); height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0 20px; border-radius: 8px; background: var(--semantic-fill-muted); color: var(--semantic-text-primary); text-decoration: none; font-family: var(--font-body); font-size: 16px; font-weight: 500; line-height: 1.4; letter-spacing: -0.192px; transition: background var(--motion-fast), transform var(--motion-fast), box-shadow var(--motion-fast); transform-origin: center; } .kg-password-expiration-button:hover, .kg-password-expiration-button:active { background: var(--semantic-fill-strong); } .kg-password-expiration-button:active { transform: scale(var(--semantic-button-pressed-scale)); } .kg-password-expiration-button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(73, 151, 242, 0.22); } .kg-signup-icon { width: 24px; height: 24px; flex: 0 0 auto; display: inline-block; vertical-align: middle; } .kg-login-visibility > .kg-login-icon, .kg-signup-visibility > .kg-signup-icon { color: var(--semantic-icon-muted); } .kg-login-signup a > .kg-login-icon, .kg-signup-signin a > .kg-signup-icon, .kg-password-reset-link-row a > .kg-signup-icon { color: var(--semantic-text-secondary); } .kg-signup-path-chip > .kg-signup-icon { width: 16px; height: 16px; color: var(--semantic-icon-disabled); } .kg-signup-rule .kg-signup-icon--check-small { color: var(--semantic-icon-success); } .kg-signup-checkbox-control .kg-signup-icon { color: var(--semantic-text-inverse); } .kg-signup-complete-screen { min-height: 100vh; display: flex; flex-direction: column; align-items: center; background: var(--semantic-fill-default); } .kg-signup-complete-surface { width: 640px; max-width: 100%; min-height: calc(100vh - 120px); display: flex; flex-direction: column; align-items: center; gap: 40px; padding: 40px 24px 80px; } .kg-signup-complete-message { width: min(480px, 100%); display: flex; flex-direction: column; align-items: center; gap: 32px; } .kg-signup-complete-illustration { position: relative; width: 80px; height: 80px; display: block; overflow: hidden; } .kg-signup-complete-lottie, .kg-signup-complete-static { position: absolute; inset: 0; display: block; width: 80px; height: 80px; } .kg-signup-complete-lottie { left: 50%; top: 50%; z-index: 1; opacity: 0; transform: translate(-50%, -50%) scale(2); transform-origin: center; transition: opacity var(--motion-fast); } .kg-signup-complete-lottie svg { display: block; width: 100% !important; height: 100% !important; } .kg-signup-complete-static { z-index: 0; opacity: 1; transition: opacity var(--motion-fast); } .kg-signup-complete-illustration.is-lottie-ready .kg-signup-complete-lottie { opacity: 1; } .kg-signup-complete-illustration.is-lottie-ready .kg-signup-complete-static { opacity: 0; } .kg-signup-complete-asset { position: absolute; display: block; pointer-events: none; } .kg-signup-complete-asset--left { left: 5px; top: 10.4px; width: 58.6px; height: 59.2px; } .kg-signup-complete-asset--right { left: 12.9px; top: 10.6px; width: 58.1px; height: 59px; } .kg-signup-complete-asset--confetti { left: 4.8px; top: 2.3px; width: 73.4px; height: 70.2px; } .kg-signup-complete-copy { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; } .kg-signup-complete-title { width: 100%; margin: 0; color: var(--semantic-text-primary); font-family: var(--font-body); font-size: 28px; font-weight: 700; line-height: 1.3; letter-spacing: -0.7px; word-break: keep-all; } .kg-signup-complete-description { width: 100%; margin: 0; color: var(--semantic-text-secondary); font-family: var(--font-body); font-size: 18px; font-weight: 400; line-height: 1.6; letter-spacing: -0.216px; word-break: keep-all; } .kg-signup-complete-button { min-width: 164px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0 20px; border-radius: 8px; background: var(--semantic-fill-brand); color: var(--semantic-text-inverse); text-decoration: none; font-family: var(--font-body); font-size: 16px; font-weight: 500; line-height: 1.4; letter-spacing: -0.192px; transition: background var(--motion-fast), transform var(--motion-fast), box-shadow var(--motion-fast); transform-origin: center; } .kg-signup-complete-button:hover, .kg-signup-complete-button:active { background: var(--semantic-state-brand-hover); } .kg-signup-complete-button:active { transform: scale(var(--semantic-button-pressed-scale)); } .kg-signup-complete-button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(73, 151, 242, 0.22); } @media (max-width: 720px) { .kg-signup-screen { min-height: 100dvh; align-items: stretch; } .kg-signup-logo-header { width: 100%; height: 96px; } .kg-signup-surface { width: 100%; padding: 24px 20px 56px; } .kg-signup-breadcrumb, .kg-signup-content, .kg-password-reset-content { width: min(100%, 340px); } .kg-signup-complete-surface, .kg-password-expiration-surface { width: 100%; min-height: calc(100dvh - 96px); padding: 24px 20px 56px; } } @media (max-width: 420px) { .kg-signup-signin { align-items: stretch; flex-direction: column; gap: 8px; } .kg-signup-signin a { width: 100%; } .kg-signup-checkbox-label, .kg-signup-input, .kg-signup-submit { font-size: 15px; } .kg-signup-complete-title, .kg-password-expiration-title { font-size: 24px; } .kg-signup-complete-description, .kg-password-expiration-description { font-size: 16px; } } @media (max-width: 960px) { .kg-auth-screen { grid-template-columns: 1fr; gap: var(--gap-xl); padding: var(--pad-lg); } .kg-auth-visual { min-height: 220px; max-height: 280px; border-radius: var(--radius-xl); } .kg-auth-panel { min-height: auto; padding: var(--pad-xl) var(--pad-sm) var(--pad-3xl); } .kg-auth-logo { margin-bottom: var(--margin-md); } .kg-auth-form { max-width: 420px; } } @media (max-width: 720px) { .kg-auth-screen { min-height: 100dvh; } .kg-auth-visual { min-height: 160px; } .kg-auth-title { font-size: 24px; } } @media (max-width: 1300px) { .kg-login-screen { --kg-login-page-h: min(900px, calc(100vh - 80px)); padding: 40px; } .kg-login-hero { flex: 1 1 48%; max-width: 600px; } .kg-login-surface { flex: 1 1 52%; max-width: 712px; } } @media (max-width: 860px) { .kg-login-screen { min-height: 100dvh; flex-direction: column; justify-content: flex-start; gap: 32px; padding: 24px 20px 48px; } .kg-login-hero { flex: 0 0 auto; width: min(100%, 480px); height: 280px; } .kg-login-hero-image { border-radius: 24px; } .kg-login-surface { flex: 0 0 auto; width: 100%; height: auto; padding: 0; } .kg-login-form { width: min(100%, 340px); } } @media (max-width: 420px) { .kg-login-screen { align-items: stretch; } .kg-login-hero { height: 220px; } .kg-login-form { width: 100%; } .kg-login-label-row a { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kg-login-google, .kg-login-input, .kg-login-submit { font-size: 15px; } .kg-login-signup { align-items: stretch; flex-direction: column; gap: 8px; } .kg-login-signup a { width: 100%; } } /* Wide form page (workspace_create) */ .kg-page-wide { max-width: 720px; margin: 0 auto; padding: var(--pad-5xl) var(--pad-3xl); } .kg-form-card { background: #FFFFFF; border: 1px solid var(--border-default); border-radius: var(--radius-xl); padding: var(--pad-3xl); box-shadow: var(--shadow-card); } /* ════════════════════════════════════════════════════════════════ * D52 cycle/d52-refine-ui — ④ 리파인 분할 워크스페이스 * Stitch v8 + RemNote features (learn-any-pdf 분할 뷰). * @sync Specs/KeepGong/DesignSystem/RefineWorkspaceSpec.lean * TopNavStage 5 / WorkspacePane(source 46|structure 54) / RefineStatusColor(verified/review/editing) * ════════════════════════════════════════════════════════════════ */ /* ── App shell: 전역 상단 네비 + 본문 ── */ .kg-app-shell { display: flex; flex-direction: column; height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; overscroll-behavior: none; background: var(--color-surface-app); } /* ── 전역 상단 네비 (단일 행, 줄바꿈 금지) ── */ .kg-topnav { height: var(--header-height); flex: 0 0 var(--header-height); display: flex; align-items: center; gap: var(--gap-xl); /* 24→20 그리드 스냅 (Gap 스케일 인접 단계) */ padding: 0 var(--pad-2xl); background: var(--color-bg); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .kg-topnav-brand { display: inline-flex; align-items: center; gap: var(--gap-sm); font-family: var(--font-display); font-weight: 700; /* 800→700: 디자이너 3-weight 체계(Regular/Medium/Bold) */ font-size: 16px; letter-spacing: -0.01em; /* RemNote blue→cyan 그라데이션 워드마크 */ background: linear-gradient(92deg, var(--color-accent) 0%, var(--color-accent-cyan) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .kg-topnav-breadcrumb { color: var(--text-subtle); font-size: 13px; flex: 0 0 auto; } .kg-topnav-breadcrumb .sep { margin: 0 var(--space-075); opacity: .6; } .kg-topnav-stages { display: flex; align-items: center; gap: var(--gap-xs); flex: 1 1 auto; overflow: hidden; } .kg-topnav-stage { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--radius-full); font-size: 12px; font-weight: 700; /* 600→700: 디자이너 3-weight 체계 (강조=Bold) */ color: var(--text-muted); text-decoration: none; white-space: nowrap; /* ★ 라벨 줄바꿈 방지 (사용자 '두칸으로 밀림' 수정) */ transition: background var(--motion-fast), color var(--motion-fast); } .kg-topnav-stage:hover { background: var(--color-sunken); } .kg-topnav-stage.is-active { /* 활성 스테이지 = cyan (RemNote 보조 accent) */ background: rgba(56, 189, 248, 0.14); color: var(--color-accent-cyan); } .kg-topnav-right { display: inline-flex; align-items: center; gap: var(--gap-lg); flex: 0 0 auto; } .kg-topnav-search { height: var(--size-xs); width: 132px; /* 그룹 드롭다운 3개가 우측에 합류 — 폭 양보 */ padding: 0 12px; border: 1px solid var(--border-default); border-radius: var(--radius-full); font-size: 13px; font-family: inherit; background: var(--color-surface); color: var(--text-primary); } .kg-topnav-search:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(73, 151, 242, 0.12); } /* ── 사이드바→TopNav 마이그 그룹 드롭다운 (TopNavMenuMigrationSpec §2) ── native
— ai-crawl 이 Leptos 클릭을 발화시키지 못해 브라우저 토글 채택. 메뉴 항목은 닫혀 있어도 DOM 에 존재 (QA: 13 href 상존 검증 가능). */ .kg-topnav-group { position: relative; } .kg-topnav-group-summary { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--color-text-muted); cursor: pointer; white-space: nowrap; list-style: none; /* 기본 ▶ 마커 제거 */ transition: background var(--motion-fast), color var(--motion-fast); } .kg-topnav-group-summary::-webkit-details-marker { display: none; } .kg-topnav-group-summary::after { content: "▾"; font-size: 10px; opacity: .7; } .kg-topnav-group-summary:hover { background: var(--color-sunken); } .kg-topnav-group[open] .kg-topnav-group-summary { background: rgba(80, 108, 247, 0.10); color: var(--color-accent); } .kg-topnav-group-menu { position: absolute; top: calc(100% + 6px); right: 0; /* RIGHT 영역 소속 — 좌측으로 펼치면 viewport 이탈 방지 */ min-width: 168px; padding: 6px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12); display: flex; flex-direction: column; gap: 2px; z-index: 40; } .kg-topnav-group-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 500; color: var(--color-text); text-decoration: none; white-space: nowrap; } .kg-topnav-group-item:hover { background: var(--color-sunken); } /* ── 좁은 폭 대응 (TopNavMenuMigrationSpec — Codex F3) ── stages 는 overflow:hidden 이라 좁은 폭에서 stage 링크가 잘린다. 우선순위: stage 링크 + 그룹 드롭다운 > 검색 > breadcrumb. */ @media (max-width: 1100px) { .kg-topnav-search { display: none; } } @media (max-width: 900px) { .kg-topnav-breadcrumb { display: none; } } /* ── 분할 본문: 좌 원본(46) | 우 구조(54) ── */ .kg-refine-split { /* ★ flex-basis:0 (auto 아님) — auto 면 base size=콘텐츠 높이라, 우 패널 콘텐츠가 길면 grid 행이 콘텐츠만큼 부풀어(순환 의존: 행 높이←콘텐츠) 셸이 100vh 초과 → 페이지 들뜸/하단 빈 공간 (사용자 "오른쪽 내용 펼치면 그만큼 내려감"). basis 0 = 가용 공간만 채움 → grid 행 minmax(0,1fr) 이 확정되고 패널이 내부 스크롤한다. (grid-template-rows 만으론 부족 — flex-basis 가 진짜 원인.) */ flex: 1 1 0; display: grid; /* ★ calc()는 fr 미지원 → % 사용 (좌|우 유지). gap 은 minmax(0,..)로 오버플로 흡수 */ /* D130 8/2: 가운데 12px = 드래그 손잡이 칼럼 (RefinePaneResizeHandle). 우측은 1fr — 손잡이 폭을 %에서 빼는 계산을 없앤다 (좌 % 가 유일한 자유도). */ grid-template-columns: minmax(0, calc(var(--pane-source) * 1%)) 12px minmax(0, 1fr); /* ★ 행도 1fr 로 묶어 패널이 컨테이너(100vh-flex) 높이를 받게 한다. 없으면 행이 content-height(auto)로 늘어 페이지가 100vh 초과 → 무한 스크롤 (D106 fix). */ grid-template-rows: minmax(0, 1fr); gap: var(--pane-gap); /* 좌우 반응형 패딩 — 와이드 화면에서 가장자리까지 퍼지지 않게 */ padding: var(--pad-lg) clamp(16px, 4vw, 96px); min-height: 0; /* grid 자식 스크롤 허용 */ /* ★ splitBorderBox (WorkbenchViewportContainmentSpec): 세로 패딩(--pad-lg)이 flex 로 받은 높이에 합산(content-box)되면 남은 공간을 초과 → 문서 스크롤. border-box 로 패딩을 높이 안에 흡수. */ box-sizing: border-box; } /* ── 콘텐츠 생성 워크벤치: 선택 제목은 세로로 공개, 폭은 사용자에게 맡긴다 ── * ContentWorkbenchSpec §5b / token-map layout.workbenchListMinWidth. * 기존 리파인 split은 2열 고정으로 보존하고, 이 변형만 가운데 8px 손잡이를 가진다. */ .kg-workbench-split { grid-template-columns: minmax(var(--workbench-list-min-width), calc(var(--pane-source) * 1%)) var(--pane-gap) minmax(var(--right-panel-width), 1fr); gap: var(--gap-none); } /* 패키지 전환 화면: 패키지 | 번들·바둑판 | 문제. 세 칼럼 중 최대 둘만 펼쳐지고 * 접힌 칼럼은 기본 컨트롤 높이와 같은 48px 주소를 남긴다. 시간순 레거시는 그대로다. */ .kg-workbench-split.is-package-workspace { display: flex; gap: var(--kg-package-column-gap); padding-inline: clamp(12px, 2vw, 32px); } .kg-workbench-split.is-package-workspace .kg-workbench-column { flex-grow: 0; flex-shrink: 0; flex-basis: var(--kg-package-rail-width); will-change: flex-basis, flex-grow; } .kg-workbench-split.is-package-workspace .kg-package-column.is-open { flex-grow: var(--kg-package-user-grow, var(--kg-package-column-grow)); flex-shrink: 1; flex-basis: var(--kg-package-column-min); } .kg-workbench-split.is-package-workspace .kg-bundle-column.is-open { flex-grow: var(--kg-package-user-grow, var(--kg-bundle-column-grow)); flex-shrink: 1; flex-basis: var(--kg-bundle-column-min); } .kg-workbench-split.is-package-workspace .kg-problem-column.is-open { flex-grow: var(--kg-package-user-grow, var(--kg-problem-column-grow)); flex-shrink: 1; flex-basis: var(--kg-problem-column-min); } .kg-package-column-resize-handle { position: relative; flex: 0 0 12px; min-width: 12px; min-height: 0; margin-inline: -4px; border: 0; outline: none; background: transparent; cursor: col-resize; touch-action: none; user-select: none; } .kg-package-column-resize-handle::before { position: absolute; top: 44px; bottom: 12px; left: 50%; width: 2px; border-radius: var(--radius-full); background: color-mix(in srgb, var(--color-border) 80%, transparent); content: ""; transform: translateX(-50%); transition: width var(--kg-package-hover-duration) var(--kg-package-easing), background var(--kg-package-hover-duration) var(--kg-package-easing), box-shadow var(--kg-package-hover-duration) var(--kg-package-easing); } .kg-package-column-resize-handle:hover::before, .kg-package-column-resize-handle:focus-visible::before { width: 3px; background: var(--color-accent); box-shadow: 0 0 0 4px var(--color-accent-bg); } .kg-workbench-column { display: flex; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--kg-package-column-radius); background: var(--color-surface); box-shadow: var(--kg-package-column-shadow); transition: flex-basis var(--kg-package-layout-duration) var(--kg-package-easing), flex-grow var(--kg-package-layout-duration) var(--kg-package-easing), border-color var(--kg-package-content-duration) var(--kg-package-easing), background var(--kg-package-content-duration) var(--kg-package-easing), box-shadow var(--kg-package-content-duration) var(--kg-package-easing); } .kg-workbench-column.is-open { flex-direction: column; } /* ★D130: 드래그 리사이즈 중에는 flex transition 을 끈다 — 패널이 마우스를 easing 으로 뒤쫓아 뻑뻑하게 느껴지던 원인. 접기/펼치기 애니메이션은 드래그 밖에서만 산다. */ .kg-workbench-split.is-resizing, .kg-workbench-split.is-resizing > * { transition: none !important; } .kg-workbench-column.is-collapsed { align-items: stretch; justify-content: stretch; background: color-mix(in srgb, var(--color-bg) 75%, var(--color-surface)); } .kg-workbench-column.is-collapsed .kg-workbench-column-content { visibility: hidden; opacity: 0; pointer-events: none; transform: translateX(calc(-1 * var(--kg-package-content-shift))); transition-delay: 0ms, 0ms, var(--kg-package-content-duration); } .kg-workbench-column-toggle { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: var(--space-100); min-height: 34px; padding: 7px 10px; border: 0; border-bottom: 1px solid var(--color-border); background: color-mix(in srgb, var(--color-bg) 52%, var(--color-surface)); color: var(--color-text-2); cursor: pointer; font-size: 11px; font-weight: 750; transition: background var(--kg-package-hover-duration) var(--kg-package-easing), color var(--kg-package-hover-duration) var(--kg-package-easing); } .kg-workbench-column-toggle:hover { background: var(--color-accent-bg); color: var(--color-accent); } .kg-workbench-column.is-collapsed .kg-workbench-column-toggle { width: 100%; height: 100%; min-height: 0; padding: 12px 8px; border-bottom: 0; writing-mode: vertical-rl; } .kg-workbench-column-content { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; visibility: visible; opacity: 1; transform: translateX(0); transition: opacity var(--kg-package-content-duration) var(--kg-package-easing), transform var(--kg-package-content-duration) var(--kg-package-easing), visibility 0ms; } .kg-workbench-column-header { display: flex; flex: 0 0 auto; align-items: flex-end; justify-content: space-between; gap: var(--space-100); /* ★D130: 좌우 여백 확대 — "수업 단위 패키지 · 번들을 카드에 놓으세요" 가 패널 경계에 붙어 보이던 문제 (사용자 지적). */ padding: var(--space-250) var(--space-300) var(--space-125); } .kg-workbench-column-header span { display: grid; gap: 2px; } .kg-workbench-column-header small { color: var(--color-accent); font-size: 9px; font-weight: 800; letter-spacing: .08em; } .kg-workbench-column-header strong { color: var(--color-text-1); font-size: 16px; } .kg-workbench-column-header em { color: var(--color-text-3); font-size: 10px; font-style: normal; text-align: right; } .kg-workbench-column-scroll, .kg-bundle-column-content { min-height: 0; overflow-y: auto; } .kg-workbench-column-scroll { padding: 0 var(--space-200) var(--space-200); } .kg-bundle-column-content { padding: var(--space-200); } .kg-problem-column-content { position: relative; } .kg-workbench-split-handle { position: relative; min-height: var(--space-800); border: 0; background: transparent; cursor: col-resize; touch-action: none; user-select: none; outline: none; } .kg-workbench-split-handle::before { position: absolute; top: var(--space-150); bottom: var(--space-150); left: 50%; width: var(--space-025); border-radius: var(--radius-full); background: var(--border-default); content: ""; transform: translateX(-50%); transition: background var(--motion-fast) var(--motion-easing), box-shadow var(--motion-fast) var(--motion-easing); } .kg-workbench-split-handle::after { position: absolute; top: 50%; left: 50%; width: var(--space-025); height: var(--space-250); border-radius: var(--radius-full); background: var(--color-surface); box-shadow: 0 0 0 var(--space-025) var(--border-default); content: ""; transform: translate(-50%, -50%); } .kg-workbench-split-handle:hover::before, .kg-workbench-split-handle:focus-visible::before { background: var(--color-accent); box-shadow: 0 0 0 var(--space-025) var(--color-accent-bg); } .kg-bundle-card-title { overflow: hidden; color: var(--color-text-1); font-size: var(--text-style-label-medium-font-size); font-weight: var(--text-style-weight-medium); text-overflow: ellipsis; white-space: nowrap; } .kg-bundle-card-title.is-selected { overflow: visible; overflow-wrap: anywhere; text-overflow: clip; white-space: normal; line-height: var(--text-style-label-line-height); } /* ── 수업 패키지 보드 ─────────────────────────────────────────────────── * 좁은 좌측 pane에서는 폼 컨트롤을 한 행에 늘어놓지 않는다. 패키지는 선반, * 번들은 두 줄짜리 카드, 이동 select는 명시적 보조 동작으로만 보이게 한다. */ .sr-only { 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; white-space: nowrap !important; border: 0 !important; } .kg-bundle-catalog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-200); margin-bottom: var(--space-200); } .kg-bundle-catalog-header h2 { margin: 0; color: var(--color-text-1); font-size: var(--text-style-heading-small-font-size); line-height: 1.25; } .kg-bundle-catalog-header small { display: block; max-width: 250px; margin-top: var(--space-050); color: var(--color-text-3); font-size: 11px; line-height: 1.45; } .kg-bundle-catalog-tabs { display: inline-flex; flex: 0 0 auto; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); } .kg-package-create { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-100); margin-bottom: var(--space-250); padding: var(--space-150); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: 0 1px 0 rgb(15 23 42 / 3%); } .kg-package-create input { min-width: 0; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-md); outline: none; background: var(--color-bg); color: var(--color-text-1); font: inherit; font-size: 12px; transition: border-color var(--motion-fast) var(--motion-easing), box-shadow var(--motion-fast) var(--motion-easing); } .kg-package-create input:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-bg); } .kg-package-board { display: flex; flex-direction: column; gap: var(--space-200); padding-bottom: var(--space-300); } .kg-package-section { position: relative; padding: 0; overflow: hidden; border: 1px solid var(--color-border); border-top: 3px solid var(--color-accent); border-radius: var(--kg-package-card-radius); background: var(--color-surface); box-shadow: var(--kg-package-card-shadow); transition: border-color var(--kg-package-hover-duration) var(--kg-package-easing), box-shadow var(--kg-package-hover-duration) var(--kg-package-easing), transform var(--kg-package-hover-duration) var(--kg-package-easing); } .kg-package-section:hover:not(.is-selected) { transform: translateY(-1px); box-shadow: var(--kg-package-column-shadow); } .kg-package-section.is-selected { border-color: var(--color-accent); box-shadow: var(--kg-package-card-selected-shadow); } .kg-package-section.is-ungrouped { border-top-color: var(--color-text-3); background: color-mix(in srgb, var(--color-bg) 82%, var(--color-surface)); box-shadow: none; } .kg-package-section:has(.kg-package-bundle-handle:active) { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-bg); } .kg-package-section-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-100); min-height: var(--kg-package-card-min-height); padding: var(--kg-package-card-padding-block) var(--kg-package-card-padding-inline); border-bottom: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent); background: linear-gradient(100deg, var(--color-surface), color-mix(in srgb, var(--color-accent-bg) 28%, var(--color-surface))); } .kg-package-section-heading { flex: 1 1 auto; padding: 0; border: 0; outline: none; background: transparent; text-align: left; cursor: pointer; } .kg-package-section-heading, .kg-package-section-tools, .kg-package-section-actions { display: flex; align-items: center; } .kg-package-card-arrow { display: grid; width: 20px; height: 20px; place-items: center; color: var(--color-text-3); font-size: 18px; } .kg-package-section.is-selected .kg-package-card-arrow { color: var(--color-accent); } .kg-package-section-heading { min-width: 0; gap: var(--space-075); } .kg-package-section-identity { display: grid; min-width: 0; gap: 1px; } .kg-package-section-eyebrow { color: var(--color-accent); font-size: var(--kg-package-card-eyebrow-size); font-weight: 800; letter-spacing: .09em; line-height: 1; } .kg-package-section.is-ungrouped .kg-package-section-eyebrow { color: var(--color-text-3); } .kg-package-section-title { min-width: 0; overflow: hidden; color: var(--color-text-1); font-size: var(--kg-package-card-title-size); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .kg-package-section-count { flex: 0 0 auto; color: var(--color-text-3); font-size: var(--kg-package-card-meta-size); font-variant-numeric: tabular-nums; } .kg-package-section-status { flex: 0 0 auto; padding: 2px 6px; border-radius: var(--radius-full); background: var(--color-accent-bg); color: var(--color-accent); font-size: var(--kg-package-card-meta-size); font-weight: 700; } .kg-package-section-tools, .kg-package-section-actions { flex: 0 0 auto; gap: var(--space-050); } .kg-package-icon-button, .kg-package-collapse-button { border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-text-3); cursor: pointer; } .kg-package-icon-button { display: inline-grid; width: var(--kg-package-control-size); height: var(--kg-package-control-size); padding: 0; place-items: center; font-size: 13px; text-decoration: none; } .kg-package-collapse-button { padding: 4px 6px; font-size: 10px; } .kg-package-icon-button:hover:not(:disabled), .kg-package-collapse-button:hover:not(:disabled) { background: var(--color-accent-bg); color: var(--color-accent); } .kg-package-icon-button.is-danger:hover:not(:disabled) { background: rgb(220 38 38 / 9%); color: #dc2626; } .kg-package-icon-button:disabled, .kg-package-collapse-button:disabled { opacity: .28; cursor: default; } .kg-package-section-body { flex-direction: column; gap: var(--space-100); padding: var(--space-125) var(--space-150) var(--space-150); background: color-mix(in srgb, var(--color-bg) 58%, var(--color-surface)); } .kg-package-bundle-card { display: grid; /* BundleRowCell 열거와 1:1 — checkbox · handle · main · move · delete */ grid-template-columns: 15px 20px minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-075); min-width: 0; min-height: var(--kg-bundle-card-min-height); padding: var(--space-150); border: 1px solid var(--color-border); border-radius: var(--kg-bundle-card-radius); background: var(--color-bg); transition: border-color var(--kg-package-hover-duration) var(--kg-package-easing), box-shadow var(--kg-package-hover-duration) var(--kg-package-easing), transform var(--kg-package-hover-duration) var(--kg-package-easing); } .kg-package-bundle-card:hover { border-color: color-mix(in srgb, var(--color-accent) 42%, var(--color-border)); box-shadow: 0 4px 12px rgb(15 23 42 / 6%); transform: translateY(-1px); } .kg-package-bundle-card.is-selected { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-bg); } .kg-package-inline-grid { margin: 2px 0 var(--space-100); padding: var(--space-100) 0 var(--space-150); border-bottom: 1px solid var(--color-border); } .kg-package-bundle-context { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--space-100); margin-bottom: var(--space-150); padding: var(--space-125) var(--space-150); border-radius: var(--radius-md); background: var(--color-accent-bg); } .kg-package-bundle-context span { grid-column: 1 / -1; color: var(--color-accent); font-size: 9px; font-weight: 800; letter-spacing: .07em; } .kg-package-bundle-context strong { min-width: 0; overflow: hidden; color: var(--color-text-1); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; } .kg-package-bundle-context small { color: var(--color-text-3); font-size: 10px; } .kg-download-package-filter { display: flex; gap: var(--space-075); margin-bottom: var(--space-150); padding-bottom: var(--space-100); overflow-x: auto; scrollbar-width: thin; } .kg-download-package-filter .btn { flex: 0 0 auto; } /* 내려받기 조립 작업대 — 패키지는 전폭 맥락, 조립과 읽기는 서로 다른 5:5 밴드다. */ .kg-download-workbench { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--space-150); margin-top: var(--space-250); } .kg-download-package-context, .kg-download-focus { grid-column: 1 / -1; } .kg-download-workbench-panel, .kg-download-focus, .kg-download-focus-column { min-width: 0; } .kg-download-focus-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--space-150); } .kg-download-focus-column { display: flex; flex-direction: column; gap: var(--space-150); } @media (max-width: 980px) { .kg-download-workbench, .kg-download-focus-grid { grid-template-columns: minmax(0, 1fr); } .kg-download-package-context, .kg-download-focus { grid-column: 1; } } .kg-package-bundle-list { display: flex; flex-direction: column; gap: var(--space-100); min-height: 120px; } .kg-package-bundle-list.is-busy { cursor: progress; } .kg-package-bundle-list.is-dragging .kg-package-drop-target { display: block; } /* ★D130 다중 선택 이동 */ .kg-package-bundle-check { flex: 0 0 auto; width: 15px; height: 15px; margin: 0; accent-color: var(--color-accent); cursor: pointer; } .kg-package-bulk-bar { display: flex; align-items: center; gap: var(--space-100); margin: var(--space-100) 0; padding: var(--space-100) var(--space-150); border: 1px solid var(--color-accent); border-radius: 10px; background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface)); font-size: 12px; } .kg-package-bulk-bar strong { flex: 0 0 auto; color: var(--color-accent); } .kg-package-bulk-bar label { flex: 1 1 auto; min-width: 0; } .kg-package-bulk-bar select { width: 100%; padding: 4px 8px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); font-size: 12px; } .kg-package-bundle-handle { display: grid; width: 20px; height: 28px; place-items: center; color: var(--color-text-3); cursor: grab; font-size: 15px; line-height: 1; user-select: none; } .kg-package-bundle-handle:active { cursor: grabbing; } .kg-package-bundle-main { display: block; min-width: 0; padding: 0; overflow: hidden; border: 0; outline: none; background: transparent; color: inherit; text-align: left; cursor: pointer; } .kg-package-bundle-main:focus-visible { border-radius: var(--radius-xs); box-shadow: 0 0 0 3px var(--color-accent-bg); } .kg-package-bundle-title { display: block; width: 100%; overflow: hidden; color: var(--color-text-1); font-size: var(--kg-bundle-card-title-size); font-weight: 650; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } /* 선택된 패키지 번들 카드는 제목을 전체 표시로 펼친다 — 시간순 보기 .kg-bundle-card-title.is-selected 와 동일 계약 (카드는 세로로 자연 증가). */ .kg-package-bundle-title.is-selected { overflow: visible; overflow-wrap: anywhere; text-overflow: clip; white-space: normal; } .kg-package-bundle-meta { display: flex; align-items: center; gap: 4px; min-width: 0; margin-top: 3px; color: var(--color-text-3); font-size: 10px; line-height: 1; } .kg-package-bundle-status { display: inline-flex; align-items: center; min-height: 17px; padding: 1px 6px; border-radius: var(--radius-full); font-size: 10px; font-weight: 700; } .kg-package-bundle-delete { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--color-text-3); cursor: pointer; font-size: 13px; line-height: 1; } .kg-package-bundle-delete:hover:not(:disabled) { border-color: var(--color-border); color: var(--color-danger-text); } .kg-package-bundle-delete:disabled { opacity: 0.5; cursor: default; } .kg-package-bundle-move { position: relative; display: block; width: 76px; min-width: 0; } .kg-package-bundle-move select { width: 100%; min-width: 0; height: 28px; padding: 0 20px 0 7px; overflow: hidden; border: 1px solid transparent; border-radius: var(--radius-sm); outline: none; background-color: transparent; color: var(--color-text-3); cursor: pointer; font-size: 10px; text-overflow: ellipsis; transition: border-color var(--motion-fast) var(--motion-easing), background var(--motion-fast) var(--motion-easing); } .kg-package-bundle-card:hover .kg-package-bundle-move select, .kg-package-bundle-move select:focus-visible { border-color: var(--color-border); background: var(--color-surface); color: var(--color-text-2); } .kg-package-empty-drop { padding: var(--space-200) var(--space-150); border: 1px dashed color-mix(in srgb, var(--color-accent) 35%, var(--color-border)); border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-accent-bg) 24%, transparent); color: var(--color-text-3); font-size: 11px; text-align: center; } .kg-package-drop-target { display: none; padding: 9px var(--space-100); border: 1px dashed var(--color-accent); border-radius: var(--radius-md); background: var(--color-accent-bg); color: var(--color-accent); font-size: 10px; font-weight: 750; letter-spacing: .01em; text-align: center; } .kg-package-board.is-dragging .kg-package-drop-target { display: block; animation: kg-package-drop-reveal 140ms var(--motion-easing) both; } .kg-package-board.is-dragging .kg-package-section { border-color: color-mix(in srgb, var(--color-accent) 38%, var(--color-border)); } .kg-package-board.is-busy .kg-package-section { cursor: progress; } @keyframes kg-package-drop-reveal { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 980px) { .kg-bundle-catalog-header { align-items: center; } .kg-bundle-catalog-header small { display: none; } .kg-package-bundle-move { width: 70px; } } @media (prefers-reduced-motion: reduce) { .kg-workbench-split.is-package-workspace, .kg-workbench-column, .kg-workbench-column-content, .kg-workbench-column-toggle, .kg-package-section, .kg-package-bundle-card { transition-duration: 0ms !important; } } /* ── 패널 카드 (좌/우 공통) ── */ .kg-pane { display: flex; flex-direction: column; min-height: 0; /* ★ 패널 자체 패딩/보더가 grid 행 높이에 합산되지 않게 (WorkbenchViewportContainmentSpec paneOverflowHidden 보강) — content-box 면 인라인 padding 이 높이를 초과시켜 문서 스크롤 유발. */ box-sizing: border-box; background: var(--color-bg); border: 1px solid var(--border-default); border-radius: var(--radius-xl); box-shadow: var(--shadow-section); overflow: hidden; } .kg-pane-header { flex: 0 0 auto; display: flex; align-items: center; gap: var(--gap-lg); padding: var(--pad-md) var(--pad-lg); border-bottom: 1px solid var(--border-divider); } .kg-pane-title { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--text-primary); } .kg-pane-tabs { display: inline-flex; gap: 2px; } .kg-pane-tab { padding: 4px 10px; border-radius: var(--radius-md); font-size: 12px; font-weight: 500; color: var(--text-muted); cursor: pointer; background: transparent; border: none; } .kg-pane-tab.is-active { /* 활성 탭 = primary */ background: var(--fill-primary); color: #fff; } .kg-pane-spacer { flex: 1 1 auto; } .kg-pane-pagenav { display: inline-flex; align-items: center; gap: var(--gap-sm); font-size: 12px; color: var(--text-muted); } .kg-pane-body { flex: 1 1 auto; overflow-y: auto; padding: var(--pad-2xl); min-height: 0; /* ★ 스크롤을 pane 안에 가둠 — 끝에서 트랙패드 바운스가 문서로 새어 흰 화면 노출되는 것 차단 */ overscroll-behavior: contain; } /* ── 좌: 원본 시험지 렌더 ── */ .kg-source-page { font-size: 14px; line-height: 1.7; color: var(--text-primary); } .kg-source-problem { margin-bottom: var(--margin-md); } .kg-source-problem .num { font-weight: 700; margin-right: 6px; } .kg-source-choices { display: flex; gap: var(--gap-xl); /* 16→20 그리드 스냅 (Gap 스케일 인접 단계) */ margin-top: var(--space-150); color: var(--text-secondary); flex-wrap: wrap; } .kg-figure-box { margin: var(--margin-sm) 0; border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--color-surface); min-height: 120px; display: flex; align-items: center; justify-content: center; color: var(--text-subtle); font-size: 13px; } /* ── 우: 구조 (문항 타입 카드 스택) ── */ .kg-structure-list { display: flex; flex-direction: column; gap: var(--gap-xl); } .kg-ghost-btn { padding: 5px 12px; border: 1px solid var(--border-default); background: var(--color-bg); border-radius: var(--radius-md); font-size: 12px; color: var(--text-secondary); cursor: pointer; } .kg-ghost-btn:hover { background: var(--color-sunken); } /* 문항 카드 (RefineStatusColor: 헤더 틴트로 상태 표현) */ .kg-problem-card { border: 1px solid var(--border-default); border-radius: var(--radius-lg); /* 디자이너 스케일 정렬: 14px → lg 12px */ background: var(--color-bg); box-shadow: var(--shadow-card); overflow: hidden; transition: box-shadow var(--motion-base), transform var(--motion-base); /* ★D130 8/2 (사용자 "칼럼 조절이 마우스에 늦게 따라옴"): 칼럼 폭 드래그는 프레임마다 레일 전체를 reflow 시키는데, 화면 밖 카드(KaTeX 본문)가 그 비용의 대부분이다. content-visibility:auto = 뷰포트 밖 카드는 layout/paint 스킵 — 드래그 프레임 비용이 보이는 카드 수에 비례하게 된다. intrinsic-size 는 스크롤바 추정치(높이만 의미). */ content-visibility: auto; contain-intrinsic-size: auto 220px; } /* ★ 편집 중 = 입체감을 shadow + lift 로 (보더 아님, 사용자 지정) */ .kg-problem-card.is-editing { box-shadow: var(--shadow-card); transform: translateY(-2px); } .kg-card-header { display: flex; align-items: center; justify-content: space-between; padding: var(--pad-md) var(--pad-lg); font-weight: 700; font-size: 13px; } .kg-card-header.is-verified { background: var(--color-status-verified-surface); } .kg-card-header.is-review { background: var(--color-status-review-surface); } .kg-card-header.is-editing { background: var(--color-accent-bg); } .kg-card-header.is-neutral { background: var(--color-surface); } .kg-card-num { color: var(--text-primary); } .kg-status-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: var(--radius-full); font-size: 11px; font-weight: 700; /* 600→700: 디자이너 3-weight 체계 (강조=Bold) */ background: var(--color-bg); } .kg-status-chip.is-verified { color: var(--color-status-verified-text); } .kg-status-chip.is-review { color: var(--color-status-review-text); } .kg-status-chip.is-editing { color: var(--text-accent); } .kg-card-body { padding: var(--pad-lg); display: flex; flex-direction: column; gap: var(--gap-lg); } .kg-field { display: flex; gap: var(--gap-lg); font-size: 14px; line-height: 1.6; } .kg-field-label { flex: 0 0 56px; font-weight: 700; color: var(--text-secondary); } .kg-field-value { flex: 1 1 auto; color: var(--text-primary); } .kg-ref { /* [[참조]] = purple (RemNote tertiary) */ color: var(--color-accent-purple); text-decoration: none; border-bottom: 1px solid rgba(124, 58, 237, 0.3); } .kg-answer { color: var(--text-accent); font-weight: 700; } .kg-latex-edit { width: 100%; font-family: var(--font-mono); font-size: 13px; line-height: 1.7; padding: var(--pad-md); border-radius: var(--radius-md); background: var(--color-accent-bg); border: none; color: var(--text-primary); resize: vertical; /* ★ LaTeX 탭 전용 편집 영역 — pane 세로 공간을 채움(뷰포트 적응, resize 가능) */ min-height: 52vh; box-sizing: border-box; } .kg-card-actions { display: flex; justify-content: flex-end; gap: var(--gap-lg); margin-top: var(--space-100); } .kg-btn-save { padding: 6px 16px; background: var(--fill-primary); color: #fff; border: none; border-radius: var(--radius-md); font-size: 13px; font-weight: 500; cursor: pointer; } .kg-btn-cancel { padding: 6px 14px; background: transparent; color: var(--text-muted); border: none; font-size: 13px; cursor: pointer; } /* ── Refine crop-first workspace: left problem rail | right selected detail ── */ .kg-problem-rail, .kg-selected-detail { border-radius: 8px; } .kg-rail-header { gap: 10px; min-height: 58px; } .kg-icon-btn { width: 32px; height: 32px; flex: 0 0 32px; display: inline-grid; place-items: center; border: 1px solid var(--border-default); border-radius: 6px; background: var(--color-bg); color: var(--text-secondary); font-size: 16px; line-height: 1; cursor: pointer; } .kg-icon-btn:hover { background: var(--color-sunken); } .kg-rail-heading { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; } .kg-rail-heading strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; } .kg-rail-heading span, .kg-detail-eyebrow, .kg-detail-section-title span { color: var(--text-muted); font-size: 11px; } .kg-rail-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; overscroll-behavior: contain; } .kg-rail-empty { padding: 32px 18px; color: var(--text-muted); font-size: 13px; line-height: 1.6; text-align: center; } .kg-rail-doc-list { display: flex; flex-direction: column; gap: 8px; } /* ★D140 8/24 감추기 — 카드가