/ 가 자체 white-space
를 지정하므로 영향 없음. */
.md-body {
white-space: normal;
}
.pg-msg__dropcap {
float: left;
margin-top: 2px;
margin-right: 8px;
font-family: var(--serif);
font-size: 2.4em;
font-weight: 700;
line-height: 0.88;
color: var(--ink);
user-select: none;
}
/* AI 답변 마크다운 첫 문단 첫 글자 = 드롭캡. JSX 수정 없이 ::first-letter
로 자동 적용. mock 의 ```` 와 동일 효과. */
.pg-msg--ai .md-body > p:first-child::first-letter {
float: left;
margin-top: 2px;
margin-right: 8px;
font-family: var(--serif);
font-size: 2.4em;
font-weight: 700;
line-height: 0.88;
color: var(--ink);
}
.pg-msg__actions {
max-width: none;
margin: 2px 0 8px;
}
/* 답변 본문(.ws-msg-ai)의 30px 하단 여백이 액션 바를 멀리 밀어냄 → 액션 바가
있는 메시지에서만 답변 하단을 좁혀 바를 답변에 붙인다(:has). 액션 바 없는
메시지의 메시지 간격(30px)은 그대로. */
.pg-msg__body:has(.pg-msg__actions) .ws-msg-ai {
margin-bottom: 4px;
}
/* 답변/질문 액션 바 — 상시 노출이 아니라 메시지 hover/focus 시에만(마우스 근처).
터치/키보드 접근성: focus-within 도 노출. */
.ws-msg-ai-wrap .pg-msg__actions,
.ws-msg-user-wrap .pg-msg__actions {
opacity: 0;
transition: opacity 0.14s ease;
}
.ws-msg-ai-wrap:hover .pg-msg__actions,
.ws-msg-ai-wrap:focus-within .pg-msg__actions,
.ws-msg-user-wrap:hover .pg-msg__actions,
.ws-msg-user-wrap:focus-within .pg-msg__actions {
opacity: 1;
}
/* 질문(사용자) 복사 — 우측 정렬, 컴팩트한 위 여백. */
.pg-msg__actions--user {
justify-content: flex-end;
margin-top: 2px;
}
/* 피드백 선택 표시(👍/👎) — 테라코타. */
.nb-response-actions__icon.is-active {
color: var(--terra, #b3553f);
}
.pg-msg__links {
display: flex;
gap: 8px;
margin-top: 12px;
}
.pg-msg__link {
display: inline-flex;
align-items: center;
gap: 5px;
cursor: pointer;
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
padding: 4px 10px;
border: 1px dashed;
border-radius: 2px;
transition: background 0.15s ease;
}
.pg-msg__link--rag {
color: var(--moss);
border-color: var(--moss);
background: color-mix(in srgb, var(--moss) 5%, transparent);
}
.pg-msg__link--rag:hover {
background: color-mix(in srgb, var(--moss) 15%, transparent);
}
.pg-msg__link--web {
color: var(--terra);
border-color: var(--terra);
background: color-mix(in srgb, var(--terra) 5%, transparent);
}
.pg-msg__link--web:hover {
background: color-mix(in srgb, var(--terra) 15%, transparent);
}
.pg-checklist {
margin-top: 14px;
padding: 12px 16px;
/* 추론 버블 = bone + amber 틴트. 체크리스트는 틴트 없는 base bone —
흰색이 아닌 같은 계열의 밝은 톤으로 버블과 구분 */
background: var(--bone);
border-radius: 2px;
}
.pg-checklist__head {
margin-bottom: 8px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
letter-spacing: 1.2px;
color: var(--ink-3);
}
.pg-checklist__items {
display: flex;
flex-direction: column;
gap: 6px;
}
.pg-checklist__item {
display: flex;
align-items: baseline;
gap: 10px;
font-size: 13px;
}
.pg-checklist__sym {
width: 14px;
font-family: var(--mono);
font-size: 11px;
}
.pg-checklist__sym--done {
color: var(--moss);
}
.pg-checklist__sym--doing {
color: var(--amber);
}
.pg-checklist__sym--todo {
color: var(--ink-4);
}
.pg-checklist__label {
color: var(--ink);
}
.pg-checklist__label.is-done {
text-decoration: line-through;
color: var(--ink-3);
}
/* ── 스트리밍 로더 / fleuron ─────────────────────────────────────────── */
.pg-streamloader {
display: flex;
gap: 20px;
max-width: 880px;
width: 100%;
margin: 0 auto;
animation: fadeIn 0.3s ease;
}
.pg-streamloader__body {
flex: 1;
display: flex;
align-items: center;
gap: 12px;
}
.pg-streamloader__text {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 1px;
color: var(--terra);
}
/* AI 응답 준비중 skeleton — message row 레이아웃(gutter+body) 유지,
디자인의 mono/terra 표현으로 통일. shimmer 키프레임은 globals.css. */
.pg-skel {
display: flex;
gap: 20px;
max-width: 880px;
width: 100%;
margin: 0 auto;
animation: fadeIn 0.3s ease;
}
.pg-skel__body {
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
padding-top: 6px;
}
.pg-skel-bar {
position: relative;
height: 12px;
border-radius: 2px;
background: color-mix(in srgb, var(--ink) 6%, transparent);
overflow: hidden;
}
.pg-skel-bar__shimmer {
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
transparent 0%,
color-mix(in srgb, var(--terra) 22%, transparent) 50%,
transparent 100%
);
animation: shimmer 1.4s infinite;
}
.pg-fleuron {
display: flex;
align-items: center;
justify-content: center;
margin: 16px 0;
}
.pg-fleuron__line {
flex: 1;
height: 1px;
opacity: 0.3;
background: linear-gradient(to right, transparent, var(--ink-4), transparent);
}
.pg-fleuron__mark {
margin: 0 20px;
font-family: var(--serif);
font-size: 16px;
color: var(--amber);
user-select: none;
}
/* ==========================================================================
MockReasoning — 우측 슬라이딩 서랍
========================================================================== */
/* push 레이아웃 — 닫힘 시 margin-right:-380 으로 폭 0 소비(.pg-shell
overflow:hidden 가 클리핑), 열림 시 margin-right:0 → 컨텐츠 영역을 밀어냄. */
.pg-drawer {
flex-shrink: 0;
width: 380px;
display: flex;
flex-direction: column;
background: var(--bone-3);
border-left: 1px solid var(--ink-4);
margin-right: -380px;
transition: margin-right 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.pg-drawer.is-open {
margin-right: 0;
}
.pg-drawer__header {
position: relative;
padding: 24px 20px 16px;
background: var(--bone-2);
border-bottom: 1px solid var(--ink-4);
}
.pg-drawer__close {
position: absolute;
top: 20px;
right: 20px;
cursor: pointer;
font-family: var(--mono);
font-size: 12px;
font-weight: 700;
color: var(--ink-3);
background: var(--bone);
border: 1px solid var(--ink-4);
padding: 2px 8px;
border-radius: 2px;
box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
transition: all 0.15s ease;
}
.pg-drawer__close:hover {
color: var(--terra);
border-color: var(--terra);
}
.pg-drawer__kicker {
margin-bottom: 4px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
letter-spacing: 2px;
color: var(--terra);
}
.pg-drawer__title {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--serif);
font-size: 20px;
font-weight: 700;
line-height: 1.1;
color: var(--ink);
}
.pg-drawer__tabs {
display: flex;
padding: 0 12px;
background: var(--bone-2);
border-bottom: 1px solid var(--ink-4);
}
.pg-drawer__tab {
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
padding: 10px 14px;
color: var(--ink-3);
background: transparent;
border: none;
border-bottom: 2px solid transparent;
transition: all 0.15s ease;
}
.pg-drawer__tab.is-active {
color: var(--terra);
border-bottom-color: var(--terra);
}
.pg-drawer__content {
flex: 1;
overflow-y: auto;
padding: 20px 16px;
display: flex;
flex-direction: column;
gap: 16px;
}
.pg-drawer__section {
display: flex;
flex-direction: column;
gap: 14px;
}
.pg-rag-query {
padding: 12px 14px;
background: color-mix(in srgb, var(--bone-3) 25%, transparent);
border: 1px dashed var(--ink-4);
border-radius: 2px;
}
.pg-rag-query__label {
display: flex;
align-items: center;
gap: 5px;
margin-bottom: 4px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
color: var(--ink-3);
}
.pg-rag-query__text {
font-family: var(--serif);
font-size: 14px;
font-weight: 700;
font-style: italic;
color: var(--ink);
}
.pg-rag-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.pg-rag-section {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
color: var(--terra);
}
.pg-rag-card {
position: relative;
padding: 14px;
background: var(--bone);
border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
border-radius: 2px;
}
.pg-rag-card__stamp {
position: absolute;
right: 12px;
top: 10px;
display: flex;
align-items: center;
gap: 3px;
font-family: var(--mono);
font-size: 8px;
font-weight: 900;
padding: 2px 5px;
border: 1px solid;
border-radius: 1px;
transform: rotate(5deg);
opacity: 0.8;
user-select: none;
}
.pg-rag-card__stamp--web {
color: var(--moss);
border-color: var(--moss);
}
.pg-rag-card__stamp--rag {
color: var(--terra);
border-color: var(--terra);
}
.pg-rag-card__meta {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 6px;
}
.pg-rag-card__match {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
color: var(--ink-3);
}
.pg-rag-card__score {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
color: var(--moss);
}
.pg-rag-card__title {
margin-bottom: 8px;
max-width: 80%;
font-family: var(--serif);
font-size: 13px;
font-weight: 700;
line-height: 1.25;
color: var(--ink);
}
.pg-rag-card__snippet {
padding: 10px;
font-family: var(--mono);
font-size: 11px;
line-height: 1.5;
color: var(--ink-2);
background: var(--bone-2);
border-left: 2px solid var(--ink-4);
white-space: pre-wrap;
overflow-x: auto;
}
.pg-parse-meta {
padding: 16px;
background: var(--bone);
border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
border-radius: 2px;
}
.pg-parse-meta__label {
display: flex;
align-items: center;
gap: 5px;
margin-bottom: 8px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
color: var(--terra);
}
.pg-parse-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
}
.pg-parse-table tr {
border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}
.pg-parse-table tr:last-child {
border-bottom: none;
}
.pg-parse-table td {
padding: 6px 0;
}
.pg-parse-table__k {
font-family: var(--mono);
color: var(--ink-3);
}
.pg-parse-table__v {
text-align: right;
}
.pg-parse-table__v--name {
font-family: var(--sans);
font-weight: 700;
color: var(--ink);
}
.pg-parse-table__v--mono {
font-family: var(--mono);
color: var(--ink-2);
}
.pg-parse-table__v--tok {
font-family: var(--mono);
font-weight: 700;
color: var(--moss);
}
.pg-parse-block {
display: flex;
flex-direction: column;
gap: 6px;
}
.pg-parse-block__label {
display: flex;
align-items: center;
gap: 5px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
color: var(--ink-3);
}
.pg-parse-abstract {
padding: 14px;
font-family: var(--serif);
font-size: 13px;
font-style: italic;
line-height: 1.6;
color: var(--ink-2);
background: var(--bone);
border: 1px dashed color-mix(in srgb, var(--ink) 22%, transparent);
border-radius: 2px;
}
.pg-parse-ent-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.pg-parse-ent {
padding: 10px 12px;
background: var(--bone-2);
border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
border-radius: 2px;
}
.pg-parse-ent__row {
display: flex;
justify-content: space-between;
margin-bottom: 4px;
}
.pg-parse-ent__key {
font-family: var(--mono);
font-size: 11px;
font-weight: 700;
color: var(--terra);
}
.pg-parse-ent__val {
font-family: var(--mono);
font-size: 9px;
color: var(--ink-3);
background: var(--bone);
border: 1px solid color-mix(in srgb, var(--ink) 5%, transparent);
padding: 1px 4px;
border-radius: 2px;
}
.pg-parse-ent__desc {
font-family: var(--sans);
font-size: 11px;
color: var(--ink-3);
}
.pg-parse-empty {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 20px;
padding: 40px 20px;
text-align: center;
background: color-mix(in srgb, var(--bone-3) 10%, transparent);
border: 1px dashed var(--ink-4);
border-radius: 2px;
}
.pg-parse-empty__icon {
margin-bottom: 12px;
line-height: 0;
color: var(--ink-4);
}
.pg-parse-empty__title {
margin-bottom: 6px;
font-family: var(--serif);
font-size: 16px;
font-weight: 700;
color: var(--ink);
}
.pg-parse-empty__copy {
max-width: 25ch;
margin-bottom: 20px;
font-family: var(--sans);
font-size: 12px;
line-height: 1.5;
color: var(--ink-3);
}
.pg-parse-empty__mark {
font-family: var(--serif);
font-size: 20px;
color: var(--ink-4);
opacity: 0.4;
}
.pg-drawer__footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
background: var(--bone-2);
border-top: 1px solid var(--ink-4);
}
.pg-drawer__footer-id {
font-family: var(--mono);
font-size: 9px;
color: var(--ink-3);
}
.pg-drawer__footer-status {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
color: var(--moss);
}
/* ==========================================================================
MockHitlPanel — 인적 검증 결재판
상태(pending/approved/declined)별 accent 색을 --pg-accent 한 곳에서 결정,
하위 요소는 모두 var(--pg-accent) 를 참조한다.
========================================================================== */
.pg-hitl {
--pg-accent: var(--amber);
position: relative;
overflow: hidden;
background: var(--bone-2);
border: 2px solid var(--pg-accent);
border-radius: 2px;
transition:
border-color 0.3s ease,
box-shadow 0.3s ease;
}
.pg-hitl--pending {
--pg-accent: var(--amber);
box-shadow: 0 6px 20px color-mix(in srgb, var(--amber) 8%, transparent);
}
.pg-hitl--approved {
--pg-accent: var(--moss);
}
.pg-hitl--declined {
--pg-accent: var(--terra);
}
.pg-hitl__slip {
position: absolute;
top: 0;
right: 0;
padding: 3px 8px;
font-family: var(--mono);
font-size: 8px;
letter-spacing: 1.2px;
text-transform: uppercase;
user-select: none;
color: color-mix(in srgb, var(--pg-accent) 60%, transparent);
background: color-mix(in srgb, var(--pg-accent) 5%, transparent);
border-left: 1px dashed color-mix(in srgb, var(--ink) 15%, transparent);
border-bottom: 1px dashed color-mix(in srgb, var(--ink) 15%, transparent);
border-bottom-left-radius: 2px;
}
.pg-hitl__head {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
background: color-mix(in srgb, var(--pg-accent) 6%, transparent);
border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
.pg-hitl__head-title {
display: flex;
align-items: center;
gap: 8px;
}
.pg-hitl__head-label {
font-family: var(--mono);
font-size: 10px;
font-weight: 900;
letter-spacing: 1.5px;
color: var(--ink);
}
.pg-hitl__status {
margin-right: 64px;
padding: 2px 6px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
color: var(--bone);
background: var(--pg-accent);
border-radius: 2px;
}
.pg-hitl__body {
padding: 16px 20px;
}
.pg-hitl__desc {
margin: 0 0 12px;
font-family: var(--sans);
font-size: 13px;
line-height: 1.5;
color: var(--ink-2);
}
.pg-hitl__code {
font-family: var(--mono);
font-weight: 700;
}
.pg-hitl__txn {
position: relative;
margin-bottom: 16px;
padding: 12px;
font-family: var(--mono);
font-size: 11px;
line-height: 1.5;
color: var(--ink-2);
background: var(--bone);
border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}
.pg-hitl__txn-head {
color: var(--terra);
font-weight: 700;
}
.pg-hitl__txn-row {
word-break: break-word;
}
.pg-hitl__txn-em {
color: var(--ink);
}
.pg-hitl__txn-dim {
color: var(--ink-3);
}
.pg-hitl__stamp {
position: absolute;
right: 20px;
top: 50%;
padding: 4px 12px;
font-family: var(--serif);
font-size: 16px;
font-weight: 900;
letter-spacing: 2px;
color: var(--pg-accent);
background: var(--bone);
border: 3px double var(--pg-accent);
border-radius: 4px;
user-select: none;
animation: scaleInStamp 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.pg-hitl__stamp--approved {
transform: translateY(-50%) rotate(-8deg);
box-shadow: 0 0 8px color-mix(in srgb, var(--moss) 12%, transparent);
}
.pg-hitl__stamp--declined {
transform: translateY(-50%) rotate(6deg);
box-shadow: 0 0 8px color-mix(in srgb, var(--terra) 12%, transparent);
}
.pg-hitl__actions {
display: flex;
gap: 10px;
justify-content: flex-end;
}
.pg-hitl__resolved {
display: flex;
justify-content: space-between;
align-items: center;
}
.pg-hitl__resolved-meta {
font-family: var(--sans);
font-size: 11px;
color: var(--ink-3);
}
.pg-hitl__btn {
cursor: pointer;
font-family: var(--mono);
border-radius: 2px;
transition:
transform 0.15s ease,
box-shadow 0.15s ease,
background 0.15s ease,
color 0.15s ease;
}
.pg-hitl__btn--decline {
font-size: 11px;
font-weight: 700;
color: var(--terra);
background: var(--bone);
border: 1px solid var(--terra);
padding: 8px 18px;
box-shadow: 2px 2px 0 var(--terra-wash);
}
.pg-hitl__btn--decline:hover {
background: var(--terra-wash);
transform: translate(-1px, -1px);
box-shadow: 3px 3px 0 var(--terra-wash);
}
.pg-hitl__btn--approve {
font-size: 11px;
font-weight: 900;
color: var(--bone);
background: var(--moss);
border: 1px solid var(--ink);
padding: 8px 24px;
box-shadow: 2px 2px 0 var(--ink);
}
.pg-hitl__btn--approve:hover {
background: var(--ink);
transform: translate(-1px, -1px);
box-shadow: 3px 3px 0 var(--ink);
}
.pg-hitl__btn--reset {
font-size: 9px;
color: var(--ink-3);
background: var(--bone);
border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
padding: 4px 10px;
}
.pg-hitl__btn--reset:hover {
background: var(--bone-3);
color: var(--ink);
}
/* ==========================================================================
Message (실제 컴포넌트) 재스킨 — MockMessageList 에 없던 표면 보강
(agent 작성자 / flash / 도구호출 / 코드 / 첨부 / 반응 / 영수증 /
날짜 구분선 / 컨텍스트 메뉴 / 드롭캡)
========================================================================== */
.pg-msg--agent .pg-msg__gutter {
color: var(--moss);
}
.pg-msg--agent .pg-msg__role {
color: var(--moss);
background: color-mix(in srgb, var(--moss) 14%, transparent);
}
.pg-msg.is-flash {
animation: flash 600ms ease;
}
/* AI 답변 첫 글자 드롭캡 — markdown 본문이라 ::first-letter 로 처리 */
.pg-msg--ai .pg-msg__content::first-letter {
float: left;
margin: 2px 8px 0 0;
font-family: var(--serif);
font-size: 2.4em;
font-weight: 700;
line-height: 0.88;
color: var(--ink);
}
/* Option B — 중간과정(compact) 텍스트는 드롭캡(첫 글자 확대)을 끈다. 드롭캡은
최종답변 전용 매거진 리딩 스타일이라, sub-agent/preamble 펼침에선 일반 본문
첫 글자로 보이게. 위 두 드롭캡 규칙(.md-body / .pg-msg__content) 모두 무효화. */
.pg-msg--ai.pg-msg--compact .pg-msg__content::first-letter,
.pg-msg--ai.pg-msg--compact .md-body > p:first-child::first-letter {
float: none;
margin: 0;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
color: inherit;
}
.pg-msg__icode {
font-family: var(--mono);
font-size: 0.88em;
padding: 1px 5px;
border-radius: 2px;
color: var(--amber);
background: var(--bone-2);
}
.pg-msg__tools {
margin-top: 14px;
}
.pg-msg__code {
margin-top: 12px;
padding: 12px 14px;
font-family: var(--mono);
font-size: 12px;
line-height: 1.5;
color: var(--bone);
background: var(--ink);
border-radius: 2px;
overflow-x: auto;
}
.pg-msg__attach {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 10px;
padding: 8px 12px;
background: var(--bone);
border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
border-radius: 2px;
}
.pg-msg__attach-ext {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 34px;
font-family: var(--mono);
font-size: 9px;
font-weight: 500;
letter-spacing: 0.5px;
color: var(--ink-2);
background: var(--bone-3);
}
.pg-msg__attach-name {
font-size: 12px;
font-weight: 500;
color: var(--ink);
}
.pg-msg__attach-size {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
}
.pg-msg__download {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 10px;
padding: 8px 12px;
background: var(--bone);
border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
border-radius: 2px;
width: 100%;
text-align: left;
font: inherit;
color: inherit;
cursor: pointer;
}
.pg-msg__download:disabled {
cursor: default;
opacity: 0.6;
}
.pg-msg__download:hover:not(:disabled) {
border-color: color-mix(in srgb, var(--ink) 30%, transparent);
}
.pg-msg__reactions {
display: flex;
gap: 6px;
margin-top: 10px;
}
.pg-msg__reaction {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
font-size: 12px;
border: 1px solid color-mix(in srgb, var(--ink) 15%, transparent);
border-radius: 12px;
}
.pg-msg__reaction-count {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
}
/* 날짜 구분선 */
.pg-msg-date {
display: flex;
align-items: center;
gap: 12px;
max-width: 880px;
margin: 24px auto 16px;
}
.pg-msg-date__rule {
flex: 1;
height: 1px;
background: color-mix(in srgb, var(--ink) 12%, transparent);
}
.pg-msg-date__label {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--ink-3);
}
/* 메시지 컨텍스트 메뉴 (길게 누르기 / 우클릭) */
.pg-msg-menu {
position: fixed;
z-index: 100;
min-width: 220px;
padding: 6px 0;
font-family: var(--sans);
background: var(--bone);
border: 1px solid var(--ink);
box-shadow: 4px 4px 0 color-mix(in srgb, var(--ink) 15%, transparent);
}
.pg-msg-menu__head {
padding: 4px 14px 6px;
font-family: var(--mono);
font-size: 9px;
letter-spacing: 1.2px;
color: var(--ink-3);
border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}
.pg-msg-menu__item {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 7px 14px;
font-family: var(--sans);
font-size: 13px;
color: var(--ink);
background: transparent;
border: none;
cursor: pointer;
}
.pg-msg-menu__item:hover {
background: var(--bone-2);
}
.pg-msg-menu__kb {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-4);
}
/* 추론 버블 — ReasoningMessage 재스킨 보강 (collapsed 요약 / 다음 단계 표시) */
.pg-think__summary {
margin-top: 10px;
font-family: var(--serif);
font-size: 16px;
font-style: italic;
line-height: 1.5;
color: var(--ink-2);
}
.pg-think__next {
display: flex;
align-items: center;
gap: 8px;
margin-left: 24px;
margin-top: 6px;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
}
.pg-think__next-dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--terra);
animation: pulse 1s infinite;
}
/* Notebook settings drawer: notebook-scoped management surface. */
.pg-chrome__settings-icon {
width: 12px;
height: 12px;
position: relative;
display: inline-block;
border: 2px solid currentColor;
border-radius: 50%;
}
.pg-chrome__settings-icon::after {
content: "";
position: absolute;
inset: 3px;
border-radius: 50%;
background: currentColor;
}
.nb-settings__backdrop {
position: fixed;
inset: 0;
z-index: 102;
background: color-mix(in srgb, var(--ink) 32%, transparent);
backdrop-filter: blur(2px);
}
.nb-settings {
position: fixed;
z-index: 103;
top: 0;
right: 0;
width: min(620px, calc(100vw - 24px));
height: 100vh;
display: flex;
flex-direction: column;
background: var(--bone);
color: var(--ink);
border-left: 2px solid var(--ink);
box-shadow: -18px 0 42px color-mix(in srgb, var(--ink) 24%, transparent);
}
.nb-settings__head {
flex: 0 0 auto;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 22px 22px 16px;
border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
background: var(--bone-2);
}
.nb-settings__eyebrow {
margin: 0 0 5px;
font-family: var(--mono);
font-size: 10px;
font-weight: 900;
color: var(--terra);
text-transform: uppercase;
}
.nb-settings__title {
margin: 0;
max-width: 320px;
font-family: var(--serif);
font-size: 20px;
font-weight: 900;
line-height: 1.25;
color: var(--ink);
}
.nb-settings__close {
width: 36px;
height: 36px;
flex: 0 0 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
border-radius: 4px;
background: var(--bone);
color: var(--ink);
cursor: pointer;
font-size: 22px;
line-height: 1;
}
.nb-settings__tabs {
flex: 0 0 auto;
display: flex;
gap: 6px;
overflow-x: auto;
padding: 10px 14px;
border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
background: var(--bone);
}
.nb-settings__tab {
min-height: 36px;
padding: 0 12px;
border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
border-radius: 4px;
background: color-mix(in srgb, var(--bone-2) 70%, var(--bone));
color: var(--ink-2);
cursor: pointer;
font-family: var(--mono);
font-size: 10px;
font-weight: 900;
white-space: nowrap;
}
.nb-settings__tab.is-active {
border-color: var(--amber);
background: color-mix(in srgb, var(--amber) 24%, var(--bone));
color: var(--ink);
box-shadow: inset 0 -2px 0 var(--amber);
}
.nb-settings__body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
padding: 18px;
background: color-mix(in srgb, var(--bone-2) 70%, var(--bone));
}
.nb-settings__section {
display: flex;
flex-direction: column;
gap: 12px;
}
.nb-settings__section-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.nb-settings__section-title {
margin: 0;
font-family: var(--serif);
font-size: 18px;
font-weight: 900;
color: var(--ink);
}
.nb-settings__status,
.nb-settings__badge {
display: inline-flex;
align-items: center;
min-height: 24px;
padding: 0 8px;
border-radius: 999px;
background: color-mix(in srgb, var(--amber) 22%, var(--bone));
color: var(--ink);
font-family: var(--mono);
font-size: 10px;
font-weight: 900;
white-space: nowrap;
}
.nb-settings__row {
display: grid;
grid-template-columns: minmax(110px, 0.8fr) minmax(0, 1.2fr);
gap: 12px;
align-items: start;
padding: 9px 0;
border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}
.nb-settings__row-label {
font-family: var(--mono);
font-size: 10px;
font-weight: 900;
color: var(--ink-3);
}
.nb-settings__row-value {
min-width: 0;
overflow-wrap: anywhere;
font-size: 13px;
font-weight: 700;
color: var(--ink);
line-height: 1.45;
}
.nb-settings__row-value.is-muted {
color: var(--ink-3);
}
.nb-settings__profile-card,
.nb-settings__placeholder {
padding: 14px;
border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
border-radius: 8px;
background: var(--bone);
}
.nb-settings__profile-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 8px;
}
.nb-settings__profile-kind {
font-family: var(--mono);
font-size: 10px;
font-weight: 900;
color: var(--terra);
}
.nb-settings__profile-card h4,
.nb-settings__placeholder h3 {
margin: 0 0 6px;
font-family: var(--serif);
font-size: 16px;
font-weight: 900;
color: var(--ink);
}
.nb-settings__profile-card p,
.nb-settings__placeholder p,
.nb-settings__empty {
margin: 0;
color: var(--ink-3);
font-size: 13px;
line-height: 1.55;
}
.nb-settings__warning {
margin-top: 10px !important;
padding: 9px 10px;
border-radius: 6px;
background: color-mix(in srgb, var(--amber) 24%, var(--bone));
color: var(--ink);
font-weight: 800;
}
@media (max-width: 720px) {
.nb-settings {
width: 100vw;
}
.nb-settings__row {
grid-template-columns: 1fr;
gap: 4px;
}
}
/* Enhanced studio result icons and audio player controls. */
.nb-studio__result-item {
padding: 10px 6px;
}
.nb-studio__result-icon {
width: 36px;
height: 36px;
border: 2px solid color-mix(in srgb, var(--ink) 18%, transparent);
background: var(--bone);
color: var(--ink);
}
.nb-studio__result-item--podcast .nb-studio__result-icon {
border-color: color-mix(in srgb, var(--blue) 55%, var(--ink) 10%);
background: color-mix(in srgb, var(--blue) 9%, var(--bone));
color: var(--blue);
}
.nb-studio__result-item.is-selected .nb-studio__result-icon {
border-color: var(--amber);
background: color-mix(in srgb, var(--amber) 28%, var(--bone));
}
.nb-studio__wave-icon {
width: 20px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 3px;
}
.nb-studio__wave-icon span {
width: 3px;
border-radius: 999px;
background: currentColor;
}
.nb-studio__wave-icon span:nth-child(1) {
height: 8px;
}
.nb-studio__wave-icon span:nth-child(2) {
height: 15px;
}
.nb-studio__wave-icon span:nth-child(3) {
height: 11px;
}
.nb-studio__wave-icon span:nth-child(4) {
height: 18px;
}
.nb-studio__audio-player {
display: flex;
flex-direction: column;
gap: 12px;
padding: 14px 14px 16px;
border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
background: var(--bone);
box-shadow: 0 -8px 24px color-mix(in srgb, var(--ink) 9%, transparent);
}
.nb-studio__audio-topline {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.nb-studio__audio-actions {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 4px;
}
.nb-studio__audio-title {
font-size: 15px;
line-height: 1.25;
}
.nb-studio__audio-kicker {
color: var(--ink-3);
text-transform: none;
}
.nb-studio__audio-icon-btn,
.nb-studio__audio-close {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 8px;
background: transparent;
color: var(--ink-2);
cursor: pointer;
font-size: 24px;
font-weight: 800;
line-height: 1;
}
.nb-studio__audio-icon-btn:hover,
.nb-studio__audio-close:hover {
background: color-mix(in srgb, var(--ink) 7%, transparent);
color: var(--ink);
}
.nb-studio__audio-control {
display: flex;
flex-direction: column;
gap: 8px;
min-height: 0;
}
.nb-studio__audio-control audio {
display: none;
}
.nb-studio__audio-progress {
width: 100%;
height: 22px;
accent-color: var(--blue);
cursor: pointer;
}
.nb-studio__audio-progress:disabled {
cursor: wait;
opacity: 0.55;
}
.nb-studio__audio-time {
display: flex;
align-items: center;
justify-content: space-between;
font-family: var(--mono);
font-size: 11px;
font-weight: 800;
color: var(--ink-3);
}
.nb-studio__audio-controls {
display: grid;
grid-template-columns: 50px 44px 56px 44px;
justify-content: center;
align-items: center;
gap: 12px;
}
.nb-studio__audio-rate,
.nb-studio__audio-skip,
.nb-studio__audio-play {
min-width: 44px;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
cursor: pointer;
font-family: var(--mono);
font-weight: 900;
}
.nb-studio__audio-rate {
background: transparent;
color: var(--blue);
font-size: 14px;
}
.nb-studio__audio-skip {
border-radius: 999px;
background: transparent;
color: var(--blue);
font-size: 15px;
}
.nb-studio__audio-skip:hover,
.nb-studio__audio-rate:hover {
background: color-mix(in srgb, var(--blue) 9%, transparent);
}
.nb-studio__audio-play {
width: 56px;
height: 56px;
border-radius: 999px;
background: var(--blue);
color: white;
font-size: 24px;
box-shadow: 0 8px 18px color-mix(in srgb, var(--blue) 30%, transparent);
}
@media (max-width: 520px) {
.nb-studio__audio-controls {
gap: 8px;
}
}
.nb-settings__create-btn {
min-height: 40px;
align-self: flex-start;
padding: 0 13px;
border: 1px solid var(--amber);
border-radius: 6px;
background: color-mix(in srgb, var(--amber) 18%, var(--bone));
color: var(--ink);
cursor: pointer;
font-family: var(--mono);
font-size: 10px;
font-weight: 900;
}
.nb-settings__create-btn:disabled {
cursor: not-allowed;
opacity: 0.5;
}
.nb-settings__profile-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.nb-settings__profile-actions {
display: flex;
justify-content: flex-end;
gap: 6px;
margin-top: 12px;
}
.nb-settings__profile-actions button,
.nb-settings__form-actions button {
min-height: 34px;
padding: 0 10px;
border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
border-radius: 6px;
background: var(--bone);
color: var(--ink);
cursor: pointer;
font-family: var(--mono);
font-size: 10px;
font-weight: 900;
}
.nb-settings__profile-actions button:hover,
.nb-settings__form-actions button:hover {
background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.nb-settings__profile-actions button:disabled,
.nb-settings__form-actions button:disabled {
cursor: not-allowed;
opacity: 0.45;
}
.nb-settings__profile-actions button.is-danger {
color: color-mix(in srgb, #b42318 80%, var(--ink));
}
.nb-settings__form {
display: flex;
flex-direction: column;
gap: 12px;
padding: 14px;
border: 1px solid color-mix(in srgb, var(--amber) 44%, var(--ink) 10%);
border-radius: 8px;
background: var(--bone);
}
.nb-settings__form-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.nb-settings__form-head h3 {
margin: 0;
font-family: var(--serif);
font-size: 16px;
font-weight: 900;
}
.nb-settings__form-head button {
width: 32px;
height: 32px;
border: none;
border-radius: 6px;
background: transparent;
color: var(--ink-2);
cursor: pointer;
font-size: 20px;
}
.nb-settings__field {
display: flex;
flex-direction: column;
gap: 5px;
}
.nb-settings__field span {
font-family: var(--mono);
font-size: 10px;
font-weight: 900;
color: var(--ink-3);
}
.nb-settings__field input,
.nb-settings__field select,
.nb-settings__field textarea {
width: 100%;
border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
border-radius: 6px;
background: color-mix(in srgb, var(--bone-2) 45%, var(--bone));
color: var(--ink);
font-family: var(--sans);
font-size: 13px;
}
.nb-settings__field input,
.nb-settings__field select {
height: 38px;
padding: 0 10px;
}
.nb-settings__field textarea {
padding: 9px 10px;
resize: vertical;
line-height: 1.45;
}
.nb-settings__field-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.nb-settings__advanced-fields summary {
cursor: pointer;
font-family: var(--mono);
font-size: 10px;
font-weight: 900;
color: var(--ink-3);
}
.nb-settings__advanced-fields .nb-settings__field-grid {
margin-top: 10px;
}
.nb-settings__form-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
}
.nb-settings__form-actions button:last-child {
border-color: var(--ink);
background: var(--ink);
color: var(--bone);
}
@media (max-width: 720px) {
.nb-settings__field-grid {
grid-template-columns: 1fr;
}
}
/* Studio audio playback actions and details dialog. */
.nb-studio__audio-player {
border-top: 2px solid color-mix(in srgb, var(--ink) 14%, transparent);
background: color-mix(in srgb, var(--bone) 88%, var(--amber) 12%);
}
.nb-studio__audio-topline {
padding-bottom: 2px;
}
.nb-studio__audio-actions {
gap: 2px;
}
.nb-studio__audio-icon-btn,
.nb-studio__audio-close {
width: 34px;
height: 34px;
border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
background: color-mix(in srgb, var(--bone) 82%, white);
}
.nb-studio__audio-icon-btn svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.nb-studio__audio-icon-btn:disabled {
cursor: not-allowed;
opacity: 0.45;
}
.nb-studio__audio-icon-btn.is-danger {
color: color-mix(in srgb, #b42318 78%, var(--ink));
}
.nb-studio__audio-progress {
height: 18px;
}
.nb-studio__audio-progress::-webkit-slider-runnable-track {
height: 5px;
border-radius: 999px;
background: color-mix(in srgb, var(--ink) 26%, transparent);
}
.nb-studio__audio-progress::-webkit-slider-thumb {
width: 18px;
height: 18px;
margin-top: -6px;
}
.nb-studio__audio-controls {
grid-template-columns: 54px 48px 58px 48px;
gap: 14px;
}
.nb-studio__audio-rate {
border-radius: 999px;
color: var(--blue);
background: color-mix(in srgb, var(--blue) 8%, transparent);
}
.nb-studio__audio-skip {
color: var(--blue);
}
.nb-studio__audio-skip svg {
width: 34px;
height: 34px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.nb-studio__audio-skip text {
fill: currentColor;
stroke: none;
font-family: var(--mono);
font-size: 6px;
font-weight: 900;
}
.nb-studio__audio-play {
width: 58px;
height: 58px;
background: var(--blue);
box-shadow:
0 8px 18px color-mix(in srgb, var(--blue) 28%, transparent),
inset 0 -2px 0 color-mix(in srgb, var(--ink) 18%, transparent);
}
.nb-studio__details-backdrop {
position: fixed;
inset: 0;
z-index: 104;
background: color-mix(in srgb, var(--ink) 36%, transparent);
backdrop-filter: blur(2px);
}
.nb-studio__details {
position: fixed;
z-index: 105;
top: 50%;
left: 50%;
width: min(680px, calc(100vw - 40px));
max-height: min(760px, calc(100vh - 56px));
display: flex;
flex-direction: column;
transform: translate(-50%, -50%);
border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
border-radius: 10px;
background: var(--bone);
box-shadow: 0 22px 54px color-mix(in srgb, var(--ink) 28%, transparent);
overflow: hidden;
}
.nb-studio__details-head {
flex: 0 0 auto;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
padding: 16px 18px;
border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
background: var(--bone-2);
}
.nb-studio__details-head p {
margin: 0 0 4px;
color: var(--terra);
font-family: var(--mono);
font-size: 10px;
font-weight: 900;
}
.nb-studio__details-head h2 {
margin: 0;
font-family: var(--serif);
font-size: 18px;
font-weight: 900;
color: var(--ink);
}
.nb-studio__details-head button {
width: 34px;
height: 34px;
border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
border-radius: 6px;
background: var(--bone);
color: var(--ink);
cursor: pointer;
font-size: 22px;
line-height: 1;
}
.nb-studio__details-body {
flex: 1 1 auto;
min-height: 0;
overflow: auto;
padding: 16px 18px 18px;
}
.nb-studio__details-body section + section {
margin-top: 16px;
}
.nb-studio__details-body h3 {
margin: 0 0 6px;
font-family: var(--mono);
font-size: 10px;
font-weight: 900;
color: var(--ink-3);
}
.nb-studio__details-body pre {
margin: 0;
max-height: 220px;
overflow: auto;
white-space: pre-wrap;
overflow-wrap: anywhere;
border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
border-radius: 8px;
background: color-mix(in srgb, var(--bone-2) 68%, var(--bone));
color: var(--ink);
padding: 10px;
font-family: var(--mono);
font-size: 11px;
line-height: 1.5;
}
/* Notebook settings speaker management and studio retry actions. */
.nb-settings__subsection {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 10px;
padding-top: 14px;
border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
.nb-settings__speaker-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: 2px;
}
.nb-settings__speaker-head span {
font-family: var(--mono);
font-size: 10px;
font-weight: 900;
color: var(--ink-3);
text-transform: uppercase;
}
.nb-settings__speaker-head button,
.nb-settings__speaker-card-head button {
min-height: 30px;
padding: 0 9px;
border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
border-radius: 6px;
background: var(--bone);
color: var(--ink);
cursor: pointer;
font-family: var(--mono);
font-size: 10px;
font-weight: 900;
}
.nb-settings__speaker-head button:disabled,
.nb-settings__speaker-card-head button:disabled {
cursor: not-allowed;
opacity: 0.45;
}
.nb-settings__speaker-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.nb-settings__speaker-card {
display: flex;
flex-direction: column;
gap: 10px;
padding: 12px;
border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
border-radius: 8px;
background: color-mix(in srgb, var(--bone-2) 42%, var(--bone));
}
.nb-settings__speaker-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.nb-settings__speaker-card-head strong {
font-family: var(--serif);
font-size: 14px;
color: var(--ink);
}
.nb-settings__speaker-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 10px;
}
.nb-settings__speaker-tags span {
display: inline-flex;
align-items: center;
min-height: 24px;
padding: 0 8px;
border-radius: 999px;
background: color-mix(in srgb, var(--ink) 7%, var(--bone));
color: var(--ink-2);
font-family: var(--mono);
font-size: 10px;
font-weight: 900;
}
.nb-studio__result-hit {
min-width: 0;
flex: 1 1 auto;
display: flex;
align-items: center;
gap: 10px;
border: none;
background: transparent;
color: inherit;
cursor: pointer;
text-align: left;
padding: 0;
}
.nb-studio__result-hit:disabled {
cursor: default;
}
.nb-studio__result-retry {
flex: 0 0 auto;
min-height: 30px;
padding: 0 9px;
border: 1px solid var(--amber);
border-radius: 6px;
background: color-mix(in srgb, var(--amber) 18%, var(--bone));
color: var(--ink);
cursor: pointer;
font-family: var(--mono);
font-size: 10px;
font-weight: 900;
}
.nb-studio__result-retry:disabled {
cursor: wait;
opacity: 0.6;
}
.nb-studio__result-item--infographic {
align-items: flex-start;
}
.nb-studio__result-item--infographic .nb-studio__result-hit {
align-items: flex-start;
}
.nb-studio__infographic-glyph {
font-family: var(--mono);
font-size: 16px;
line-height: 1;
}
.nb-studio__infographic-preview {
display: block;
width: min(100%, 220px);
aspect-ratio: 16 / 9;
margin-top: 7px;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
border-radius: 8px;
background: color-mix(in srgb, var(--ink) 5%, var(--bone));
}
.nb-studio__infographic-preview img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.nb-studio__infographic-error {
display: block;
max-width: 220px;
margin-top: 7px;
padding: 7px 8px;
font-family: var(--sans);
font-size: 11px;
line-height: 1.35;
color: color-mix(in srgb, var(--terra-ink) 88%, var(--ink));
background: color-mix(in srgb, var(--amber) 18%, var(--bone));
border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent);
border-radius: 8px;
white-space: normal;
}
/* ── Infographic viewer modal ─────────────────────────────────────── */
.nb-infoview__backdrop {
position: fixed;
inset: 0;
z-index: 110;
background: color-mix(in srgb, var(--ink) 52%, transparent);
backdrop-filter: blur(2px);
}
.nb-infoview {
position: fixed;
z-index: 111;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: min(1040px, calc(100vw - 44px));
max-height: calc(100vh - 56px);
overflow: auto;
padding: 22px;
border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
border-radius: 12px;
background: var(--bone);
box-shadow: 0 24px 70px color-mix(in srgb, var(--ink) 34%, transparent);
}
.nb-infoview__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 16px;
}
.nb-infoview__titlebox {
min-width: 0;
}
.nb-infoview__title {
margin: 0;
font-family: var(--serif);
font-size: 21px;
line-height: 1.25;
color: var(--ink);
}
.nb-infoview__meta {
display: block;
margin-top: 4px;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.8px;
color: var(--ink-3);
text-transform: uppercase;
}
.nb-infoview__close {
flex: 0 0 auto;
width: 34px;
height: 34px;
border: none;
border-radius: 999px;
background: transparent;
color: var(--ink-3);
cursor: pointer;
font-size: 24px;
line-height: 1;
}
.nb-infoview__close:hover {
background: color-mix(in srgb, var(--ink) 6%, transparent);
color: var(--ink);
}
.nb-infoview__image-wrap {
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
border-radius: 10px;
background: color-mix(in srgb, var(--ink) 5%, var(--bone));
}
.nb-infoview__image {
display: block;
width: 100%;
height: auto;
max-height: calc(100vh - 260px);
object-fit: contain;
}
.nb-infoview__error,
.nb-infoview__empty {
margin-bottom: 12px;
padding: 10px 12px;
border-radius: 8px;
font-family: var(--sans);
font-size: 13px;
line-height: 1.45;
}
.nb-infoview__error {
border: 1px solid color-mix(in srgb, var(--amber) 42%, transparent);
background: color-mix(in srgb, var(--amber) 18%, var(--bone));
color: color-mix(in srgb, var(--terra-ink) 88%, var(--ink));
}
.nb-infoview__empty {
border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
background: color-mix(in srgb, var(--ink) 4%, var(--bone));
color: var(--ink-3);
}
.nb-infoview__prompt {
margin-top: 14px;
border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
border-radius: 8px;
background: color-mix(in srgb, var(--ink) 3%, var(--bone));
}
.nb-infoview__prompt summary {
cursor: pointer;
padding: 10px 12px;
font-family: var(--mono);
font-size: 10px;
font-weight: 900;
letter-spacing: 0.9px;
text-transform: uppercase;
color: var(--ink-2);
}
.nb-infoview__prompt pre {
max-height: 220px;
overflow: auto;
margin: 0;
padding: 0 12px 12px;
white-space: pre-wrap;
word-break: break-word;
font-family: var(--mono);
font-size: 11px;
line-height: 1.45;
color: var(--ink-2);
}
.nb-infoview__foot {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 16px;
}
.nb-infoview__primary,
.nb-infoview__secondary {
min-height: 36px;
padding: 8px 14px;
border-radius: 999px;
cursor: pointer;
font-family: var(--sans);
font-size: 13px;
font-weight: 700;
}
.nb-infoview__primary {
border: 1px solid var(--terra-ink);
background: var(--terra-ink);
color: var(--bone);
}
.nb-infoview__secondary {
border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
background: transparent;
color: var(--ink-2);
}
@media (max-width: 640px) {
.nb-infoview {
width: calc(100vw - 22px);
max-height: calc(100vh - 22px);
padding: 16px;
}
.nb-infoview__foot {
flex-direction: column-reverse;
}
.nb-infoview__primary,
.nb-infoview__secondary {
width: 100%;
}
}
.nb-antv-canvas {
width: 100%;
height: 100%;
min-height: 320px;
}
.nb-antv-canvas svg {
display: block;
width: 100%;
height: 100%;
}
.nb-antv-canvas svg,
.nb-antv-canvas svg * {
font-family: Pretendard !important;
}
.nb-infoview__image-wrap--runtime {
height: min(680px, calc(100vh - 260px));
min-height: 420px;
padding: 18px;
background: #fff;
}
.nb-infomix-editor__backdrop {
position: fixed;
inset: 0;
z-index: 120;
background: color-mix(in srgb, var(--ink) 58%, transparent);
backdrop-filter: blur(2px);
}
.nb-infomix-editor {
position: fixed;
z-index: 121;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
width: min(1440px, calc(100vw - 32px));
height: min(900px, calc(100vh - 32px));
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
border-radius: 12px;
background: var(--bone);
box-shadow: 0 24px 70px color-mix(in srgb, var(--ink) 34%, transparent);
}
.nb-infomix-editor__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 18px 20px 14px;
border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
.nb-infomix-editor__title {
margin: 0;
font-family: var(--serif);
font-size: 20px;
line-height: 1.25;
color: var(--ink);
}
.nb-infomix-editor__meta {
margin: 4px 0 0;
font-family: var(--mono);
font-size: 10px;
font-weight: 800;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--ink-3);
}
.nb-infomix-editor__close {
flex: 0 0 auto;
width: 36px;
height: 36px;
border: none;
border-radius: 999px;
background: transparent;
color: var(--ink-3);
cursor: pointer;
font-size: 24px;
line-height: 1;
}
.nb-infomix-editor__close:hover {
background: color-mix(in srgb, var(--ink) 6%, transparent);
color: var(--ink);
}
.nb-infomix-editor__toolbar {
display: grid;
grid-template-columns: minmax(360px, 1fr) auto;
align-items: stretch;
border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
background: var(--bone);
}
.nb-infomix-editor__body {
display: grid;
grid-template-columns: minmax(0, 1fr) 390px;
gap: 0;
min-height: 0;
flex: 1;
}
.nb-infomix-editor__panel {
display: flex;
min-width: 0;
min-height: 0;
flex-direction: column;
}
.nb-infomix-editor__panel--code {
border-right: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
background: color-mix(in srgb, var(--ink) 3%, var(--bone));
}
.nb-infomix-editor__panel-head {
display: flex;
min-height: 48px;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 14px;
border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}
.nb-infomix-editor__panel-head h3 {
margin: 0;
font-family: var(--mono);
font-size: 11px;
font-weight: 900;
letter-spacing: 0.9px;
text-transform: uppercase;
color: var(--ink-2);
}
.nb-infomix-editor__panel-head--preview {
align-items: flex-start;
flex-wrap: wrap;
}
.nb-infomix-editor__preview-actions {
display: flex;
min-width: 0;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 8px;
}
.nb-infomix-editor__panel--preview.is-fullscreen {
position: fixed;
inset: 16px;
z-index: 124;
border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
border-radius: 12px;
background: var(--bone);
box-shadow: 0 24px 70px color-mix(in srgb, var(--ink) 34%, transparent);
}
.nb-infomix-editor__mini-btn,
.nb-infomix-editor__secondary,
.nb-infomix-editor__primary {
min-height: 36px;
border-radius: 999px;
cursor: pointer;
font-family: var(--sans);
font-size: 13px;
font-weight: 800;
}
.nb-infomix-editor__mini-btn {
padding: 6px 12px;
border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
background: transparent;
color: var(--ink-2);
font-size: 12px;
}
.nb-infomix-editor__controls {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
padding: 12px 14px;
background: var(--bone);
}
.nb-infomix-editor__controls label {
display: flex;
flex-direction: column;
gap: 5px;
min-width: 0;
color: var(--ink-2);
font-family: var(--sans);
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
}
.nb-infomix-editor__controls select {
min-width: 0;
height: 34px;
border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
border-radius: 8px;
padding: 0 9px;
background: #fff;
color: var(--ink);
font-family: var(--sans);
font-size: 12px;
}
.nb-infomix-editor__controls select:disabled {
opacity: 0.55;
}
.nb-infomix-editor__palettes {
display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: flex-end;
gap: 8px;
padding: 12px 14px;
background: color-mix(in srgb, var(--ink) 2%, var(--bone));
}
.nb-infomix-editor__palette {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 34px;
padding: 6px 10px;
border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
border-radius: 999px;
background: var(--bone);
color: var(--ink-2);
cursor: pointer;
font-family: var(--sans);
font-size: 12px;
font-weight: 800;
}
.nb-infomix-editor__palette:hover {
border-color: color-mix(in srgb, var(--terra-ink) 40%, transparent);
color: var(--ink);
}
.nb-infomix-editor__palette-swatches {
display: inline-flex;
overflow: hidden;
width: 42px;
height: 14px;
border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
border-radius: 999px;
}
.nb-infomix-editor__palette-swatches span {
flex: 1;
}
.nb-infomix-editor__diagnostics {
max-height: 96px;
overflow: auto;
padding: 10px 14px;
border-bottom: 1px solid color-mix(in srgb, var(--amber) 28%, transparent);
background: color-mix(in srgb, var(--amber) 12%, var(--bone));
color: color-mix(in srgb, var(--terra-ink) 84%, var(--ink));
font-family: var(--mono);
font-size: 11px;
line-height: 1.45;
}
.nb-infomix-editor__textarea {
flex: 1;
min-height: 0;
width: 100%;
resize: none;
border: 0;
outline: none;
padding: 16px;
background: color-mix(in srgb, var(--ink) 3%, var(--bone));
color: var(--ink);
font-family: var(--mono);
font-size: 12px;
line-height: 1.55;
tab-size: 2;
}
.nb-infomix-editor__textarea:focus {
box-shadow: inset 0 0 0 2px
color-mix(in srgb, var(--terra-ink) 48%, transparent);
}
.nb-infomix-editor__toggle {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 36px;
color: var(--ink-2);
cursor: pointer;
font-family: var(--sans);
font-size: 13px;
font-weight: 800;
}
.nb-infomix-editor__toggle input {
width: 16px;
height: 16px;
accent-color: var(--terra-ink);
}
.nb-infomix-editor__canvas {
position: relative;
flex: 1;
min-height: 0;
overflow: auto;
padding: 14px;
background: #fff;
}
.nb-infomix-editor__error {
margin: 12px 14px 0;
padding: 10px 12px;
border: 1px solid color-mix(in srgb, var(--amber) 42%, transparent);
border-radius: 8px;
background: color-mix(in srgb, var(--amber) 16%, var(--bone));
color: color-mix(in srgb, var(--terra-ink) 88%, var(--ink));
font-family: var(--sans);
font-size: 13px;
line-height: 1.45;
}
.nb-infomix-editor__side {
display: flex;
min-width: 0;
min-height: 0;
flex-direction: column;
border-left: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
background: color-mix(in srgb, var(--ink) 2%, var(--bone));
}
.nb-infomix-editor__tabs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
padding: 12px;
border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
background: var(--bone);
}
.nb-infomix-editor__tabs button {
min-height: 38px;
border: 1px solid transparent;
border-radius: 8px;
background: transparent;
color: var(--ink-3);
cursor: pointer;
font-family: var(--sans);
font-size: 13px;
font-weight: 850;
}
.nb-infomix-editor__tabs button:hover,
.nb-infomix-editor__tabs button.is-active {
border-color: color-mix(in srgb, var(--terra-ink) 22%, transparent);
background: color-mix(in srgb, var(--terra-ink) 8%, var(--bone));
color: var(--ink);
}
.nb-infomix-editor__side-scroll {
flex: 1;
min-height: 0;
overflow: auto;
padding: 14px;
}
.nb-infomix-editor__section {
display: grid;
gap: 12px;
padding-bottom: 18px;
}
.nb-infomix-editor__section + .nb-infomix-editor__section {
padding-top: 16px;
border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}
.nb-infomix-editor__section-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.nb-infomix-editor__section-head h3 {
margin: 0;
color: var(--ink);
font-family: var(--sans);
font-size: 14px;
font-weight: 900;
}
.nb-infomix-editor__field {
display: grid;
gap: 6px;
color: var(--ink-2);
font-family: var(--sans);
font-size: 12px;
font-weight: 850;
}
.nb-infomix-editor__field input,
.nb-infomix-editor__field textarea,
.nb-infomix-editor__child-row input {
width: 100%;
min-width: 0;
border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
border-radius: 8px;
background: #fff;
color: var(--ink);
font-family: var(--sans);
font-size: 13px;
line-height: 1.45;
}
.nb-infomix-editor__field input,
.nb-infomix-editor__child-row input {
height: 38px;
padding: 0 10px;
}
.nb-infomix-editor__field textarea {
resize: vertical;
min-height: 72px;
padding: 9px 10px;
}
.nb-infomix-editor__field input:focus,
.nb-infomix-editor__field textarea:focus,
.nb-infomix-editor__child-row input:focus {
outline: 2px solid color-mix(in srgb, var(--terra-ink) 38%, transparent);
outline-offset: 1px;
}
.nb-infomix-editor__items {
display: grid;
gap: 12px;
}
.nb-infomix-editor__item-card {
display: grid;
gap: 10px;
padding: 12px;
border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
border-radius: 8px;
background: var(--bone);
}
.nb-infomix-editor__item-actions {
display: flex;
align-items: center;
gap: 6px;
}
.nb-infomix-editor__item-actions span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 999px;
background: color-mix(in srgb, var(--terra-ink) 12%, var(--bone));
color: var(--ink);
font-family: var(--mono);
font-size: 11px;
font-weight: 900;
}
.nb-infomix-editor__item-actions button,
.nb-infomix-editor__children-head button,
.nb-infomix-editor__child-row button,
.nb-infomix-editor__text-btn {
min-height: 30px;
border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
border-radius: 999px;
background: #fff;
color: var(--ink-2);
cursor: pointer;
font-family: var(--sans);
font-size: 12px;
font-weight: 850;
}
.nb-infomix-editor__item-actions button {
padding: 3px 8px;
}
.nb-infomix-editor__text-btn {
padding: 5px 10px;
}
.nb-infomix-editor__item-actions button:disabled {
cursor: not-allowed;
opacity: 0.45;
}
.nb-infomix-editor__children {
display: grid;
gap: 8px;
padding-top: 8px;
border-top: 1px dashed color-mix(in srgb, var(--ink) 14%, transparent);
}
.nb-infomix-editor__children-head {
display: flex;
align-items: center;
justify-content: space-between;
color: var(--ink-3);
font-family: var(--sans);
font-size: 12px;
font-weight: 850;
}
.nb-infomix-editor__child-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
align-items: center;
}
.nb-infomix-editor__empty-panel {
padding: 14px;
border: 1px dashed color-mix(in srgb, var(--ink) 16%, transparent);
border-radius: 8px;
color: var(--ink-3);
font-family: var(--sans);
font-size: 13px;
line-height: 1.5;
}
.nb-infomix-editor__template-grid,
.nb-infomix-editor__palette-grid {
display: grid;
gap: 8px;
}
.nb-infomix-editor__template-grid button,
.nb-infomix-editor__palette-grid button,
.nb-infomix-editor__choice-list button {
border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
border-radius: 8px;
background: #fff;
color: var(--ink);
cursor: pointer;
font-family: var(--sans);
text-align: left;
}
.nb-infomix-editor__template-grid button {
display: grid;
gap: 4px;
padding: 11px 12px;
}
.nb-infomix-editor__template-grid button span {
font-size: 13px;
font-weight: 900;
}
.nb-infomix-editor__template-grid button small {
color: var(--ink-3);
font-size: 12px;
line-height: 1.35;
}
.nb-infomix-editor__template-grid button:hover,
.nb-infomix-editor__template-grid button.is-selected,
.nb-infomix-editor__palette-grid button:hover,
.nb-infomix-editor__palette-grid button.is-selected,
.nb-infomix-editor__choice-list button:hover,
.nb-infomix-editor__choice-list button.is-selected {
border-color: color-mix(in srgb, var(--terra-ink) 42%, transparent);
background: color-mix(in srgb, var(--terra-ink) 7%, #fff);
}
.nb-infomix-editor__choice-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.nb-infomix-editor__choice-list button {
min-height: 34px;
padding: 6px 10px;
text-align: center;
}
.nb-infomix-editor__palette-grid button {
display: flex;
align-items: center;
gap: 10px;
min-height: 42px;
padding: 8px 10px;
font-weight: 850;
}
.nb-infomix-editor__export-actions {
display: grid;
gap: 8px;
}
.nb-infomix-editor__toggle--block {
justify-content: flex-start;
}
.nb-infomix-editor__foot {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
padding: 14px 20px;
border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
.nb-infomix-editor__status {
flex: 1;
min-width: 0;
color: var(--ink-3);
font-family: var(--sans);
font-size: 13px;
line-height: 1.4;
}
.nb-infomix-editor__status .is-error {
color: color-mix(in srgb, var(--terra-ink) 86%, var(--ink));
}
.nb-infomix-editor__secondary {
padding: 8px 14px;
border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
background: transparent;
color: var(--ink-2);
}
.nb-infomix-editor__primary {
padding: 8px 16px;
border: 1px solid var(--terra-ink);
background: var(--terra-ink);
color: var(--bone);
}
.nb-infomix-editor__secondary:disabled,
.nb-infomix-editor__primary:disabled {
cursor: not-allowed;
opacity: 0.55;
}
@media (max-width: 900px) {
.nb-infoview__image-wrap--runtime {
min-height: 320px;
}
.nb-infomix-editor__body {
grid-template-columns: 1fr;
overflow: auto;
}
.nb-infomix-editor__side {
min-height: 520px;
border-left: 0;
border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
.nb-infomix-editor__panel--code {
min-height: 320px;
border-right: 0;
border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
.nb-infomix-editor__panel--preview {
min-height: 420px;
}
.nb-infomix-editor__foot {
flex-wrap: wrap;
}
.nb-infomix-editor__status {
flex-basis: 100%;
}
}
@media (max-width: 640px) {
.nb-infomix-editor {
width: calc(100vw - 16px);
height: calc(100vh - 16px);
}
.nb-infomix-editor__head,
.nb-infomix-editor__foot {
padding-left: 14px;
padding-right: 14px;
}
.nb-infomix-editor__secondary,
.nb-infomix-editor__primary {
flex: 1 1 calc(50% - 8px);
}
}
/* ── Deep research 보고서 (Studio) ───────────────────────────────── */
.nb-report-list {
display: flex;
flex-direction: column;
gap: 4px;
}
.nb-report-item {
display: flex;
align-items: center;
gap: 6px;
}
.nb-report-item__main {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
text-align: left;
}
.nb-report-item__title {
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nb-report-item__sub {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: color-mix(in srgb, var(--ink, #1d1d1f) 55%, transparent);
}
.nb-report-item__ops {
display: flex;
gap: 4px;
flex-shrink: 0;
}
.nb-report-item__op {
font-size: 12px;
padding: 2px 8px;
border: 1px solid color-mix(in srgb, var(--ink, #1d1d1f) 18%, transparent);
border-radius: 6px;
background: transparent;
cursor: pointer;
}
.nb-report__badge {
font-size: 11px;
padding: 1px 7px;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--ink, #1d1d1f) 20%, transparent);
}
.nb-report__badge--strict {
background: color-mix(in srgb, #2563eb 12%, transparent);
}
.nb-report__badge--hybrid {
background: color-mix(in srgb, #16a34a 12%, transparent);
}
.nb-report__badge--insight {
background: color-mix(in srgb, #9333ea 12%, transparent);
}
.nb-report__badge--warn {
background: color-mix(in srgb, #d97706 16%, transparent);
border-color: color-mix(in srgb, #d97706 45%, transparent);
}
.nb-report-viewer__backdrop {
position: fixed;
inset: 0;
background: color-mix(in srgb, #000 45%, transparent);
z-index: 104;
}
.nb-report-viewer {
position: fixed;
inset: 4% 8%;
background: var(--paper, #fff);
border-radius: 12px;
z-index: 105;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0 24px 60px color-mix(in srgb, #000 25%, transparent);
}
.nb-report-viewer__head {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 18px;
border-bottom: 1px solid color-mix(in srgb, var(--ink, #1d1d1f) 10%, transparent);
flex-wrap: wrap;
}
.nb-report-viewer__title-wrap {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
flex: 1;
}
.nb-report-viewer__title {
font-weight: 700;
font-size: 15px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nb-report-viewer__meta {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: color-mix(in srgb, var(--ink, #1d1d1f) 60%, transparent);
}
.nb-report-viewer__actions {
display: flex;
gap: 6px;
}
.nb-report-viewer__btn {
font-size: 12px;
padding: 4px 12px;
border: 1px solid color-mix(in srgb, var(--ink, #1d1d1f) 20%, transparent);
border-radius: 8px;
background: transparent;
cursor: pointer;
}
.nb-report-viewer__notice {
padding: 8px 18px;
font-size: 12px;
background: color-mix(in srgb, #d97706 10%, transparent);
}
.nb-report-viewer__body {
flex: 1;
overflow-y: auto;
padding: 20px 28px;
}
/* ── Notebook mind map viewer ────────────────────────────────────── */
.nb-mindmap-dialog {
position: fixed;
z-index: 101;
inset: 42px;
display: flex;
flex-direction: column;
min-height: 0;
padding: 18px;
background: var(--bone);
border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
border-radius: 10px;
box-shadow: 0 24px 60px color-mix(in srgb, var(--ink) 34%, transparent);
}
.nb-mindmap-dialog__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
margin-bottom: 14px;
}
.nb-mindmap-dialog__head h2 {
margin: 0;
color: var(--ink);
font-family: var(--serif);
font-size: 21px;
line-height: 1.25;
}
.nb-mindmap-dialog__kicker {
margin: 0 0 4px;
color: var(--ink-3);
font-family: var(--mono);
font-size: 10px;
letter-spacing: 1.3px;
text-transform: uppercase;
}
.nb-mindmap {
position: relative;
display: flex;
flex: 1;
min-height: 420px;
overflow: hidden;
background:
linear-gradient(
color-mix(in srgb, var(--ink) 5%, transparent) 1px,
transparent 1px
),
linear-gradient(
90deg,
color-mix(in srgb, var(--ink) 5%, transparent) 1px,
transparent 1px
),
color-mix(in srgb, var(--bone) 84%, #fff);
background-size: 28px 28px;
border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
border-radius: 8px;
}
.nb-mindmap__toolbar {
position: absolute;
z-index: 2;
top: 12px;
right: 12px;
display: inline-flex;
gap: 4px;
padding: 4px;
background: color-mix(in srgb, var(--bone) 92%, #fff);
border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
border-radius: 8px;
box-shadow: 0 8px 22px color-mix(in srgb, var(--ink) 12%, transparent);
}
.nb-mindmap__toolbar button {
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-2);
cursor: pointer;
background: transparent;
border: 0;
border-radius: 6px;
}
.nb-mindmap__toolbar button:hover,
.nb-mindmap__toolbar button:focus-visible {
color: var(--ink);
background: color-mix(in srgb, var(--ink) 7%, transparent);
outline: none;
}
.nb-mindmap__export {
position: relative;
display: inline-flex;
}
.nb-mindmap__export > button {
width: auto;
gap: 2px;
padding: 0 6px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-2);
cursor: pointer;
background: transparent;
border: 0;
border-radius: 6px;
}
.nb-mindmap__export > button:hover,
.nb-mindmap__export > button:focus-visible {
color: var(--ink);
background: color-mix(in srgb, var(--ink) 7%, transparent);
outline: none;
}
.nb-mindmap__export > button:disabled {
opacity: 0.5;
cursor: default;
}
.nb-mindmap__export-backdrop {
position: fixed;
inset: 0;
z-index: 3;
}
.nb-mindmap__export-menu {
position: absolute;
z-index: 4;
top: calc(100% + 6px);
right: 0;
min-width: 132px;
display: flex;
flex-direction: column;
padding: 4px;
background: color-mix(in srgb, var(--bone) 96%, #fff);
border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
border-radius: 8px;
box-shadow: 0 10px 26px color-mix(in srgb, var(--ink) 16%, transparent);
}
.nb-mindmap__export-menu button {
width: 100%;
justify-content: flex-start;
padding: 7px 10px;
font-family: var(--sans);
font-size: 13px;
color: var(--ink);
text-align: left;
background: transparent;
border: 0;
border-radius: 6px;
cursor: pointer;
}
.nb-mindmap__export-menu button:hover,
.nb-mindmap__export-menu button:focus-visible {
background: color-mix(in srgb, var(--ink) 7%, transparent);
outline: none;
}
.nb-mindmap__toolbar button.nb-mindmap__edit-save {
color: var(--accent, #2563eb);
}
.nb-mindmap__toolbar button.nb-mindmap__edit-save:hover,
.nb-mindmap__toolbar button.nb-mindmap__edit-save:focus-visible {
color: #fff;
background: var(--accent, #2563eb);
}
.nb-mindmap__toolbar button:disabled {
opacity: 0.4;
cursor: default;
}
/* 리치텍스트 포맷 툴바 — 편집모드 상단 고정바(좌측). 공용 .nb-rt-* 는
마인드맵 스코프(.nb-mindmap__rt-toolbar) 하위에서만 스타일링해 전역 누수 방지. */
.nb-mindmap__rt-toolbar {
position: absolute;
z-index: 2;
top: 12px;
left: 12px;
max-width: calc(100% - 200px);
}
.nb-mindmap__rt-toolbar.nb-rt-toolbar {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 3px;
padding: 4px 6px;
background: color-mix(in srgb, var(--bone) 92%, #fff);
border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
border-radius: 8px;
box-shadow: 0 8px 22px color-mix(in srgb, var(--ink) 12%, transparent);
}
.nb-mindmap__rt-toolbar .nb-rt-btn {
min-width: 28px;
height: 28px;
padding: 0 6px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
color: var(--ink-2);
background: transparent;
border: 0;
border-radius: 6px;
cursor: pointer;
}
.nb-mindmap__rt-toolbar .nb-rt-btn:hover:not(:disabled) {
color: var(--ink);
background: color-mix(in srgb, var(--ink) 7%, transparent);
}
.nb-mindmap__rt-toolbar .nb-rt-btn.is-active {
color: var(--ink);
background: color-mix(in srgb, var(--accent, #549688) 18%, transparent);
}
.nb-mindmap__rt-toolbar .nb-rt-btn:disabled,
.nb-mindmap__rt-toolbar .nb-rt-select:disabled,
.nb-mindmap__rt-toolbar .nb-rt-color input:disabled {
opacity: 0.4;
cursor: default;
}
.nb-mindmap__rt-toolbar .nb-rt-select {
height: 28px;
font-size: 12px;
color: var(--ink-2);
background: transparent;
border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
border-radius: 6px;
cursor: pointer;
}
.nb-mindmap__rt-toolbar .nb-rt-color {
position: relative;
display: inline-flex;
align-items: center;
}
/* 색 버튼: 아이콘 아래 현재 색 막대. */
.nb-mindmap__rt-toolbar .nb-rt-color-btn {
flex-direction: column;
gap: 1px;
height: auto;
padding: 3px 5px;
}
.nb-mindmap__rt-toolbar .nb-rt-color-bar {
width: 15px;
height: 3px;
border-radius: 1px;
border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}
/* 인페이지 색 팔레트 팝오버(네이티브 OS 색 다이얼로그 대체 — lastRange 유지). */
.nb-mindmap__rt-toolbar .nb-rt-swatches {
position: absolute;
z-index: 3;
top: calc(100% + 4px);
left: 0;
display: grid;
grid-template-columns: repeat(6, 16px);
gap: 4px;
padding: 6px;
background: color-mix(in srgb, var(--bone) 96%, #fff);
border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
border-radius: 8px;
box-shadow: 0 8px 22px color-mix(in srgb, var(--ink) 16%, transparent);
}
.nb-mindmap__rt-toolbar .nb-rt-swatch {
width: 16px;
height: 16px;
padding: 0;
border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
border-radius: 4px;
cursor: pointer;
}
.nb-mindmap__rt-toolbar .nb-rt-swatch:hover {
outline: 2px solid color-mix(in srgb, var(--accent, #549688) 60%, transparent);
}
.nb-mindmap__canvas {
width: 100%;
min-height: 100%;
}
/* rich 노드 텍스트가 블록 기본 여백(p/div margin·padding)으로 아래로 밀려 박스
하단이 잘리는 것(위끝만 보임) 방지. 측정 div(.nb-mindmap__canvas 하위)와 실제
foreignObject 양쪽에 동일 적용돼 측정-렌더 높이가 일치한다. 마인드맵 스코프라
전역 누수 없음. */
.nb-mindmap .smm-richtext-node-wrap,
.nb-mindmap .smm-richtext-node-wrap p,
.nb-mindmap .smm-richtext-node-wrap div {
margin: 0;
padding: 0;
}
.nb-mindmap__error {
position: absolute;
inset: auto 16px 16px 16px;
padding: 10px 12px;
color: var(--danger);
font-family: var(--sans);
font-size: 13px;
background: color-mix(in srgb, var(--danger) 8%, var(--bone));
border: 1px solid color-mix(in srgb, var(--danger) 24%, transparent);
border-radius: 8px;
}
@media (max-width: 760px) {
.nb-mindmap-dialog {
inset: 14px;
padding: 14px;
}
.nb-mindmap-dialog__head h2 {
font-size: 18px;
}
.nb-mindmap {
min-height: 520px;
}
}