/* ============================================================
Prototype Feedback System — 공용 토큰/컴포넌트
각 HTML 에 아래 폰트 링크를 복사해 넣을 것:
============================================================ */
:root{
/* 종이/잉크 — 밝은 화면(대시보드) */
--paper:#FAF7F2; --paper-deep:#F1ECE2; --surface:#FFFFFF;
--ink:#221F1C; --ink-soft:#6E6860; --ink-faint:#A79F93;
--line:#E7E1D5; --line-soft:#F0EBE1;
/* 포인트 팔레트 (PLM 프로토타입과 동일 계열) */
--thread:#33646B; --thread-soft:#E3EDEC; --thread-text:#1F494C;
--saffron:#C98A2E; --saffron-soft:#F5E8D2; --saffron-text:#8C5E17;
--sage:#5B8064; --sage-soft:#E7EFE6; --sage-text:#3E5C46;
--coral:#BE5038; --coral-soft:#F5E2DB; --coral-text:#8C3924;
/* 워크벤치 — 어두운 크롬(뷰어 상단바·패널) */
--wb-bg:#26221E; --wb-raise:#312C27; --wb-hover:#3B352F;
--wb-line:#453E37; --wb-ink:#F3EFE8; --wb-ink-soft:#B4ACA0; --wb-ink-faint:#847C71;
--wb-thread:#7FB2B0; --wb-thread-deep:#33646B;
--wb-canvas:#8A847B; /* 프로토타입을 감싸는 중립 캔버스 */
--radius-lg:18px; --radius-md:12px; --radius-sm:8px;
--shadow-card:0 1px 2px rgba(34,31,28,.05), 0 1px 0 rgba(34,31,28,.03);
--shadow-pop:0 12px 32px rgba(34,31,28,.18), 0 2px 8px rgba(34,31,28,.10);
--font-body:'Pretendard', -apple-system, sans-serif;
--font-mono:'IBM Plex Mono', ui-monospace, monospace;
--font-display:'Fraunces', serif;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{ font-family:var(--font-body); color:var(--ink); background:var(--paper); }
h1,h2,h3,h4,p{ margin:0; }
button,input,select,textarea{ font-family:inherit; font-size:inherit; color:inherit; }
a{ color:inherit; }
.mono{ font-family:var(--font-mono); }
.display{ font-family:var(--font-display); }
:focus-visible{ outline:2px solid var(--thread); outline-offset:2px; border-radius:4px; }
@media (prefers-reduced-motion: reduce){
*{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}
/* ---------- 버튼 ---------- */
.btn{
display:inline-flex; align-items:center; gap:6px;
padding:7px 14px; border-radius:var(--radius-sm);
border:1px solid var(--line); background:var(--surface); color:var(--ink);
font-size:13px; font-weight:600; cursor:pointer; line-height:1.4;
transition:background .12s, border-color .12s, color .12s;
}
.btn:hover{ background:var(--paper); }
.btn-primary{ background:var(--thread); border-color:var(--thread); color:#fff; }
.btn-primary:hover{ background:var(--thread-text); border-color:var(--thread-text); }
.btn-ghost{ border-color:transparent; background:transparent; }
.btn-ghost:hover{ background:var(--paper-deep); }
.btn-danger{ color:var(--coral-text); }
.btn-danger:hover{ background:var(--coral-soft); border-color:var(--coral); }
.btn[disabled]{ opacity:.45; cursor:default; pointer-events:none; }
/* 다크 크롬용 버튼 */
.wb .btn, .btn-wb{
border-color:var(--wb-line); background:var(--wb-raise); color:var(--wb-ink);
}
.wb .btn:hover, .btn-wb:hover{ background:var(--wb-hover); }
.wb .btn-primary, .btn-wb.is-on{
background:var(--wb-thread); border-color:var(--wb-thread); color:#1B2F31;
}
/* ---------- 입력 ---------- */
.input, .textarea, .select{
width:100%; padding:8px 10px; border-radius:var(--radius-sm);
border:1px solid var(--line); background:var(--surface); color:var(--ink);
font-size:13px; line-height:1.5;
}
.textarea{ resize:vertical; min-height:72px; }
.input::placeholder, .textarea::placeholder{ color:var(--ink-faint); }
/* ---------- 칩/배지 ---------- */
.chip{
display:inline-flex; align-items:center; gap:4px;
font-family:var(--font-mono); font-size:11.5px; font-weight:500;
padding:2px 8px; border-radius:999px;
background:var(--paper-deep); color:var(--ink-soft); border:1px solid var(--line);
}
.chip-thread{ background:var(--thread-soft); color:var(--thread-text); border-color:transparent; }
.chip-saffron{ background:var(--saffron-soft); color:var(--saffron-text); border-color:transparent; }
.chip-sage{ background:var(--sage-soft); color:var(--sage-text); border-color:transparent; }
.chip-coral{ background:var(--coral-soft); color:var(--coral-text); border-color:transparent; }
/* ---------- 토스트 ---------- */
.toast-wrap{
position:fixed; top:16px; right:16px; z-index:2147483600;
display:flex; flex-direction:column; gap:8px; pointer-events:none;
}
.toast{
pointer-events:auto; max-width:340px;
padding:10px 14px; border-radius:var(--radius-md);
background:var(--coral); color:#fff; font-size:13px; font-weight:500;
box-shadow:var(--shadow-pop); animation:toast-in .18s ease-out;
}
.toast.ok{ background:var(--sage); }
@keyframes toast-in{ from{ transform:translateY(-6px); opacity:0; } to{ transform:none; opacity:1; } }