/* ========== 디자인 토큰 (테마 스코프) ==========
   :root = Orderful(앱 — 인더스트리얼 모노 + 버밀리언 단일 강조)
   .theme-portal = Dia(포털·auth — 라이트 + 스펙트럼 글로우)
   kdl 팔레트는 index.html tailwind.config에서 rgb(var(--k-x)/<alpha-value>)로 참조 → 같은 kdl-* 클래스가 테마별로 분기. */
:root{
  --k-primary:41 112 255;      /* Signal Blue #2970FF — CTA·강조 (Kaiel: DEEP Office 키컬러 전환) */
  --k-primaryDeep:27 88 212;   /* 블루 hover/pressed #1B58D4 */
  --k-primaryWeak:234 241 255; /* 블루 틴트 #EAF1FF — 칩/아이콘 배경 */
  --k-bg:245 245 245;          /* Vellum #f5f5f5 — 페이지 캔버스 */
  --k-surface:255 255 255;     /* Paper — 카드면 */
  --k-line:229 231 235;        /* Frost #e5e7eb — 헤어라인/디바이더 */
  --k-border:212 212 212;      /* Cloud #d4d4d4 — 컨트롤 보더 */
  --k-text1:16 24 40;          /* Slate900 #101828 — 헤딩/주요 텍스트 */
  --k-text2:74 85 101;         /* Slate600 #4a5565 — 본문/보조 */
  --k-carbon:31 31 31;         /* Carbon #1f1f1f — 다크 표면(GNB/푸터) */
  --k-success:22 101 52;       /* 저채도 green */
  --k-warning:180 83 9;        /* amber-dark — 경고 */
  --k-error:185 28 28;         /* danger */
  --k-favorite:245 158 11;     /* amber-500 #f59e0b — 즐겨찾기 별 전용. 경고색(--k-warning)보다 밝아 별이 별처럼 보인다(2026-08-18 Benson) */
  --k-radius-card:0px; --k-radius-pill:0px;   /* 항목7: radius 제거(정갈) */
  --k-accent-grad:linear-gradient(94deg,#2970FF -33.85%,#5A8CFF -1.54%,#2970FF 73.55%);  /* Signal Flux(nav 버튼 전용) — 블루 전환 */
}
.theme-portal{
  --k-primary:0 0 0;           /* Ink Black — 유일 크로매틱 앵커 */
  --k-primaryDeep:0 0 0;
  --k-primaryWeak:239 239 239; /* Fog — 중성 약틴트 */
  --k-bg:248 248 248;          /* Canvas #f8f8f8 */
  --k-surface:255 255 255;     /* Snow (카드는 0.9+blur24) */
  --k-line:239 239 239;        /* Fog — subtle 디바이더 */
  --k-border:217 217 217;      /* Pebble #d9d9d9 — 중성 버튼 배경 */
  --k-text1:0 0 0;             /* Ink Black */
  --k-text2:99 99 99;          /* Graphite #636363 */
  --k-carbon:31 31 31;
  --k-success:3 88 247;        /* Dia status는 Signal Blue 정보색으로 흡수 */
  --k-warning:250 61 29;       /* Spectrum Red */
  --k-error:250 61 29;
  --k-radius-card:24px; --k-radius-pill:9999px;   /* Dia 큰 라운드 / 고스트 pill */
  --k-link:3 88 247;           /* Signal Blue 링크 */
  --k-text3:149 149 149;       /* Slate — 3차 텍스트 */
  --k-accent-grad:linear-gradient(90deg,#c679c4 0%,#fa3d1d 25%,#ffb005 50%,#e1e1fe 75%,#0358f7 100%);  /* 스펙트럼 */
}

html,body { font-family:'Pretendard JP','Pretendard',system-ui,sans-serif; }
    body { background:rgb(var(--k-bg)); color:rgb(var(--k-text1)); }
    .kdl-tracking { letter-spacing:-0.02em; }

    /* Dia(포털) 무드 — featherweight 타이포(weight ≤ 500~600), 타이트 트래킹. 헤딩만 타깃해 본문 가독성 보존. */
    .theme-portal h1 { font-weight:300; letter-spacing:-0.04em; }
    .theme-portal h2 { font-weight:500; letter-spacing:-0.03em; }
    .theme-portal h3 { font-weight:500; }
    .theme-portal .font-extrabold { font-weight:600; }

    .domain-card, .doc-card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
    .domain-card:hover { transform: translateY(-3px); }

    /* 도메인 키비주얼 배경 시스템 — accent 1색에서 파생되는 3단 톤 + 사선 광 */
    .kv-bg {
      background:
        linear-gradient(115deg, transparent 42%, rgba(255,255,255,.07) 50%, transparent 58%),
        linear-gradient(128deg,
          color-mix(in srgb, var(--ac) 88%, #0a1020) 0%,
          color-mix(in srgb, var(--ac) 52%, #0c1424) 52%,
          color-mix(in srgb, var(--ac) 18%, #0d1526) 100%);
    }

    /* 히어로 다크 존 — 흐르는 그라데이션 글로우 */
    .hero-glow {
      position: absolute; border-radius: 50%; pointer-events: none;
      filter: blur(70px); will-change: transform;
    }
    .hero-glow1 {
      width: 720px; height: 520px; left: -8%; top: -30%;
      background: radial-gradient(closest-side, rgb(var(--k-primary) / .34), rgb(var(--k-primary) / .10) 60%, transparent);
      animation: heroFlow1 18s ease-in-out infinite alternate;
    }
    .hero-glow2 {
      width: 560px; height: 460px; right: -6%; bottom: -40%;
      background: radial-gradient(closest-side, rgb(var(--k-primary) / .22), rgb(var(--k-primary) / .07) 60%, transparent);
      animation: heroFlow2 24s ease-in-out 2s infinite alternate;
    }
    @keyframes heroFlow1 { from { transform: translate(0,0) scale(1); } to { transform: translate(260px, 60px) scale(1.18); } }
    @keyframes heroFlow2 { from { transform: translate(0,0) scale(1.1); } to { transform: translate(-220px, -50px) scale(0.92); } }
    @media (prefers-reduced-motion: reduce) { .hero-glow { animation: none; } }

    /* 앰비언트 AI 패턴 — KDL 픽셀 모티프가 옅은 블루로 부유 */
    .ai-ambient { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
    .ai-px {
      position: absolute; display: block; border-radius: 22%;
      background: linear-gradient(135deg, rgb(var(--k-primary) / .07), rgb(var(--k-primary) / .03));
    }
    .ai-px1 { width:140px; height:140px; left:4%;  top:8%;  animation: aiDrift1 22s ease-in-out infinite alternate; }
    .ai-px2 { width:64px;  height:64px;  left:13%; top:30%; animation: aiDrift2 16s ease-in-out infinite alternate; background: linear-gradient(135deg, rgb(var(--k-primary) / .09), rgb(var(--k-primary) / .04)); }
    .ai-px3 { width:200px; height:200px; right:6%; top:4%;  animation: aiDrift3 26s ease-in-out infinite alternate; }
    .ai-px4 { width:90px;  height:90px;  right:16%; top:38%; animation: aiDrift1 20s ease-in-out 4s infinite alternate; background: linear-gradient(135deg, rgb(var(--k-primary) / .06), rgb(var(--k-primary) / .02)); }
    .ai-px5 { width:120px; height:120px; left:30%; bottom:14%; animation: aiDrift2 24s ease-in-out 2s infinite alternate; }
    .ai-px6 { width:54px;  height:54px;  right:30%; bottom:22%; animation: aiDrift3 15s ease-in-out 6s infinite alternate; background: linear-gradient(135deg, rgb(var(--k-primary) / .10), rgb(var(--k-primary) / .04)); }
    .ai-px7 { width:160px; height:160px; left:55%; bottom:2%; animation: aiDrift1 28s ease-in-out 3s infinite alternate; }
    @keyframes aiDrift1 { from { transform: translate(0,0) rotate(0deg) scale(1); }    to { transform: translate(90px,-70px) rotate(18deg) scale(1.12); } }
    @keyframes aiDrift2 { from { transform: translate(0,0) rotate(10deg) scale(1.08); } to { transform: translate(-80px,60px) rotate(-14deg) scale(0.94); } }
    @keyframes aiDrift3 { from { transform: translate(0,0) rotate(-8deg) scale(0.96); } to { transform: translate(60px,86px) rotate(14deg) scale(1.1); } }
    @media (prefers-reduced-motion: reduce) { .ai-px { animation: none; } }

    /* KDL 공식 서비스 카드 */
    .svc-card { transition: transform .22s cubic-bezier(.32,.72,.36,1), box-shadow .22s ease; }
    .svc-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 48px -16px color-mix(in srgb, var(--ac) 55%, transparent);
    }

    /* 넥슨풍 포탈 키비주얼 카드 */
    .portal-card {
      transition: transform .25s cubic-bezier(.32,.72,.36,1), box-shadow .25s ease, border-color .25s ease;
      will-change: transform;
    }
    .portal-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 18px 44px -14px color-mix(in srgb, var(--ac) 35%, transparent);
      border-color: color-mix(in srgb, var(--ac) 60%, transparent);
    }
    /* ── 라이브러리 문서 카드: 생동감 있는 hover ── */
    .doc-card { --card-ac: rgb(var(--k-primary)); transition: transform .2s cubic-bezier(.32,.72,.36,1), box-shadow .22s ease, border-color .2s ease; }
    .doc-card .doc-badge { transition: transform .22s cubic-bezier(.32,.72,.36,1), background .2s ease; }
    /* 상단 accent strip — hover 시 좌→우로 자라남 */
    .doc-card::before {
      content:''; position:absolute; left:0; top:0; height:3px; width:100%;
      background: var(--card-ac); transform: scaleX(0); transform-origin:left;
      transition: transform .28s cubic-bezier(.32,.72,.36,1); z-index:2;
    }
    /* 대각 광택 sweep */
    .doc-card::after {
      content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
      background: linear-gradient(115deg, transparent 38%, color-mix(in srgb, var(--card-ac) 12%, transparent) 48%, transparent 58%);
      transform: translateX(-120%); transition: transform .55s ease;
    }
    .doc-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 34px -16px color-mix(in srgb, var(--card-ac) 42%, transparent);
      border-color: color-mix(in srgb, var(--card-ac) 55%, transparent);
    }
    .doc-card:hover::before { transform: scaleX(1); }
    .doc-card:hover::after  { transform: translateX(120%); }
    .doc-card:hover .doc-badge { transform: scale(1.08) rotate(-3deg); background: color-mix(in srgb, var(--card-ac) 22%, transparent); }
    .doc-card:active { transform: translateY(-1px) scale(.995); }

    /* 업무 칩 hover: 살짝 떠오름 */
    .task-tile { transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease; }
    .task-tile:hover { transform: translateY(-1px); }

    /* 섹션 스크롤 등장 */
    .cat-reveal { opacity:0; transform: translateY(14px); }
    .cat-reveal.is-in { opacity:1; transform:none; transition: opacity .5s ease, transform .5s cubic-bezier(.32,.72,.36,1); }

    /* ── 공식 서비스: 추천(다크 featured) + 보조(라이트 minor) — 면적·대비로 단일 초점 ── */
    .svc-feature {
      background: linear-gradient(135deg, #0f1b33 0%, #16243f 58%, #1d3157 100%);
      border: 1px solid rgba(255,255,255,.08);
      box-shadow: 0 18px 42px -20px rgba(8,12,20,.7);
      transition: transform .22s cubic-bezier(.32,.72,.36,1), box-shadow .22s ease;
    }
    .svc-feature::before { content:''; position:absolute; left:0; top:0; right:0; height:3px; background: var(--ac); }
    .svc-feature:hover { transform: translateY(-3px); box-shadow: 0 26px 58px -22px rgba(8,12,20,.78); }
    .svc-minor {
      background:#fff; border:1px solid #e5e7eb;
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }
    .svc-minor:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -16px rgba(16,24,40,.2); border-color:#cbd5e1; }

    /* ── 도메인 타일: 중성 표면 + 작은 식별 액센트(평소 저채도, 호버 시 한 번에 하나만 풀강도) ── */
    .domain-tile {
      transition: transform .2s cubic-bezier(.32,.72,.36,1), box-shadow .2s ease, border-color .2s ease;
      will-change: transform;
    }
    .domain-tile .domain-rule {
      position:absolute; left:0; top:0; right:0; height:2px;
      background: color-mix(in srgb, var(--ac) 42%, #d1d5db);
      transition: background .2s ease;
    }
    .domain-tile:hover {
      transform: translateY(-3px);
      border-color: color-mix(in srgb, var(--ac) 42%, #d1d5db);
      box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--ac) 35%, rgba(16,24,40,.4));
    }
    .domain-tile:hover .domain-rule { background: var(--ac); }
    .domain-tile .domain-chevron { transition: color .2s ease; }
    .domain-tile:hover .domain-chevron { color: var(--ac); }
    .glyph-chip {
      display:grid; place-items:center; width:38px; height:38px; border-radius:10px;
      background:#f3f4f6; color:#374151; font-weight:600; font-size:15px; line-height:1;
      border:1px solid #e5e7eb;
    }

    /* ── 고객사 로고 밴드 (모노크롬 사회적 증거) ── */
    .band-logo { display:inline-flex; align-items:center; height:30px; }
    .band-logo img { max-height:30px; max-width:104px; object-fit:contain; filter:grayscale(1); opacity:.5; transition:opacity .2s, filter .2s; }
    .band-logo:hover img { filter:grayscale(.15); opacity:.85; }

    /* ── 버티컬 솔루션 카드 (라이트 신뢰 카탈로그 · OKLCH 액센트 family) ── */
    .vsol-card {
      position:relative; display:flex; flex-direction:column; gap:13px;
      background:#fff; border:1px solid #e8eaee; border-radius:16px; padding:22px 22px 18px;
      box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 18px -12px rgba(16,24,40,.16);
      transition: transform .2s cubic-bezier(.32,.72,.36,1), box-shadow .2s ease, border-color .2s ease;
      overflow:hidden; min-height:236px;
    }
    .vsol-rail { position:absolute; left:0; top:0; right:0; height:3px;
      background: oklch(0.62 0.13 var(--h)); opacity:.9; }
    .vsol-card:hover {
      transform: translateY(-4px);
      border-color: oklch(0.62 0.13 var(--h) / .42);
      box-shadow: 0 2px 4px rgba(16,24,40,.05), 0 24px 44px -20px oklch(0.55 0.13 var(--h) / .42);
    }
    .vsol-head { display:flex; align-items:flex-start; gap:12px; }
    .vsol-icon { flex:none; width:42px; height:42px; display:grid; place-items:center; border-radius:12px;
      color: oklch(0.55 0.14 var(--h));
      background: oklch(0.62 0.13 var(--h) / .10);
      border:1px solid oklch(0.62 0.13 var(--h) / .20); }
    .vsol-eyebrow { font-size:9.5px; font-weight:600; letter-spacing:.13em; color:#a2a8b4; text-transform:uppercase; }
    .vsol-title { font-size:17px; font-weight:600; letter-spacing:-.02em; color:#15181d; margin-top:2px; }
    .vsol-arrow { margin-left:auto; color:#c6cbd4; transition: transform .2s ease, color .2s ease; }
    .vsol-card:hover .vsol-arrow { color: oklch(0.55 0.14 var(--h)); transform: translateX(3px); }
    .vsol-value { font-size:12.5px; line-height:1.55; color:#5b626e; }
    .vsol-chips { display:flex; flex-wrap:wrap; gap:6px; }
    .vsol-chip { font-size:11px; font-weight:600; color:#454c58; background:#f6f7f9; border:1px solid #e8eaee;
      border-radius:7px; padding:3px 8px; white-space:nowrap; }
    .vsol-more { color:#8b92a0; background:transparent; }
    .vsol-proof { display:flex; align-items:center; justify-content:space-between; gap:10px;
      margin-top:auto; padding-top:13px; border-top:1px solid #eef0f3; }
    .vsol-logos { display:flex; align-items:center; gap:6px; }
    .vsol-logo { width:32px; height:22px; display:grid; place-items:center; border-radius:5px;
      background:#fff; border:1px solid #edeff2; overflow:hidden; }
    .vsol-logo img { max-width:82%; max-height:72%; object-fit:contain; filter:grayscale(1); opacity:.62; transition:opacity .2s, filter .2s; }
    .vsol-card:hover .vsol-logo img { filter:grayscale(.2); opacity:.95; }
    .vsol-logo-txt { font-size:9px; font-weight:600; }
    .vsol-metric { font-size:11.5px; font-weight:600; color:#6b7280; white-space:nowrap; }
    .vsol-cta { font-size:12.5px; font-weight:600; color:#2b3240; display:inline-flex; align-items:center; gap:6px; }

    /* 유틸 셀 — 3번째 그룹의 빈 칸을 CTA + 요약으로 채움 */
    .vsol-util { position:relative; display:flex; flex-direction:column; gap:6px; border-radius:16px; padding:22px;
      min-height:236px; }
    .vsol-util-cta { background:#fff; border:1.5px dashed #d6dae1; transition: border-color .2s, background .2s; }
    .vsol-util-cta:hover { border-color:#9aa1ad; background:#fcfcfd; }
    .vsol-util-title { font-size:15px; font-weight:600; color:#2b3240; letter-spacing:-.01em; }
    .vsol-util-sub { font-size:12px; color:#6b7280; line-height:1.5; }
    .vsol-util-stat { background:linear-gradient(160deg,#0f1b33,#1b2c49); color:#fff; border:1px solid rgba(255,255,255,.08); }
    .vsol-util-eyebrow { font-size:9.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:#8fb3ff; }
    .vsol-util-big { font-size:24px; font-weight:600; letter-spacing:-.02em; color:#fff; line-height:1.15; }
    .vsol-util-big span { font-size:12px; font-weight:600; color:rgba(255,255,255,.55); margin-left:5px; letter-spacing:0; }
    .vsol-util-stat .vsol-util-sub { color:rgba(255,255,255,.5); }

    /* ═══ Live Extraction Landing (살아있는 추출 캔버스) ═══ */
    .le-stagebox { position:relative; width:100%; }
    .le-overlay { position:absolute; inset:0; pointer-events:none; }
    .le-bbox { position:absolute; border:2px solid; border-radius:3px; background:rgba(91,140,255,.05);
      animation:leBox .28s ease-out both; }
    .le-bbox.is-active { box-shadow:0 0 0 4px rgba(91,140,255,.30); background:rgba(91,140,255,.16); z-index:2; }
    @keyframes leBox { from{opacity:0;transform:scale(1.06);} to{opacity:1;transform:none;} }
    .le-scan { position:absolute; left:0; right:0; top:-42%; height:42%; pointer-events:none; opacity:0; z-index:3;
      background:linear-gradient(180deg, transparent, rgba(91,140,255,.14) 72%, rgba(130,170,255,.55)); }
    .le-scan.run { animation:leScan 1.5s cubic-bezier(.4,0,.2,1) 1; }
    @keyframes leScan { 0%{top:-42%;opacity:1;} 86%{opacity:1;} 100%{top:100%;opacity:0;} }
    .le-row { animation:leRow .24s ease-out both; }
    @keyframes leRow { from{opacity:0;transform:translateY(5px);} to{opacity:1;transform:none;} }
    .le-row.is-low { background:rgba(245,158,11,.09); }
    .le-conf { color:var(--c); font-variant-numeric:tabular-nums; }
    .le-lock svg { width:11px; height:11px; }
    .le-agentdot { animation:lePulse 1.2s ease-in-out infinite; }
    @keyframes lePulse { 0%,100%{opacity:.3;} 50%{opacity:1;} }
    .le-stat { opacity:0; transform:translateY(6px); transition:.45s ease; }
    .le-stat.show { opacity:1; transform:none; }
    .le-pill.is-active { background:#fff !important; color:#0a0f1a !important; border-color:#fff !important; }
    @media (prefers-reduced-motion: reduce){ .le-scan.run{animation:none;} .le-bbox,.le-row{animation:none;} }

    /* ═══ Portal v4 — 산업별 시네마틱 브랜드 솔루션 카드 ═══ */
    .sol-card {
      position:relative; display:block; border-radius:18px; overflow:hidden; min-height:360px; isolation:isolate;
      border:1px solid rgba(255,255,255,.08);
      box-shadow:0 20px 50px -24px rgba(0,0,0,.8);
      transition:transform .35s cubic-bezier(.32,.72,.36,1), box-shadow .35s ease;
    }
    .sol-card:hover { transform:translateY(-6px); box-shadow:0 34px 72px -28px rgba(0,0,0,.9); }
    .sol-bg {
      position:absolute; inset:0; background-size:cover; background-position:center;
      transform:scale(1.03); transition:transform .6s cubic-bezier(.32,.72,.36,1);
    }
    .sol-card:hover .sol-bg { transform:scale(1.1); }
    .sol-tint {
      position:absolute; inset:0;
      background:
        linear-gradient(180deg, rgba(8,10,16,.12) 0%, rgba(8,10,16,.52) 48%, rgba(8,10,16,.95) 100%),
        linear-gradient(140deg, color-mix(in srgb, var(--brand) 72%, transparent) 0%, color-mix(in srgb, var(--brand) 12%, transparent) 42%, transparent 60%);
    }
    .sol-content { position:relative; z-index:1; min-height:380px; display:flex; flex-direction:column; padding:22px; color:#fff; }
    .sol-top { display:flex; align-items:center; gap:11px; }
    .sol-mark {
      width:38px; height:38px; display:grid; place-items:center; border-radius:11px; color:#fff; flex:none;
      background:color-mix(in srgb, var(--brand) 55%, rgba(0,0,0,.2)); border:1px solid rgba(255,255,255,.28);
    }
    .sol-eyebrow { font-size:9.5px; font-weight:600; letter-spacing:.16em; color:color-mix(in srgb, var(--brand) 50%, #ffffff); }
    /* ── 서비스 브랜드 락업(상단, 보조): DEEP Agent + for [산업] ── */
    .sol-name { line-height:1.06; }
    .sol-name-master { display:block; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.6); }
    .sol-name-for { display:block; margin-top:2px; font-size:14px; font-weight:600; letter-spacing:-.01em; color:rgba(255,255,255,.5); }
    .sol-name-for em { font-style:normal; font-size:22px; font-weight:600; letter-spacing:-.02em;
      color:color-mix(in srgb, var(--brand) 40%, #ffffff); }
    /* ── 한글 도메인 헤드라인(하단, 지배 요소) ── */
    .sol-kr-big { font-size:33px; font-weight:600; letter-spacing:-.03em; line-height:1.04; color:#fff; }
    .sol-kr-suffix { font-size:16px; font-weight:600; letter-spacing:-.01em; color:rgba(255,255,255,.82); }
    .sol-desc { margin-top:8px; font-size:12.5px; line-height:1.5; color:rgba(255,255,255,.68); max-width:96%; }
    .sol-trust { display:flex; align-items:center; gap:10px; margin-top:16px; }
    .sol-trust-label { font-size:9.5px; font-weight:600; letter-spacing:.12em; color:rgba(255,255,255,.5); text-transform:uppercase; flex:none; }
    .sol-logos { display:flex; gap:8px; flex-wrap:nowrap; }
    /* 로고 칩 표준화: 칩은 줄이고(80×36) 로고 높이는 유지 → 로고가 칩을 꽉 채움 */
    .sol-logo {
      width:80px; height:36px; padding:0 4px; flex:none; background:#fff; border-radius:8px; display:grid; place-items:center;
      box-shadow:0 5px 14px rgba(0,0,0,.32);
    }
    .sol-logo img { max-height:32px; max-width:72px; object-fit:contain; }
    .sol-cta { margin-top:16px; display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:#fff; opacity:.92; transition:gap .25s ease; }
    .sol-card:hover .sol-cta { gap:10px; }
    /* ── 투자사·도입 기업 흑백 로고 마퀴 ── */
    .lm-wrap { background:#fff; border-bottom:1px solid #eef0f3; padding:18px 0 16px; }
    .lm-label { text-align:center; font-size:12px; font-weight:600; letter-spacing:.02em; color:#98a1ae; margin:14px 0 0; }
    .lm-viewport { position:relative; overflow:hidden; width:100%;
      -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
      mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
    .lm-track { display:flex; align-items:center; gap:62px; width:max-content; animation:lmScroll 48s linear infinite; }
    .lm-item { flex:none; display:inline-flex; align-items:center; height:30px; }
    .lm-item img { height:28px; max-width:118px; object-fit:contain; filter:grayscale(1); opacity:.5; }
    @keyframes lmScroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }
    @media (prefers-reduced-motion: reduce) { .lm-track { animation:none; } }

    /* ── 본 솔루션 카드 — 제품 카탈로그(고유 로고 + 이름 상단) ── */
    .prod-card { position:relative; overflow:hidden; display:flex; flex-direction:column; min-height:206px;
      border-radius:16px; border:1px solid #e7eaf0; background:#fff; padding:24px;
      box-shadow:0 1px 2px rgba(16,24,40,.04), 0 10px 28px -20px rgba(16,24,40,.2);
      transition:transform .22s cubic-bezier(.32,.72,.36,1), box-shadow .22s ease, border-color .22s ease; }
    .prod-card:hover { transform:translateY(-4px); border-color:#d6dce6;
      box-shadow:0 24px 50px -26px rgba(16,24,40,.36); }
    .prod-top { display:flex; align-items:center; gap:12px; }
    .prod-logo { width:40px; height:40px; flex:none; }
    .prod-logo svg { width:100%; height:100%; display:block; }
    .prod-name { font-size:17.5px; font-weight:600; letter-spacing:-.01em; line-height:1.15; color:#16191f; }
    .prod-desc { margin-top:13px; font-size:12.5px; line-height:1.55; color:#5b6473; flex:1; }
    .prod-meta { display:flex; flex-wrap:wrap; gap:5px; margin-top:13px; }
    .prod-badge { font-size:9.5px; font-weight:600; letter-spacing:.03em; padding:3px 8px; border-radius:6px;
      color:#5b6473; background:#f3f5f9; border:1px solid #e7eaf0; }
    .prod-cta { margin-top:14px; display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--acc); transition:gap .22s ease; }
    .prod-card:hover .prod-cta { gap:10px; }

    /* ── DEEP Agent Hub 관문 헤더(다크 배너) ── */
    .hub-gateway { position:relative; overflow:hidden; display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
      margin-bottom:26px; padding:28px 32px; border-radius:18px; color:#fff;
      background:radial-gradient(900px 320px at 12% 0%, #18305c 0%, #0f1b33 62%);
      box-shadow:0 22px 50px -30px rgba(15,27,51,.7); }
    .hg-head { display:flex; align-items:center; gap:11px; }
    .hg-logo { width:34px; height:34px; flex:none; }
    .hg-logo svg { width:100%; height:100%; display:block; }
    .hub-gateway .hg-eyebrow { font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:#7aa2ff; }
    .hub-gateway h2 { font-size:26px; font-weight:600; letter-spacing:-.02em; margin-top:12px; }
    .hub-gateway p { margin-top:9px; font-size:13.5px; line-height:1.55; color:rgba(255,255,255,.6); max-width:560px; }
    .hub-stat { text-align:right; flex:none; line-height:1; }
    .hub-stat b { font-size:42px; font-weight:600; }
    .hub-stat span { font-size:13px; color:rgba(255,255,255,.6); margin-left:5px; }
    @media (max-width:640px){ .hub-gateway{ flex-direction:column; align-items:flex-start; } .hub-stat{ text-align:left; } }

    .sol-hero-bg { position:absolute; inset:0; pointer-events:none;
      background:
        radial-gradient(920px 420px at 22% -12%, rgb(var(--k-primary) / .22), transparent 60%),
        radial-gradient(760px 400px at 92% 8%, rgba(124,58,237,.14), transparent 60%); }

    .module-item { transition: background-color .12s ease, color .12s ease; }
    .module-item.is-active { background:rgb(var(--k-primaryWeak)); color:rgb(var(--k-primaryDeep)); }
    .module-item.is-active .module-bar { opacity:1; }

    /* OCR 그리드 비율 전환 — 인식 시작/종료 시 부드럽게 (드래그 중엔 JS가 transition:none으로 즉시 반응) */
    #ocr-ws-grid { transition: grid-template-columns .5s cubic-bezier(.4,0,.2,1); }
    /* 문서 뷰어: 드래그=팬(grab), 휠=줌 */
    #viewer-scroll { cursor: grab; }
    /* 줌인 시 왼쪽/위쪽이 스크롤로 닿도록 — 콘텐츠가 넘칠 때만 start 정렬(safe), 맞으면 중앙정렬 유지 */
    #viewer-scroll, #pr-viewer { justify-content: safe center; align-items: safe start; }
    #viewer-scroll.viewer-grabbing { cursor: grabbing; }
    #viewer-scroll.viewer-grabbing * { cursor: grabbing !important; }
    /* bbox 스타일 — 실구현 FE(Joy 디졸브, JUNGLETFT-2043) 역이식: 테두리 대신 바깥선 3px 박스섀도 + 컨피던스 색 18% 틴트 배경 */
    .ocr-bbox { position:absolute; border:none; border-radius:1px; cursor:pointer; background:color-mix(in srgb, var(--bbox-color, #9ca3af) 18%, transparent); box-shadow:0 0 0 3px var(--bbox-color, #9ca3af); transition: box-shadow .15s, background-color .15s; }
    .ocr-bbox:hover, .ocr-bbox.is-active { box-shadow:0 0 0 3px var(--bbox-color, #9ca3af), 0 0 0 6px rgb(var(--k-primary) / .18); background:color-mix(in srgb, var(--bbox-color, #9ca3af) 28%, transparent); }
    .ocr-bbox.is-active { animation: bboxPulse .5s ease-out 1; }
    /* 실구현 정합(JUNGLETFT-2154): 인식 종료 후 상시 표시하는 전체 필드 위치 — 얇은 회색 아웃라인(채움 없음).
       선택된 항목만 is-active(파란 강조)로 위에 덮이며 대비된다. */
    .ocr-bbox.is-rest { animation:none; background:transparent; box-shadow:0 0 0 2px rgba(75,85,99,.6); }
    /* 박스를 눌러 그 값을 바로 고친다(JUNGLETFT-2650). 눌리는 자리임이 보이도록 호버를 준다. */
    .ocr-bbox.is-rest:hover { background:rgb(var(--k-primary) / .10); box-shadow:0 0 0 2px rgb(var(--k-primary)), 0 0 0 5px rgb(var(--k-primary) / .18); }
    /* 마스킹 항목 — 검정 가림 박스가 위를 덮으므로 클릭만 받는 투명 박스로 둔다. */
    .ocr-bbox.is-hit, .ocr-bbox.is-hit:hover { background:transparent; box-shadow:none; }
    @keyframes bboxPulse { 0% { box-shadow:0 0 0 3px var(--bbox-color, #9ca3af), 0 0 0 14px rgb(var(--k-primary) / .3); } 100% { box-shadow:0 0 0 3px var(--bbox-color, #9ca3af), 0 0 0 6px rgb(var(--k-primary) / .18); } }
    /* SSE 스트리밍 중: 인식 항목 박스가 다음 항목으로 부드럽게 이동(스캔) — 이동 모델은 목업 고유, 시각은 Joy 스타일 */
    .ocr-bbox.is-stream { transition: left .42s cubic-bezier(.4,0,.2,1), top .42s cubic-bezier(.4,0,.2,1), width .42s cubic-bezier(.4,0,.2,1), height .42s cubic-bezier(.4,0,.2,1), box-shadow .3s ease; background:color-mix(in srgb, var(--bbox-color, rgb(var(--k-primary))) 18%, transparent); box-shadow:0 0 0 3px var(--bbox-color, rgb(var(--k-primary))), 0 0 0 6px rgb(var(--k-primary) / .16); }
    .result-row { transition: background-color .12s; }
    .result-row.is-active { background:#f3f4f6; }
    /* 업스테이지식 KV 테이블 — 호버·선택 시 셀 배경 전환 */
    .result-row:hover .kv-key { background:#f1f5f9 !important; }
    .result-row:hover .kv-val { background:#fafbfc !important; }
    .result-row.is-active .kv-key { background:#eef0f2 !important; }
    .result-row.is-active .kv-val { background:#f3f4f6 !important; }
    /* 저신뢰(경고) value 셀은 호버·선택 시에도 주황 배경 유지 — 인라인 bg-amber-50가 위 호버 규칙에 덮이지 않도록 더 높은 명시도로 보존 */
    .result-row:hover .kv-val.bg-amber-50,
    .result-row.is-active .kv-val.bg-amber-50 { background:#fef3c7 !important; }

    /* 활성 탭 — 밑줄만 브랜드 파랑으로 강조하고 글자는 먹색으로 둔다. DEEP Parser 결과 탭, 내보내기 모달 탭과 같은 규칙이다(2026-08-18 통일). */
    .tab-active { color:rgb(var(--k-text1)); border-color:rgb(var(--k-primary)); }
    .top-tab.is-active { background:rgb(var(--k-primaryWeak)); color:rgb(var(--k-primaryDeep)); }
    .list-scroll { scrollbar-width: thin; scrollbar-color:#d1d5db transparent; scrollbar-gutter: stable; }
    .list-scroll::-webkit-scrollbar { width:6px; }
    .list-scroll::-webkit-scrollbar-thumb { background:#d1d5db; border-radius:3px; }
    button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline:2px solid rgb(var(--k-primary)); outline-offset:2px; border-radius:6px; }
/* 컨테이너(focus-within 보더)가 포커스 표시를 담당하는 입력은 내부 outline 제거 — 이중 박스 방지 */
#copilot-input:focus-visible,
#cat-search:focus-visible,
#rec-search:focus-visible,
#result-pane textarea:focus-visible,
#ov-search:focus-visible,
#vw-page-input:focus-visible,
#ic-pane textarea:focus-visible,
#sc-search:focus-visible,
#ic-search:focus-visible,
#sc-ov-search:focus-visible { outline: none; }
/* 검증 메뉴 뷰어도 DEEP OCR처럼 넘칠 때만 왼쪽 위 정렬. 그냥 가운데 정렬이면 확대했을 때 왼쪽이 잘려 스크롤로 닿지 않는다 */
#sc-viewer, #ic-viewer { justify-content: safe center; align-items: safe start; }

    /* 토스트 — 화면 아래 가운데 한 곳에서만 뜬다. 가운데 정렬은 이 통(#toast-host)이 맡고 낱개는 세로 이동만 한다.
       예전에는 낱개가 fixed + left:50%이고 가운데 정렬을 애니메이션의 transform에 기대고 있었다. 그래서
       애니메이션이 적용되기 전 프레임이나 애니메이션이 꺼진 환경에서 좌우로 밀려 보였고, 여러 건이 같은 자리에 겹쳐
       마지막 것만 읽혔다(2026-08-12). 모달(z 240)보다 위에 둬야 모달 위에서 띄운 알림이 가려지지 않는다. */
    #toast-host { position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%); z-index: 400;
                  display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
    .toast-item { display: inline-flex; align-items: center; gap: 8px; max-width: min(560px, 90vw); padding: 10px 16px;
                  border-radius: 0; color: #fff; font-size: 13px; line-height: 1.45; box-shadow: 0 8px 24px rgba(15,23,42,.22); }
    /* 컨셉 색 — 전부 디자인 토큰이다. 삭제와 안내는 둘 다 어두운 중립색이라 아이콘(휴지통·정보)으로 구분한다. */
    .toast-success { background: rgb(var(--k-success)); }
    .toast-delete  { background: rgb(var(--k-carbon)); }
    .toast-warn    { background: rgb(var(--k-warning)); }
    .toast-error   { background: rgb(var(--k-error)); }
    .toast-info    { background: rgb(var(--k-text1)); }
    .toast-item > svg { flex: 0 0 auto; }
    .toast-text { min-width: 0; }
    /* 되돌리기 토스트. 글자 단추만 두고 배경은 토스트 색을 따른다 */
    .toast-undo { flex: 0 0 auto; margin-left: 6px; padding: 2px 8px; border: 1px solid rgba(255,255,255,.45); background: transparent; color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; pointer-events: auto; }
    .toast-undo:hover { background: rgba(255,255,255,.14); }
    #toast-host .toast-item { pointer-events: auto; }
    /* 모듈 목록 위 탭(추출 문서 | 예약 문서). 같은 자리에서 목록만 바꾼다. DEEP OCR, DEEP Parser 공용 */
    .hub-ltabs { display: flex; padding: 0 10px; border-bottom: 1px solid rgb(var(--k-line)); background: #fff; }
    .hub-ltab { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 9px 4px 8px; font-size: 12px; font-weight: 600; color: rgb(var(--k-text2)); border-bottom: 2px solid transparent; margin-bottom: -1px; }
    .hub-ltab:hover { color: rgb(var(--k-text1)); }
    .hub-ltab.is-active { color: rgb(var(--k-primary)); border-bottom-color: rgb(var(--k-primary)); }
    .hub-ltab-n { font-size: 10.5px; font-weight: 700; line-height: 1; padding: 2px 5px; border-radius: 0; background: rgb(var(--k-bg)); color: rgb(var(--k-text2)); }
    .hub-ltab.is-active .hub-ltab-n { background: rgb(var(--k-primary) / .12); color: rgb(var(--k-primary)); }
    /* 상단바 휴지통 아이콘의 건수 배지. 휴지통은 자주 볼 곳이 아니라 키컬러를 쓰지 않고 회색으로 둔다(2026-10-19 Benson) */
    .hub-count { position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 0; background: #fff; border: 1px solid rgb(var(--k-line)); color: rgb(var(--k-text2)); font-size: 10px; font-weight: 600; line-height: 14px; text-align: center; }
    @keyframes toastIn { from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:translateY(0); } }
    @keyframes toastOut { to{ opacity:0; transform:translateY(12px); } }
    .toast-in { animation: toastIn .18s ease-out both; }
    .toast-out{ animation: toastOut .18s ease-in both; }
    .spinner { width:14px; height:14px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation: spin .7s linear infinite; }
    @keyframes spin { to { transform: rotate(360deg); } }
    /* SSE JSON 스트림 커서 */
    .stream-caret { display:inline-block; width:7px; height:13px; margin-left:1px; vertical-align:-2px; background:#6ee7b7; border-radius:1px; animation: streamBlink 1s steps(1,end) infinite; }
    @keyframes streamBlink { 50% { opacity:0; } }
    .copilot-msg { animation: fadeUp .25s ease-out both; }
    /* 코파일럿 타자기(SSE 풍) — 텍스트 글자 점진 노출 + 진행 캐럿 */
    .cp-tw-ch { opacity: 0; }
    .cp-tw-ch.is-on { opacity: 1; }
    .cp-tw-caret {
      display: inline-block; width: 6px; height: 12px; margin: 0 1px; vertical-align: -1px;
      background: rgb(var(--k-primary)); border-radius: 1px;
      animation: streamBlink 1s steps(1,end) infinite;
    }
    .cp-act.cp-tw-pending { opacity: .55; cursor: default; }
    @media (prefers-reduced-motion: reduce) { .cp-tw-ch { opacity: 1; } .cp-tw-caret { display:none; } }
    /* 코파일럿 item 칩: key:(value) 클릭 가능 객체 */
    .cp-chip {
      display: inline-flex; flex-direction: column; align-items: flex-start;
      margin: 2px 4px 2px 0; padding: 4px 10px; max-width: 100%;
      background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
      cursor: pointer; transition: border-color .12s, box-shadow .12s; text-align: left;
    }
    .cp-chip:hover { border-color: rgb(var(--k-primary)); box-shadow: 0 2px 8px -2px rgb(var(--k-primary) / .3); }
    /* TOP5 등 칩 목록: 한 줄에 하나씩 세로 스택 */
    .cp-chips-col { display: flex; flex-direction: column; align-items: stretch; gap: 4px; margin-top: 6px; }
    .cp-chips-col .cp-chip { margin: 0; width: 100%; }
    .cp-chips-col .cp-chip .v { max-width: 100%; }

    /* 인식 완료 후 핵심 항목(TOP5) — 눈에 띄는 강조 카드 */
    .cp-featured {
      position: relative;
      background: #fff;
      border: 1px solid rgb(var(--k-line));
      border-top: 3px solid rgb(var(--k-primary));
      border-radius: 12px;
      padding: 12px 13px 13px;
      box-shadow: 0 2px 8px -4px rgba(16,24,40,.08);
      animation: cpFeaturePop .42s cubic-bezier(.32,.72,.36,1) both;
    }
    .cp-featured::before { display:none; }
    @keyframes cpFeaturePop {
      0%   { opacity:0; transform: translateY(10px) scale(.97); }
      55%  { box-shadow: 0 0 0 6px rgb(var(--k-primary) / .14), 0 14px 32px -16px rgb(var(--k-primary) / .55); }
      100% { opacity:1; transform:none; }
    }
    .cp-feat-head { display:flex; align-items:center; gap:7px; margin-bottom:1px; }
    .cp-feat-warn { display:grid; place-items:center; flex:none; color:#ef4444; }   /* 결과 패널 검수 필요 아이콘(text-red-500)과 동일 */
    .cp-feat-warn svg { width:16px; height:16px; }
    .cp-feat-title { font-size:14px; font-weight:600; letter-spacing:-.01em; color:rgb(var(--k-primaryDeep)); }
    .cp-feat-chip { margin-left:auto; font-size:10px; font-weight:600; padding:2px 8px; border-radius:999px;
      background:#fee2e2; color:#b91c1c; border:1px solid #fecaca; white-space:nowrap; }
    .cp-feat-chip.is-ok { background:#ecfdf5; color:#047857; border-color:#a7f3d0; }
    .cp-feat-sub { font-size:11.5px; color:#64748b; margin:2px 0 0; }
    .cp-feat-foot { font-size:12px; color:#475569; margin-top:9px; line-height:1.5; }
    @media (prefers-reduced-motion: reduce) { .cp-featured { animation: none; } }
    .cp-chip .k { font-size: 11.5px; font-weight:600; color: #6b7280; }
    .cp-chip .v { font-size: 13.5px; font-weight: 600; color: #1f2937; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .cp-chips-col .cp-chip .v { font-size: 14px; }
    .cp-act {
      display: inline-flex; align-items: center; gap: 4px; margin: 4px 4px 0 0;
      padding: 6px 12px; background: rgb(var(--k-primary)); color: #fff; border-radius: 8px;
      font-size: 12px; font-weight:600; cursor: pointer; transition: background .12s;
    }
    .cp-act:hover { background: rgb(var(--k-primaryDeep)); }
.cp-act-ghost { background: #f3f4f6; color: #374151; }
.cp-act-ghost:hover { background: #e5e7eb; }
.cp-act-outline { background: #fff; color: rgb(var(--k-text1)); border: 1px solid rgb(var(--k-border)); font-weight: 600; }
.cp-act-outline:hover { background: rgb(var(--k-bg)); border-color: rgb(var(--k-primary)); color: rgb(var(--k-primary)); }
/* 칩 인라인 플래그 (민감·저신뢰·확인됨) */
.cpf { display: inline-flex; align-items: center; vertical-align: -1px; margin: 0 1px; }
.cpf-sens { color: #f59e0b; }
.cpf-sens svg { width: 10px; height: 10px; }
.cpf-low { font-size: 10px; font-weight:600; color: #dc2626; background: #fee2e2; border-radius: 999px; padding: 0 4px; margin-left: 3px; }
.cpf-red { font-size: 10px; font-weight:600; color: #b91c1c; background: #fee2e2; border-radius: 999px; padding: 0 4px; margin-left: 3px; }
.cpf-done { color: #059669; }
.cpf-done svg { width: 10px; height: 10px; }
/* 확인 필요(저신뢰) — key 앞 주의 표시. 확인하면 제거됨 */
.cpf-warn { color: #ef4444; margin: 0 4px 0 0; }
.cpf-warn.is-red { color: #b91c1c; }
.cpf-warn svg { width: 13px; height: 13px; }
.cp-chip.is-done { border-color: #6ee7b7; background: #f0fdf9; }
    @keyframes fadeUp { from{ opacity:0; transform: translateY(6px); } to{ opacity:1; transform: translateY(0); } }

    .conf-pill { font-size:10px; font-weight:600; padding:1px 6px; border-radius:999px; line-height:1.4;
      min-width:40px; text-align:center; display:inline-block; font-variant-numeric:tabular-nums; }
    .conf-high { background:#ecfdf5; color:#047857; }
    .conf-mid  { background:#fef3c7; color:#92400e; }
    .conf-low  { background:#fee2e2; color:#991b1b; }

    .hidden-image-bg { background-image:
      linear-gradient(45deg,#f3f4f6 25%,transparent 25%,transparent 75%,#f3f4f6 75%),
      linear-gradient(45deg,#f3f4f6 25%,transparent 25%,transparent 75%,#f3f4f6 75%);
      background-size:16px 16px; background-position:0 0,8px 8px; }

/* ── GNB — 펼침/접힘 동일한 KDL 딥네이비 레일 (접힘 = 폭만 축소) ── */
/* Figma 디자이너 시안: GNB = 라이트 화이트 사이드바(템플릿 bg-white·dark 텍스트 사용). active = 옅은 회색 하이라이트 + 버밀리언 모듈바. */
#ws-root > aside .module-item.is-active { background: #f3f4f6; color: rgb(var(--k-text1)); font-weight: 500; }
#ws-root > aside .module-item.is-active .text-kdl-primaryDeep { color: rgb(var(--k-text1)); }
#ws-root > aside .module-item:hover { background: rgb(var(--k-bg)); }
#ws-root > aside .module-item .module-bar { background: rgb(var(--k-primary)); }
#ws-root > aside #profile-btn:hover { background: rgb(var(--k-bg)); }

/* ── 펼치기 핸들 — 접힘 상태에서 레일 호버 시 경계선 위로 노출 ── */
#ws-root { position: relative; }
#nav-handle { position: absolute; top: 31px; left: 64px; transform: translate(-50%,-50%); z-index: 40;   /* 펼침 상태의 접기 아이콘과 동일 높이 */
  width: 30px; height: 30px; border-radius: 9999px; background: #fff; border: 1px solid #e2e8f0;
  box-shadow: 0 2px 10px rgba(2,6,23,.3); display: grid; place-items: center; color: rgb(var(--k-primary));
  opacity: 0; pointer-events: none; transition: opacity .15s ease, background-color .12s ease; }
#ws-root.nav-collapsed > aside:hover ~ #nav-handle,
#ws-root.nav-collapsed #nav-handle:hover { opacity: 1; pointer-events: auto; }
#nav-handle:hover { background: rgb(var(--k-primaryWeak)); }
#ws-root.nav-collapsed #nav-collapse { display: none; }

/* ── 접힘: 폭·정렬만 변경 ── */
#ws-root.nav-collapsed { grid-template-columns: 64px 1fr; }
#ws-root.nav-collapsed [data-nav-label] { display: none; }
#ws-root.nav-collapsed #nav-top { flex-direction: column; gap: 10px; margin-bottom: 12px; }
#ws-root.nav-collapsed #nav-home { width: 100%; justify-content: center; }
#ws-root.nav-collapsed #nav-home img { width: 34px; height: 34px; border-radius: 9px; padding: 5px; object-fit: contain; }
#ws-root.nav-collapsed #domain-row { flex-direction: column; justify-content: center; gap: 5px; }
#ws-root.nav-collapsed #domain-name { font-size: 11px; line-height: 1.2; color: #fff; }
#ws-root.nav-collapsed .module-item { justify-content: center; padding-left: 0; padding-right: 0; }
#ws-root.nav-collapsed #profile-btn { justify-content: center; padding-left: 0; padding-right: 0; }

/* 첫 진입 스포트라이트 — [파일 업로드] 버튼 강조 */
.spot-pulse { position: relative; z-index: 50; animation: spotPulse 1.6s ease-out infinite; }
@keyframes spotPulse { 0% { box-shadow: 0 0 0 0 rgb(var(--k-primary) / .55); } 100% { box-shadow: 0 0 0 16px rgb(var(--k-primary) / 0); } }

/* 포탈 메인 배너 탭 진행바 — 5초 순환과 동기화 */
.hero-prog { width: 0; animation: heroProg 5s linear forwards; }
@keyframes heroProg { from { width: 0; } to { width: 100%; } }

/* 워크스페이스 칼럼 리사이저 — 뷰어↔결과 경계 드래그 핸들 */
.col-resize-handle { position: absolute; left: 0; top: 0; bottom: 0; width: 7px; cursor: col-resize; z-index: 30; }
.col-resize-handle::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: transparent; transition: background-color .12s; }
.col-resize-handle:hover::after, .col-resize-handle.dragging::after { background: rgb(var(--k-primary)); }

/* 대시보드 — 라인 드로우·바 성장 애니메이션 */
.dash-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: dashDraw .9s ease-out forwards; }
@keyframes dashDraw { to { stroke-dashoffset: 0; } }
.dash-bar { transform-origin: left center; animation: barGrow .7s ease-out both; }
@keyframes barGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* 리스트 오버레이 — 체크박스·일괄 액션 바 */
.ov-ck { width: 15px; height: 15px; accent-color: rgb(var(--k-primary)); cursor: pointer; }
#ov-bulk { animation: fadeUp .2s ease-out both; }

/* AI 에이전트 — 액션 버튼 래퍼·마스킹 칩 상태 (P1 QA 보강) */
.cp-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
/* 답변이 흐르는 동안 버튼·칩은 보이되 눌리지 않는다 (DEEP OCR .cp-act.cp-tw-pending과 같은 처리) */
.pq-item.cp-tw-pending, .cp-chip.cp-tw-pending { opacity: .55; cursor: default; }
.cpf-on  { font-size: 9px; font-weight:600; color: #047857; background: #d1fae5; border-radius: 999px; padding: 0 5px; margin-left: 4px; }
.cpf-off { font-size: 9px; font-weight:600; color: #6b7280; background: #f3f4f6; border-radius: 999px; padding: 0 5px; margin-left: 4px; }
.cp-mask-chip.is-masked { border-color: #f59e0b; background: #fffbeb; }

/* ── 마이크로 인터랙션 일괄 (2026-06-13) — transform/opacity 한정, 레이아웃 무영향 ── */
/* 전역: 버튼 프레스 피드백 + 입력 포커스 전환 */
button:not(:disabled) { transition: transform .1s ease, background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease; }
button:active:not(:disabled) { transform: scale(.96); }
input, textarea { transition: background-color .15s ease, border-color .15s ease; }

/* 화면 전환: 메인 콘텐츠 페이드 인 (opacity만 — 재렌더 시 부드러운 진입) */
@keyframes pageFade { from { opacity: 0; } to { opacity: 1; } }
#main > * { animation: pageFade .22s ease-out; }

/* GNB: 활성 모듈 바 등장 */
.module-bar { transform-origin: center; animation: barIn .22s ease-out; }
@keyframes barIn { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* 인식건 리스트: 항목 전환 + 썸네일 호버 */
.rec-item { transition: background-color .12s ease; }
.rec-item img { transition: transform .15s ease; }
.rec-item:hover img { transform: scale(1.05); }

/* KV 테이블: 활성 행 좌측 액센트 */
/* 활성 행 좌측 외곽선 제거 (프라이머리 강조 X) */

/* 저장 성공 플래시 */
.saved-flash { animation: savedFlash .7s ease-out; }
@keyframes savedFlash { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,.55); } 100% { box-shadow: 0 0 0 14px rgba(16,185,129,0); } }

/* 오버레이 시트 닫힘 */
.ov-closing { animation: ovOut .15s ease-in both; }
@keyframes ovOut { to { opacity: 0; } }

/* AI 에이전트 칩·액션 호버 미세 리프트 */
.cp-chip { transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease; }
.cp-chip:hover { transform: translateY(-1px); }

/* 대시보드 카드 호버 리프트 */
.dash-card { transition: transform .15s ease, box-shadow .15s ease; }
.dash-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -10px rgba(15,23,42,.18); }

/* 새로고침 아이콘 스핀 */
.spin-once { animation: spin .45s ease-out; }

/* AI 에이전트 패널 접기/펼치기 */
.agent-expand-bar { display: none; }
.is-agent-collapsed .agent-full { display: none; }
.is-agent-collapsed .agent-expand-bar {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  width: 100%; height: 100%; padding-top: 12px;
  background: #fff; border: 0; cursor: pointer;
  transition: background .15s ease;
}
.is-agent-collapsed .agent-expand-bar:hover { background: #f9fafb; }
.agent-expand-bar .agent-expand-chev { color: #9ca3af; display: inline-flex; }
.agent-expand-bar:hover .agent-expand-chev { color: rgb(var(--k-primary)); }
.agent-expand-bar .agent-expand-ic {
  width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center;
  background: rgb(var(--k-primaryWeak)); color: rgb(var(--k-primary));
}
.agent-expand-bar .agent-expand-label {
  writing-mode: vertical-rl; text-orientation: upright;
  font-size: 12px; font-weight: 600; color: #6b7280; letter-spacing: .14em;
}

/* 문서 뷰어 마스킹 가림 박스 — 각진 픽셀 모자이크(내용 완전 가림) */
.mask-box {
  position: absolute;
  border-radius: 0;            /* 각진 사각형 — 라운드 제거 */
  opacity: 1;
  overflow: hidden;
  background-color: #1f2937;   /* 불투명 베이스(완전 가림) */
  background-image:
    linear-gradient(45deg, #111827 25%, transparent 25%, transparent 75%, #111827 75%),
    linear-gradient(45deg, #374151 25%, transparent 25%, transparent 75%, #374151 75%),
    linear-gradient(0deg,  #2b3445 50%, #1b2230 50%);
  background-size: 6px 6px, 6px 6px, 6px 6px;
  background-position: 0 0, 3px 3px, 0 0;
  box-shadow: 0 0 0 1px #0b1120;   /* 얇은 각진 외곽선(라운드 없음) */
  image-rendering: pixelated;
}

/* Katie 디자인(1.12): 좌측 윤곽선·확인 배경 제거. 저신뢰 value 셀은 render의 bg-amber-50 인라인만 사용,
   해소(편집·확인)는 파란 체크로 표시. 확인 순간 1회 파란 배경 펄스. */
.result-row.confirm-flash .kv-val { animation: confirmPulse .7s ease-out; }
@keyframes confirmPulse { 0% { background: #dbeafe; } 100% { background: transparent; } }

/* 검수 상태 아이콘 — 명시적 클릭 대상(경고=확인함 승인, 파란 체크(확인함)=취소 토글).
   히트 영역 확보(패딩으로 확대, 레이아웃 영향 없게 네거티브 마진 상쇄) + 호버 배경으로 클릭 가능함을 드러냄.
   수정됨 체크(.is-toggle 없음)는 클릭 대상이 아니므로 그대로 둔다. */
.review-warn, .review-done.is-toggle, .tcell-edited.is-toggle {
  cursor: pointer;
  padding: 5px;
  margin: -5px;
  border-radius: 7px;
  display: inline-flex;
  transition: background .12s ease;
}
.review-warn:hover { background: rgba(239, 68, 68, .12); }
.review-done.is-toggle:hover, .tcell-edited.is-toggle:hover { background: rgba(41, 112, 255, .12); }

/* DEEP OCR 필드 결과 컨피던스 상시 노출. 상태색보다 정보 위계를 낮춰 값 읽기를 방해하지 않는다. */
.confidence-score {
  flex: 0 0 auto;
  min-width: 0;
  color: #64748b;
  font-size: 11px;
  font-weight: 500;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  text-align: right;
  white-space: nowrap;
}
.confidence-score.is-low {
  color: #dc2626;
  font-weight: 600;
}
/* value 오른쪽 끝 묶음 — [마스킹 버튼][검수 상태][점수 또는 칩]을 오른쪽 끝에 붙여 담는다.
   칸을 고정하면 빈 칸만큼 버튼이 점수에서 벌어지므로, 있는 것만 4px 간격으로 붙인다.
   점수와 칩의 오른쪽 끝은 묶음이 오른쪽 정렬이라 행이 달라도 같은 자리에 선다.
   최소 폭 58px은 값 칸이 행마다 들쭉날쭉해 보이지 않게 잡아 두는 자리다. */
.confidence-meta {
  flex: 0 0 auto;
  min-width: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}
/* 표 셀 스택 레이아웃: 값 아래 줄에 왼쪽 정렬. 58px 우측정렬 슬롯(KV행 전용)을 무력화 */
.tcell-stack { line-height: 1.25; }
.tcell-stack .confidence-meta {
  flex: 0 0 auto;
  width: auto;
  display: inline-flex;
  justify-content: flex-start;
}
.tcell-stack .confidence-score { text-align: left; }
.confidence-meta .review-warn,
.confidence-meta .review-done {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  margin: 0;
}
.confidence-meta.is-actionable {
  cursor: pointer;
}
.confidence-meta.is-actionable .confidence-score {
  flex-basis: auto;
  min-width: 0;
  width: auto;
}
.confidence-meta.is-actionable:hover .confidence-score,
.confidence-meta.is-actionable:focus-visible .confidence-score {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.confidence-meta:focus-visible {
  outline: 1px solid rgb(var(--k-primary));
  outline-offset: 2px;
}
.ocr-edited-chip {
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 4px;
  border-radius: 3px;
  background: #fef3c7;
  color: #b45309;
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
/* 마스킹 칩 — 수정됨과 같은 규격(16px 높이)에 보라색. 가려진 값이라 추출 신뢰도를
   말할 수 없으므로 점수 칸을 이 칩이 대신한다(2026-08-26). */
.ocr-mask-chip {
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 4px;
  border-radius: 3px;
  background: #ede9fe;
  color: #6d28d9;
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

/* 대시보드 추이 차트 호버 인터랙션 */
.dash-bar { cursor: pointer; transition: opacity .12s ease; }
.dash-bar:hover { opacity: .8; }
.dash-dot { cursor: pointer; transition: r .12s ease; }
.dash-dot:hover { r: 5.5; }

/* DEEP Parser 처리중 인디터미넌트 바 */
@keyframes prIndet{0%{transform:translateX(-110%)}100%{transform:translateX(240%)}}
.pr-indet{width:42%;animation:prIndet 1.05s ease-in-out infinite}

/* 인증(로그인·회원가입) 화면은 실구현 FE와 동일 구성 — 유틸리티 클래스만 사용, 전용 CSS 없음 (2026-07-13) */


/* ── Key 수정 드래그&드롭 ── */
.ke-grip, .ke-ggrip{ cursor:grab; touch-action:none; }
.ke-grip:active, .ke-ggrip:active{ cursor:grabbing; }
.ke-drag-ghost{ opacity:.4; }
.ke-drop-row > td{ box-shadow: inset 0 2px 0 0 rgb(var(--k-primary)); }   /* 대상 행 위에 드롭 라인 */
.ke-drop-into{ outline:2px dashed rgb(var(--k-primary)); outline-offset:-2px; border-radius:12px; }

/* Key 수정 테이블 — 템플릿 관리 스타일 정합: 셀 안 테두리 없는 입력, 이름열 옅은 회색, 얇은 셀 구분선, 포커스 시 밑줄 */
.ke-tbl-input{ width:100%; height:40px; border:0; background:transparent; padding:0 12px; font-size:12px; color:rgb(var(--k-text1)); outline:0; }
.ke-tbl-input::placeholder{ color:#c5ccd6; opacity:1; }   /* 디스크립션 placeholder는 값과 헷갈리지 않게 라이트 그레이 */
.ke-tbl-input:focus{ background:#fff; box-shadow: inset 0 -2px 0 rgb(var(--k-primary)); }
.ke-tbl-input.ke-compact{ height:32px; padding:0 8px; }   /* 표 편집기 셀 — 행 수 많아 높이 축소 */
.ke-tbl-key{ font-weight:600; }
select.ke-tbl-input{ cursor:pointer; }
/* 타입 커스텀 드롭다운 버튼 — 네이티브 select 대체(디자인 시스템) */
.ke-type-btn{ display:flex; align-items:center; justify-content:space-between; gap:6px; text-align:left; cursor:pointer; }
.ke-type-btn:hover{ background:#fafbfc; }
.ke-type-btn:focus-visible{ outline:none; box-shadow: inset 0 -2px 0 rgb(var(--k-primary)); }
.ke-namecol{ background:#fff; }
.ke-celldiv{ border-right:1px solid #e8ebf0; }
.ke-rowline > td{ border-bottom:1px solid #e8ebf0; transition: background-color .12s ease; }
.ke-rowline:hover > td{ background:#fafbfc; }   /* 편집 중 행 시선 고정 */
/* 라이브러리 카드 즐겨찾기 별 — 켜짐과 무관하게 항상 보인다(2026-08-19 Benson).
   호버해야 나타나면 그 카드를 즐겨찾기에 담을 수 있다는 것 자체를 알 수 없다. */
.lib-fav{ width:28px; height:28px; display:grid; place-items:center; border:0; background:transparent; color:#94a3b8; opacity:1; cursor:pointer; transition: background-color .12s ease, color .12s ease; }
.lib-fav:hover{ background:#f1f5f9; color:#334155; }
.lib-fav.is-favorite{ color: rgb(var(--k-favorite)); opacity:1; }   /* 즐겨찾기 켜짐 — 별 색은 전용 토큰 하나로 고정한다 */
.lib-fav.is-favorite svg{ fill:currentColor; }
.ke-thead > th{ border-bottom:1px solid #e8ebf0; }
/* 직접 필드·서브그룹·추가 버튼을 한 표에 담는다(2026-08-12) — 표를 나누면 열 너비가 서로 어긋나 키·타입·디스크립션이 줄 맞지 않는다 */
.ke-sgrow > td{ background:#f8fafc; border-bottom:1px solid #e8ebf0; }
.ke-addrow > td{ border-bottom:1px solid #e8ebf0; }
.ke-addrow:last-child > td{ border-bottom:0; }
.ke-subrow > td.ke-subbar{ box-shadow: inset 2px 0 0 #dfe4ea; }   /* 서브그룹 소속을 왼쪽 세로줄로 표시 */
/* 그룹·표·서브그룹 제목 — 헤더 바 위 테두리 없는 텍스트, 포커스 시에만 밑줄 */
.ke-title-input{ border:0; background:transparent; outline:0; }
.ke-title-input:focus{ background:#fff; box-shadow: inset 0 -2px 0 rgb(var(--k-primary)); }
/* 전역 input:focus-visible 둥근 아웃라인(styles.css 상단)이 셀 정렬을 깨므로, Key 수정 셀 입력은 예외 처리하고 밑줄 강조만 유지 */
.ke-tbl-input:focus-visible, .ke-title-input:focus-visible{ outline:none; border-radius:0; }   /* 전역 focus-visible이 radius 6px을 씌워 밑줄이 셀 밖으로 휘어 보이던 문제 차단 */

/* 문서 분류 결과 — PPASS 페이지 분류 요약 스타일: 큰 페이지 카드가 겹쳐 묶이고, 하단 칩으로 유형 필터 */
.cls-rail-wrap{ padding:16px 16px 12px; background:linear-gradient(180deg,#fff,#fbfcfe); }
/* 한 줄 고정 높이 — 페이지가 많으면 세로로 늘리지 않고 가로 스크롤. 겹침 없이 온전히 노출. 리프트 여유 위해 높이 확보(2026-08-06 Benson) */
.cls-rail{ display:flex; flex-wrap:nowrap; align-items:flex-end; gap:9px; height:82px; overflow-x:auto; overflow-y:hidden; padding-bottom:10px; }
/* 묶음 모드(분류 없이 멀티페이지만) — 색을 쓰지 않으므로 묶음 경계를 간격으로만 알린다. 그래서 더 벌린다(2026-08-19). */
.cls-rail.is-group{ gap:22px; }
/* 스크롤바 상시 노출(얇게 6px) — 가로로 넘치는 걸 바로 알 수 있게. 호버 시 진하게 */
.cls-rail, .cls-chips{ scrollbar-width: thin; scrollbar-color: rgba(100,116,139,.4) transparent; }
.cls-rail:hover, .cls-chips:hover{ scrollbar-color: rgba(100,116,139,.6) transparent; }
.cls-rail::-webkit-scrollbar, .cls-chips::-webkit-scrollbar{ height:6px; }
.cls-rail::-webkit-scrollbar-thumb, .cls-chips::-webkit-scrollbar-thumb{ background:rgba(100,116,139,.4); border-radius:3px; }
.cls-rail:hover::-webkit-scrollbar-thumb, .cls-chips:hover::-webkit-scrollbar-thumb{ background:rgba(100,116,139,.6); }
.cls-rail::-webkit-scrollbar-track, .cls-chips::-webkit-scrollbar-track{ background:transparent; }
/* 우측 페이드 — 잘린 게 아니라 이어진다는 시각 신호 */
.cls-rail-wrap{ position:relative; }
.cls-chips-wrap{ position:relative; }
.cls-rail-wrap::after, .cls-chips-wrap::after{ content:''; position:absolute; top:0; bottom:10px; right:0; width:28px; background:linear-gradient(90deg, rgba(255,255,255,0), #fff 85%); pointer-events:none; }
.cls-cluster{ display:inline-flex; align-items:flex-end; gap:3px; }   /* 같은 건은 좁게, 건 사이는 rail gap으로. 겹치지 않음 */
.cls-page{
  position:relative; width:42px; height:56px; flex:none; border-radius:0;   /* 각진 카드 — 앱 전체 모서리 0과 같다(2026-08-18) */
  border:1.5px solid color-mix(in srgb, var(--c) 42%, #fff);
  background:color-mix(in srgb, var(--c) 9%, #fff);
  color:color-mix(in srgb, var(--c) 88%, #0f172a);
  font-size:13.5px; font-weight:700; display:grid; place-items:center;
  cursor:pointer; box-shadow:0 2px 6px rgba(15,23,42,.12);
  -webkit-user-select:none; user-select:none;
  transition: transform .22s ease, box-shadow .22s ease, opacity .22s ease, filter .22s ease;
}
/* 한 장에 마우스를 올리면 같은 묶음의 장들이 함께 떠오른다. 어디부터 어디까지가 한 문서인지
   색이나 글자 없이 움직임만으로 알린다(2026-08-19 Benson). 올린 장만 조금 더 떠올라 지금 가리키는 곳도 남는다. */
.cls-cluster:hover .cls-page{ transform:translateY(-4px); box-shadow:0 7px 16px rgba(15,23,42,.18); }
.cls-page:hover{ transform:translateY(-7px); box-shadow:0 9px 20px rgba(15,23,42,.22); z-index:80 !important; }
/* 전역 button:not(:disabled) transition(579행)보다 명시도를 올려 스르륵 트랜지션 보장 */
button.cls-page{ transition: transform .24s ease, box-shadow .24s ease, opacity .24s ease, filter .24s ease; }
/* 칩 강조: 매칭 카드는 스르륵 위로, 나머지는 부드럽게 흐려짐(재렌더 없이 클래스 토글로 트랜지션) */
.cls-page.is-lift{ transform:translateY(-6px); box-shadow:0 6px 14px rgba(15,23,42,.18); }
.cls-page.is-lift:hover{ transform:translateY(-8px); }
/* 필터로 흐려진 묶음은 마우스를 올려도 함께 떠오르지 않는다(강조 대상과 섞이지 않게). */
.cls-cluster:hover .cls-page.is-dim{ transform:none; box-shadow:none; }
.cls-page.is-dim{ opacity:.28; filter:saturate(.3); box-shadow:none; }
.cls-page.is-dim:hover{ opacity:.7; transform:none; }
/* 유형 필터 칩 — 페이지 레일과 동일하게 한 줄 가로 스크롤 */
.cls-chips{ display:flex; flex-wrap:nowrap; gap:8px; overflow-x:auto; }
.cls-chip{
  display:inline-flex; align-items:center; gap:7px; padding:6px 12px; flex:none; white-space:nowrap;
  border:1px solid #e6e9ef; background:#fff; border-radius:0;
  font-size:12px; font-weight:500; color:#334155; cursor:pointer;
  -webkit-user-select:none; user-select:none;
  transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.cls-chip:hover{ border-color:color-mix(in srgb, var(--c) 45%, #fff); background:color-mix(in srgb, var(--c) 5%, #fff); }
.cls-chip-dot{ width:9px; height:9px; border-radius:0; background:var(--c); flex:none; }
.cls-chip-n{ color:#9aa4b2; font-size:11.5px; }
.cls-chip.is-active{
  border-color:color-mix(in srgb, var(--c) 55%, #fff);
  background:color-mix(in srgb, var(--c) 11%, #fff);
  color:color-mix(in srgb, var(--c) 85%, #0f172a);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c) 42%, #fff);
  font-weight:600;
}
.cls-chip.is-active .cls-chip-n{ color:color-mix(in srgb, var(--c) 55%, #64748b); }
.ke-tbl-input, .ke-title-input{ border-radius:0; }


/* ════ 항목7: 앱 전 영역 radius 0 — 딱딱·정갈 (원형 아바타/도메인 ○만 예외) ════ */
#ws-root [class*="rounded-"]:not([class*="rounded-full"]),
#ws-root [class~="rounded"]:not([class*="rounded-full"]) { border-radius: 0 !important; }
/* body에 직접 붙는 팝업(문서 전체 보기, 휴지통, 크레딧 부족, 결제 카드)은 #ws-root 밖이라 위 규칙을 못 받는다. kdl-sq로 같은 규칙을 준다(2026-10-19) */
.kdl-sq [class*="rounded-"]:not([class*="rounded-full"]),
.kdl-sq [class~="rounded"]:not([class*="rounded-full"]) { border-radius: 0 !important; }
.cp-featured, .cp-act, .cp-act-outline, .cp-chip, .cp-feat-badge, .cp-feat-chip { border-radius: 0 !important; }

/* ════ 항목5: 앱 전반 폰트 한 단계 얇게 (답답함 완화) ════ */
#ws-root .font-bold { font-weight: 600 !important; }
#ws-root .font-semibold { font-weight: 500 !important; }
#ws-root .font-medium { font-weight: 400 !important; }
.kdl-sq .font-bold { font-weight: 600 !important; }
.kdl-sq .font-semibold { font-weight: 500 !important; }
.kdl-sq .font-medium { font-weight: 400 !important; }

/* ════ 저신뢰 컨피던스 호버 툴팁 ════
   표 셀 툴팁은 가로 스크롤 overflow 컨테이너 안에서 CSS ::after가 잘려, body의 fixed 요소로 띄운다(app.js initConfTip · data-conf-tip). 여기 CSS 규칙은 제거했다. dashboard의 data-tip은 SVG라 ::after가 원래 렌더되지 않으며 자체 JS 툴팁(#dash-tip)을 쓴다. */

/* ── DEEP Office 다크 네비 (Kaiel 항목1: 전반 키컬러 전환 — 다크그레이 GNB + Signal Blue) ── */
#ws-root > aside { background:#1E2128; border-color:#2C303A; color:#F5F6F8; }
#ws-root > aside .border-kdl-line { border-color:#2C303A; }
#ws-root > aside .text-kdl-text1 { color:#F5F6F8; }
#ws-root > aside .text-kdl-text2 { color:#9AA3B2; }
#ws-root > aside .hover\:text-kdl-text1:hover { color:#FFFFFF; }
#ws-root > aside .hover\:bg-kdl-bg:hover { background:#2A2F3A; }
#ws-root > aside .module-item { color:#C7CDD8; }
#ws-root > aside .module-item:hover { background:#262B34; }
#ws-root > aside .module-item.is-active { background:#2E3440; color:#FFFFFF; font-weight:600; }
#ws-root > aside .module-item.is-active .text-kdl-primaryDeep { color:#7DA4FF; }
#ws-root > aside .module-item .text-kdl-text2 { color:#8B93A1; }
#ws-root > aside .module-group-label { margin:18px 12px 6px; color:#7f8795; font-size:10px; font-weight:700; letter-spacing:.08em; }
#ws-root > aside #nav-home img { filter:brightness(0) invert(1); opacity:.92; }
#ws-root > aside .text-kdl-primaryDeep { color:#7DA4FF; }

/* ── 파서 진입 추천 질문 카드 — 넘버링 + 호버 인터랙션 ── */
.pq-list { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.pq-item { display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:9px 12px;
  background:#fff; border:1px solid #e5e7eb; border-radius:0; cursor:pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s, background .15s; }
.pq-item:hover { border-color: rgb(var(--k-primary)); box-shadow: 0 4px 12px -4px rgb(var(--k-primary) / .35);
  transform: translateY(-1px); background: rgb(var(--k-primaryWeak) / .45); }
.pq-num { width:20px; height:20px; border-radius:9999px; background: rgb(var(--k-primaryWeak));
  color: rgb(var(--k-primaryDeep)); font-size:11px; font-weight:700; display:grid; place-items:center; flex:none;
  transition: background .15s, color .15s; }
.pq-item:hover .pq-num { background: rgb(var(--k-primary)); color:#fff; }
.pq-text { flex:1; font-size:13px; font-weight:500; color: rgb(var(--k-text1)); line-height:1.45; }
.pq-arrow { color:#c3c9d4; flex:none; opacity:0; transform: translateX(-4px);
  transition: opacity .15s, transform .15s, color .15s; display:grid; place-items:center; }
.pq-item:hover .pq-arrow { opacity:1; transform:none; color: rgb(var(--k-primary)); }

/* 라이브러리 카탈로그 — Joy 리디자인 (FE LibraryCatalog 동일) */
.masonry-item { opacity: 0; transform: translateY(40px); filter: blur(8px); }
.masonry-item.is-in {
  opacity: 1; transform: translateY(0); filter: blur(0);
  transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1), filter .8s cubic-bezier(.22,1,.36,1);
}
.joy-card { transition: border-color .3s ease, box-shadow .3s ease; }
.joy-card.is-in { transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1), filter .8s cubic-bezier(.22,1,.36,1), border-color .3s ease, box-shadow .3s ease; }
.joy-card:hover { border-color: #2970FF !important; box-shadow: 0 0 20px rgba(41,112,255,.28); }


/* ═══ 포탈(다크 히어로 + 방사형 패키지) — FE next-app kdl.css에서 이식 (Joy 트랙, 2026-07-12) ═══ */
/* ── 포탈(osmo 스타일) — Joy 브랜치 선택 반영 ── */
.kdl-portal {
  --portal-bar-width: min(40.74vw, 810px);
  --portal-bar-open-width: min(74vw, 1440px);
  --nav-bar-height: 4.625em;
  font-size: clamp(12px, 0.85vw, 14px);
}

.kdl-portal-top {
  flex-shrink: 0;
  padding-top: 1.5em;
  overflow: visible;
}

.kdl-portal-bar-wrap {
  position: relative;
  width: var(--portal-bar-width);
  max-width: calc(100% - 3em);
  margin-left: auto;
  margin-right: auto;
  transition: width 0.55s cubic-bezier(0.76, 0, 0.24, 1);
}
.kdl-portal-bar-wrap.is-open {
  width: var(--portal-bar-open-width);
}

.kdl-nav-bar-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  width: var(--portal-bar-width);
  max-width: calc(100% - 3em);
  margin-inline: auto;
  transition: width 0.55s cubic-bezier(0.76, 0, 0.24, 1);
}
.kdl-nav-bar-wrap.is-open {
  width: var(--portal-bar-open-width);
}

.kdl-nav-header {
  position: relative;
  z-index: 50;
  flex-shrink: 0;
  width: 100%;
  height: var(--nav-bar-height);
}

.kdl-nav-bar {
  overflow: visible;
  border-radius: 0.5em;
  background: #201d1d;
  box-shadow: 0 0 0 1px rgba(244, 244, 244, 0.08);
}

.kdl-nav-row {
  display: flex;
  height: calc(var(--nav-bar-height) - 0.75em);
  align-items: center;
  justify-content: space-between;
  padding: 0.35em;
}

.kdl-nav-menu-btn {
  display: flex;
  height: 100%;
  align-items: center;
  gap: 0.55em;
  border-radius: 0.167em;
  padding: 0 0.85em 0 0.55em;
  color: #f4f4f4;
  font-family: Arial, sans-serif;
  font-size: 1.35em;
  letter-spacing: -0.02em;
}

.kdl-nav-burger {
  position: relative;
  display: flex;
  width: 1.2em;
  height: 0.35em;
  align-items: center;
}

.kdl-nav-auth-link {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 0.167em;
  padding: 0 1em;
  font-family: Arial, sans-serif;
  font-size: 1.1em;
  letter-spacing: -0.02em;
  transition: background-color 0.2s;
}
.kdl-nav-auth-link--login {
  color: #f4f4f4;
  background: rgba(255, 255, 255, 0.1);
}
.kdl-nav-auth-link--login:hover { background: rgba(255, 255, 255, 0.2); }
.kdl-nav-auth-link--join {
  color: #201d1d;
  background: #a1ff62;
  font-size: 1.2em;
}
.kdl-nav-auth-link--join:hover { background: #b4ff84; }

.kdl-nav-panel {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1.25em 1.75em 1.75em;
  max-height: min(70vh, calc(100svh - 12em));
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity 0.35s ease 0s,
    transform 0.4s cubic-bezier(0.76, 0, 0.24, 1) 0s;
}
.kdl-nav-bar-wrap.is-open .kdl-nav-panel {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.4s ease 0.6s,
    transform 0.45s cubic-bezier(0.76, 0, 0.24, 1) 0.55s;
}

/* 펼침: 너비 먼저 → 패널 높이 */
.kdl-nav-dropdown {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s cubic-bezier(0.76, 0, 0.24, 1) 0s;
}
.kdl-nav-bar-wrap.is-open .kdl-nav-dropdown {
  grid-template-rows: 1fr;
  transition-delay: 0.55s;
}

.kdl-nav-dropdown-inner {
  overflow: hidden;
  border-radius: 0 0 0.5em 0.5em;
}

.kdl-nav-panel-label {
  margin-bottom: 1em;
  font-size: 0.8125em;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

.kdl-nav-panel-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75em;
  padding: 0.85em 0;
  font-size: 1.625em;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.9);
  transition: color 0.2s;
}
.kdl-nav-panel-link:hover { color: #fff; }

.kdl-nav-panel-sublink {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.65em 0;
  font-size: 1.125em;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  transition: color 0.2s;
}
.kdl-nav-panel-sublink:hover { color: #fff; }

.kdl-nav-panel-badge {
  flex-shrink: 0;
  border-radius: 9999px;
  background: #a1ff62;
  padding: 0.35em 0.85em;
  font-size: 0.5em;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #06210a;
}

.kdl-nav-panel-promo-title {
  margin-top: 0.75em;
  font-size: 1.75em;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #fff;
}

.kdl-nav-panel-promo-cta {
  margin-top: 0.75em;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.9375em;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
  transition: color 0.2s;
}
.kdl-nav-panel-promo-cta:hover { color: #fff; }

.kdl-portal-marquee-strip {
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  margin-top: 0.5em;
}

.kdl-portal-marquee-box {
  height: 1.9em;
  overflow: hidden;
  border-radius: 0.3125em;
  background: #a1ff62;
}

.kdl-portal-marquee-text {
  display: flex;
  align-items: center;
  gap: 2em;
  padding-right: 2em;
  white-space: nowrap;
  font-size: 1em;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #201d1d;
}

.kdl-portal-hero-title {
  flex-shrink: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  margin: calc(clamp(1.25em, 4.5vh, 3.25em) + 12px) 0 0;
  gap: clamp(0.25em, 1.2vw, 0.45em);
  font-family: Arial, sans-serif;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.06em;
  color: #f3f4f6;
  font-size: clamp(3.25rem, 8.2vw, calc(9rem + 5px));
}

.kdl-portal-hero-title__spark {
  display: inline-block;
  flex-shrink: 0;
  width: 0.64em;
  height: 0.64em;
}

.kdl-portal-radial-section {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  width: 100%;
  margin-top: clamp(1.5em, 4vh, 3em);
}

.kdl-radial-chips {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  margin-top: 60px;
  padding: 0 1em 1em;
}

.kdl-radial-chip {
  height: 3em;
  padding: 0 1.35em;
  border-radius: 9999px;
  font-size: calc(0.9375em + 4px);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: all 0.3s;
}

/* 포탈 — 산업 AI 패키지 원형 회전 마퀴(osmo) */
.kdl-radial-stage {
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  margin-top: 10px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.kdl-radial-stage[data-dragging] { cursor: grabbing; }

/* 포탈 — radial marquee 카드 (osmo.supply) */
.radial-marquee__item {
  flex-flow: column;
  flex: none;
  width: 17em;
  position: absolute;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}
.radial-marquee__item.is-active { opacity: 1; }

.radial-marquee__card-inner {
  background-color: var(--color-neutral-800, #262626);
  color: var(--color-neutral-200, #e5e5e5);
  border-radius: 0.3125em;
  flex-flow: column;
  padding-top: 0.375em;
  padding-left: 0.375em;
  padding-right: 0.375em;
  display: flex;
  text-decoration: none;
  box-shadow: 0 1.125em 2.5em rgba(0, 0, 0, 0.5);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.radial-marquee__item.is-active .radial-marquee__card-inner {
  background-color: #333333;
  box-shadow: 0 1.25em 2.75em rgba(0, 0, 0, 0.62);
}

.radial-marquee__card-visual {
  border-radius: 0.1875em;
  position: relative;
  overflow: hidden;
}
.radial-marquee__before {
  padding-top: 62%;
  display: block;
}
.radial-marquee__card-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.55) saturate(0.25);
  transition: transform 0.6s ease-out, filter 0.3s ease;
}
.radial-marquee__item.is-active .radial-marquee__card-visual img {
  filter: brightness(1) saturate(1);
}
.radial-marquee__card-inner:hover .radial-marquee__card-visual img {
  transform: scale(1.05);
}

.radial-marquee__card-info {
  grid-column-gap: 0.5em;
  grid-row-gap: 0.5em;
  justify-content: space-between;
  align-items: center;
  padding: 1em 1em 1em 0.75em;
  display: flex;
}
.radial-marquee__card-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.2em;
  min-width: 0;
}
.radial-marquee__card-name {
  text-align: left;
  font-size: 1.15em;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.02em;
}
.radial-marquee__card-p {
  text-align: left;
  font-size: 0.8125em;
  line-height: 1.2;
  margin: 0;
}
.radial-marquee__card-arrow {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25em;
  height: 1.25em;
  border-radius: 50%;
  background: #f4f4f4;
  color: #1d4ed8;
}

/* 포탈 녹색 마퀴 */
.kdl-portal-marquee { animation: lmScroll 24s linear infinite; }
@media (prefers-reduced-motion: reduce) { .kdl-portal-marquee { animation: none; } }

/* 키 수정 표 — 열이 많으면 가로로 넘친다. 스크롤바를 상시 노출해 더 볼 게 있다는 걸 바로 알 수 있게 한다(2026-08-11) */
.kt-scroll { scrollbar-width: thin; scrollbar-color: rgba(100,116,139,.4) transparent; }
.kt-scroll:hover { scrollbar-color: rgba(100,116,139,.6) transparent; }
.kt-scroll::-webkit-scrollbar { height: 6px; }
.kt-scroll::-webkit-scrollbar-thumb { background: rgba(100,116,139,.4); border-radius: 3px; }
.kt-scroll:hover::-webkit-scrollbar-thumb { background: rgba(100,116,139,.6); }
.kt-scroll::-webkit-scrollbar-track { background: transparent; }

/* 키 수정 표의 열 추가 — 표 오른쪽 끝의 얇은 고스트 열. 글씨 없이 + 아이콘만 두고 칸 전체를 클릭 영역으로 쓴다(2026-08-11) */
.kt-addcell { width: 48px; min-width: 48px; border-left: 1px dashed #cbd5e1; background: #fff; }
.kt-addcell .kt-coladd { width: 100%; min-height: 96px; display: grid; place-items: center; cursor: pointer; transition: background .15s ease; }
.kt-addcell .kt-coladd:hover { background: rgb(var(--k-primaryWeak) / .45); }
.kt-addcell-icon { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid #cbd5e1; background: #fff; color: #94a3b8; transition: color .15s ease, border-color .15s ease, background .15s ease; }
.kt-addcell .kt-coladd:hover .kt-addcell-icon { border-color: rgb(var(--k-primary)); background: rgb(var(--k-primary)); color: #fff; }

/* 라이브러리 빈 상태 — 템플릿 관리·VLMOps와 같은 모양. 상자를 두르지 않고 아이콘과 두 줄만 놓는다(2026-08-13) */
.lib-empty { display: grid; justify-items: center; align-content: center; gap: 8px; min-height: 320px; padding: 60px 24px; text-align: center; }
.lib-empty > div > svg { width: 26px; height: 26px; }
.lib-empty-title { color: rgb(var(--k-text1)); font-size: 15px; font-weight: 700; }
.lib-empty-desc { max-width: 380px; color: rgb(var(--k-text2)); font-size: 12px; line-height: 1.55; }

/* 업로드 팝업 미리보기 스켈레톤 — 문서를 읽는 동안 지면 모양의 자리를 먼저 보여준다(2026-08-18). */
.u2-skeleton{ height:100%; display:grid; place-items:center; gap:14px; align-content:center; padding:24px; }
.u2-sk-page{ width:min(100%, 300px); aspect-ratio:3/4; background:#fff; border:1px solid rgb(var(--k-line));
  box-shadow:0 8px 24px rgba(15,23,42,.10); padding:26px 22px; display:flex; flex-direction:column; gap:12px; justify-content:flex-start; }
.u2-sk-line{ height:12px; border-radius:0; background:linear-gradient(90deg,#eef1f5 25%,#f7f9fc 37%,#eef1f5 63%);
  background-size:400% 100%; animation:u2-sk-shimmer 1.3s ease-in-out infinite; }
@keyframes u2-sk-shimmer{ 0%{ background-position:100% 50%; } 100%{ background-position:0 50%; } }
.u2-sk-cap{ font-size:12px; color:rgb(var(--k-text2)); }
.u2-sk-cap b{ color:rgb(var(--k-text1)); font-weight:600; }
@media (prefers-reduced-motion: reduce){ .u2-sk-line{ animation:none; } }

/* 템플릿 저장 팝업의 문서 유형 칩 — 체크박스처럼 여러 개를 고른다(2026-08-18). */
.stpl-chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid rgb(var(--k-border));
  background:#fff; color:rgb(var(--k-text2)); font-size:12px; font-weight:500; line-height:1.2; cursor:pointer;
  transition: border-color .12s ease, background .12s ease, color .12s ease; }
.stpl-chip:hover{ border-color:rgb(var(--k-primary)); color:rgb(var(--k-text1)); }
.stpl-chip.is-on{ border-color:rgb(var(--k-primary)); background:rgb(var(--k-primaryWeak)); color:rgb(var(--k-text1)); }
.stpl-chip-box{ width:14px; height:14px; display:grid; place-items:center; border:1px solid rgb(var(--k-border)); background:#fff; color:#fff; flex:none; }
.stpl-chip.is-on .stpl-chip-box{ border-color:rgb(var(--k-primary)); background:rgb(var(--k-primary)); }
.stpl-chip-box svg{ width:10px; height:10px; }
.stpl-chip-dup{ color:rgb(var(--k-warning)); font-size:10.5px; }
.stpl-chip-dup b{ font-weight:700; }

/* ── 인트로 스플래시 (실구현 next-app IntroSplash 이식, 2026-08-29 Benson) ──
   검은 화면에 로고와 "Korea Deep Learning"을 한 글자씩 띄운 뒤 위로 걷어낸다.
   포탈에 처음 들어올 때와 로그인·로그아웃으로 포탈에 닿을 때 보여준다. */
#kdl-intro{
  position:fixed; inset:0; z-index:100; display:grid; place-items:center;
  background:#000; overflow:hidden;
  transition:transform .55s cubic-bezier(.76,0,.24,1);
}
#kdl-intro.is-leaving{ transform:translateY(-100%); pointer-events:none; }
#kdl-intro .kdl-intro-row{ display:flex; align-items:center; gap:12px; padding:0 24px; }
#kdl-intro img{ width:38px; height:auto; opacity:0; animation:kdlIntroMark .6s ease-out .1s both; }
#kdl-intro .kdl-intro-ch{
  display:inline-block; white-space:pre; color:#fff; opacity:0;
  font-size:28px; font-weight:600; letter-spacing:-0.01em;
  animation:kdlIntroCh .6s cubic-bezier(.22,1,.36,1) both;
}
@keyframes kdlIntroMark{ from{opacity:0; transform:scale(.92)} to{opacity:1; transform:none} }
@keyframes kdlIntroCh{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }
@media (max-width:640px){ #kdl-intro .kdl-intro-ch{ font-size:24px; } }
/* 움직임을 줄이도록 설정한 사용자에게는 애니메이션 없이 잠깐만 보여준다 */
@media (prefers-reduced-motion:reduce){
  #kdl-intro img, #kdl-intro .kdl-intro-ch{ animation:none; opacity:1; }
  #kdl-intro{ transition:none; }
}

/* 재추출 전 회차의 코파일럿 대화 — 맥락으로 남기되 누를 수 없다.
   확인 필요 칩과 참조 칩은 항목 키로 위치를 찾는데 그 키가 새 결과에 없을 수 있고,
   마스킹 같은 동작 버튼도 옛 결과 기준이라 지금 누르면 어긋난다 (2026-09-01 Riley). */
#copilot-msgs .cp-stale { opacity: .62; }
#copilot-msgs .cp-stale button,
#copilot-msgs .cp-stale textarea,
#copilot-msgs .cp-stale input,
#copilot-msgs .cp-stale [data-cp-act],
#copilot-msgs .cp-stale [data-cp-focus],
#copilot-msgs .cp-stale [data-cp-mask] { pointer-events: none; cursor: default; }

/* 확인 필요 칩의 쪽수 꼬리표 — 같은 유형이 여러 번 나오는 문서에서 어느 쪽 항목인지 가른다 (2026-09-01) */
#copilot-msgs .cp-chip .cpf-page{
  margin-left: 4px; padding: 0 4px; border-radius: 4px;
  background: rgba(100,116,139,.12); color: #64748b;
  font-size: 10px; font-weight: 600; line-height: 15px; white-space: nowrap;
}

/* 언어 메뉴 — GNB 안에 있지만 바탕이 흰 팝오버다.
   위의 다크 네비 규칙이 aside 안의 글자를 흰색으로 덮어(#F5F6F8) 선택된 항목이 사라졌다.
   메뉴 안에서는 그 덮어쓰기를 되돌린다. 호버 배경도 어두운 값이 오면 흰 바탕과 싸운다.
   (2026-09-08 Benson 검토에서 발견) */
#ws-root > aside #lang-menu { color:#101828; }
#ws-root > aside #lang-menu .text-kdl-text1 { color:#101828; }
#ws-root > aside #lang-menu .text-kdl-text2 { color:#475467; }
#ws-root > aside #lang-menu .hover\:bg-kdl-bg:hover { background:#F2F4F7; }
#ws-root > aside #lang-menu .bg-kdl-bg { background:#F2F4F7; }

/* 목록 팝업 표(문서 전체 보기, 휴지통): 행 높이를 64px로 고정한다. 썸네일이나 배지가 있어도 늘어나지 않아 10행이 영역에 딱 맞는다(2026-10-19) */
.list-popup-table tbody td { height: 64px; padding-top: 0 !important; padding-bottom: 0 !important; vertical-align: middle; }
.list-popup-table tbody td img, .list-popup-table tbody td [data-pr-thumb] { display: block; }
/* 목록 팝업의 표시 개수 선택. 브라우저 기본 화살표 대신 앱의 꺾쇠를 쓴다 */
[data-lp-size] { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' 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 9px center; }

/* 외곽선 빛(.hub-run, css/knowledge.css)의 대기 상태. 지식베이스와 같이 두 배 느리게 돈다(2026-10-28, DEEP OCR 대기 문서) */
.hub-run.is-waiting::after { animation-duration: 4.8s; }

/* Document list footer: shared by OCR, Parser and workflows. */
.hub-list-footer { display:flex; align-items:stretch; gap:8px; flex-shrink:0; background:#fff; }
.hub-list-footer > button:first-child { flex:1; min-width:0; width:auto; }
.hub-list-trash { display:inline-flex; align-items:center; justify-content:center; gap:5px; flex-shrink:0; min-height:34px; padding:0 8px; border:0; background:transparent; color:#64748b; font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; }
.hub-list-trash:hover { color:#1b58d4; background:#f1f5f9; }
.hub-list-trash:focus-visible { outline:2px solid #2970ff; outline-offset:2px; }
.hub-list-trash svg { width:14px; height:14px; }
.hub-list-trash em, .hub-trash-count { font-style:normal; font-size:11px; font-variant-numeric:tabular-nums; }
#rec-list, #pr-list { min-height:0; }

/* 원문 위치 박스 수정(2026-11-01). DEEP OCR 검수 화면과 워크플로우 DEEP OCR 결과 칸 공용(js/bbox-edit.js).
   워크플로우는 .ppw-host 아래 단추 글씨가 font:inherit 리셋에 밀리므로 같은 규칙을 .ppw-host 접두로도 둔다. */
.bbe-entry, .ppw-host .bbe-entry { position:absolute; z-index:4; transform:translate(-100%, calc(-100% - 6px)); height:22px; padding:0 8px; border:1px solid rgb(var(--k-primary)); border-radius:4px; background:#fff; color:rgb(var(--k-primary)); font-size:11px; font-weight:600; line-height:20px; white-space:nowrap; cursor:pointer; box-shadow:0 1px 3px rgba(15,23,42,.12); }
.bbe-entry:hover, .ppw-host .bbe-entry:hover { background:rgb(var(--k-primary) / .08); }
.bbe-entry.is-none, .ppw-host .bbe-entry.is-none { left:50%; top:8px; transform:translateX(-50%); }
.bbe-entry:focus-visible, .bbe-bar button:focus-visible { outline:2px solid rgb(var(--k-primary)); outline-offset:2px; }
.bbe-layer { position:absolute; inset:0; z-index:5; }
.bbe-layer.is-draw { cursor:crosshair; background:rgba(15,23,42,.06); }
.bbe-hint { position:absolute; left:50%; top:44px; transform:translateX(-50%); margin:0; padding:4px 10px; border-radius:4px; background:rgba(15,23,42,.82); color:#fff; font-size:11.5px; white-space:nowrap; pointer-events:none; }
.bbe-box { position:absolute; cursor:move; outline:2px dashed rgb(var(--k-primary)); outline-offset:0; background:rgb(var(--k-primary) / .12); }
.bbe-h { position:absolute; width:10px; height:10px; border:2px solid rgb(var(--k-primary)); border-radius:2px; background:#fff; }
.bbe-h.is-nw { left:-6px; top:-6px; cursor:nwse-resize; }
.bbe-h.is-se { right:-6px; bottom:-6px; cursor:nwse-resize; }
.bbe-h.is-ne { right:-6px; top:-6px; cursor:nesw-resize; }
.bbe-h.is-sw { left:-6px; bottom:-6px; cursor:nesw-resize; }
.bbe-bar { position:absolute; z-index:6; display:flex; gap:4px; margin:6px 0; padding:4px; border:1px solid #e5e7eb; border-radius:6px; background:#fff; box-shadow:0 4px 12px rgba(15,23,42,.14); cursor:default; white-space:nowrap; }
.bbe-bar button, .ppw-host .bbe-bar button { height:24px; padding:0 9px; border:1px solid #e5e7eb; border-radius:4px; background:#fff; color:#374151; font-size:11.5px; font-weight:600; cursor:pointer; }
.bbe-bar button:hover, .ppw-host .bbe-bar button:hover { background:#f3f4f6; }
.bbe-bar button.is-primary, .ppw-host .bbe-bar button.is-primary { border-color:rgb(var(--k-primary)); background:rgb(var(--k-primary)); color:#fff; }
.bbe-bar button:disabled, .ppw-host .bbe-bar button:disabled { opacity:.4; cursor:not-allowed; }
/* 위치를 고친 값 표시. 값은 그대로라 컨피던스스코어 옆에 붙인다. 수정됨과 같은 규격에 다른 색 */
.ocr-pos-chip { display:inline-flex; align-items:center; height:16px; padding:0 4px; border-radius:3px; background:#e0f2fe; color:#0369a1; font-size:9.5px; font-weight:600; line-height:1; white-space:nowrap; }