/* ==========================================================================
   SMART-WORK COMPONENTS (DESIGN.html 공통 컴포넌트 CSS)
   - 모든 스킨이 공유하는 구조/컴포넌트 스타일. 색·반경·그림자는 전부 토큰(var(--*))만 쓴다.
   - 링크 순서: design-tokens.css → components.css → (선택) theme-*.css
   - 새 컴포넌트는 여기에 추가한다 → 기본(Mint)·Game 스킨 양쪽에 자동 반영.
     스킨별 겉모습 차이만 theme-*.css에 둔다.
   ========================================================================== */
/* Global Reset & Base Structure */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  background-color: var(--background);
  color: var(--foreground);
  line-height: 1.5;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.2s ease, color 0.2s ease;
  /* 줄바꿈: 한글은 띄어쓰기 단위로, 한 줄보다 긴 덩어리만 아무 데서나 (anywhere는 칸 최소 폭을 줄여 배치가 흔들리므로 break-word) */
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* Header Navigation */
.app-header {
  position: sticky; top: 0; z-index: 50;
  background-color: var(--surface); border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px); padding: 12px 28px;
  display: flex; align-items: center; justify-content: space-between;
  box-shadow: var(--shadow-sm);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--foreground); }
.brand-logo { width: 34px; height: 34px; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--primary), var(--primary-active)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.header-nav { display: flex; align-items: center; gap: 18px; }
.nav-link { color: var(--muted-foreground); text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.15s ease; }
.nav-link:hover, .nav-link.active { color: var(--primary); }

.main-container { max-width: 1600px; margin: 0 auto; padding: 32px 24px 80px; }
.section-title { display: flex; align-items: center; gap: 10px; margin-top: 40px; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid var(--border); }
.section-title i { color: var(--primary); }

/* Bento Grid Layout */
.bento-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; margin-bottom: 36px; }
.col-span-3 { grid-column: span 3; }
.col-span-4 { grid-column: span 4; }
.col-span-5 { grid-column: span 5; }
.col-span-6 { grid-column: span 6; }
.col-span-7 { grid-column: span 7; }
.col-span-12 { grid-column: span 12; }

@media (max-width: 1280px) { .col-span-3, .col-span-4 { grid-column: span 6; } .col-span-5, .col-span-7 { grid-column: span 12; } }
@media (max-width: 768px) { .col-span-3, .col-span-4, .col-span-6 { grid-column: span 12; } .bento-grid { grid-template-columns: 1fr; } }

/* Card Component */
.card { background-color: var(--card); color: var(--card-foreground); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); transition: border-color 0.2s ease, box-shadow 0.2s ease; display: flex; flex-direction: column; }
.card:hover { border-color: var(--border-hover); box-shadow: var(--shadow-md); }
.card-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; }
.card-title { font-size: 16px; font-weight: 600; color: var(--foreground); }
.card-subtitle { font-size: 12px; color: var(--muted-foreground); margin-top: 2px; }
.card-body { flex: 1; }
.card-footer { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }

/* Button Variants */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; font-weight: 500; border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer; transition: all 0.15s ease; text-decoration: none; white-space: nowrap; user-select: none; }
.btn-sm { padding: 6px 12px; font-size: 12px; border-radius: var(--radius-sm); }
.btn-md { padding: 9px 16px; font-size: 14px; }
.btn-lg { padding: 12px 22px; font-size: 16px; border-radius: var(--radius-lg); }
.btn-icon { padding: 9px; border-radius: var(--radius-md); width: 38px; height: 38px; }

.btn-primary { background-color: var(--primary); color: var(--primary-foreground); }
.btn-primary:hover { background-color: var(--primary-hover); }
.btn-secondary { background-color: var(--secondary); color: var(--secondary-foreground); border-color: rgba(95, 167, 147, 0.2); }
.btn-secondary:hover { background-color: var(--secondary-hover); }
.btn-sand { background-color: var(--accent-sand); color: var(--accent-sand-foreground); }
.btn-sand:hover { background-color: var(--accent-sand-hover); }
.btn-outline { background-color: transparent; border-color: var(--border); color: var(--foreground); }
.btn-outline:hover { background-color: var(--muted); border-color: var(--border-hover); }
.btn-ghost { background-color: transparent; color: var(--foreground); }
.btn-ghost:hover { background-color: var(--muted); }
.btn-destructive { background-color: var(--destructive); color: var(--destructive-foreground); }
.btn-destructive:hover { background-color: #DC2626; }
.btn-link { background-color: transparent; color: var(--primary); padding: 0; }
.btn-link:hover { text-decoration: underline; }

/* Form Controls */
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-label { font-size: 13px; font-weight: 500; color: var(--foreground); display: flex; justify-content: space-between; }
.form-hint { font-size: 12px; color: var(--muted-foreground); }

.input-control { width: 100%; padding: 9px 14px; font-family: inherit; font-size: 14px; background-color: var(--surface); color: var(--foreground); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-input); outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.input-control:focus { border-color: var(--primary); box-shadow: var(--shadow-input), 0 0 0 3px var(--ring); }
.input-wrapper { position: relative; display: flex; align-items: center; }
.input-wrapper .prefix-icon { position: absolute; left: 12px; color: var(--muted-foreground); pointer-events: none; z-index: 2; flex-shrink: 0; }
.input-wrapper .input-control.has-prefix { padding-left: 36px; }
.input-wrapper .suffix-btn { position: absolute; right: 8px; background: none; border: none; color: var(--muted-foreground); cursor: pointer; padding: 4px; border-radius: var(--radius-sm); z-index: 2; }
.input-wrapper .suffix-btn:hover { color: var(--foreground); }

/* Checkbox, Radio & Switch */
.checkbox-container, .radio-container { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; font-size: 14px; }
.checkbox-custom, .radio-custom { width: 18px; height: 18px; border: 1px solid var(--border); border-radius: var(--radius-sm); background-color: var(--surface); display: flex; align-items: center; justify-content: center; color: var(--primary-foreground); }
.checkbox-custom svg { visibility: hidden; }
input[type="checkbox"]:checked + .checkbox-custom svg { visibility: visible; }
.hidden-input:focus-visible + .checkbox-custom, .hidden-input:focus-visible + .radio-custom, .hidden-input:focus-visible + .switch-track { box-shadow: 0 0 0 3px var(--ring); }
.radio-custom { border-radius: var(--radius-full); }
input[type="checkbox"]:checked + .checkbox-custom { background-color: var(--primary); border-color: var(--primary); }
input[type="radio"]:checked + .radio-custom { border-color: var(--primary); }
input[type="radio"]:checked + .radio-custom::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background-color: var(--primary); }
.hidden-input { position: absolute; opacity: 0; width: 0; height: 0; }

.switch-container { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; }
.switch-track { width: 44px; height: 24px; background-color: var(--border); border-radius: var(--radius-full); position: relative; transition: background-color 0.2s ease; }
.switch-thumb { width: 18px; height: 18px; background-color: white; border-radius: 50%; position: absolute; top: 3px; left: 3px; transition: transform 0.2s ease; }
input[type="checkbox"]:checked + .switch-track { background-color: var(--primary); }
input[type="checkbox"]:checked + .switch-track .switch-thumb { transform: translateX(20px); }

/* Badges & Status Tags */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-full); font-size: 12px; font-weight: 500; line-height: 1.2; }
.badge-primary { background-color: var(--primary); color: #fff; }
.badge-secondary { background-color: var(--secondary); color: var(--secondary-foreground); }
.badge-sand { background-color: var(--accent-sand); color: var(--accent-sand-foreground); }
.badge-outline { border: 1px solid var(--border); color: var(--foreground); }
.badge-destructive { background-color: var(--destructive-bg); color: var(--destructive); border: 1px solid rgba(239,68,68,0.2); }
.badge-warning { background-color: var(--warning-bg); color: var(--warning); border: 1px solid rgba(245,158,11,0.2); }
.badge-success { background-color: var(--success-bg); color: var(--success); border: 1px solid rgba(16,185,129,0.2); }
.badge-info { background-color: var(--info-bg); color: var(--info); border: 1px solid rgba(14,165,233,0.2); }

/* Breadcrumb, Avatar, OTP */
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted-foreground); list-style: none; }
.breadcrumb a { color: var(--muted-foreground); text-decoration: none; }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb .active { color: var(--foreground); font-weight: 600; }

.avatar { width: 40px; height: 40px; border-radius: 50%; background-color: var(--secondary); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; color: var(--secondary-foreground); border: 2px solid var(--surface); box-shadow: var(--shadow-sm); }
.avatar-group { display: flex; align-items: center; }
.avatar-group .avatar { margin-left: -10px; }
.avatar-group .avatar:first-child { margin-left: 0; }

.command-box { background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-full); overflow: hidden; box-shadow: var(--shadow-input); }
.command-input-row { display: flex; align-items: center; padding: 9px 16px; gap: 10px; }
.command-input-row:not(:last-child) { border-bottom: 1px solid var(--border); }
.command-item { padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-size: 13px; }
.command-item:hover { background-color: var(--muted); }

.otp-container { display: flex; gap: 8px; }
.otp-box { width: 42px; height: 48px; border: 1px solid var(--border); border-radius: var(--radius-md); text-align: center; font-size: 20px; font-weight: 700; background-color: var(--surface); color: var(--foreground); box-shadow: var(--shadow-input); outline: none; }
.otp-box:focus { border-color: var(--primary); box-shadow: var(--shadow-input), 0 0 0 3px var(--ring); }

/* Swatch Card (Compact Square Tile & Live Color Picker Overlay) */
.swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); gap: 12px; }
.swatch-card { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background-color: var(--surface); cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; box-shadow: var(--shadow-sm); position: relative; }
.swatch-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--primary); }
.swatch-color-box { height: 100px; width: 100%; position: relative; border-bottom: 1px solid var(--border); transition: background-color 0.2s ease; display: flex; align-items: flex-end; justify-content: flex-end; padding: 6px; }
.swatch-picker-badge { font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: var(--radius-sm); background: rgba(0,0,0,0.55); color: #FFFFFF; backdrop-filter: blur(4px); display: flex; align-items: center; gap: 4px; pointer-events: none; }
.swatch-info { padding: 8px 10px; font-size: 11px; }
.swatch-title { font-weight: 600; font-size: 12px; color: var(--foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.swatch-sub { font-size: 11px; color: var(--muted-foreground); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.swatch-hex { font-size: 11px; font-family: monospace; color: var(--primary); font-weight: 600; margin-top: 3px; }
.color-picker-hidden { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

/* Toast (shadcn/ui 스타일 — 아이콘 + 제목 + 설명 + 닫기, variant별 아이콘 색만 다름) */
.toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 100; display: flex; flex-direction: column; gap: 10px; --toast-slide: calc(100% + 24px); }
/* 왼쪽 배치: 화면 왼쪽 바깥에서 들어오고 왼쪽으로 나간다 */
.toast-container.is-left { right: auto; left: 24px; --toast-slide: calc(-100% - 24px); }
.toast {
  background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 14px 14px 14px 16px; box-shadow: var(--shadow-lg); display: flex; align-items: flex-start; gap: 10px;
  min-width: 320px; max-width: 380px; animation: slideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.toast.closing { animation: slideOut 0.2s ease-in forwards; }
.toast-icon { flex-shrink: 0; margin-top: 1px; color: var(--primary); }
.toast-success .toast-icon { color: var(--success); }
.toast-destructive .toast-icon { color: var(--destructive); }
.toast-destructive { border-color: rgba(239,68,68,0.35); }
.toast-body { flex: 1; min-width: 0; }
.toast-title { font-size: 13px; font-weight: 600; color: var(--foreground); line-height: 1.4; }
.toast-desc { font-size: 12.5px; color: var(--muted-foreground); margin-top: 2px; line-height: 1.45; }
.toast-close { flex-shrink: 0; background: none; border: none; color: var(--muted-subtle); cursor: pointer; padding: 3px; border-radius: var(--radius-sm); display: flex; margin: -2px -2px 0 0; }
.toast-close:hover { color: var(--foreground); background: var(--muted); }
/* 화면 가장자리 바깥(--toast-slide)에서 미끄러져 들어와 제자리에 멈춘다 — 최종 위치는 그대로 */
@keyframes slideIn { from { transform: translateX(var(--toast-slide)); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes slideOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(var(--toast-slide)); opacity: 0; } }

/* Tooltip — 요소에 data-tooltip="설명"만 붙이면 호버(250ms 지연)·키보드 포커스 시 표시.
   body에 붙는 플로팅 요소 하나를 JS로 위치시킨다 (::after 방식은 clip-path·overflow:hidden 부모에서 잘린다). */
.tooltip { position: fixed; top: 0; left: 0; z-index: 300; max-width: 260px; padding: 6px 10px; background: var(--foreground); color: var(--background); font-size: 12px; font-weight: 500; line-height: 1.5; letter-spacing: -0.01em; border-radius: var(--radius-sm); box-shadow: var(--shadow-md); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity 0.12s ease, transform 0.12s ease; }
.tooltip.is-below { transform: translateY(-4px); }
.tooltip.show { opacity: 1; transform: translateY(0); }
.tooltip-term { border-bottom: 1px dashed var(--muted-subtle); cursor: help; }

/* Textarea & Chat Input Box */
.textarea-control { width: 100%; min-height: 90px; padding: 10px 14px; font-family: inherit; font-size: 14px; background-color: var(--surface); color: var(--foreground); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-input); outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; resize: vertical; line-height: 1.55; }
.textarea-control:focus { border-color: var(--primary); box-shadow: var(--shadow-input), 0 0 0 3px var(--ring); }

.chat-input-box { background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px 14px; box-shadow: var(--shadow-input); display: flex; flex-direction: column; gap: 10px; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.chat-input-box:focus-within { border-color: var(--primary); box-shadow: var(--shadow-input), 0 0 0 3px var(--ring); }
.chat-textarea { width: 100%; min-height: 52px; max-height: 160px; border: none; outline: none; background: transparent; color: var(--foreground); font-family: inherit; font-size: 14px; resize: none; line-height: 1.5; }
.chat-toolbar { display: flex; align-items: center; justify-content: space-between; padding-top: 8px; border-top: 1px dashed var(--border); }
.chat-toolbar-left { display: flex; align-items: center; gap: 6px; }
.chat-toolbar-right { display: flex; align-items: center; gap: 8px; }

/* Floating Pill Chat Input Bar & Popovers */
.chat-pill-container { position: relative; width: 100%; }
.chat-input-pill { background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-full); padding: 6px 8px 6px 14px; box-shadow: var(--shadow-input); display: flex; align-items: center; gap: 10px; width: 100%; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.chat-input-pill:focus-within { border-color: var(--primary); box-shadow: var(--shadow-input), 0 0 0 3px var(--ring); }
.chat-pill-left { display: flex; align-items: center; gap: 4px; }
.chat-pill-right { display: flex; align-items: center; gap: 6px; }
.chat-pill-input { flex: 1; border: none; outline: none; background: transparent; color: var(--foreground); font-family: inherit; font-size: 14px; padding: 4px 0; }
.chat-send-btn-round { width: 38px; height: 38px; border-radius: 50%; background-color: var(--primary); color: var(--primary-foreground); border: none; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.15s ease, transform 0.1s ease; box-shadow: var(--shadow-sm); flex-shrink: 0; }
.chat-send-btn-round:hover { background-color: var(--primary-hover); transform: scale(1.05); }
.chat-popover-menu { position: absolute; bottom: calc(100% + 10px); background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-xl); padding: 8px 12px; z-index: 50; display: none; }

/* Chat Bubble & Message Relay Scrollbar */
.chat-bubble-container { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.chat-bubble-container::-webkit-scrollbar { width: 6px; }
.chat-bubble-container::-webkit-scrollbar-track { background: transparent; }
.chat-bubble-container::-webkit-scrollbar-thumb { background-color: var(--muted-subtle); border-radius: var(--radius-full); }
.chat-bubble-container::-webkit-scrollbar-thumb:hover { background-color: var(--primary); }
.chat-bubble-row { display: flex; gap: 8px; align-items: flex-end; }
.chat-bubble-row.outgoing { justify-content: flex-end; }
.chat-bubble { max-width: 80%; padding: 10px 14px; border-radius: var(--radius-lg); font-size: 13px; line-height: 1.5; }
.chat-bubble.incoming { background-color: var(--secondary); color: var(--secondary-foreground); border: 1px solid var(--border); border-bottom-left-radius: var(--radius-sm); }
.chat-bubble.outgoing { background-color: var(--primary); color: var(--primary-foreground); border-bottom-right-radius: var(--radius-sm); }
.chat-time { font-size: 11px; color: var(--muted-subtle); margin: 0 4px; white-space: nowrap; }
.chat-divider { display: flex; align-items: center; justify-content: center; margin: 4px 0; }
.chat-divider-pill { font-size: 11px; padding: 2px 10px; border-radius: var(--radius-full); background-color: var(--muted); color: var(--muted-foreground); font-weight: 500; }

/* Rich Markdown Chat Bubble Elements */
.markdown-body { font-size: 13px; line-height: 1.6; color: var(--foreground); }
.markdown-body h3 { font-size: 14px; font-weight: 700; margin: 10px 0 4px 0; color: var(--foreground); display: flex; align-items: center; gap: 6px; }
.markdown-body hr { border: none; border-top: 1px dashed var(--border); margin: 10px 0; }
.markdown-body p { margin-bottom: 6px; }
.markdown-body code { font-family: 'Consolas', 'Courier New', monospace; font-size: 12px; background-color: var(--muted); color: var(--primary); padding: 2px 6px; border-radius: 4px; border: 1px solid var(--border); }

.code-block { background-color: var(--surface); border-radius: var(--radius-md); overflow: hidden; margin: 10px 0; border: 1px solid var(--border); box-shadow: var(--shadow-input); }
.code-header { background-color: var(--background); padding: 7px 14px; display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--foreground); font-family: monospace; border-bottom: 1px solid var(--border); font-weight: 600; }
.code-content { padding: 12px 14px; font-family: 'Consolas', 'Courier New', monospace; font-size: 12px; line-height: 1.5; color: var(--foreground); overflow-x: auto; margin: 0; white-space: pre; background-color: var(--surface); box-shadow: var(--shadow-input); }
.code-token-keyword { color: var(--primary); font-weight: 600; }
.code-token-func { color: var(--info); font-weight: 600; }
.code-token-string { color: #D97706; }
.code-token-comment { color: var(--muted-foreground); font-style: italic; }

.mermaid-box { background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px; margin: 10px 0; display: flex; justify-content: center; box-shadow: var(--shadow-sm); }

/* Select & Combobox */
.select-control { width: 100%; padding: 9px 36px 9px 14px; font-family: inherit; font-size: 14px; background-color: var(--surface); color: var(--foreground); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-input); outline: none; appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235C6E67' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.select-control:focus { border-color: var(--primary); box-shadow: var(--shadow-input), 0 0 0 3px var(--ring); }

.custom-select-option { padding: 9px 12px; border-radius: var(--radius-sm); font-size: 13px; color: var(--foreground); cursor: pointer; display: flex; align-items: center; justify-content: space-between; transition: background-color 0.15s ease; }
.custom-select-option:hover { background-color: var(--secondary); color: var(--secondary-foreground); }
.custom-select-option.selected { font-weight: 600; background-color: var(--secondary); }

/* Accordion / Collapsible */
.accordion { display: flex; flex-direction: column; gap: 8px; }
.accordion-item { border: 1px solid var(--border); border-radius: var(--radius-md); background-color: var(--surface); overflow: hidden; }
.accordion-trigger { width: 100%; padding: 13px 16px; display: flex; align-items: center; justify-content: space-between; background: none; border: none; font-size: 14px; font-weight: 600; color: var(--foreground); cursor: pointer; text-align: left; transition: background-color 0.15s ease; }
.accordion-trigger:hover { background-color: var(--muted); }
.accordion-chevron { transition: transform 0.2s ease; }
.accordion-content { padding: 10px 16px 14px 16px; border-top: 1px dashed var(--border); margin-top: 2px; font-size: 13px; color: var(--muted-foreground); line-height: 1.55; display: none; }
.accordion-item.open .accordion-content { display: block; }
.accordion-item.open .accordion-chevron { transform: rotate(180deg); }

/* Modal / Dialog Preview */
.modal-preview { background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); overflow: hidden; width: 100%; }
.modal-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.modal-body { padding: 18px 20px; font-size: 14px; color: var(--foreground); line-height: 1.55; }
.modal-footer { padding: 12px 20px; border-top: 1px solid var(--border); background-color: var(--muted); display: flex; justify-content: flex-end; gap: 10px; }

/* Range Slider */
.range-slider { width: 100%; -webkit-appearance: none; appearance: none; height: 6px; border-radius: var(--radius-full); background: var(--border); outline: none; cursor: pointer; }
.range-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--primary); cursor: pointer; border: 2px solid var(--surface); box-shadow: var(--shadow-md); transition: transform 0.1s ease; }
.range-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }

/* Progress Bar */
.progress-bar { width: 100%; height: 8px; background-color: var(--border); border-radius: var(--radius-full); overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--primary-hover)); border-radius: var(--radius-full); transition: width 0.3s ease; }

/* Skeleton Loading Placeholder */
.skeleton { background: linear-gradient(90deg, var(--border) 25%, var(--secondary) 50%, var(--border) 75%); background-size: 200% 100%; animation: skeleton-pulse 1.5s infinite ease-in-out; border-radius: var(--radius-sm); }
@keyframes skeleton-pulse { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Table Component (High-Density Compact Height) */
.data-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; }
.data-table th { padding: 8px 12px; background-color: var(--muted); color: var(--muted-foreground); font-weight: 600; border-bottom: 1px solid var(--border); }
.data-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); color: var(--foreground); }
.data-table tbody tr:hover { background-color: var(--secondary); }

/* Scroll Area (Custom Scrollbar) */
.scroll-area { max-height: 150px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-md); background-color: var(--surface); padding: 10px 14px; box-shadow: var(--shadow-input); font-size: 13px; line-height: 1.55; color: var(--foreground); }
.scroll-area::-webkit-scrollbar { width: 6px; }
.scroll-area::-webkit-scrollbar-track { background: var(--muted); border-radius: var(--radius-full); }
.scroll-area::-webkit-scrollbar-thumb { background: var(--muted-subtle); border-radius: var(--radius-full); }
.scroll-area::-webkit-scrollbar-thumb:hover { background: var(--primary); }

/* Sheet / Drawer Preview */
.sheet-preview { background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 10px; }

/* Calendar Grid */
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; font-size: 12px; }
.calendar-day-header { font-weight: 600; color: var(--muted-foreground); padding: 4px 0; }
.calendar-day { padding: 7px 0; border-radius: var(--radius-sm); cursor: pointer; color: var(--foreground); transition: background-color 0.15s ease; }
.calendar-day:hover { background-color: var(--secondary); }
.calendar-day.active { background-color: var(--primary); color: white; font-weight: 600; }
.calendar-day.muted { color: var(--muted-subtle); opacity: 0.5; }

/* Pagination */
.pagination { display: flex; align-items: center; justify-content: center; gap: 6px; }
.pagination-item { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: justify; justify-content: center; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; border: 1px solid var(--border); background-color: var(--surface); color: var(--foreground); cursor: pointer; transition: all 0.15s ease; }
.pagination-item:hover { background-color: var(--secondary); border-color: var(--border-hover); }
.pagination-item.active { background-color: var(--primary); color: white; border-color: var(--primary); font-weight: 600; }

/* Hover Card / Popover */
.popover-card { background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px; box-shadow: var(--shadow-xl); width: 100%; display: flex; flex-direction: column; gap: 8px; }

/* Dropdown Menu Box */
.dropdown-menu-box { background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 6px; min-width: 220px; }
.dropdown-item { padding: 8px 12px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--foreground); cursor: pointer; transition: background-color 0.15s ease; }
.dropdown-item:hover { background-color: var(--secondary); color: var(--secondary-foreground); }
.dropdown-divider { height: 1px; background-color: var(--border); margin: 4px 0; }

/* Image Tile Grid (드래그 리오더 + 순번/타입 배지 + 삭제) */
.tile-demo-grid { display: grid; grid-template-columns: repeat(auto-fill, 140px); gap: 10px; }
.tile-demo {
  position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border); background: var(--muted); cursor: grab;
  display: flex; align-items: flex-end;
  transition: transform 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
}
.tile-demo:hover { transform: translateY(-2px); border-color: var(--primary); }
/* 드래그 중인 타일이 원래 있던 자리 — 점선 빈 자리로 보여주고, 다른 타일들은 FLIP으로 밀려난다 */
.tile-demo.tile-demo-ghost { background: var(--muted) !important; border: 2px dashed var(--border-hover); box-shadow: none; cursor: grabbing; }
.tile-demo.tile-demo-ghost .tile-demo-index,
.tile-demo.tile-demo-ghost .tile-demo-type,
.tile-demo.tile-demo-ghost .tile-demo-delete { visibility: hidden; }
.tile-demo-index {
  position: absolute; top: 6px; left: 6px; min-width: 22px; height: 22px; padding: 0 6px;
  background: rgba(0,0,0,0.6); color: #fff; border-radius: var(--radius-full);
  font-size: 12px; font-weight: 600; display: grid; place-items: center;
}
.tile-demo-type {
  margin: 8px; padding: 2px 8px; background: rgba(0,0,0,0.55); color: #fff;
  border-radius: var(--radius-sm); font-size: 11px; font-weight: 500;
}
.tile-demo-delete {
  position: absolute; right: 6px; top: 6px; width: 24px; height: 24px; border: 0; border-radius: 50%;
  background: rgba(239,68,68,0.92); color: #fff; display: grid; place-items: center; cursor: pointer;
  opacity: 0; transition: opacity 0.15s ease;
}
.tile-demo:hover .tile-demo-delete { opacity: 1; }
.tile-demo-add {
  border: 2px dashed var(--border-hover); background: transparent;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  color: var(--muted-foreground); cursor: pointer; font-family: inherit; width: 100%;
}
.tile-demo-add:hover { border-color: var(--primary); color: var(--primary); }
.tile-demo-add span { font-size: 12px; font-weight: 600; }

/* ── 제자리 확장형 타일 피커 (Expand-in-Place Tile Picker) ──
   실물 앱(sns_image_maker_v2.html의 .face-dir-overlay)에서 그대로 가져온 방식이다: 오버레이
   자체에 padding:12px + border:1px를 직접 주고, JS에서 `OFFSET = BORDER + PAD`(=13px)를
   앵커의 getBoundingClientRect() 좌표에서 빼서 위치를 맞춘다.
   ⚠️ 한때 "장식을 별도 절대배치 레이어로 분리하면 보정값이 필요 없어진다"는 방식을 시도했었는데,
   그 분리된 배경 레이어(inset:-12px)가 오버레이 자신의 overflow-x:auto(가로 스크롤이 필요한
   변형)와 함께 쓰일 때 클리핑되며 레이아웃이 깨지는 실제 버그로 이어졌다. 검증된 원본 방식(padding/
   border를 오버레이 자체에 직접 주고 OFFSET으로 보정)만 쓸 것 — "더 견고해 보이는" 재구성을
   시도하지 말 것. */
.expand-tile-anchor {
  --tile-size: 96px;
  position: relative; width: var(--tile-size); aspect-ratio: 4 / 5;
  border: 2px dashed var(--border-hover); border-radius: var(--radius-md);
  background: transparent; cursor: pointer; color: var(--muted-foreground); font-family: inherit;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  transition: border-color .15s ease, color .15s ease;
}
.expand-tile-anchor:hover { border-color: var(--primary); color: var(--primary); }
.expand-tile-overlay {
  display: none; position: fixed; z-index: 250;
  grid-template-columns: repeat(var(--cols, 5), var(--tile-size, 96px));
  gap: 10px; padding: 12px;
  background: var(--surface); border: 1px solid var(--border-hover);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-xl);
}
.expand-tile-overlay.open { display: grid; }
.expand-tile-cell {
  position: relative; width: var(--tile-size, 96px); aspect-ratio: 4 / 5;
  border-radius: var(--radius-md); overflow: hidden; cursor: pointer;
  border: 2px solid var(--border); background: var(--muted);
  display: flex; align-items: center; justify-content: center; color: var(--muted-foreground);
  transition: border-color .15s ease, transform .15s ease;
}
.expand-tile-cell:hover { border-color: var(--primary); transform: scale(1.03); }
.expand-tile-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.expand-tile-cell.expand-tile-close { border-style: dashed; }

/* ★ 즐겨찾기 토글 → 목록 맨 앞 고정 */
.fav-grid { display: grid; grid-template-columns: repeat(auto-fill, 140px); gap: 10px; }
.fav-tile {
  position: relative; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden;
  background: var(--surface); transition: border-color 0.15s ease;
}
.fav-tile-swatch { height: 64px; width: 100%; }
.fav-tile-label {
  padding: 7px 9px; font-size: 12px; font-weight: 500; color: var(--foreground);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 별 아이콘만 즐겨찾기를 토글하는 버튼이다 — 타일 전체는 클릭해도 반응하지 않는다 */
.fav-star {
  position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,0.88); border: none; padding: 0; cursor: pointer; font-family: inherit;
  display: grid; place-items: center;
  color: var(--muted-foreground); transition: color 0.15s ease, transform 0.15s ease;
}
.fav-star.favorited { color: var(--warning); }
.fav-star:hover { transform: scale(1.12); }

/* ==========================================================================
   2nd 확장 컴포넌트 (게임형 레퍼런스 2nd_ref에서 나온 항목)
   기본 스킨에서는 깔끔한 업무용 모양, theme-game.css에서는 HUD 모양으로 보인다.
   ========================================================================== */

/* Hero Banner (원래 인라인 스타일 — 스킨이 덮어쓸 수 있게 클래스로 뺐다) */
.hero-banner { background: linear-gradient(135deg, var(--secondary), var(--surface)); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 28px 36px; margin-bottom: 36px; display: flex; justify-content: space-between; align-items: center; position: relative; }

/* Tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); }
.tab { position: relative; padding: 9px 18px; font-family: inherit; font-size: 14px; font-weight: 500; color: var(--muted-foreground); background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease; }
.tab:hover { color: var(--foreground); }
.tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.tab:disabled { color: var(--muted-subtle); cursor: not-allowed; }

/* Numbered Heading (01 / 제목 / SUBTITLE) */
.num-heading { display: flex; align-items: center; gap: 14px; }
.num-heading-index { font-family: var(--font-display); font-size: 32px; font-weight: 700; line-height: 1; color: var(--primary); letter-spacing: -0.03em; }
.num-heading-title { font-size: 18px; font-weight: 700; color: var(--foreground); line-height: 1.3; letter-spacing: -0.02em; }
.num-heading-sub { font-size: 12px; font-weight: 500; line-height: 1.5; color: var(--muted-foreground); letter-spacing: 0.04em; text-transform: uppercase; }

/* Progress 확장: 라벨+값 줄, 얇은 변형, 상태색 */
.progress-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; font-size: 13px; font-weight: 500; }
.progress-value { color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.progress-bar.progress-sm { height: 4px; }
.progress-fill.is-success { background: var(--success); }
.progress-fill.is-warning { background: var(--warning); }
.progress-fill.is-destructive { background: var(--destructive); }

/* Task Row (퀘스트형 진행 목록: 태그·제목·진행률 + 보상 슬롯 + 액션) */
.task-list { display: flex; flex-direction: column; gap: 8px; }
.task-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 16px; padding: 12px 12px 12px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.task-row:hover { border-color: var(--border-hover); box-shadow: var(--shadow-sm); }
.task-row.is-done { background: var(--secondary); border-color: var(--primary); }
.task-row-tag { font-size: 12px; font-weight: 500; line-height: 1.5; color: var(--muted-foreground); }
.task-row-title { font-size: 14px; font-weight: 600; color: var(--foreground); margin: 2px 0 8px; }
.task-row-rewards { display: flex; gap: 6px; }
.reward-slot { position: relative; width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--muted); border: 1px solid var(--border); display: grid; place-items: center; color: var(--primary); }
.reward-slot-count { position: absolute; right: 3px; bottom: 0; font-size: 12px; font-weight: 700; line-height: 1.5; color: var(--foreground); }
@media (max-width: 640px) { .task-row { grid-template-columns: 1fr; } }

/* KPI Stat Tile (큰 숫자 + 단위 + 라벨 + 증감) */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.kpi { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.kpi-value { font-family: var(--font-display); font-size: 28px; font-weight: 700; line-height: 1.15; color: var(--foreground); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kpi-unit { font-size: 13px; font-weight: 600; color: var(--muted-foreground); margin-left: 2px; letter-spacing: 0; }
.kpi-label { font-size: 12px; font-weight: 500; line-height: 1.5; color: var(--muted-foreground); }
.kpi-delta { font-size: 12px; font-weight: 600; line-height: 1.5; color: var(--success); }
.kpi-delta.is-down { color: var(--destructive); }

/* Stat List (아이콘 + 항목명 + 수치) */
.stat-list { display: flex; flex-direction: column; gap: 4px; }
.stat-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--radius-sm); background: var(--muted); font-size: 13px; }
.stat-row svg { color: var(--muted-foreground); flex-shrink: 0; }
.stat-row-label { flex: 1; color: var(--muted-foreground); font-weight: 500; }
.stat-row-value { font-weight: 700; color: var(--foreground); font-variant-numeric: tabular-nums; }

/* Timeline (번호 단계 + 노드 + 세부 목록) */
.timeline { list-style: none; position: relative; display: flex; flex-direction: column; gap: 22px; padding-left: 36px; }
.timeline::before { content: ''; position: absolute; left: 10px; top: 6px; bottom: 6px; width: 2px; background: var(--border); }
.timeline-item { position: relative; }
.timeline-dot { position: absolute; left: -36px; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); border: 2px solid var(--border-hover); display: grid; place-items: center; }
.timeline-dot::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--border-hover); }
.timeline-item.is-done .timeline-dot, .timeline-item.is-active .timeline-dot { border-color: var(--primary); }
.timeline-item.is-done .timeline-dot::after, .timeline-item.is-active .timeline-dot::after { background: var(--primary); }
.timeline-item.is-active .timeline-dot { box-shadow: 0 0 0 4px var(--ring); }
.timeline-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.timeline-num { font-family: var(--font-display); font-size: 20px; font-weight: 700; line-height: 1.2; color: var(--primary); }
.timeline-title { font-size: 15px; font-weight: 600; color: var(--foreground); }
.timeline-meta { font-size: 12px; font-weight: 500; line-height: 1.5; color: var(--muted-foreground); }
.timeline-body { list-style: none; font-size: 13px; color: var(--muted-foreground); margin-top: 6px; line-height: 1.6; }

/* ==========================================================================
   Flow Node & Group (골맵 노드 그래프) — 캔버스 · 묶음 · 노드 카드 · 포트 · 엣지
   - 상태 modifier(.is-done 등)는 --node-accent 하나만 바꾸고, 테두리·제목 막대·표시점·알약이 전부 그걸 따른다.
   - 포트 색은 상태·스킨과 상관없이 고정: --port-in(왼쪽, 들어오는 쪽) / --port-out(오른쪽, 나가는 쪽).
   - 위치는 앱(레이아웃 엔진)이 style left/top으로 준다. 포트 중심 = 노드 top + 20px (헤더 줄 중심).
   ========================================================================== */
.flow-canvas { position: relative; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--background) radial-gradient(var(--border) 1px, transparent 1px) 0 0 / 24px 24px; }
.flow-world { position: relative; }
.flow-edges { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.flow-edge { fill: none; stroke: var(--border-hover); stroke-width: 1.5; stroke-linecap: round; }
.flow-edge.is-past { stroke-opacity: 0.45; }
.flow-edge.is-active { stroke: var(--primary); stroke-width: 2; stroke-dasharray: 7 11; animation: flow-dash 0.6s linear infinite; filter: drop-shadow(0 0 3px var(--primary)); }
/* 고른 노드 기준: 들어오는 선은 입력 포트 색, 나가는 선은 출력 포트 색 */
.flow-edge.is-in { stroke: var(--port-in); stroke-width: 2.2; }
.flow-edge.is-out { stroke: var(--port-out); stroke-width: 2.2; }
.flow-edge-dot { fill: var(--primary); filter: drop-shadow(0 0 6px var(--primary)); }
.flow-arrow { fill: var(--border-hover); }
@keyframes flow-dash { to { stroke-dashoffset: -18; } }

/* 묶음(그룹): 머리띠(번호·이름·완료 수·상태 막대·사람 필요) + 안쪽 영역. 안쪽 묶음은 .is-nested로 한 단계 진하게 */
.flow-group { position: absolute; border: 1.5px solid var(--border-hover); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--muted) 70%, transparent); }
.flow-group.is-nested { background: var(--muted); }
.flow-group-bar { height: 34px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--border); white-space: nowrap; overflow: hidden; }
.flow-group-index { font-family: var(--font-display); font-size: 12px; font-weight: 700; line-height: 1.5; color: var(--primary); }
.flow-group-title { font-size: 14px; font-weight: 700; color: var(--foreground); letter-spacing: -0.01em; }
.flow-group-count { font-size: 12px; font-weight: 600; line-height: 1.5; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.flow-group-need { margin-left: auto; font-size: 12px; font-weight: 600; line-height: 1.5; color: var(--warning); }

/* 상태 비율 막대 (묶음 머리띠·접힌 묶음 노드 공용) — 안의 i 폭 = 상태별 비율 */
.flow-status { display: flex; width: 110px; height: 6px; flex: none; overflow: hidden; border-radius: var(--radius-full); background: var(--border); }
.flow-status i { height: 100%; }

/* 노드 카드 */
.flow-node {
  --node-accent: var(--muted-subtle);
  position: absolute; width: 200px; height: 104px; display: flex; flex-direction: column; padding: 10px 14px;
  background: var(--card); color: var(--foreground); border: 1.5px solid color-mix(in srgb, var(--node-accent) 55%, var(--border));
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md); cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.flow-node:hover { border-color: var(--node-accent); transform: translateY(-1px); }
.flow-node-head { height: 20px; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; line-height: 1.5; color: var(--muted-foreground); white-space: nowrap; }
.flow-node-layer { display: inline-flex; align-items: center; gap: 6px; }
.flow-node-layer i { width: 7px; height: 7px; border-radius: 2px; }
.flow-node-mark { margin-left: auto; width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--node-accent); color: var(--card); font-size: 12px; font-weight: 700; line-height: 1; display: grid; place-items: center; }
.flow-node-pulse { margin-left: auto; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--node-accent); box-shadow: 0 0 8px var(--node-accent); animation: flow-blink 1s ease-in-out infinite; }
.flow-node-title { flex: 1; display: flex; align-items: center; min-height: 0; margin: 2px 0 4px; padding-left: 10px; border-left: 3px solid var(--node-accent); font-size: 14px; font-weight: 650; line-height: 1.35; letter-spacing: -0.015em; }
.flow-node-foot { height: 24px; display: flex; align-items: center; gap: 6px; }
.flow-pill { font-size: 12px; font-weight: 600; line-height: 1.6; padding: 0 9px; border-radius: var(--radius-full); background: color-mix(in srgb, var(--node-accent) 18%, transparent); color: var(--foreground); white-space: nowrap; }
.flow-who { margin-left: auto; display: flex; gap: 4px; overflow: hidden; }
.flow-who b { font-size: 12px; font-weight: 500; line-height: 1.6; padding: 0 7px; border-radius: var(--radius-sm); background: var(--muted); color: var(--muted-foreground); white-space: nowrap; }

/* 포트 */
.flow-port { position: absolute; top: 20px; width: 11px; height: 11px; border: 2px solid; border-radius: 50%; background: var(--card); transform: translate(-50%, -50%); }
.flow-port.in { left: 0; border-color: var(--port-in); }
.flow-port.out { left: 100%; border-color: var(--port-out); background: var(--port-out); }

/* 상태 */
.flow-node.is-done { --node-accent: var(--success); background: color-mix(in srgb, var(--success) 8%, var(--card)); }
.flow-node.is-active { --node-accent: var(--info); box-shadow: 0 0 0 1.5px var(--node-accent), 0 0 22px color-mix(in srgb, var(--node-accent) 45%, transparent); }
.flow-node.is-human { --node-accent: var(--warning); }
.flow-node.is-human::after { content: ''; position: absolute; inset: -5px; border: 2px solid var(--node-accent); border-radius: calc(var(--radius-lg) + 5px); pointer-events: none; animation: flow-ring 1.4s ease-in-out infinite; }
.flow-node.is-blocked { --node-accent: var(--destructive); background: color-mix(in srgb, var(--destructive) 7%, var(--card)); }
.flow-node.is-waiting { border-style: dashed; }
.flow-node.is-waiting .flow-node-title { color: var(--muted-foreground); }
.flow-node.is-selected { outline: 2px solid var(--foreground); outline-offset: 4px; }
/* 접힌 묶음 = 묶음 노드: 더 크고, 아래에 상태 막대 */
.flow-node.is-group { width: 220px; height: 112px; background: color-mix(in srgb, var(--node-accent) 10%, var(--muted)); }
.flow-node.is-group .flow-node-title { font-size: 16px; font-weight: 700; }
.flow-node.is-group .flow-status { flex: 1; width: auto; }
.flow-node.is-group .flow-group-count { margin-left: 8px; }
@keyframes flow-blink { 50% { opacity: 0.35; transform: scale(0.7); } }
@keyframes flow-ring { 0%, 100% { opacity: 0.95; } 50% { opacity: 0.15; } }

/* 범례 (포트 색 설명 등) */
.flow-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 12px; font-weight: 500; line-height: 1.5; color: var(--muted-foreground); }
.flow-legend span { display: inline-flex; align-items: center; gap: 6px; }
.flow-legend .flow-port { position: static; transform: none; }

/* 스크롤바 (패널·목록 공용) — 얇게, 토큰 색으로. Chrome/Edge는 ::-webkit-scrollbar, Firefox는 scrollbar-color
   (Chrome은 scrollbar-color를 주면 ::-webkit-scrollbar 꾸밈을 무시하므로 Firefox에만 준다) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-hover); border: 3px solid transparent; background-clip: padding-box; border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background-color: var(--muted-subtle); }
@supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: var(--border-hover) transparent; } }