/* ============================================================================
ros.css — Research OS 리비전 도구 공용 스타일 (ros_home / ros_writing / ros_feedback)
기반: C:\Users\Soomin\Downloads\DESIGN-starbucks.md (Starbucks 디자인 시스템 추출본)
원칙: 따뜻한 크림 캔버스 · 그린 4단계(권위 층위) · 골드는 사람의 결정 순간에만 ·
50px 알약 버튼 + :active scale(.95) · 12px 카드 · 2~3겹 저알파 그림자 · 그라데이션 0 · 이미지 0
단위: 원본은 html 62.5% rem 트릭(1rem=10px)이지만 이 파일은 px 로 고정한다(html font-size 100%).
기존 index_*.html 과 값 혼동을 막기 위한 파생 결정. 비율은 원본과 동일.
표기: [파생] = 원본 시스템에 없어 토큰 조합만으로 도출한 컴포넌트.
섹션: §0 글꼴 메모 → §1 토큰·리셋 → §2 버튼 → §3 카드 → §4 모달 → §5 Frap → §6 입력·칩
→ §7 내비·레이아웃 → §8 다크 밴드·푸터 → §9 토스트·벨 → §10 배지·에이전트 대화
→ §11 [파생] 작업 페이지 부품 → §12 [파생] 작업 페이지 뼈대(레거시 이름) → §13 [파생] 메일 페이지
→ §14 유틸·모션 축소·인쇄·반응형
============================================================================ */
/* §0 글꼴 — DESIGN §3 "Note on Font Substitutes": SoDoSans 대체 = Inter, 한글 = Noto Sans KR.
이 파일은 글꼴을 로드하지 않는다(url 함수·data-URI 0건 원칙). 세 페이지가 에 같은 를 가진다:
https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+KR:wght@400;500;600;700&display=swap
(Noto Sans KR 600 포함 — h1·.hero-title·.card__title·h3·.nav__link 가 weight 600 이라 600 이 없으면 한글만 700 으로 스냅된다) */
/* ============================================================================
§1 토큰 — DESIGN §2 Color Palette & Roles / §3 Typography / §5 Spacing·Radius / §6 Depth / §8 Breakpoints
============================================================================ */
:root {
/* --- 그린 4단계 (DESIGN §2 Primary) — 역할 고정 --- */
--green-house: #1E3932; /* House Green — 다크 밴드·푸터·다크 모달·L1 배지 */
--green-starbucks: #006241; /* Starbucks Green — h1·카드 제목·브랜드·L2 배지 */
--green-accent: #00754A; /* Green Accent — 채움 CTA·Frap·포커스 링·L3 배지 */
--green-uplift: #2b5148; /* Green Uplift — 장식·RULE-* 외곽·정보 토스트 막대 */
--green-light: #d4e9e2; /* Green Light — 칩 바탕·유효 워시 원색 */
--green-light-33: hsl(160 32% 87% / 33%); /* 유효 필드 워시 (DESIGN §2 Semantic) */
/* --- 골드 (DESIGN §2 Secondary & Accent) — HITL·연구자 결정에만 ---
허용 목록(이 파일): .bell__count · .count-pill(대기 판단 건수 — 사이드바) · .toast--hitl · .badge--human-decision · .msg--decision · .composer-wait · .frap--gold · .dot--human
+ .card--gold(연구자 결정 기록 카드, Partnership Card 규격) · .agent-turn--human-decision(결정 턴 레일) · .footer__brand(DESIGN §1 다크 푸터 골드 글자 리듬)
페이지 측: ros_home 히어로 코어 점('연구자' 상징). 그 밖의 장식·범용 액센트에 골드 금지 */
--gold: #cba258;
--gold-light: #dfc49d;
--gold-lightest: #faf6ee;
/* --- 표면 (DESIGN §2 Surface & Background) --- */
--white: #ffffff;
--neutral-cool: #f9f9f9; /* 드롭다운·조용한 컨테이너·시스템 배지 */
--neutral-warm: #f2f0eb; /* 페이지 캔버스 */
--ceramic: #edebe9; /* 사이드바·서브내비·에이전트 스레드 워시 */
--black: #000000;
/* --- 텍스트 (DESIGN §2 Neutrals & Text) --- */
--text-black: rgba(0, 0, 0, 0.87);
--text-black-soft: rgba(0, 0, 0, 0.58);
--text-white: rgba(255, 255, 255, 1);
--text-white-soft: rgba(255, 255, 255, 0.70);
--text-rewards: #33433d; /* 골드 표면(#faf6ee) 위 글자 — 9.7:1 */
/* --- 시맨틱 (DESIGN §2 Semantic & Accent) --- */
--red: #c82014;
--red-tint: hsl(4 82% 43% / 5%);
--yellow: #fbbc05;
/* --- 알파 사다리 (DESIGN §2 Black / White Alpha Ladders) --- */
--black-a06: rgba(0,0,0,.06); --black-a10: rgba(0,0,0,.10); --black-a20: rgba(0,0,0,.20);
--black-a30: rgba(0,0,0,.30); --black-a40: rgba(0,0,0,.40); --black-a50: rgba(0,0,0,.50);
--black-a60: rgba(0,0,0,.60); --black-a70: rgba(0,0,0,.70); --black-a80: rgba(0,0,0,.80); --black-a90: rgba(0,0,0,.90);
--white-a10: rgba(255,255,255,.10); --white-a20: rgba(255,255,255,.20); --white-a30: rgba(255,255,255,.30);
--white-a40: rgba(255,255,255,.40); --white-a50: rgba(255,255,255,.50); --white-a60: rgba(255,255,255,.60);
--white-a70: rgba(255,255,255,.70); --white-a80: rgba(255,255,255,.80); --white-a90: rgba(255,255,255,.90);
--hairline: var(--black-a10); /* 표·필드 행·카드 내부 구분선 */
--input-border: var(--black-a30); /* 입력 테두리 */
/* --- 간격 (DESIGN §5 Spacing System, 0.4~6.4rem → px 고정) --- */
--space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 32px;
--space-6: 40px; --space-7: 48px; --space-8: 56px; --space-9: 64px;
--gutter: 16px; --gutter-md: 24px; --gutter-lg: 40px; /* outerGutter / Medium / Large */
--col-sm: 343px; --col-md: 500px; --col-lg: 720px; --col-xl: 1440px; /* columnWidth Small~XLarge */
/* --- 반경 (DESIGN §5 Border Radius Scale) --- */
--r-card: 12px; /* 카드·모달·타일 */
--r-pill: 50px; /* 모든 버튼 */
--r-sm: var(--r-input); /* [파생] 별칭 — 8px 은 DESIGN §5 반경 스케일(12/50/50%/4)에 없어 입력 계열 4px 로 축소. 리스트 행은 --r-card, 버튼은 --r-pill */
--r-input: 4px; /* 입력·참고 자료 박스 */
--r-circle: 50%; /* 아이콘 버튼·Frap·아바타 */
--r-tab: 12px 12px 0 0; /* Full-width Feedback Tab */
--radius-card: var(--r-card); --radius-pill: var(--r-pill); --radius-sm: var(--r-sm);
--radius-input: var(--r-input); --radius-circle: var(--r-circle); /* 별칭 */
/* --- 그림자 (DESIGN §6 Depth & Elevation) — 2~3겹 저알파만 --- */
--shadow-card: 0 0 0.5px rgba(0,0,0,.14), 0 1px 1px rgba(0,0,0,.24);
--shadow-nav: 0 1px 3px rgba(0,0,0,.10), 0 2px 2px rgba(0,0,0,.06), 0 0 2px rgba(0,0,0,.07);
--shadow-frap: 0 0 6px rgba(0,0,0,.24), 0 8px 12px rgba(0,0,0,.14);
--shadow-frap-active: 0 0 6px rgba(0,0,0,.24), 0 8px 12px rgba(0,0,0,0); /* 활성: 앰비언트 소거 */
/* --- 글꼴 (DESIGN §3 Font Family / Hierarchy) --- */
--font-sans: 'Inter', 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Helvetica Neue', Arial, sans-serif;
--font-mono: ui-monospace, 'Cascadia Mono', Consolas, 'Noto Sans KR', monospace; /* [파생] NODE-/RULE-/WC-/HIR- 식별자 */
--tracking-normal: -0.01em; --tracking-loose: 0.1em; --tracking-looser: 0.15em;
--tracking-ko-label: -0.01em; /* 한글 라벨도 DESIGN §3 Small/Micro/Button Label 규격(-0.01em)과 동일 — 0 으로 풀지 않는다. --tracking-loose 는 라틴 대문자 kicker 전용 */
--lh-normal: 1.5; --lh-compact: 1.2;
--text-1: 13px; --text-2: 14px; --text-3: 16px; --text-lg: 19px; --text-h: 24px; --text-8: 45px;
--text-0: 12px; /* [파생] 카운트 알약·모노 타임스탬프·kbd 전용 최소 크기 — DESIGN §3 Micro(13px) 아래 유일 단계. 10/11px 리터럴 금지 */
/* --- 모션 (DESIGN §4 Buttons transition / Expander / Inputs) --- */
--motion: 0.2s ease;
--duration: 0.2s;
--expander-duration: 300ms;
--ease-expander: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--ease-spring: cubic-bezier(0.32, 2.32, 0.61, 0.27); /* 체크 마커·벨 전용 */
/* --- 내비 높이 단계 (DESIGN §4 Navigation / §8 Breakpoints) --- */
--nav-h-xs: 64px; --nav-h-mobile: 72px; --nav-h-tablet: 83px; --nav-h-desktop: 99px;
--nav-h: var(--nav-h-xs); /* 컴팩트(작업 페이지) 기준 현재 높이 — ≥480 에서 72px 로 갱신 */
--subnav-h: 48px; /* internal subnav 규격 */
/* --- 접근성·층위 [파생] --- */
--tap-min: 40px;
--focus-ring: 0 0 0 2px var(--white), 0 0 0 4px var(--green-accent);
--focus-ring-on-dark: 0 0 0 2px var(--green-house), 0 0 0 4px var(--white); /* House Green 면 위 — 바깥 링을 흰색으로(#00754A 는 #1E3932 위 1.7:1) */
--z-nav: 800; --z-drawer-backdrop: 840; --z-drawer: 850; --z-frap: 900; --z-toast: 950; --z-modal: 1000;
--modal-max-w: 520px; --modal-padding: 24px;
/* --- BOS 별칭 토큰 — D:\Web_server_BOS\templates\index_*.html 관례 이름을 Starbucks 값으로 매핑 --- */
--bg-primary: var(--neutral-warm);
--bg-secondary: var(--white);
--bg-tertiary: var(--ceramic);
--border-primary: var(--hairline);
--border-secondary: var(--input-border);
--text-primary: var(--text-black);
--text-secondary: var(--text-black-soft);
--text-tertiary: var(--black-a40);
--accent-primary: var(--green-accent);
--accent-success: var(--green-starbucks);
--accent-warning: var(--yellow);
--accent-error: var(--red);
--sidebar-width: 260px;
--header-height: 64px;
}
@media (min-width: 480px) { :root { --nav-h: var(--nav-h-mobile); --header-height: 72px; } }
/* --- 리셋·기본 타이포 (DESIGN §3 Hierarchy / Principles) --- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; } /* 62.5% 트릭 미사용 — 토큰이 px */
body {
margin: 0; min-height: 100vh;
background: var(--neutral-warm); color: var(--text-black);
font-family: var(--font-sans); font-size: var(--text-3); line-height: var(--lh-normal);
letter-spacing: var(--tracking-normal); word-break: keep-all;
-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, ul, ol, figure, blockquote, pre { margin: 0; }
h1 { font-size: var(--text-h); font-weight: 600; line-height: 36px; letter-spacing: -0.16px; color: var(--green-starbucks); }
h2 { font-size: var(--text-h); font-weight: 400; line-height: 36px; letter-spacing: -0.16px; color: var(--text-black); }
h3 { font-size: var(--text-3); font-weight: 600; line-height: var(--lh-normal); color: var(--text-black); }
h4 { font-size: var(--text-2); font-weight: 700; line-height: var(--lh-normal); letter-spacing: var(--tracking-ko-label); color: var(--text-black); }
.hero-title { font-size: var(--text-8); font-weight: 600; line-height: var(--lh-compact); letter-spacing: -0.16px; color: var(--green-starbucks); } /* 홈 히어로 h1 (text-8 45px, Hero Large 행간 1.2~1.5 범위). 반응형 크기는 §14 */
.lead { font-size: var(--text-lg); line-height: 1.75; } /* Body Large 19px */
a { color: var(--green-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { display: block; max-width: 100%; height: auto; }
svg { flex: none; }
.icon { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; margin: 0; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
textarea { resize: vertical; }
hr { border: 0; border-top: 1px solid var(--hairline); margin: var(--space-4) 0; }
ul.plain, ol.plain { list-style: none; padding: 0; }
kbd { font-family: var(--font-mono); font-size: var(--text-0); letter-spacing: 0; padding: 1px 6px; border: 1px solid var(--hairline); border-bottom-width: 2px; border-radius: var(--r-input); background: var(--neutral-cool); color: var(--text-black-soft); }
code, .mono { font-family: var(--font-mono); font-size: 0.92em; letter-spacing: 0; }
::selection { background: var(--green-light); color: var(--green-house); }
.text-soft { color: var(--text-black-soft); }
.text-small { font-size: var(--text-2); }
.text-micro { font-size: var(--text-1); letter-spacing: var(--tracking-normal); } /* Micro 13px 도 -0.01em (DESIGN §3 위계표) — 모노 식별자만 0 */
.label-caps, .kicker { font-size: var(--text-1); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-loose); line-height: var(--lh-compact); } /* 라틴 kicker 전용: EXECUTION, REVIEWER #1 */
.label-caps:lang(ko), .kicker:lang(ko), .ko { text-transform: none; letter-spacing: var(--tracking-ko-label); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.container { width: 100%; max-width: var(--col-xl); margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 480px) { .container { padding: 0 var(--gutter-md); } }
@media (min-width: 1024px) { .container { padding: 0 var(--gutter-lg); } }
.stack > * + * { margin-top: var(--space-3); }
/* ============================================================================
§2 버튼 — DESIGN §4 Buttons 1~6, §8 Touch Targets. hover·disabled·--danger·--icon·--text 는 [파생]
원본 7px 16px(~32px)은 접근성 미달 → padding 10px 20px + min-height 40px 로 보정
============================================================================ */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
min-height: var(--tap-min); padding: 10px 20px;
border: 1px solid transparent; border-radius: var(--r-pill); background: transparent;
font-family: var(--font-sans); font-size: var(--text-2); font-weight: 700; line-height: var(--lh-compact);
letter-spacing: var(--tracking-normal); color: var(--text-black); /* Button Label -0.01em (DESIGN §3) — 한글 라벨도 동일 */
cursor: pointer; text-decoration: none; white-space: nowrap; user-select: none;
transition: all var(--motion); -webkit-tap-highlight-color: transparent;
}
.btn:lang(en), .btn--latin { font-weight: 600; letter-spacing: var(--tracking-normal); } /* Inter 600 ↔ Noto Sans KR 700 농도 매칭 */
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.95); } /* 시그니처 마이크로 인터랙션 (--buttonActiveScale) */
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.btn svg, .btn .icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* 1 Primary Filled */
.btn--primary { background: var(--green-accent); color: var(--white); border-color: var(--green-accent); }
.btn--primary:hover { background: var(--green-starbucks); border-color: var(--green-starbucks); }
/* 2 Primary Outlined */
.btn--outline { color: var(--green-accent); border-color: var(--green-accent); }
.btn--outline:hover { background: var(--green-light-33); }
/* 3 Black Filled ("Join now") */
.btn--black { background: var(--black); color: var(--white); border-color: var(--black); }
.btn--black:hover { background: var(--black-a80); border-color: transparent; }
/* 4 Dark Outlined ("Sign in") — Text Black 글자·외곽 (DESIGN §4: rgba(0,0,0,.87)) */
.btn--dark-outline { color: var(--text-black); border-color: var(--text-black); }
.btn--dark-outline:hover { background: var(--black-a06); }
/* 5 Green-on-Green Inverted — 다크 면 위 흰 채움, 글자 Green Accent (DESIGN §4: #00754A, 흰 배경 위 5.6:1) */
.btn--on-dark { background: var(--white); color: var(--green-accent); border-color: var(--white); }
.btn--on-dark:hover { background: var(--white-a90); }
/* 6 Outlined on Dark — 다크 면 위 흰 외곽 */
.btn--on-dark-outline { color: var(--white); border-color: var(--white); }
.btn--on-dark-outline:hover { background: var(--white-a10); }
/* [파생] 파괴적 동작(중단·삭제) — Red 외곽. 채움 빨강은 쓰지 않는다 */
.btn--danger { color: var(--red); border-color: var(--red); }
.btn--danger:hover { background: var(--red-tint); }
/* [파생] 텍스트 버튼(툴바 텍스트 항목) */
.btn--text { color: var(--text-black); padding-left: 12px; padding-right: 12px; }
.btn--text:hover { background: var(--black-a06); }
/* [파생] 아이콘 전용 원형 40px (⋯, 톱니, 닫기, 벨) */
.btn--icon { width: var(--tap-min); height: var(--tap-min); padding: 0; border-radius: var(--r-circle); color: var(--text-black); }
.btn--icon:hover { background: var(--black-a06); }
.btn--icon svg { width: 20px; height: 20px; }
/* 크기·폭 */
.btn--lg { min-height: 48px; padding: 14px 32px; font-size: var(--text-3); } /* 'Add to Order' 규격 — 홈 큰 선택 버튼 */
.btn--block { width: 100%; }
.btn--sm { min-height: var(--tap-min); padding: 6px 14px; font-size: var(--text-2); } /* 시각 소형(패딩만 축소), 글자는 Button Label 하한 14px(DESIGN §3)·탭 영역 40 유지 */
.btn-group { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
/* ============================================================================
§3 카드 — DESIGN §4 Cards & Containers (Content Card / Dropdown / Partnership Card / Rewards Status), §5 Whitespace
--choice·--quiet hover·row-table 는 [파생]
============================================================================ */
.card { background: var(--white); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: var(--space-3); }
@media (min-width: 768px) { .card { padding: var(--space-4); } }
.card__title { margin: 0 0 var(--space-2); font-size: var(--text-h); font-weight: 600; line-height: 36px; letter-spacing: -0.16px; color: var(--green-starbucks); }
.card__title--sm { font-size: var(--text-3); line-height: var(--lh-normal); letter-spacing: var(--tracking-ko-label); }
.card__subtitle { margin: 0 0 var(--space-3); font-size: var(--text-h); font-weight: 400; line-height: 36px; color: var(--text-black); }
.card__body { color: var(--text-black); }
.card__body p + p { margin-top: var(--space-2); }
.card__meta { font-size: var(--text-2); color: var(--text-black-soft); }
.card__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.card-grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 768px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); } }
/* [파생] 홈 큰 선택 카드 — 전체가 , 내부 .btn--primary.btn--lg 는 시각용 */
.card--choice { display: flex; flex-direction: column; gap: var(--space-3); min-height: 240px; color: inherit; text-decoration: none;
transition: box-shadow var(--motion), transform var(--motion); }
.card--choice:hover { box-shadow: var(--shadow-nav); text-decoration: none; } /* 3겹 내비 그림자 = hover 리프트 */
.card--choice:active .btn { transform: scale(0.95); } /* 내부 CTA 는 pointer-events:none 이라 :active 를 직접 못 받는다 → 카드 :active 를 알약에 전달해 시그니처 0.95 압축 유지. 카드 자체 축소(0.98)는 원본 규격에 없어 두지 않는다 */
.card--choice:focus-visible { outline: none; box-shadow: var(--shadow-card), var(--focus-ring); }
.card--choice .btn { margin-top: auto; align-self: flex-start; }
.card--choice__icon { width: 48px; height: 48px; border-radius: var(--r-circle); background: var(--green-light); color: var(--green-starbucks); display: inline-flex; align-items: center; justify-content: center; }
.card--choice__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* 변형 */
.card--quiet { background: var(--neutral-cool); box-shadow: none; border: 1px solid var(--hairline); } /* Dropdown 규격 — 리뷰어 코멘트 컨테이너 */
.card--dark { background: var(--green-house); color: var(--text-white); } /* Rewards Status 패널 */
.card--dark .card__title { color: var(--text-white); }
.card--dark .card__meta, .card--dark .card__body { color: var(--text-white-soft); }
.card--gold { background: var(--gold-lightest); color: var(--text-rewards); border: 1px solid var(--gold); box-shadow: none; } /* Partnership Card — 연구자 결정 기록 */
.card--gold .card__title { color: var(--text-rewards); }
.card--flush { padding: 0; overflow: hidden; }
/* [파생] 키-값 행 표 (예산 수치·메타) */
.row-table { display: flex; flex-direction: column; }
.row-table__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--hairline); font-size: var(--text-2); }
.row-table__row:last-child { border-bottom: 0; }
.row-table__key { color: var(--text-black-soft); letter-spacing: var(--tracking-ko-label); }
.row-table__value { font-weight: 700; font-family: var(--font-mono); letter-spacing: 0; font-variant-numeric: tabular-nums; text-align: right; }
/* ============================================================================
§4 모달 — DESIGN §4 Modal(--modalPadding 2.4rem, radius 12), Cookie Consent Module(다크 변형)
백드롭·닫기·kicker·선택지·다크 버튼 짝은 [파생]
============================================================================ */
.modal-backdrop, .modal-overlay {
position: fixed; inset: 0; z-index: var(--z-modal); display: none; align-items: center; justify-content: center;
padding: var(--gutter); background: var(--black-a50);
}
.modal-backdrop[data-open="true"], .modal-overlay.open, .modal-overlay[data-open="true"] { display: flex; }
.modal, .modal-box {
position: relative; width: 100%; max-width: var(--modal-max-w); max-height: calc(100vh - 2 * var(--gutter)); overflow: auto;
background: var(--white); color: var(--text-black); border-radius: var(--r-card); box-shadow: var(--shadow-frap);
padding: var(--modal-padding);
animation: modal-in var(--expander-duration) var(--ease-expander);
}
@keyframes modal-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.modal__kicker, .modal-header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding-right: 48px; margin-bottom: var(--space-3); }
.modal__close, .modal-close { position: absolute; top: var(--space-3); right: var(--space-3); width: var(--tap-min); height: var(--tap-min);
border: 0; border-radius: var(--r-circle); background: transparent; color: inherit; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center; transition: background-color var(--motion), transform var(--motion); }
.modal__close:hover, .modal-close:hover { background: var(--black-a06); }
.modal__close:active, .modal-close:active { transform: scale(0.95); }
.modal__close svg, .modal-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.modal__title, .modal-title { margin: 0 0 var(--space-2); font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: -0.16px; color: var(--green-starbucks); word-break: keep-all; }
.modal__body, .modal-sub { font-size: var(--text-3); color: var(--text-black); }
.modal-sub { font-size: var(--text-2); color: var(--text-black-soft); }
.modal__section { margin-top: var(--space-4); }
.modal__section-label { display: block; margin: 0 0 var(--space-1); font-size: var(--text-1); font-weight: 700; letter-spacing: var(--tracking-ko-label); color: var(--text-black); } /* '질문' '배경' '참고 자료' '선택지' */
.modal__section-body { font-size: var(--text-2); color: var(--text-black); }
.modal__refs { margin: 0; padding: var(--space-2) var(--space-3); list-style: none; background: var(--neutral-cool); border: 1px solid var(--hairline); border-radius: var(--r-input);
font-family: var(--font-mono); font-size: var(--text-1); letter-spacing: 0; color: var(--text-black-soft); }
.modal__refs li + li { margin-top: var(--space-1); }
.modal__choices { display: flex; flex-direction: column; gap: var(--space-2); }
.modal__choices .btn { justify-content: flex-start; white-space: normal; text-align: left; }
.modal__choices .btn[aria-pressed="true"] { background: var(--green-accent); color: var(--white); border-color: var(--green-accent); }
.modal__free { margin-top: var(--space-3); }
.modal__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; margin-top: var(--space-4); }
.modal .row-table { margin-top: var(--space-2); }
/* 다크 변형 (Cookie Consent Module 규격) — 예산 소진 등 시스템 정지 알림. 버튼 짝: [예산 연장]=.btn--on-dark, [중단]=.btn--on-dark-outline */
.modal--dark { background: var(--green-house); color: var(--text-white); }
.modal--dark .modal__title { color: var(--text-white); }
.modal--dark .modal__body, .modal--dark .modal__section-body { color: var(--text-white-soft); }
.modal--dark .modal__section-label { color: var(--text-white); }
.modal--dark .modal__refs { background: var(--white-a10); border-color: var(--white-a20); color: var(--text-white-soft); }
.modal--dark .modal__close:hover { background: var(--white-a10); }
.modal--dark .row-table__row { border-color: var(--white-a20); }
.modal--dark .row-table__key { color: var(--text-white-soft); }
.modal--dark .field__input { background: var(--white-a10); border-color: var(--white-a30); color: var(--text-white); }
.modal--dark .field__label { color: var(--text-white-soft); }
.modal--dark .field__input:focus + .field__label, .modal--dark .field__input:not(:placeholder-shown) + .field__label { background: var(--green-house); color: var(--text-white); }
.modal--dark .btn--outline { color: var(--white); border-color: var(--white); }
.modal--dark :focus-visible, .modal--dark .btn:focus-visible, .modal--dark .modal__close:focus-visible { box-shadow: var(--focus-ring-on-dark); } /* 다크 면 포커스 링 대비 */
.modal--dark .field__input:focus { border-color: var(--white); box-shadow: var(--focus-ring-on-dark); }
/* ============================================================================
§5 Frap — DESIGN §4 Buttons 8 (56px / mini 40px, 2겹 그림자, 활성 시 앰비언트 0, -0.8rem 터치 오프셋)
데모 트리거 스택·라벨·색 변형은 [파생]
============================================================================ */
.frap {
position: fixed; right: var(--gutter-md); bottom: var(--gutter-md); z-index: var(--z-frap);
width: 56px; height: 56px; padding: 0; border: 0; border-radius: var(--r-circle);
background: var(--green-accent); color: var(--white);
display: inline-flex; align-items: center; justify-content: center;
box-shadow: var(--shadow-frap); cursor: pointer;
transition: transform var(--motion), box-shadow var(--motion), background-color var(--motion);
}
.frap::before { content: ""; position: absolute; inset: -8px; border-radius: inherit; } /* --frapTouchOffset */
.frap:hover { background: var(--green-starbucks); }
.frap:active { transform: scale(0.95); box-shadow: var(--shadow-frap-active); }
.frap:focus-visible { outline: none; box-shadow: var(--shadow-frap), var(--focus-ring); }
.frap svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transition: transform var(--motion); }
.frap[aria-expanded="true"] svg { transform: rotate(45deg); } /* + → × */
.frap--mini { width: 40px; height: 40px; }
.frap--mini svg { width: 20px; height: 20px; }
.frap--uplift { background: var(--green-uplift); } /* 시스템성 트리거(자원 고갈) */
.frap--uplift:hover { background: var(--green-house); }
.frap--gold { background: var(--gold); color: var(--green-house); } /* HITL 트리거 — 골드 허용 지점, 글자 House Green 5.2:1 */
.frap--gold:hover { background: var(--gold-light); }
.frap--neutral { background: var(--white); color: var(--text-black); border: 1px solid var(--hairline); }
.frap--neutral:hover { background: var(--neutral-cool); }
/* [파생] 데모 트리거 스택 — Frap 위로 mini Frap 세로 전개, 항목마다 흰 알약 라벨 */
.frap-stack { position: fixed; right: var(--gutter-md); bottom: calc(var(--gutter-md) + 56px + var(--space-2)); z-index: var(--z-frap);
display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); }
.frap-stack[hidden] { display: none; }
.frap-stack__item { display: flex; align-items: center; gap: var(--space-2); animation: frap-item-in var(--expander-duration) var(--ease-expander) both; }
.frap-stack__item:nth-child(2) { animation-delay: 40ms; }
.frap-stack__item:nth-child(3) { animation-delay: 80ms; }
.frap-stack__item:nth-child(4) { animation-delay: 120ms; }
.frap-stack__label { font-size: var(--text-1); letter-spacing: var(--tracking-ko-label); font-weight: 700; color: var(--text-black);
background: var(--white); border-radius: var(--r-pill); padding: 6px 12px; box-shadow: var(--shadow-card); white-space: nowrap; }
.frap-stack .frap { position: relative; } /* ::before 터치 오프셋이 스택 전체를 덮지 않도록 */
@keyframes frap-item-in { from { opacity: 0; transform: translateY(8px) scale(.9); } to { opacity: 1; transform: none; } }
/* ============================================================================
§6 입력 — DESIGN §4 Inputs & Forms (플로팅 라벨 19→14px / 모바일 16→13px, 12px 오프셋, valid·invalid 워시,
Option Icon 3px + 스프링 베지어). 메일 행·칩·select 는 [파생]
============================================================================ */
/* */
.field { position: relative; }
.field__input { width: 100%; min-height: 48px; padding: 12px; border: 1px solid var(--input-border); border-radius: var(--r-input);
background: var(--white); color: var(--text-black); font: 400 var(--text-3)/var(--lh-normal) var(--font-sans); letter-spacing: var(--tracking-normal);
transition: border-color var(--motion), background-color var(--motion), box-shadow var(--motion); }
textarea.field__input { min-height: 96px; resize: vertical; }
.field__input::placeholder { color: transparent; } /* :placeholder-shown 감지용 — placeholder=" " 필수 */
.field__label { position: absolute; left: 12px; top: 24px; transform: translateY(-50%); padding: 0 4px; pointer-events: none;
font-size: 16px; letter-spacing: var(--tracking-ko-label); color: var(--text-black-soft); background: transparent; white-space: nowrap;
transition: top var(--motion), font-size var(--motion), color var(--motion), background-color var(--motion); }
@media (min-width: 768px) { .field__label { font-size: 19px; } }
.field__input:focus { outline: none; border-color: var(--green-accent); box-shadow: 0 0 0 1px var(--green-accent); }
.field__input:focus + .field__label,
.field__input:not(:placeholder-shown) + .field__label { top: 0; font-size: 13px; background: var(--white); color: var(--green-accent); }
@media (min-width: 768px) { .field__input:focus + .field__label, .field__input:not(:placeholder-shown) + .field__label { font-size: 14px; } }
.field--valid .field__input { background: var(--green-light-33); }
.field--invalid .field__input { background: var(--red-tint); border-color: var(--red); }
.field--invalid .field__label { color: var(--red); }
.field__hint { margin-top: var(--space-1); font-size: var(--text-1); letter-spacing: var(--tracking-ko-label); color: var(--text-black-soft); }
.field--invalid .field__hint { color: var(--red); }
/* 단순 입력(라벨 없음) */
.input { width: 100%; min-height: var(--tap-min); padding: 8px 12px; border: 1px solid var(--input-border); border-radius: var(--r-input); background: var(--white); color: var(--text-black); font: inherit; }
.input:focus { outline: none; border-color: var(--green-accent); box-shadow: 0 0 0 1px var(--green-accent); }
.input::placeholder { color: var(--text-black-soft); }
/* 체크박스 (Option Icon 규격: 3px 내부 패딩 + 스프링 베지어) — 리뷰어 코멘트 포함/제외, 개인별, 중요 */
.check { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap-min); cursor: pointer; font-size: var(--text-2); letter-spacing: var(--tracking-ko-label); user-select: none; }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.check__box { width: 20px; height: 20px; padding: 3px; border: 1px solid var(--input-border); border-radius: var(--r-input); background: var(--white); display: inline-grid; place-items: center; flex: none; transition: border-color var(--motion); }
.check__box::after { content: ""; width: 100%; height: 100%; border-radius: 2px; background: var(--green-accent); transform: scale(0); transition: transform 0.3s var(--ease-spring); }
.check input:checked + .check__box::after { transform: scale(1); }
.check input:checked + .check__box { border-color: var(--green-accent); }
.check input:focus-visible + .check__box { box-shadow: var(--focus-ring); }
.check input:disabled ~ * { opacity: .4; }
/* [파생] 메일형 필드 행: 라벨 | 부속(체크·드롭다운) | 입력·칩 | 우측 버튼 */
.mail-row { display: grid; grid-template-columns: 88px auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); min-height: 48px; padding: var(--space-1) var(--space-3); border-bottom: 1px solid var(--hairline); }
.mail-row:last-child { border-bottom: 0; }
.mail-row__label { grid-column: 1; font-size: var(--text-1); font-weight: 700; letter-spacing: var(--tracking-ko-label); color: var(--text-black); display: inline-flex; align-items: center; gap: 2px; min-height: var(--tap-min); }
.mail-row__label svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.mail-row__aux { grid-column: 2; display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-1); letter-spacing: var(--tracking-ko-label); color: var(--text-black-soft); }
.mail-row__input { grid-column: 3; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); min-height: var(--tap-min); padding: 4px 8px; border: 1px solid transparent; border-radius: var(--r-input); cursor: text; transition: border-color var(--motion), background-color var(--motion); }
.mail-row__input:focus-within { border-color: var(--green-accent); background: var(--white); }
.mail-row__input input { flex: 1 1 160px; min-width: 120px; min-height: 28px; border: 0; background: transparent; font: inherit; color: var(--text-black); outline: none; }
.mail-row__input input::placeholder { color: var(--text-black-soft); }
.mail-row__actions { grid-column: 4; display: inline-flex; align-items: center; gap: var(--space-1); }
.mail-row--invalid .mail-row__input { border-color: var(--red); background: var(--red-tint); }
.mail-row__error { grid-column: 3 / -1; font-size: var(--text-1); letter-spacing: var(--tracking-ko-label); color: var(--red); }
/* [파생] 칩 — 수신자·첨부 */
.chip { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 4px 0 12px; border: 1px solid transparent; border-radius: var(--r-pill);
background: var(--green-light); color: var(--green-house); font-size: var(--text-1); letter-spacing: var(--tracking-ko-label); font-weight: 700; line-height: var(--lh-compact); max-width: 100%; }
.chip__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip--invalid { background: var(--red-tint); color: var(--red); border-color: var(--red); }
.chip--file { background: var(--neutral-cool); color: var(--text-black); border-color: var(--hairline); font-weight: 600; }
.chip__remove { position: relative; width: 24px; height: 24px; border: 0; border-radius: var(--r-circle); background: transparent; color: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: none; transition: background-color var(--motion), transform var(--motion); }
.chip__remove::before { content: ""; position: absolute; inset: -8px -4px -8px -8px; border-radius: inherit; } /* 시각 24px 유지, 히트 영역 36×40 — 칩 자기 상자 안에서만 확장(.frap::before 방식) */
.chip__remove:hover { background: var(--black-a10); }
.chip__remove:active { transform: scale(0.95); }
.chip__remove svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.chip__remove:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* [파생] 네이티브 select */
.select { min-height: var(--tap-min); padding: 0 32px 0 12px; border: 1px solid var(--hairline); border-radius: var(--r-input); background: var(--white); color: var(--text-black); font: 600 var(--text-1)/var(--lh-compact) var(--font-sans); letter-spacing: var(--tracking-ko-label); cursor: pointer;
appearance: none; -webkit-appearance: none; } /* 반경 4px = DESIGN §4 Add-in/Milk Select. 화살표는 .select-wrap::after 가 그린다(url 함수·data-URI 0건) */
.select:hover { border-color: var(--input-border); }
.select:focus { outline: none; border-color: var(--green-accent); box-shadow: var(--focus-ring); }
/* [파생] url 함수 없는 화살표 래퍼 — (단독 .select 는 화살표가 없다 — 항상 래퍼와 함께 쓴다)
래퍼 ::after 가 border 두 변으로 chevron 을 그린다(currentColor = Starbucks Green, 토큰 밖 리터럴 없음). */
.select-wrap { position: relative; display: inline-flex; align-items: center; color: var(--green-starbucks); }
.select-wrap::after { content: ""; position: absolute; right: 13px; top: 50%; width: 7px; height: 7px; pointer-events: none;
border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: translateY(-70%) rotate(45deg); }
/* ============================================================================
§7 내비·레이아웃 — DESIGN §4 Navigation(64/72/83/99, 3겹 그림자, Sub-nav 48, Mobile Nav 드로어), §8 Breakpoints
--compact·활성 밑줄·벨 슬롯·사이드바 드로어는 [파생]
============================================================================ */
.nav, .ros-nav {
position: sticky; top: 0; z-index: var(--z-nav); height: var(--nav-h);
display: flex; align-items: center; gap: var(--space-4); padding: 0 var(--gutter);
background: var(--white); box-shadow: var(--shadow-nav);
}
@media (min-width: 480px) { .nav, .ros-nav { padding: 0 var(--gutter-md); } }
@media (min-width: 768px) { .nav:not(.nav--compact), .ros-nav:not(.nav--compact) { height: var(--nav-h-tablet); } }
@media (min-width: 1024px) { .nav:not(.nav--compact), .ros-nav:not(.nav--compact) { height: var(--nav-h-desktop); padding: 0 var(--gutter-lg); } }
.nav__brand { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--green-starbucks); font-weight: 700; font-size: var(--text-3); letter-spacing: var(--tracking-normal); text-decoration: none; white-space: nowrap; min-height: var(--tap-min); }
.nav__brand:hover { text-decoration: none; }
.nav__brand svg { width: 32px; height: 32px; }
.nav__brand:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-input); }
.nav__brand .badge { margin-left: 2px; }
.nav__links { display: flex; align-items: center; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.nav__link { display: inline-flex; align-items: center; min-height: var(--tap-min); padding: 0 2px; border-bottom: 2px solid transparent;
color: var(--text-black); font-size: var(--text-2); font-weight: 600; letter-spacing: var(--tracking-normal); text-decoration: none; transition: color var(--motion), border-color var(--motion); }
.nav__link--caps { text-transform: uppercase; letter-spacing: var(--tracking-loose); }
.nav__link:hover { color: var(--green-accent); text-decoration: none; }
.nav__link[aria-current="page"] { color: var(--green-accent); border-bottom-color: var(--green-accent); }
.nav__link:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-input); }
.nav__right { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); min-width: var(--tap-min); }
.nav__burger { display: none; }
@media (max-width: 767px) {
.nav__links { display: none; }
.nav__burger { display: inline-flex; }
.nav[data-menu="open"] .nav__links, .ros-nav[data-menu="open"] .nav__links {
display: flex; flex-direction: column; align-items: stretch; gap: 0;
position: absolute; left: 0; right: 0; top: 100%;
padding: var(--space-2) var(--gutter); background: var(--neutral-cool); box-shadow: var(--shadow-nav);
}
.nav[data-menu="open"] .nav__link, .ros-nav[data-menu="open"] .nav__link { display: flex; width: 100%; min-height: 44px; } /* 드로어 행 전체가 탭 영역(글자 폭만 클릭되지 않게) */
}
@media (max-width: 1024px) { .nav--compact .nav__burger.nav__burger--sidebar { display: inline-flex; } }
/* 서브 바 (internal subnav 48px) — 브레드크럼 + 프로젝트 배지 */
.subnav { height: var(--subnav-h); display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--gutter); background: var(--ceramic); border-bottom: 1px solid var(--hairline); font-size: var(--text-2); letter-spacing: var(--tracking-ko-label); color: var(--text-black-soft); }
@media (min-width: 480px) { .subnav { padding: 0 var(--gutter-md); } }
@media (min-width: 1024px) { .subnav { padding: 0 var(--gutter-lg); } }
.subnav a { color: var(--green-accent); display: inline-flex; align-items: center; min-height: var(--tap-min); } /* 브레드크럼 링크도 탭 영역 40px (.nav__link·.footer a 와 동일) */
.subnav__sep::before { content: "/"; padding: 0 var(--space-1); color: var(--text-black-soft); }
.subnav__current { color: var(--text-black); font-weight: 600; }
.subnav__right { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.subnav__right .badge { max-width: 100%; }
/* 작업 페이지 2열 레이아웃 (사이드바 | 본문) */
.layout { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); height: calc(100vh - var(--nav-h)); height: calc(100dvh - var(--nav-h)); overflow: hidden; }
.subnav + .layout, .layout--with-subnav { height: calc(100vh - var(--nav-h) - var(--subnav-h)); height: calc(100dvh - var(--nav-h) - var(--subnav-h)); }
.sidebar { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; background: var(--ceramic); border-right: 1px solid var(--hairline); }
.sidebar-backdrop { position: fixed; inset: 0; z-index: var(--z-drawer-backdrop); background: var(--black-a50); display: none; }
@media (max-width: 1024px) {
.layout { grid-template-columns: minmax(0, 1fr); }
.sidebar { position: fixed; top: var(--nav-h); left: 0; bottom: 0; width: 280px; max-width: 85vw; z-index: var(--z-drawer);
box-shadow: var(--shadow-nav); transform: translateX(-100%); transition: transform var(--expander-duration) var(--ease-expander); }
[data-sidebar="open"] .sidebar { transform: translateX(0); }
[data-sidebar="open"] .sidebar-backdrop { display: block; }
}
/* ============================================================================
§8 다크 밴드·푸터 — DESIGN §4 Feature Band(#1E3932, 40/60·50/50, 흰/0.70 흰, 흰 채움 + 흰 외곽 CTA 짝),
Product Description Band(32px), Store Availability Selector(투명-흰 패널)
(Rewards Cost Pill 골드 외곽 알약은 이식하지 않음 — HITL 의미가 없는 골드 사용처가 되어 삭제. 사람의 결정은 .badge--human-decision)
============================================================================ */
.band, .band-dark { background: var(--green-house); color: var(--text-white); padding: var(--space-7) var(--gutter); }
@media (min-width: 768px) { .band, .band-dark { padding: var(--space-9) var(--gutter-md); } }
@media (min-width: 1024px) { .band, .band-dark { padding: var(--space-9) var(--gutter-lg); } }
.band--tight { padding-top: var(--space-5); padding-bottom: var(--space-5); }
.band__inner { max-width: var(--col-xl); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: var(--space-5); align-items: start; }
@media (min-width: 768px) {
.band__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* 3열: 층위 소개(L1/L2/L3) 등 */
.band__inner--2 { grid-template-columns: 1fr 1fr; align-items: center; }
.band__inner--40-60 { grid-template-columns: 2fr 3fr; align-items: center; }
}
.band__title { margin: 0 0 var(--space-3); font-size: var(--text-h); font-weight: 600; line-height: 36px; letter-spacing: -0.16px; color: var(--text-white); }
.band__lead { margin: 0 0 var(--space-3); font-size: var(--text-lg); line-height: 1.75; color: var(--text-white); }
.band__body { margin: 0; font-size: var(--text-3); color: var(--text-white-soft); }
.band__strong { font-size: var(--text-2); font-weight: 700; color: var(--text-white); }
.band__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); } /* 주 .btn--on-dark, 부 .btn--on-dark-outline */
.band__panel { min-height: 48px; padding: var(--space-2) var(--space-3); border: 1px solid var(--white-a30); border-radius: var(--r-input); background: transparent; color: var(--text-white);
display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: var(--text-2); }
.band a, .band-dark a { color: var(--text-white); }
.band .badge--system, .band-dark .badge--system { background: var(--white-a10); color: var(--text-white); border-color: var(--white-a30); }
/* 푸터 (다크 그린 북엔드) — 좌 브랜드(골드 라이트) / 중 링크 / 우 캡션 */
.footer { background: var(--green-house); color: var(--text-white-soft); padding: var(--space-6) var(--gutter); font-size: var(--text-2); letter-spacing: var(--tracking-normal); }
.footer--divided { border-top: 1px solid var(--white-a20); } /* 바로 위가 같은 House Green 밴드일 때(ros_home) 두 다크 블록을 헤어라인으로 분리 — DESIGN §6 색블록 밴딩 유지 */
@media (min-width: 480px) { .footer { padding: var(--space-6) var(--gutter-md); } }
@media (min-width: 1024px) { .footer { padding: var(--space-6) var(--gutter-lg); } }
.footer__inner { max-width: var(--col-xl); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); }
.footer__links { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); margin: 0; padding: 0; list-style: none; }
.footer a { color: var(--text-white); text-decoration: none; display: inline-flex; align-items: center; min-height: var(--tap-min); }
.footer a:hover { text-decoration: underline; }
.footer__brand { color: var(--gold-light); font-weight: 600; } /* 푸터의 골드 라이트 텍스트 — 유일 허용 지점 */
.footer__meta { color: var(--text-white-soft); }
/* ============================================================================
§9 [파생] 토스트·벨 — 원본에 없음. 카드 12px + Frap 그림자(최상층) + 300ms ease-out + 좌측 4px 상태 막대. HITL 만 골드
============================================================================ */
.toast-region { position: fixed; top: calc(var(--nav-h) + var(--space-2)); right: var(--gutter); z-index: var(--z-toast);
display: flex; flex-direction: column; gap: var(--space-2); width: min(360px, calc(100vw - 2 * var(--gutter))); pointer-events: none; }
@media (min-width: 480px) { .toast-region { right: var(--gutter-md); } }
@media (min-width: 1024px) { .toast-region { right: var(--gutter-lg); } }
.toast-region .toast:nth-child(n + 4) { display: none; } /* 최대 3장 */
.toast { pointer-events: auto; position: relative; display: grid; grid-template-columns: 4px minmax(0, 1fr) auto; gap: var(--space-1) var(--space-3); align-items: start;
padding: var(--space-3); background: var(--white); color: var(--text-black); border-radius: var(--r-card); box-shadow: var(--shadow-frap);
font-size: var(--text-1); letter-spacing: var(--tracking-ko-label); animation: toast-in var(--expander-duration) var(--ease-expander); }
.toast::before { content: ""; grid-row: 1 / span 3; align-self: stretch; border-radius: 2px; background: var(--green-accent); }
.toast--info::before { background: var(--green-uplift); } /* 에이전트 진행 */
.toast--done::before { background: var(--green-starbucks); } /* 완료·판정 */
.toast--hitl::before { background: var(--gold); } /* 사람 판단 필요 — 골드 허용 */
.toast--hitl { background: var(--gold-lightest); }
.toast--warn::before { background: var(--yellow); } /* 예산 임계 근접 */
.toast--error::before { background: var(--red); } /* 자원 고갈·STOP·FAILED */
.toast__title { grid-column: 2; margin: 0; font-size: var(--text-2); font-weight: 700; line-height: 1.3; }
.toast__body { grid-column: 2; margin: 0; color: var(--text-black-soft); }
.toast__action { grid-column: 2; justify-self: start; margin-top: var(--space-1); } /* .btn.btn--outline.btn--sm */
.toast__close { grid-column: 3; grid-row: 1 / span 3; align-self: start; margin: -8px -8px 0 0; } /* .btn.btn--icon */
.toast__meta { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--space-1); }
.toast--leaving { animation: toast-out var(--expander-duration) var(--ease-expander) forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-8px); } }
/* 벨 + 카운트 (내비 우측, ros_writing 전용) */
.bell { position: relative; width: var(--tap-min); height: var(--tap-min); border: 0; border-radius: var(--r-circle); background: transparent; color: var(--text-black);
display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color var(--motion), transform var(--motion); }
.bell:hover { background: var(--black-a06); }
.bell:active { transform: scale(0.95); } /* 시그니처 압축 — .bell--ring 은 svg 회전이라 충돌 없음 */
.bell:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bell svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform-origin: 50% 0; }
.bell__count { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill);
background: var(--gold); color: var(--green-house); font-family: var(--font-mono); font-size: var(--text-0); font-weight: 700; line-height: 18px; text-align: center; letter-spacing: 0;
box-shadow: 0 0 0 2px var(--white); } /* 골드 + House Green 5.2:1 (흰 글자는 2.4:1 불가) */
.bell__count[data-count="0"], .bell__count:empty { display: none; }
/* 인라인 카운트 알약 — .bell__count 와 같은 골드 규격, 위치 지정 없음 (ros_writing 사이드바 'HIR-002 대기 ①'). 골드 허용 목록 §1 */
.count-pill { display: inline-block; min-width: 16px; height: 16px; padding: 0 5px; border-radius: var(--r-pill); background: var(--gold); color: var(--green-house);
font-family: var(--font-mono); font-size: var(--text-0); font-weight: 700; line-height: 16px; text-align: center; letter-spacing: 0; vertical-align: middle; }
.bell--ring svg { animation: bell-ring 0.4s var(--ease-spring) 1; }
@keyframes bell-ring { 0% { transform: rotate(0); } 30% { transform: rotate(-12deg); } 60% { transform: rotate(10deg); } 100% { transform: rotate(0); } }
/* ============================================================================
§10 [파생] 역할 배지·상태 점·에이전트 대화 — 색은 DESIGN §2 그린 4단계·골드 규칙.
식별자는 AKF V1/research_os (roles.py ExecutorTarget·NodeRole, rules.py RULE-*, schemas.py InteractionType) 원문만
원칙: 그린 4단계 = 권위 층위(짙을수록 상위) · 골드 = 사람의 결정 · 시스템 = 무채색
============================================================================ */
.badge { display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 2px 10px; border: 1px solid transparent; border-radius: var(--r-pill);
background: var(--neutral-cool); color: var(--text-black-soft);
font-family: var(--font-sans); font-size: var(--text-1); font-weight: 700; line-height: var(--lh-compact); letter-spacing: var(--tracking-normal); white-space: nowrap; vertical-align: middle; }
.badge svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.5; }
.badge--id, .card-header-badge { font-family: var(--font-mono); font-weight: 600; background: var(--neutral-cool); color: var(--text-black); border-color: var(--hairline); } /* NODE-000003 · HIR-001 · factual_confirmation · priority=normal · NodeRole/ProcessStatus 원문 */
.badge--l1 { background: var(--green-house); color: var(--white); } /* 'L1 · Router' — Governance 최상위 */
.badge--l2 { background: var(--green-starbucks); color: var(--white); } /* 'L2 · Scientific Orchestrator' */
.badge--l2-audit { background: transparent; color: var(--green-starbucks); border-color: var(--green-starbucks); } /* 'L2 · Semantic Auditor' — 심사자 = 외곽 */
.badge--l3 { background: var(--green-accent); color: var(--white); } /* 'L3 · EXECUTION · claude_code' / 'L3 · FINALIZE · harness_finalizer' */
/* [파생] 외곽형 층위 배지 — CTA 알약 옆에 놓이는 정적 라벨용(ros_home 선택 카드). '채운 알약 = 버튼, 외곽 알약 = 라벨' 원칙.
.btn--primary 와 같은 채움색(#00754A)을 비인터랙티브 라벨에 쓰지 않는다 (DESIGN §2 Green Accent = CTA 채움 역할) */
.badge--l1.badge--outline { background: transparent; color: var(--green-house); border-color: var(--green-house); }
.badge--l2.badge--outline { background: transparent; color: var(--green-starbucks); border-color: var(--green-starbucks); }
.badge--l3.badge--outline { background: transparent; color: var(--green-accent); border-color: var(--green-accent); }
.badge--system { background: var(--neutral-cool); color: var(--text-black-soft); border-color: var(--hairline); } /* Execution Gateway · WorkContract · ExecutionReport · SUCCEEDED/PARTIAL/BLOCKED/FAILED */
.badge--rule { background: transparent; color: var(--green-uplift); border-color: var(--green-uplift); font-family: var(--font-mono); font-weight: 600; } /* rules.py RULE-* id 만 */
.badge--priority-high { background: transparent; color: var(--red); border-color: var(--red); font-family: var(--font-mono); font-weight: 600; } /* 'priority=high' */
.badge--human { background: transparent; color: var(--text-black); border-color: var(--text-black); } /* '연구자' — 시스템 밖 사람 */
.badge--human-decision { background: var(--gold-lightest); color: var(--text-rewards); border-color: var(--gold); } /* ★ 'HUMAN_DECISION' / '연구자 결정' — 9.7:1 */
.badge--human-decision::before { content: "\2605"; color: var(--gold); font-size: var(--text-0); line-height: 1; }
.modal--dark .badge--human-decision, .band .badge--human-decision, .card--dark .badge--human-decision { background: transparent; color: var(--gold); } /* 다크 면에서만 골드 글자 */
.badge--verdict-ok { background: transparent; color: var(--green-starbucks); border-color: var(--green-starbucks); font-family: var(--font-mono); font-weight: 600; } /* ACCEPT / ACCEPT_WITH_NOTES */
.badge--verdict-revise { background: transparent; color: var(--text-black); border-color: var(--yellow); font-family: var(--font-mono); font-weight: 600; } /* REVISE */
.badge--verdict-bad { background: transparent; color: var(--red); border-color: var(--red); font-family: var(--font-mono); font-weight: 600; } /* REJECT / ESCALATE */
.badge-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
/* 섹션 트리 상태 점 — ProcessStatus 매핑 */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: var(--r-circle); background: var(--black-a30); flex: none; } /* STOPPED */
.dot--none { background: transparent; border: 1px solid var(--black-a30); } /* Process 없음 ('미착수' 는 UI 가정) */
.dot--active { background: var(--green-accent); animation: pulse 2s ease-in-out infinite; } /* ACTIVE */
.dot--audit { background: var(--green-starbucks); } /* AUDIT 노드 진행 */
.dot--human { background: var(--gold); box-shadow: 0 0 0 2px var(--gold-lightest); } /* WAITING_FOR_HUMAN */
.dot--done { background: var(--green-house); } /* COMPLETED */
.dot--blocked { background: var(--red); } /* FAILED */
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
/* 에이전트 간 대화 블록 — 세라믹 워시 위, 각 턴은 좌측 3px 레일이 층위 색 */
.agent-thread { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3); background: var(--ceramic); border: 1px solid var(--hairline); border-radius: var(--r-card); } /* 세라믹(#edebe9)–캔버스(#f2f0eb) 1.03:1 이라 헤어라인으로 블록 경계 확보 */
.agent-thread__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-1); font-weight: 600; letter-spacing: var(--tracking-ko-label); color: var(--text-black-soft); }
.agent-thread__summary { flex: 1 1 auto; font-weight: 400; min-width: 0; }
.agent-thread__toggle { margin-left: auto; } /* .btn.btn--text.btn--sm */
.agent-thread[data-collapsed="true"] .agent-turn { display: none; }
.agent-turn { display: grid; grid-template-columns: 3px minmax(0, 1fr); gap: var(--space-3); }
.agent-turn::before { content: ""; border-radius: 2px; background: var(--black-a10); }
.agent-turn--l1::before { background: var(--green-house); }
.agent-turn--l2::before { background: var(--green-starbucks); }
.agent-turn--l3::before { background: var(--green-accent); }
.agent-turn--system::before { background: var(--black-a20); }
.agent-turn--human::before { background: var(--text-black); }
.agent-turn--human-decision::before { background: var(--gold); }
.agent-turn__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin-bottom: var(--space-1); }
.agent-turn__time { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-0); letter-spacing: 0; color: var(--text-black-soft); }
.agent-turn__body { font-size: var(--text-2); color: var(--text-black); }
.agent-turn__body p + p { margin-top: var(--space-1); }
.agent-turn__contract { margin-top: var(--space-2); background: var(--white); border: 1px solid var(--hairline); border-radius: var(--r-input); }
.agent-turn__contract summary { padding: var(--space-2) var(--space-3); font-size: var(--text-1); font-weight: 700; letter-spacing: var(--tracking-ko-label); cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--space-2); min-height: var(--tap-min); }
.agent-turn__contract summary::-webkit-details-marker { display: none; }
.agent-turn__contract summary::before { content: "\25B8"; color: var(--green-accent); transition: transform var(--motion); }
.agent-turn__contract[open] summary::before { transform: rotate(90deg); }
.agent-turn__contract summary:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-input); }
.agent-turn__contract pre { margin: 0; padding: 0 var(--space-3) var(--space-3); font-family: var(--font-mono); font-size: var(--text-1); letter-spacing: 0; white-space: pre-wrap; word-break: break-word; color: var(--text-black); }
.agent-turn__findings { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-2); }
.agent-turn__finding { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2); align-items: start; font-size: var(--text-1); letter-spacing: var(--tracking-ko-label); padding: var(--space-1) var(--space-2); background: var(--white); border-radius: var(--r-input); }
/* 사용자 대화 말풍선 — 연구자 = 흰 카드 우측, 어시스턴트 = 캔버스 위 투명 + 아바타, 결정 = 골드 카드 */
.msg { position: relative; max-width: var(--col-lg); padding: var(--space-3); border-radius: var(--r-card); font-size: var(--text-2); }
.msg--user { margin-left: auto; background: var(--white); box-shadow: var(--shadow-card); }
.msg--assistant { background: transparent; padding-left: 44px; }
.msg--assistant .msg__avatar { position: absolute; left: 0; top: var(--space-3); }
.msg__avatar { width: 32px; height: 32px; border-radius: var(--r-circle); background: var(--green-starbucks); color: var(--white); display: inline-flex; align-items: center; justify-content: center; font-size: var(--text-0); font-weight: 700; letter-spacing: var(--tracking-ko-label); flex: none; }
.msg__avatar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.msg--decision { background: var(--gold-lightest); border: 1px solid var(--gold); color: var(--text-rewards); }
.msg__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin-bottom: var(--space-1); font-size: var(--text-1); letter-spacing: var(--tracking-ko-label); color: var(--text-black-soft); }
.msg__time { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-0); }
.msg__body p + p { margin-top: var(--space-2); }
.msg__body ul, .msg__body ol { padding-left: 20px; }
/* ============================================================================
§11 [파생] 작업 페이지 부품 — composer 대기 띠, 스크롤 알약, progress-row, 타이핑 점, 첨부 띠, 리뷰어 블록, 인용
============================================================================ */
.composer-wait { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); min-height: 56px; padding: var(--space-2) var(--space-3);
background: var(--gold-lightest); color: var(--text-rewards); border-radius: var(--r-card); border-left: 3px solid var(--gold); font-size: var(--text-2); letter-spacing: var(--tracking-ko-label); }
.composer-wait__text { flex: 1 1 200px; min-width: 0; }
.composer-wait .btn { margin-left: auto; }
.scroll-pill { position: sticky; bottom: var(--space-2); display: flex; justify-content: center; pointer-events: none; }
.scroll-pill .btn { pointer-events: auto; background: var(--white); box-shadow: var(--shadow-card); }
.progress-row { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-0); letter-spacing: 0; color: var(--text-black-soft); padding: var(--space-1) 0; }
.progress-dot { width: 6px; height: 6px; border-radius: var(--r-circle); background: var(--green-accent); animation: pulse 1.2s ease-in-out infinite; flex: none; }
.typing-indicator { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 var(--space-2); }
.typing-dot { width: 6px; height: 6px; border-radius: var(--r-circle); background: var(--text-black-soft); animation: pulse 1.2s ease-in-out infinite; }
.typing-dot:nth-child(2) { animation-delay: .2s; }
.typing-dot:nth-child(3) { animation-delay: .4s; }
.attach-strip { display: flex; flex-wrap: wrap; gap: var(--space-1); padding: var(--space-2) 0 0; }
.attach-strip:empty { display: none; }
.managed-block { position: relative; margin: var(--space-3) 0; padding: var(--space-3); background: var(--neutral-cool); border: 1px solid var(--hairline); border-radius: var(--r-card); }
.managed-block__caption { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); font-size: var(--text-1); font-weight: 700; letter-spacing: var(--tracking-ko-label); color: var(--text-black-soft); user-select: none; }
.managed-block__caption .kicker { color: var(--green-starbucks); }
.quote-item { position: relative; margin: var(--space-2) 0; padding: var(--space-1) 0 var(--space-1) var(--space-3); border-left: 3px solid var(--green-uplift); font-size: var(--text-2); }
.quote-item__num { font-family: var(--font-mono); font-weight: 700; letter-spacing: 0; color: var(--green-uplift); margin-right: var(--space-1); }
.empty-state { padding: var(--space-5) var(--space-3); text-align: center; color: var(--text-black-soft); font-size: var(--text-2); }
/* ============================================================================
§12 [파생] 작업 페이지 뼈대 — index_chat.html 계열 레거시 이름을 Starbucks 값으로 재정의 (별칭이 뒤에 오도록)
============================================================================ */
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--neutral-warm); }
.top-bar { display: flex; align-items: center; gap: var(--space-2); min-height: 56px; padding: 0 var(--gutter); background: var(--white); border-bottom: 1px solid var(--hairline); flex: none; }
@media (min-width: 480px) { .top-bar { padding: 0 var(--gutter-md); } }
.top-bar__title { font-size: var(--text-3); font-weight: 600; color: var(--green-starbucks); letter-spacing: var(--tracking-ko-label); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 768px) { .top-bar__title { font-size: 18px; } }
.top-bar__right { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
.chat-area { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--space-4) var(--gutter); scroll-behavior: smooth; }
@media (min-width: 480px) { .chat-area { padding: var(--space-4) var(--gutter-md); } }
.chat-inner { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-3); }
.input-area { flex: none; padding: var(--space-2) var(--gutter) var(--space-3); background: var(--neutral-warm); border-top: 1px solid var(--hairline); }
@media (min-width: 480px) { .input-area { padding: var(--space-2) var(--gutter-md) var(--space-3); } }
.input-area__inner { max-width: 880px; margin: 0 auto; }
.input-box { display: flex; align-items: flex-end; gap: var(--space-2); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3); background: var(--white); border: 1px solid var(--input-border); border-radius: var(--r-card); box-shadow: var(--shadow-card); transition: border-color var(--motion), box-shadow var(--motion); }
.input-box:focus-within { border-color: var(--green-accent); box-shadow: 0 0 0 1px var(--green-accent), var(--shadow-card); }
#userInput, .input-box textarea { flex: 1 1 auto; min-height: 24px; max-height: 200px; padding: 6px 0; border: 0; background: transparent; resize: none; font: inherit; line-height: var(--lh-normal); color: var(--text-black); outline: none; }
#userInput::placeholder, .input-box textarea::placeholder { color: var(--text-black-soft); }
.send-btn { flex: none; width: var(--tap-min); height: var(--tap-min); padding: 0; border: 1px solid var(--green-accent); border-radius: var(--r-circle); background: var(--green-accent); color: var(--white);
display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--motion); }
.send-btn:hover { background: var(--green-starbucks); border-color: var(--green-starbucks); }
.send-btn:active { transform: scale(0.95); }
.send-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.send-btn:disabled { opacity: .4; pointer-events: none; }
.send-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.input-hint { margin-top: var(--space-1); font-size: var(--text-1); letter-spacing: var(--tracking-ko-label); color: var(--text-black-soft); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.input-hint kbd { font-size: var(--text-0); }
.sidebar-header { padding: var(--space-3); border-bottom: 1px solid var(--hairline); }
.sidebar-header__title { font-size: var(--text-2); font-weight: 700; letter-spacing: var(--tracking-ko-label); color: var(--green-starbucks); display: flex; align-items: center; gap: var(--space-2); min-height: var(--tap-min); }
.sidebar-header__meta { font-size: var(--text-1); letter-spacing: var(--tracking-ko-label); color: var(--text-black-soft); margin-top: 2px; }
.sidebar-section { padding: var(--space-2) var(--space-2); }
.sidebar-section__title { padding: var(--space-2) var(--space-2) var(--space-1); font-size: var(--text-1); font-weight: 700; letter-spacing: var(--tracking-ko-label); color: var(--text-black-soft); }
.sidebar-section__title:lang(en) { text-transform: uppercase; letter-spacing: var(--tracking-loose); }
.service-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.service-item { position: relative; display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: 44px; padding: 8px 10px 8px 14px; border: 0; border-radius: var(--r-card); background: transparent; /* 리스트 행 = 12px (좌측 3px 레일과 공존) */
color: var(--text-black); font-size: var(--text-2); font-weight: 500; letter-spacing: var(--tracking-ko-label); text-align: left; cursor: pointer; transition: background-color var(--motion), color var(--motion), transform var(--motion); }
.service-item:active { transform: scale(0.95); }
.service-item:hover { background: var(--black-a06); }
.service-item:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.service-item.active, .service-item[aria-current="true"] { background: var(--white); color: var(--green-starbucks); font-weight: 700; box-shadow: var(--shadow-card); }
.service-item.active::before, .service-item[aria-current="true"]::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--green-accent); }
.service-item__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.service-item__status { font-family: var(--font-mono); font-size: var(--text-1); letter-spacing: 0; color: var(--text-black-soft); }
.service-item .dot { margin-left: auto; }
.sidebar-footer { margin-top: auto; padding: var(--space-3); border-top: 1px solid var(--hairline); display: flex; flex-direction: column; gap: var(--space-2); }
.status-badge { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 28px; padding: 4px 10px; border-radius: var(--r-pill); background: var(--white); border: 1px solid var(--hairline); font-size: var(--text-1); font-weight: 600; letter-spacing: var(--tracking-ko-label); color: var(--text-black-soft); }
.status-dot { width: 8px; height: 8px; border-radius: var(--r-circle); background: var(--black-a30); flex: none; }
.status-dot.active { background: var(--green-accent); animation: pulse 2s ease-in-out infinite; }
.status-dot.idle { background: var(--black-a30); }
.status-dot.error { background: var(--red); }
.welcome-card { padding: var(--space-4); background: var(--white); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.welcome-card__title { font-size: var(--text-h); font-weight: 600; line-height: 36px; letter-spacing: -0.16px; color: var(--green-starbucks); margin-bottom: var(--space-2); }
.welcome-card__body { font-size: var(--text-2); color: var(--text-black-soft); }
/* ============================================================================
§13 [파생] 메일 페이지 — 네이버웍스형 메일쓰기 레이아웃을 Starbucks 토큰으로 재현
============================================================================ */
.compose-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-4); align-items: start; padding: var(--space-4) var(--gutter); max-width: var(--col-xl); margin: 0 auto; }
@media (min-width: 480px) { .compose-layout { padding: var(--space-4) var(--gutter-md); } }
@media (min-width: 1024px) { .compose-layout { padding: var(--space-5) var(--gutter-lg); } }
.card--mail { padding: 0; overflow: hidden; }
.mail-toolbar { display: flex; align-items: center; gap: var(--space-1); min-height: 56px; padding: var(--space-1) var(--space-3); border-bottom: 1px solid var(--hairline); background: var(--white); overflow-x: auto; scrollbar-width: none; }
.mail-toolbar::-webkit-scrollbar { display: none; }
.mail-toolbar__right { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-1); }
.mail-fields { background: var(--white); border-bottom: 1px solid var(--hairline); }
.rte-toolbar { display: flex; flex-direction: column; background: var(--neutral-cool); border-bottom: 1px solid var(--hairline); }
.rte-toolbar__row { display: flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 var(--space-2); overflow-x: auto; scrollbar-width: none; }
.rte-toolbar__row::-webkit-scrollbar { display: none; }
.rte-toolbar__row + .rte-toolbar__row { border-top: 1px solid var(--hairline); }
.rte-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: var(--tap-min); min-height: var(--tap-min); padding: 0 10px; border: 0; border-radius: var(--r-pill); background: transparent;
color: var(--text-black); font-size: var(--text-1); font-weight: 600; letter-spacing: var(--tracking-ko-label); white-space: nowrap; cursor: pointer; transition: background-color var(--motion), transform var(--motion); flex: none; } /* 50px 알약 — 아이콘 단독(40×40)은 원, 라벨 포함은 알약 (DESIGN §7) */
.rte-btn:hover { background: var(--black-a06); }
.rte-btn:active { transform: scale(0.95); }
.rte-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.rte-btn[aria-pressed="true"] { background: var(--green-light); color: var(--green-house); }
.rte-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rte-btn--b { font-weight: 700; } .rte-btn--i { font-style: italic; } .rte-btn--u { text-decoration: underline; } .rte-btn--s { text-decoration: line-through; }
.rte-sep { width: 1px; height: 20px; background: var(--hairline); margin: 0 var(--space-1); flex: none; }
.rte-color { position: relative; padding-bottom: 4px; }
.rte-color::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 6px; height: 3px; border-radius: 2px; background: var(--rte-swatch, var(--green-accent)); }
.rte-select { min-height: var(--tap-min); border-color: transparent; background-color: transparent; } /* .select 위에 얹음 — 툴바 행(44px) 안에서 탭 영역 40px 유지 */
.mail-body { min-height: 360px; padding: var(--space-4) var(--space-4) var(--space-3); background: var(--white); color: var(--text-black); font-size: var(--text-3); line-height: 1.7; outline: none; transition: background-color var(--motion), box-shadow var(--motion); }
.mail-body:empty::before { content: attr(data-placeholder); color: var(--text-black-soft); pointer-events: none; }
.mail-body:focus-visible { box-shadow: inset 0 0 0 2px var(--green-light); }
.mail-body.is-dragover { background: var(--green-light-33); box-shadow: inset 0 0 0 2px var(--green-accent); outline: 2px dashed var(--green-accent); outline-offset: -8px; }
.mail-body p + p { margin-top: var(--space-2); }
.mail-sig { padding: 0 var(--space-4) var(--space-4); font-size: var(--text-2); line-height: 1.7; color: var(--text-black-soft); }
.mail-sig__name { font-weight: 700; color: var(--text-black); }
.mail-sig__line { display: block; }
.reviewer-panel { position: sticky; top: calc(var(--nav-h) + var(--subnav-h) + var(--space-3)); max-height: calc(100vh - var(--nav-h) - var(--subnav-h) - var(--space-5)); display: flex; flex-direction: column; min-height: 0; }
.reviewer-panel__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.reviewer-panel__head .card__title { margin: 0; }
.reviewer-panel__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0 calc(-1 * var(--space-2)); padding: 0 var(--space-2); }
.reviewer-panel__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--hairline); font-size: var(--text-1); letter-spacing: var(--tracking-ko-label); color: var(--text-black-soft); }
.review-group + .review-group { margin-top: var(--space-3); }
.review-group__title { display: flex; align-items: center; gap: var(--space-2); min-height: var(--tap-min); padding: 0 var(--space-2); font-size: var(--text-1); font-weight: 700; color: var(--green-starbucks); }
.review-group__title .kicker { color: inherit; }
.review-group__count { margin-left: auto; font-family: var(--font-mono); font-weight: 600; letter-spacing: 0; color: var(--text-black-soft); }
.review-item { display: grid; grid-template-columns: 24px 32px minmax(0, 1fr); align-items: start; gap: var(--space-2); padding: var(--space-2); border-radius: var(--r-input); transition: background-color var(--motion); cursor: pointer; }
.review-item:hover { background: var(--black-a06); }
.review-item.is-on { background: var(--green-light-33); }
.review-item .check { min-height: 24px; }
.review-item__num { font-family: var(--font-mono); font-size: var(--text-1); font-weight: 700; letter-spacing: 0; color: var(--green-uplift); line-height: 1.5; }
.review-item__text { font-size: var(--text-1); letter-spacing: var(--tracking-ko-label); line-height: 1.5; color: var(--text-black); }
.review-item__tag { margin-top: var(--space-1); }
.popover { position: absolute; z-index: var(--z-drawer); min-width: 200px; max-width: 320px; padding: var(--space-3); background: var(--neutral-cool); border: 1px solid var(--hairline); border-radius: var(--r-card); box-shadow: var(--shadow-nav); font-size: var(--text-1); letter-spacing: var(--tracking-ko-label); color: var(--text-black); }
.popover[hidden] { display: none; }
/* ============================================================================
§14 유틸 · 모션 축소 · 인쇄 · 반응형 (DESIGN §8 Breakpoints: 1024 / 767 / 479)
============================================================================ */
[hidden] { display: none !important; }
.sr-only, .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--gutter); top: -100px; z-index: calc(var(--z-modal) + 1); padding: 10px 16px; background: var(--white); color: var(--green-accent); border-radius: var(--r-pill); box-shadow: var(--shadow-nav); }
.skip-link:focus { top: var(--space-2); }
.flex { display: flex; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; } .gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); }
.ml-auto { margin-left: auto; } .mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); } .mb-3 { margin-bottom: var(--space-3); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabular { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
.chat-area { scroll-behavior: auto; }
.dot--active, .progress-dot, .typing-dot, .status-dot.active { animation: none; opacity: 1; }
}
@media print {
.nav, .ros-nav, .subnav, .frap, .frap-stack, .toast-region, .modal-backdrop, .modal-overlay, .sidebar, .sidebar-backdrop, .input-area, .skip-link { display: none !important; }
body { background: var(--white); }
.layout { display: block; height: auto; overflow: visible; }
.chat-area { overflow: visible; }
.card, .msg--user { box-shadow: none; border: 1px solid var(--hairline); }
}
/* ≤1024: 사이드바 드로어(§7), 메일 2열 → 1열, 리뷰어 패널 sticky 해제 */
@media (max-width: 1024px) {
.compose-layout { grid-template-columns: minmax(0, 1fr); }
.reviewer-panel { position: static; max-height: none; }
.reviewer-panel__body { overflow: visible; }
}
/* ≤767: 내비 링크 접힘(§7), 모달 액션 세로 전폭, 히어로 축소, 메일 행 세로 */
@media (max-width: 767px) {
.hero-title { font-size: 36px; } /* 히어로 h1 반응형은 여기(§14) 한 곳에서만: ≤767 36px → ≤479 32px */
.modal__actions { flex-direction: column; }
.modal__actions .btn { width: 100%; }
.mail-row { grid-template-columns: 88px minmax(0, 1fr); }
.mail-row__aux { grid-column: 2; }
.mail-row__input { grid-column: 1 / -1; }
.mail-row__actions { grid-column: 1 / -1; justify-content: flex-end; }
.mail-row__error { grid-column: 1 / -1; }
.band__actions .btn { width: 100%; }
.footer__inner { flex-direction: column; align-items: flex-start; }
.card-grid { gap: var(--space-3); }
}
/* ≤479 (xs): 알약 전폭, 모달 여백 축소, 탭 영역 유지 */
@media (max-width: 479px) {
.hero-title { font-size: 32px; }
.btn--responsive { width: 100%; }
.modal, .modal-box { padding: var(--space-3); padding-top: var(--space-4); max-height: calc(100vh - 16px); }
.modal__kicker, .modal-header { padding-right: 44px; }
.card--choice { min-height: 200px; }
.frap { right: var(--gutter); bottom: var(--gutter); }
.frap-stack { right: var(--gutter); bottom: calc(var(--gutter) + 56px + var(--space-2)); }
.toast-region { right: var(--gutter); }
.chat-inner { gap: var(--space-2); }
.msg { max-width: 100%; }
.subnav__right { display: none; }
}