@charset "utf-8";
/* ==========================================================================
   ProjeX 퍼블리싱 공통 스타일 — Crepas Design System (crepas-design 스킬 토큰)
   구성: 1.Tokens 2.Base 3.Shell 4.Components 5.Page patterns 6.Responsive
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root{
  color-scheme: light;
  --crp-blue-500:#3366ff; --crp-blue-400:#668dff; --crp-blue-600:#2952cc; --crp-blue-50:#eaefff;
  --crp-orange-500:#fe7f00; --crp-orange-50:#fff2e5;
  --crp-green-500:#0dcd94;  --crp-green-50:#e6faf4;
  --crp-red-500:#f7284a;    --crp-red-50:#fee9ed;
  --crp-yellow-500:#e3b113; --crp-yellow-50:#fcf7e7;
  --crp-sky-500:#128af9;    --crp-sky-50:#e7f3fe;
  --crp-purple-500:#a45bf5; --crp-purple-50:#f6edfe;
  --crp-teal-500:#17c9d6;   --crp-teal-50:#e7fafb;
  --crp-gray-100:#ebeff8;   --crp-gray-800:#353a40;
  --crp-navy-900:#17263a; --crp-navy-700:#263871; --crp-slate-600:#4a5578; --crp-slate-400:#9aa3c2;
  --crp-line-200:#e9ebfa; --crp-line-300:#dee5f7; --crp-page:#f0f4fb; --crp-white:#ffffff;

  --color-primary:var(--crp-blue-500);     --color-primary-soft:var(--crp-blue-50);
  --color-secondary:var(--crp-orange-500); --color-secondary-soft:var(--crp-orange-50);
  --color-success:var(--crp-green-500);    --color-success-soft:var(--crp-green-50);
  --color-danger:var(--crp-red-500);       --color-danger-soft:var(--crp-red-50);
  --color-warning:var(--crp-yellow-500);   --color-warning-soft:var(--crp-yellow-50);
  --color-info:var(--crp-sky-500);         --color-info-soft:var(--crp-sky-50);
  --color-purple:var(--crp-purple-500);    --color-purple-soft:var(--crp-purple-50);
  --color-teal:var(--crp-teal-500);        --color-teal-soft:var(--crp-teal-50);
  --color-light:var(--crp-gray-100);       --color-dark:var(--crp-gray-800);
  --text-heading:var(--crp-navy-700); --text-body:var(--crp-slate-600); --text-muted:var(--crp-slate-400);
  --text-link:var(--crp-blue-500);
  --surface-page:var(--crp-page); --surface-card:var(--crp-white); --surface-sidebar:var(--crp-navy-900);
  --surface-subtle:var(--crp-blue-50); --surface-control:#dfe5f5; --surface-input:var(--crp-white);
  --border-default:var(--crp-line-200); --track-default:var(--crp-line-300);
  --sidebar-text:#c3cbe0; --sidebar-caption:#6f7d99; --sidebar-line:rgba(255,255,255,.06); --sidebar-hover:rgba(255,255,255,.06);
  --overlay:rgba(23,38,58,.45);

  --shadow-card:none; --shadow-raised:0 2px 8px rgba(38,56,113,.08); --shadow-menu:0 4px 16px rgba(38,56,113,.14);
  --shadow-modal:0 16px 48px rgba(23,38,58,.22); --shadow-focus:0 0 0 3px rgba(51,102,255,.25);
  --ease-standard:cubic-bezier(.2,0,0,1); --dur-fast:120ms; --dur-base:200ms;

  --radius-xs:3px; --radius-sm:4px; --radius-md:6px; --radius-lg:8px; --radius-xl:12px; --radius-pill:999px;
  --font-sans:"Noto Sans KR","Roboto","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --font-latin:"Roboto","Noto Sans KR",sans-serif;
  --fs-page-title:26px; --fs-card-title:18px; --fs-body:14px; --fs-sm:13px; --fs-xs:12px; --fs-badge:11px;
  --lh-body:1.7;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --surface-page:#0f1623; --surface-card:#182233; --surface-sidebar:#0b111b;
    --surface-subtle:rgba(51,102,255,.16); --surface-control:#243049; --surface-input:#131c2b;
    --border-default:#27334b; --track-default:#2a3650;
    --text-heading:#e6ebf7; --text-body:#b4bdd6; --text-muted:#7f8aa8; --text-link:#668dff;
    --color-light:#2a3650; --color-dark:#4a5266;
    --color-primary-soft:rgba(51,102,255,.18); --color-secondary-soft:rgba(254,127,0,.16);
    --color-success-soft:rgba(13,205,148,.16); --color-danger-soft:rgba(247,40,74,.16);
    --color-warning-soft:rgba(227,177,19,.16); --color-info-soft:rgba(18,138,249,.16);
    --color-purple-soft:rgba(164,91,245,.18); --color-teal-soft:rgba(23,201,214,.16);
    --shadow-raised:0 2px 8px rgba(0,0,0,.35); --shadow-menu:0 6px 20px rgba(0,0,0,.45); --shadow-modal:0 16px 48px rgba(0,0,0,.6);
    --overlay:rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --surface-page:#0f1623; --surface-card:#182233; --surface-sidebar:#0b111b;
  --surface-subtle:rgba(51,102,255,.16); --surface-control:#243049; --surface-input:#131c2b;
  --border-default:#27334b; --track-default:#2a3650;
  --text-heading:#e6ebf7; --text-body:#b4bdd6; --text-muted:#7f8aa8; --text-link:#668dff;
  --color-light:#2a3650; --color-dark:#4a5266;
  --color-primary-soft:rgba(51,102,255,.18); --color-secondary-soft:rgba(254,127,0,.16);
  --color-success-soft:rgba(13,205,148,.16); --color-danger-soft:rgba(247,40,74,.16);
  --color-warning-soft:rgba(227,177,19,.16); --color-info-soft:rgba(18,138,249,.16);
  --color-purple-soft:rgba(164,91,245,.18); --color-teal-soft:rgba(23,201,214,.16);
  --shadow-raised:0 2px 8px rgba(0,0,0,.35); --shadow-menu:0 6px 20px rgba(0,0,0,.45); --shadow-modal:0 16px 48px rgba(0,0,0,.6);
  --overlay:rgba(0,0,0,.6);
}

/* 2. Base ------------------------------------------------------------------ */
*{box-sizing:border-box;}
html,body{height:100%;}
body{margin:0; font-family:var(--font-sans); font-size:var(--fs-body); line-height:1.5; color:var(--text-body); background:var(--surface-page); -webkit-font-smoothing:antialiased; transition:background-color var(--dur-base) var(--ease-standard);}
a{color:var(--text-link); text-decoration:none;}
a:hover{color:var(--crp-blue-600);}
button,input,select,textarea{font-family:inherit; font-size:inherit; color:inherit;}
h1,h2,h3,h4{margin:0; color:var(--text-heading); font-weight:500; text-wrap:balance;}
p{margin:0;}
ul,ol{margin:0; padding:0;}
.num,.mono{font-family:var(--font-latin); font-variant-numeric:tabular-nums;}
.muted{color:var(--text-muted);} .heading{color:var(--text-heading);} .strong{font-weight:500; color:var(--text-heading);}
.t-danger{color:var(--color-danger);} .t-warning{color:#b88a00;} .t-success{color:#07a877;} .t-primary{color:var(--color-primary);}
:root[data-theme="dark"] .t-warning{color:var(--color-warning);} :root[data-theme="dark"] .t-success{color:var(--color-success);}
.sm{font-size:var(--fs-sm);} .xs{font-size:var(--fs-xs);}
:focus-visible{outline:none; box-shadow:var(--shadow-focus); border-radius:var(--radius-sm);}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
[hidden]{display:none !important;}
@media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important;} }

/* 3. Shell ------------------------------------------------------------------ */
.app{min-height:100%; display:grid; grid-template-columns:240px minmax(0,1fr); grid-template-rows:64px 1fr; grid-template-areas:"sidebar topbar" "sidebar main";}
.app.nav-collapsed{grid-template-columns:72px minmax(0,1fr);}
.app.no-side{grid-template-columns:minmax(0,1fr); grid-template-areas:"topbar" "main";}

.sidebar{grid-area:sidebar; background:var(--surface-sidebar); color:var(--sidebar-text); transition:background-color var(--dur-base);}
.sb-inner{position:sticky; top:0; height:100vh; overflow-y:auto; display:flex; flex-direction:column;}
.sb-brand{height:64px; flex:none; display:flex; align-items:center; gap:10px; padding:0 24px; border-bottom:1px solid var(--sidebar-line); color:#fff;}
.sb-brand:hover{color:#fff;}
.sb-mark{width:30px; height:30px; flex:none; border-radius:var(--radius-md); background:var(--color-primary); display:grid; place-items:center; font-family:var(--font-latin); font-weight:700; font-size:13px; color:#fff;}
.sb-mark.admin{background:var(--color-secondary);}
.sb-name{font-family:var(--font-latin); font-weight:700; font-size:22px; letter-spacing:-.01em;}
.sb-name small{display:block; font-size:10px; font-weight:500; letter-spacing:.08em; color:var(--sidebar-caption); margin-top:-2px;}
.sb-caption{font-size:var(--fs-badge); font-weight:700; letter-spacing:.6px; color:var(--sidebar-caption); padding:16px 12px 8px;}
.nav{flex:1; padding:4px 12px 12px; display:flex; flex-direction:column; gap:2px;}
.nav-link{width:100%; display:flex; align-items:center; gap:10px; padding:10px 12px; border:0; border-radius:var(--radius-sm); background:transparent; color:var(--sidebar-text); font-size:var(--fs-body); text-align:left; cursor:pointer; transition:background-color var(--dur-fast), color var(--dur-fast);}
.nav-link svg{flex:none;}
.nav-link:hover{background:var(--sidebar-hover); color:#fff;}
.nav-link.is-active{background:var(--color-primary); color:#fff;}
.nav-link .chev{margin-left:auto; transition:transform var(--dur-fast);}
.nav-group.is-open > .nav-link .chev{transform:rotate(90deg);}
.nav-group:not(.is-open) .nav-sub{display:none;}
.nav-sub{display:flex; flex-direction:column; gap:1px; padding:6px 0 6px 39px;}
.nav-sub a{display:flex; align-items:center; gap:8px; padding:6px 0; font-size:var(--fs-sm); color:var(--sidebar-text);}
.nav-sub a::before{content:""; width:5px; height:5px; border-radius:50%; border:1px solid currentColor; flex:none;}
.nav-sub a:hover{color:#fff;}
.nav-sub a[aria-current="page"]{color:#fff; font-weight:500;}
.nav-sub a[aria-current="page"]::before{background:var(--color-primary); border-color:var(--color-primary);}
.sb-foot{border-top:1px solid var(--sidebar-line); padding:10px 12px; display:flex; flex-direction:column; gap:2px;}
.app.nav-collapsed .sb-name,.app.nav-collapsed .label,.app.nav-collapsed .chev,.app.nav-collapsed .nav-sub,.app.nav-collapsed .sb-caption{display:none;}
.app.nav-collapsed .sb-brand{padding:0; justify-content:center;}
.app.nav-collapsed .nav-link{justify-content:center;}

.topbar{grid-area:topbar; position:sticky; top:0; z-index:30; height:64px; display:flex; align-items:center; gap:16px; padding:0 24px; background:var(--surface-card); box-shadow:0 1px 0 var(--border-default);}
.tb-btn{position:relative; width:40px; height:40px; flex:none; border:0; border-radius:var(--radius-sm); background:var(--surface-subtle); color:var(--text-heading); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:background-color var(--dur-fast), color var(--dur-fast);}
.tb-btn:hover{background:var(--color-primary); color:#fff;}
.tb-btn.ghost{background:transparent;}
.tb-btn.ghost:hover{background:var(--surface-subtle); color:var(--color-primary);}
.tb-btn .count{position:absolute; top:-8px; right:-8px;}
.tb-brand{display:flex; align-items:center; gap:10px; color:var(--text-heading); font-family:var(--font-latin); font-weight:700; font-size:20px;}
.tb-brand:hover{color:var(--text-heading);}
.project-select{display:flex; align-items:center; gap:8px; min-width:0; max-width:360px; height:40px; padding:0 12px; border:0; border-radius:var(--radius-sm); background:var(--surface-page); color:var(--text-heading); font-size:var(--fs-sm); cursor:pointer;}
.project-select .name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.project-select > svg{flex:none; color:var(--text-muted);}
.status-line{display:flex; align-items:center; gap:10px; font-size:var(--fs-sm); color:var(--text-muted); white-space:nowrap;}
.status-line b{font-family:var(--font-latin); font-weight:500; color:var(--text-heading); margin-left:4px;}
.status-line .hl b{color:var(--color-primary);}
.status-line .sep{width:1px; height:14px; background:var(--border-default);}
.tb-spacer{flex:1;}
.tb-icons{display:flex; align-items:center; gap:10px;}
.theme-btn .i-sun{display:none;}
:root[data-theme="dark"] .theme-btn .i-sun{display:block;}
:root[data-theme="dark"] .theme-btn .i-moon{display:none;}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .theme-btn .i-sun{display:block;} :root:not([data-theme="light"]) .theme-btn .i-moon{display:none;} }
.user{position:relative; display:flex; align-items:center; gap:10px; border:0; background:transparent; padding:0; cursor:pointer; flex:none; color:var(--text-heading);}
.avatar{width:36px; height:36px; border-radius:50%; background:var(--color-primary-soft); color:var(--color-primary); display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:var(--fs-sm); flex:none;}
.avatar.sm{width:28px; height:28px; font-size:12px;}
.avatar.t-org{background:var(--color-secondary-soft); color:var(--color-secondary);}
.avatar.t-audit{background:var(--color-purple-soft); color:var(--color-purple);}
.user-meta{text-align:left; line-height:1.3;}
.user-meta .n{display:block; font-size:var(--fs-sm); font-weight:500; color:var(--text-heading);}
.user-meta .r{display:block; font-size:var(--fs-xs); color:var(--text-muted);}
.menu-pop{position:absolute; top:calc(100% + 8px); right:0; min-width:200px; background:var(--surface-card); border:1px solid var(--border-default); border-radius:var(--radius-md); box-shadow:var(--shadow-menu); padding:6px; z-index:60; display:none;}
.menu-pop.is-open{display:block;}
.menu-pop a,.menu-pop button{display:flex; align-items:center; gap:8px; width:100%; padding:8px 10px; border:0; background:none; border-radius:var(--radius-sm); font-size:var(--fs-sm); color:var(--text-heading); text-align:left; cursor:pointer;}
.menu-pop a:hover,.menu-pop button:hover{background:var(--color-primary-soft); color:var(--color-primary);}
.menu-pop .hd{padding:8px 10px 6px; font-size:var(--fs-xs); color:var(--text-muted);}
.menu-pop hr{border:0; border-top:1px solid var(--border-default); margin:4px 0;}
.persona{display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 10px; border-radius:var(--radius-pill); background:var(--color-secondary-soft); color:var(--color-secondary); font-size:var(--fs-xs); font-weight:700; white-space:nowrap;}

main.content{grid-area:main; padding:24px; min-width:0;}
.page-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px 16px; flex-wrap:wrap; margin-bottom:24px;}
.page-head h1{font-size:var(--fs-page-title); line-height:1.3; display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.page-head h1 .scr{font-family:var(--font-latin); font-size:11px; font-weight:700; letter-spacing:.04em; padding:3px 7px; border-radius:var(--radius-xs); background:var(--color-light); color:var(--text-muted); vertical-align:middle;}
.crumb{display:flex; align-items:center; gap:6px; margin-top:4px; font-size:var(--fs-sm); color:var(--text-muted); flex-wrap:wrap;}
.crumb a{color:var(--text-muted);} .crumb a:hover{color:var(--color-primary);}
.crumb .here{color:var(--color-primary);}
.page-actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.stack{display:grid; gap:24px;} .stack-16{display:grid; gap:16px;} .stack-12{display:grid; gap:12px;} .stack-8{display:grid; gap:8px;}
.row{display:flex; align-items:center; gap:8px; flex-wrap:wrap;} .row.between{justify-content:space-between;} .row.top{align-items:flex-start;}
.grow{flex:1; min-width:0;}
.grid-2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px;}
.grid-3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px;}
.grid-4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px;}
.split{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(320px,1fr); gap:24px; align-items:start;}
.split-r{display:grid; grid-template-columns:minmax(260px,.8fr) minmax(0,2fr); gap:24px; align-items:start;}
.split-even{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; align-items:start;}

/* 4. Components ------------------------------------------------------------ */
/* Card */
.card{position:relative; background:var(--surface-card); border-radius:var(--radius-xl); padding:24px; box-shadow:var(--shadow-card); min-width:0; transition:background-color var(--dur-base);}
.card.pad-0{padding:0;} .card.pad-20{padding:20px;}
.card-head{position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; min-height:30px; margin-bottom:20px;}
.card-head::before{content:""; position:absolute; left:-24px; top:4px; bottom:4px; width:3px; background:var(--color-primary);}
.card.pad-20 .card-head::before{left:-20px;}
.card-head h2{font-size:var(--fs-card-title);}
.card-head h3{font-size:16px;}
.card-head .hint{font-size:var(--fs-xs); color:var(--text-muted);}
.card-head.plain::before{display:none;}
.card.pad-0 .card-head{padding:20px 24px 0; margin-bottom:16px;}
.card.pad-0 .card-head::before{left:0; top:24px; bottom:auto; height:22px;}
.card-sub{font-size:var(--fs-sm); font-weight:500; color:var(--text-heading); margin-bottom:10px;}
.panel{border:1px solid var(--border-default); border-radius:var(--radius-lg); padding:16px; background:var(--surface-card);}
.panel.soft{background:var(--surface-page); border-color:transparent;}
.panel-title{font-size:var(--fs-sm); font-weight:500; color:var(--text-heading); margin-bottom:10px; display:flex; align-items:center; justify-content:space-between; gap:8px;}

/* Badge */
.badge{display:inline-flex; align-items:center; gap:4px; padding:3px 6px; border:1px solid transparent; border-radius:var(--radius-xs); font-size:var(--fs-badge); font-weight:700; line-height:1.2; white-space:nowrap; flex:none; font-family:var(--font-sans);}
.badge.pill{padding:3px 8px; border-radius:var(--radius-pill);}
.b-primary{background:var(--color-primary); color:#fff;} .b-secondary{background:var(--color-secondary); color:#fff;} .b-success{background:var(--color-success); color:#fff;} .b-danger{background:var(--color-danger); color:#fff;} .b-warning{background:var(--color-warning); color:#fff;} .b-info{background:var(--color-info); color:#fff;} .b-dark{background:var(--color-dark); color:#fff;} .b-purple{background:var(--color-purple); color:#fff;}
.bl-primary{background:var(--color-primary-soft); color:var(--color-primary);} .bl-secondary{background:var(--color-secondary-soft); color:var(--color-secondary);} .bl-success{background:var(--color-success-soft); color:#07a877;} .bl-danger{background:var(--color-danger-soft); color:var(--color-danger);} .bl-warning{background:var(--color-warning-soft); color:#b88a00;} .bl-info{background:var(--color-info-soft); color:var(--color-info);} .bl-purple{background:var(--color-purple-soft); color:var(--color-purple);} .bl-teal{background:var(--color-teal-soft); color:#0fa5b0;} .bl-light{background:var(--color-light); color:var(--text-heading);}
:root[data-theme="dark"] .bl-success{color:var(--color-success);} :root[data-theme="dark"] .bl-warning{color:var(--color-warning);} :root[data-theme="dark"] .bl-teal{color:var(--color-teal);}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .bl-success{color:var(--color-success);} :root:not([data-theme="light"]) .bl-warning{color:var(--color-warning);} :root:not([data-theme="light"]) .bl-teal{color:var(--color-teal);} :root:not([data-theme="light"]) .t-warning{color:var(--color-warning);} :root:not([data-theme="light"]) .t-success{color:var(--color-success);} }
.bo-primary{background:var(--surface-card); color:var(--color-primary); border-color:var(--color-primary);} .bo-danger{background:var(--surface-card); color:var(--color-danger); border-color:var(--color-danger);} .bo-light{background:var(--surface-card); color:var(--text-heading); border-color:var(--border-default);} .bo-warning{background:var(--surface-card); color:#b88a00; border-color:var(--color-warning);} .bo-success{background:var(--surface-card); color:#07a877; border-color:var(--color-success);}

/* Object tag (REQ/CR/DOC…) */
.tag{display:inline-flex; align-items:center; gap:4px; padding:2px 7px; border-radius:var(--radius-xs); background:var(--color-primary-soft); color:var(--color-primary); font-family:var(--font-latin); font-size:12px; font-weight:500; white-space:nowrap; line-height:1.4;}
a.tag:hover{background:var(--color-primary); color:#fff;}
.tag.k-cr{background:var(--color-secondary-soft); color:var(--color-secondary);} a.tag.k-cr:hover{background:var(--color-secondary); color:#fff;}
.tag.k-doc{background:var(--color-info-soft); color:var(--color-info);} a.tag.k-doc:hover{background:var(--color-info); color:#fff;}
.tag.k-bug{background:var(--color-danger-soft); color:var(--color-danger);} a.tag.k-bug:hover{background:var(--color-danger); color:#fff;}
.tag.k-mtg{background:var(--color-purple-soft); color:var(--color-purple);} a.tag.k-mtg:hover{background:var(--color-purple); color:#fff;}
.tag.k-etc{background:var(--color-light); color:var(--text-heading);} a.tag.k-etc:hover{background:var(--color-dark); color:#fff;}
.tag.k-sr{background:var(--color-teal-soft); color:#0fa5b0;} a.tag.k-sr:hover{background:var(--color-teal); color:#fff;}
.tag.missing{background:transparent; border:1px dashed var(--color-warning); color:#b88a00;}
.tags{display:inline-flex; gap:4px; flex-wrap:wrap;}

/* Button */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; height:40px; padding:0 14px; border:1px solid transparent; border-radius:var(--radius-sm); font-size:var(--fs-body); font-weight:500; line-height:1; white-space:nowrap; cursor:pointer; text-decoration:none; transition:background-color var(--dur-fast), color var(--dur-fast), filter var(--dur-fast), border-color var(--dur-fast);}
.btn.sm{height:32px; padding:0 12px; font-size:var(--fs-sm);} .btn.xs{height:26px; padding:0 9px; font-size:12px;} .btn.lg{height:48px; padding:0 20px; font-size:15px;}
.btn.block{width:100%;}
.btn-primary{background:var(--color-primary); color:#fff;} .btn-primary:hover{filter:brightness(.94); color:#fff;}
.btn-danger{background:var(--color-danger); color:#fff;} .btn-danger:hover{filter:brightness(.94); color:#fff;}
.btn-success{background:var(--color-success); color:#fff;} .btn-success:hover{filter:brightness(.94); color:#fff;}
.btn-secondary{background:var(--color-secondary); color:#fff;} .btn-secondary:hover{filter:brightness(.94); color:#fff;}
.btn-light{background:var(--color-primary-soft); color:var(--color-primary);} .btn-light:hover{background:var(--color-primary); color:#fff;}
.btn-control{background:var(--surface-control); color:var(--text-heading);} .btn-control:hover{background:var(--color-primary); color:#fff;}
.btn-outline{background:var(--surface-card); color:var(--text-heading); border-color:var(--border-default);} .btn-outline:hover{border-color:var(--color-primary); color:var(--color-primary);}
.btn-outline-primary{background:var(--surface-card); color:var(--color-primary); border-color:var(--color-primary);} .btn-outline-primary:hover{background:var(--color-primary); color:#fff;}
.btn-outline-danger{background:var(--surface-card); color:var(--color-danger); border-color:var(--color-danger);} .btn-outline-danger:hover{background:var(--color-danger); color:#fff;}
.btn-link{background:transparent; color:var(--text-link); padding:0 4px; height:auto;} .btn-link:hover{text-decoration:underline;}
.icon-btn{width:32px; height:32px; padding:0; border:0; border-radius:var(--radius-sm); background:transparent; color:var(--text-muted); display:inline-flex; align-items:center; justify-content:center; cursor:pointer;}
.icon-btn:hover{background:var(--color-primary-soft); color:var(--color-primary);}

/* Forms */
.field{display:grid; gap:6px; min-width:0;}
.field > .lbl{font-size:var(--fs-sm); font-weight:500; color:var(--text-heading);}
.field > .lbl .req{color:var(--color-danger); margin-left:2px;}
.field .hint{font-size:var(--fs-xs); color:var(--text-muted);}
.field .err{font-size:var(--fs-xs); color:var(--color-danger);}
.input,.select,.textarea{width:100%; min-width:0; height:40px; padding:0 12px; border:1px solid var(--border-default); border-radius:var(--radius-sm); background:var(--surface-input); color:var(--text-heading); font-size:var(--fs-body); transition:border-color var(--dur-fast), box-shadow var(--dur-fast);}
.input.sm,.select.sm{height:32px; font-size:var(--fs-sm);}
.textarea{height:auto; min-height:88px; padding:10px 12px; line-height:1.6; resize:vertical;}
.input:focus,.select:focus,.textarea:focus{outline:none; border-color:var(--color-primary); box-shadow:var(--shadow-focus);}
.input[readonly]{background:var(--surface-page); color:var(--text-body);}
.input::placeholder,.textarea::placeholder{color:var(--text-muted);}
.select{appearance:none; -webkit-appearance:none; padding-right:32px; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none' stroke='%239aa3c2' stroke-width='1.6' stroke-linecap='round'%3E%3Cpolyline points='2,3.5 5,6.5 8,3.5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center;}
.input-group{display:flex; align-items:center; gap:8px;}
.input-icon{position:relative; display:flex; align-items:center;}
.input-icon svg{position:absolute; left:12px; color:var(--text-muted); pointer-events:none;}
.input-icon .input{padding-left:36px;}
.form-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 20px;}
.form-grid .full{grid-column:1 / -1;}
.form-row{display:grid; grid-template-columns:120px minmax(0,1fr); gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--border-default);}
.form-row:last-child{border-bottom:0;}
.form-row > .lbl{font-size:var(--fs-sm); font-weight:500; color:var(--text-heading);}
.check,.radio{display:inline-flex; align-items:center; gap:8px; font-size:var(--fs-sm); color:var(--text-heading); cursor:pointer;}
.check input,.radio input{width:16px; height:16px; margin:0; accent-color:var(--color-primary); flex:none;}
.choice-row{display:flex; gap:16px; flex-wrap:wrap;}
.switch{position:relative; display:inline-flex; align-items:center; gap:10px; cursor:pointer; font-size:var(--fs-sm); color:var(--text-heading);}
.switch input{appearance:none; -webkit-appearance:none; width:36px; height:20px; border-radius:999px; background:var(--track-default); position:relative; cursor:pointer; margin:0; transition:background-color var(--dur-fast); flex:none;}
.switch input::after{content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:transform var(--dur-fast);}
.switch input:checked{background:var(--color-primary);}
.switch input:checked::after{transform:translateX(16px);}
.chip-input{display:flex; flex-wrap:wrap; align-items:center; gap:6px; min-height:40px; padding:5px 8px; border:1px solid var(--border-default); border-radius:var(--radius-sm); background:var(--surface-input);}
.chip{display:inline-flex; align-items:center; gap:6px; padding:3px 8px 3px 10px; border-radius:var(--radius-pill); background:var(--color-primary-soft); color:var(--color-primary); font-size:var(--fs-sm);}
.chip button{border:0; background:none; color:inherit; cursor:pointer; padding:0; display:inline-flex; opacity:.7;}
.chip.gray{background:var(--color-light); color:var(--text-heading);}
.chip-input input{border:0; outline:none; background:transparent; flex:1; min-width:120px; height:28px; font-size:var(--fs-sm);}
.dropzone{border:1.5px dashed var(--color-primary); border-radius:var(--radius-lg); background:var(--color-primary-soft); padding:22px; text-align:center; color:var(--color-primary); font-size:var(--fs-sm); display:grid; gap:6px; justify-items:center; cursor:pointer;}
.dropzone .muted{color:var(--text-muted);}

/* Filter bar */
.filter-bar{display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:12px; border-radius:var(--radius-lg); background:var(--surface-page); margin-bottom:16px;}
.filter-bar .select,.filter-bar .input{width:auto; height:36px; font-size:var(--fs-sm); background-color:var(--surface-input);}
.filter-bar .select{min-width:130px;}
.filter-bar .grow .input{width:100%;}

/* Tabs */
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--border-default); margin-bottom:16px; overflow-x:auto; scrollbar-width:thin;}
.tab{position:relative; border:0; background:none; padding:10px 14px; font-size:var(--fs-sm); color:var(--text-muted); cursor:pointer; white-space:nowrap; display:inline-flex; align-items:center; gap:6px; text-decoration:none;}
.tab:hover{color:var(--text-heading);}
.tab.is-active{color:var(--color-primary); font-weight:500;}
.tab.is-active::after{content:""; position:absolute; left:8px; right:8px; bottom:-1px; height:2px; background:var(--color-primary); border-radius:2px 2px 0 0;}
.tab .cnt{font-family:var(--font-latin); font-size:11px; padding:1px 6px; border-radius:var(--radius-pill); background:var(--color-light); color:var(--text-heading);}
.tab.is-active .cnt{background:var(--color-primary-soft); color:var(--color-primary);}
.pills{display:inline-flex; gap:4px; padding:4px; border-radius:var(--radius-lg); background:var(--surface-page); flex-wrap:wrap;}
.pill-tab{border:0; background:none; padding:6px 12px; border-radius:var(--radius-md); font-size:var(--fs-sm); color:var(--text-muted); cursor:pointer; white-space:nowrap;}
.pill-tab.is-active{background:var(--surface-card); color:var(--color-primary); font-weight:500; box-shadow:var(--shadow-raised);}
.tab-panel:not(.is-active){display:none;}

/* Table */
.table-wrap{overflow-x:auto; border-radius:var(--radius-lg); border:1px solid var(--border-default);}
.card .table-wrap.flush{border:0; border-radius:0; margin:0 -24px;}
.tbl{width:100%; border-collapse:collapse; font-size:var(--fs-sm);}
.tbl th,.tbl td{padding:11px 12px; border-bottom:1px solid var(--border-default); text-align:left; vertical-align:middle; word-break:keep-all;}
.tbl thead th{background:var(--surface-page); color:var(--text-heading); font-weight:500; white-space:nowrap; font-size:var(--fs-sm);}
.tbl tbody tr:last-child td,.tbl tbody tr:last-child th{border-bottom:0;}
.tbl tbody tr:hover{background:color-mix(in srgb, var(--color-primary-soft) 55%, transparent);}
.tbl tbody tr.is-selected{background:var(--color-primary-soft);}
.tbl tr.unread td{font-weight:500; color:var(--text-heading);}
.tbl tr.row-link{cursor:pointer;}
.tbl tr.row-sub td{background:var(--surface-page);}
.tbl td.c,.tbl th.c{text-align:center;} .tbl td.r,.tbl th.r{text-align:right;}
.tbl td.n{font-family:var(--font-latin); font-variant-numeric:tabular-nums; white-space:nowrap;}
.tbl td.nowrap{white-space:nowrap;}
.tbl .title-link{color:var(--text-heading); font-weight:500;}
.tbl .title-link:hover{color:var(--color-primary); text-decoration:underline;}
.tbl input[type=checkbox]{width:16px; height:16px; accent-color:var(--color-primary); margin:0;}
.tbl.compact th,.tbl.compact td{padding:8px 10px;}
.tbl .cell-missing{color:#b88a00; font-size:12px; border:1px dashed var(--color-warning); border-radius:var(--radius-xs); padding:1px 6px; white-space:nowrap;}
.tbl tfoot td{background:var(--surface-page); font-weight:500; color:var(--text-heading);}
.table-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:16px; font-size:var(--fs-sm); color:var(--text-muted);}

/* Pagination */
.pagination{display:inline-flex; border:1px solid var(--border-default); border-radius:var(--radius-sm); overflow:hidden;}
.pagination a,.pagination span{min-width:34px; height:32px; padding:0 10px; display:inline-flex; align-items:center; justify-content:center; font-size:var(--fs-sm); color:var(--text-heading); border-right:1px solid var(--border-default); background:var(--surface-card);}
.pagination > :last-child{border-right:0;}
.pagination .is-active{background:var(--color-primary); color:#fff;}
.pagination a:hover{background:var(--color-primary-soft);}

/* KPI / StatCard */
.kpi-row{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px;}
.kpi-row.c3{grid-template-columns:repeat(3,minmax(0,1fr));} .kpi-row.c5{grid-template-columns:repeat(5,minmax(0,1fr));} .kpi-row.c6{grid-template-columns:repeat(3,minmax(0,1fr));}
.stat{background:var(--surface-card); border:0; border-radius:var(--radius-xl); padding:20px; text-align:left; color:inherit; display:flex; justify-content:space-between; gap:12px; min-width:0; transition:background-color var(--dur-base), box-shadow var(--dur-fast); text-decoration:none;}
a.stat:hover{box-shadow:var(--shadow-raised); color:inherit;}
.stat .body{min-width:0;}
.stat .label{display:block; font-size:var(--fs-sm); color:var(--text-heading);}
.stat .value{display:block; font-family:var(--font-latin); font-size:24px; font-weight:500; color:var(--text-heading); margin:4px 0 8px; white-space:nowrap; line-height:1.3;}
.stat .value small{font-size:14px; color:var(--text-muted); font-weight:400; margin-left:2px;}
.stat .sub{display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:var(--fs-xs); color:var(--text-muted);}
.stat .ico{width:44px; height:44px; flex:none; border-radius:var(--radius-md); color:#fff; display:inline-flex; align-items:center; justify-content:center;}
.stat.warn{box-shadow:inset 0 0 0 1.5px var(--color-warning);}
.ico.t-primary{background:var(--color-primary);} .ico.t-info{background:var(--color-info);} .ico.t-danger{background:var(--color-danger);} .ico.t-warning{background:var(--color-warning);} .ico.t-secondary{background:var(--color-secondary);} .ico.t-success{background:var(--color-success);} .ico.t-purple{background:var(--color-purple);} .ico.t-teal{background:var(--color-teal);} .ico.t-dark{background:var(--color-dark);}
.mini-stats{display:flex; flex-wrap:wrap; gap:8px 20px; font-size:var(--fs-sm); color:var(--text-muted);}
.mini-stats b{font-family:var(--font-latin); font-weight:500; color:var(--text-heading); margin-left:4px;}

/* Progress */
.progress{height:8px; border-radius:var(--radius-pill); background:var(--track-default); overflow:hidden; min-width:60px;}
.progress > span{display:block; height:100%; border-radius:inherit; background:var(--color-primary);}
.progress.lg{height:10px;} .progress.xs{height:6px;}
.progress.t-success > span{background:var(--color-success);} .progress.t-warning > span{background:var(--color-warning);} .progress.t-danger > span{background:var(--color-danger);} .progress.t-secondary > span{background:var(--color-secondary);} .progress.t-info > span{background:var(--color-info);}
.prog-line{display:flex; align-items:center; gap:10px;}
.prog-line .progress{flex:1;}
.prog-line .v{font-family:var(--font-latin); font-size:var(--fs-sm); color:var(--text-heading); min-width:40px; text-align:right;}

/* Alert */
.alert{display:flex; gap:10px; align-items:flex-start; padding:10px 14px; border-radius:var(--radius-md); font-size:var(--fs-sm); line-height:1.6; border:1px solid;}
.alert .ai{flex:none; margin-top:2px;}
.alert.a-info{background:var(--color-primary-soft); border-color:color-mix(in srgb, var(--color-primary) 35%, transparent); color:var(--text-heading);}
.alert.a-info .ai{color:var(--color-primary);}
.alert.a-warning{background:var(--color-warning-soft); border-color:color-mix(in srgb, var(--color-warning) 45%, transparent); color:var(--text-heading);}
.alert.a-warning .ai{color:#b88a00;}
.alert.a-danger{background:var(--color-danger-soft); border-color:color-mix(in srgb, var(--color-danger) 35%, transparent); color:var(--text-heading);}
.alert.a-danger .ai{color:var(--color-danger);}
.alert.a-success{background:var(--color-success-soft); border-color:color-mix(in srgb, var(--color-success) 40%, transparent); color:var(--text-heading);}
.alert.a-success .ai{color:#07a877;}
.alert-accent{display:flex; align-items:center; gap:10px; padding:12px 16px 12px 14px; background:var(--surface-card); border:1px solid var(--border-default); border-left:4px solid var(--color-warning); border-radius:var(--radius-md); box-shadow:var(--shadow-raised); font-size:var(--fs-body); line-height:1.5;}
.alert-accent.danger{border-left-color:var(--color-danger);} .alert-accent.primary{border-left-color:var(--color-primary);} .alert-accent.success{border-left-color:var(--color-success);}
.alert-accent .msg{flex:1; min-width:0; color:var(--text-muted);}
.alert-accent .msg b{font-weight:500; color:var(--text-heading);}
.st-ico{width:20px; height:20px; flex:none; display:inline-flex; align-items:center; justify-content:center; background:var(--color-warning); color:#fff; font-family:var(--font-latin); font-size:12px; font-weight:700; line-height:1;}
.st-ico.warn{align-items:flex-end; padding-bottom:1.6px; clip-path:polygon(50% 4%,98% 94%,2% 94%);}
.st-ico.danger{background:var(--color-danger); clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);}
.st-ico.info{background:var(--color-primary); border-radius:50%;}
.st-ico.ok{background:var(--color-success); border-radius:50%;}

/* Modal */
.modal{position:fixed; inset:0; z-index:100; display:none; align-items:flex-start; justify-content:center; padding:48px 16px; background:var(--overlay); overflow-y:auto;}
.modal.is-open{display:flex;}
.modal-box{width:100%; max-width:640px; background:var(--surface-card); border-radius:var(--radius-xl); box-shadow:var(--shadow-modal); display:flex; flex-direction:column; animation:modalIn var(--dur-base) var(--ease-standard);}
.modal-box.lg{max-width:900px;} .modal-box.xl{max-width:1080px;} .modal-box.sm{max-width:480px;}
@keyframes modalIn{from{transform:translateY(8px); opacity:.6;} to{transform:none; opacity:1;}}
.modal-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px 24px; border-bottom:1px solid var(--border-default);}
.modal-head h2{font-size:var(--fs-card-title); display:flex; align-items:center; gap:8px;}
.modal-body{padding:20px 24px; display:grid; gap:16px;}
.modal-foot{display:flex; align-items:center; justify-content:flex-end; gap:8px; padding:16px 24px; border-top:1px solid var(--border-default); background:var(--surface-page); border-radius:0 0 var(--radius-xl) var(--radius-xl); flex-wrap:wrap;}
.modal-foot .left{margin-right:auto; font-size:var(--fs-xs); color:var(--text-muted);}
.modal-side{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(260px,1fr); gap:0;}
.modal-side > .side{border-left:1px solid var(--border-default); padding:20px; background:var(--surface-page); display:grid; gap:12px; align-content:start;}

/* Toast */
.toast-wrap{position:fixed; right:24px; bottom:24px; z-index:200; display:grid; gap:8px;}
.toast{display:flex; align-items:center; gap:10px; min-width:260px; max-width:420px; padding:12px 16px; border-radius:var(--radius-md); background:var(--color-dark); color:#fff; font-size:var(--fs-sm); box-shadow:var(--shadow-menu); animation:modalIn var(--dur-base) var(--ease-standard);}
:root[data-theme="dark"] .toast{background:#e6ebf7; color:#17263a;}

/* Timeline */
.timeline{position:relative; display:grid; gap:0;}
.tl-item{position:relative; display:grid; grid-template-columns:56px 20px minmax(0,1fr); gap:10px; padding:10px 0;}
.tl-date{font-family:var(--font-latin); font-size:var(--fs-sm); color:var(--text-muted); text-align:right; padding-top:1px;}
.tl-dot{position:relative; display:flex; justify-content:center;}
.tl-dot::before{content:""; position:absolute; top:0; bottom:-20px; width:2px; background:var(--border-default);}
.tl-item:last-child .tl-dot::before{display:none;}
.tl-dot span{position:relative; width:12px; height:12px; margin-top:4px; border-radius:50%; background:var(--color-primary); box-shadow:0 0 0 3px var(--surface-card);}
.tl-dot span.c-secondary{background:var(--color-secondary);} .tl-dot span.c-success{background:var(--color-success);} .tl-dot span.c-danger{background:var(--color-danger);} .tl-dot span.c-purple{background:var(--color-purple);} .tl-dot span.c-muted{background:var(--text-muted);} .tl-dot span.c-warning{background:var(--color-warning);}
.tl-body .t{font-size:var(--fs-body); color:var(--text-heading); font-weight:500; display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.tl-body .s{font-size:var(--fs-xs); color:var(--text-muted); margin-top:2px;}
.tl-divider{margin:6px 0 6px 76px; padding:8px 12px; border-radius:var(--radius-md); background:var(--color-warning-soft); color:#b88a00; font-size:var(--fs-sm); font-weight:500; display:flex; align-items:center; gap:8px;}
.tl-compact .tl-item{grid-template-columns:40px 16px minmax(0,1fr); padding:6px 0;}
.tl-compact .tl-divider{margin-left:56px;}

/* Tree */
.tree{font-size:var(--fs-sm); display:grid; gap:1px;}
.tree details > summary{list-style:none; cursor:pointer; padding:6px 8px; border-radius:var(--radius-sm); color:var(--text-heading); font-weight:500; display:flex; align-items:center; gap:6px;}
.tree details > summary::-webkit-details-marker{display:none;}
.tree details > summary::before{content:"▸"; font-size:10px; color:var(--text-muted); transition:transform var(--dur-fast);}
.tree details[open] > summary::before{transform:rotate(90deg);}
.tree .leaf{display:flex; align-items:center; gap:8px; padding:6px 8px 6px 26px; border-radius:var(--radius-sm); color:var(--text-body);}
.tree .leaf:hover{background:var(--color-primary-soft); color:var(--color-primary);}
.tree .leaf.is-active{background:var(--color-primary); color:#fff;}
.tree details details{padding-left:14px;}
.tree .cnt{margin-left:auto; font-family:var(--font-latin); font-size:11px; color:var(--text-muted);}

/* Stepper */
.stepper{display:grid; grid-template-columns:repeat(var(--steps,4),minmax(0,1fr)); gap:8px; counter-reset:step;}
.step{display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:var(--radius-lg); background:var(--surface-card); color:var(--text-muted); font-size:var(--fs-sm); text-decoration:none;}
.step .no{width:24px; height:24px; flex:none; border-radius:50%; background:var(--track-default); color:var(--text-muted); display:grid; place-items:center; font-family:var(--font-latin); font-size:12px; font-weight:700;}
.step.done{color:var(--text-heading);} .step.done .no{background:var(--color-success); color:#fff;}
.step.current{background:var(--color-primary); color:#fff; font-weight:500;} .step.current .no{background:#fff; color:var(--color-primary);}
a.step:hover{outline:1px solid var(--color-primary);}

/* Select cards */
.choice-card{position:relative; display:block; padding:18px; border:1.5px solid var(--border-default); border-radius:var(--radius-lg); background:var(--surface-card); cursor:pointer; transition:border-color var(--dur-fast), background-color var(--dur-fast);}
.choice-card:hover{border-color:var(--color-primary);}
.choice-card.is-selected{border-color:var(--color-primary); background:var(--color-primary-soft);}
.choice-card > input{position:absolute; top:18px; right:18px; accent-color:var(--color-primary); width:18px; height:18px;}
.choice-card h3{font-size:16px; margin-bottom:6px; display:flex; align-items:center; gap:8px;}
.choice-card p{font-size:var(--fs-sm); color:var(--text-body);}
.choice-card .meta{font-size:var(--fs-xs); color:var(--text-muted); margin-top:10px;}

/* List rows */
.list{display:grid;}
.list-item{display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--border-default);}
.list-item:last-child{border-bottom:0;}
.list-item .grow .t{font-size:var(--fs-body); color:var(--text-heading); font-weight:500;}
.list-item .grow .s{font-size:var(--fs-xs); color:var(--text-muted);}
.date-block{width:44px; height:44px; flex:none; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; font-family:var(--font-latin); font-size:var(--fs-sm); font-weight:700;}
.date-block.t-danger{background:var(--color-danger-soft); color:var(--color-danger);} .date-block.t-warning{background:var(--color-warning-soft); color:#b88a00;} .date-block.t-light{background:var(--color-light); color:var(--text-heading);} .date-block.t-primary{background:var(--color-primary-soft); color:var(--color-primary);} .date-block.t-success{background:var(--color-success-soft); color:#07a877;}
.kv{display:grid; grid-template-columns:110px minmax(0,1fr); gap:8px 12px; font-size:var(--fs-sm);}
.kv dt{color:var(--text-muted);} .kv dd{margin:0; color:var(--text-heading);}
.dl-table{width:100%; border-collapse:collapse; font-size:var(--fs-sm);}
.dl-table th{width:120px; text-align:left; font-weight:500; color:var(--text-heading); background:var(--surface-page); padding:10px 12px; border-bottom:1px solid var(--border-default); vertical-align:top;}
.dl-table td{padding:10px 12px; border-bottom:1px solid var(--border-default); color:var(--text-body);}

/* Placeholders */
.ph{display:grid; place-items:center; border-radius:var(--radius-md); background:repeating-linear-gradient(135deg, var(--surface-page) 0 10px, var(--color-light) 10px 11px); color:var(--text-muted); font-size:var(--fs-xs); border:1px solid var(--border-default); text-align:center; padding:8px;}
.thumb{aspect-ratio:16/9; max-width:100%;}
.slide-thumb{position:relative; display:block; border:1.5px solid var(--border-default); border-radius:var(--radius-md); padding:4px; background:var(--surface-card); cursor:pointer;}
.slide-thumb.is-active{border-color:var(--color-primary); box-shadow:var(--shadow-focus);}
.slide-thumb .ph{aspect-ratio:16/9;}
.slide-thumb .meta{display:flex; align-items:center; justify-content:space-between; font-size:11px; padding:4px 2px 0; color:var(--text-muted);}

/* Help / Dev note */
.help{border:1px dashed var(--border-default); border-radius:var(--radius-lg); padding:14px 16px; background:var(--surface-card); font-size:var(--fs-sm);}
.help summary{cursor:pointer; list-style:none; display:flex; align-items:center; gap:8px; font-weight:500; color:var(--text-heading);}
.help summary::-webkit-details-marker{display:none;}
.help ul{margin:10px 0 0; padding-left:18px; color:var(--text-body); line-height:var(--lh-body);}
.help li b{font-weight:500; color:var(--text-heading);}
.devnote{margin-top:24px;}
.devnote .badge{background:var(--color-dark); color:#fff;}
.fix-note{display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; color:var(--color-secondary); background:var(--color-secondary-soft); border-radius:var(--radius-xs); padding:2px 6px; white-space:nowrap;}

/* Charts */
.chart-wrap{position:relative;}
.chart-tip{position:absolute; z-index:5; pointer-events:none; opacity:0; transform:translate(-50%,-100%); background:var(--color-dark); color:#fff; border-radius:var(--radius-md); padding:8px 10px; font-size:var(--fs-xs); line-height:1.6; white-space:nowrap; box-shadow:var(--shadow-menu); transition:opacity var(--dur-fast);}
:root[data-theme="dark"] .chart-tip{background:#0b111b;}
.chart-tip .m{font-weight:700; margin-bottom:2px;}
.chart-tip .r{display:flex; align-items:center; gap:6px;}
.chart-tip .d{width:8px; height:8px; border-radius:2px; flex:none;}
.legend{display:flex; gap:6px 16px; flex-wrap:wrap; margin:-8px 0 12px;}
.legend button,.legend span.li{display:inline-flex; align-items:center; gap:6px; border:0; background:none; padding:2px 0; font-size:var(--fs-xs); color:var(--text-muted); cursor:pointer;}
.legend button:hover{color:var(--text-heading);}
.legend .sw{width:12px; height:3px; border-radius:2px; flex:none;}
.legend .sw.dash{height:0; border-top:3px dashed; border-radius:0; background:none !important;}
.legend .sw.sq{width:10px; height:10px; border-radius:3px;}
.legend button[aria-pressed="false"]{opacity:.4; text-decoration:line-through;}
.bars{display:flex; align-items:flex-end; gap:10px; height:180px; padding-top:8px; border-bottom:1px solid var(--border-default); background-image:linear-gradient(var(--border-default) 1px, transparent 1px); background-size:100% 45px;}
.bars .grp{flex:1; height:100%; display:flex; align-items:flex-end; justify-content:center; gap:3px;}
.bars .bar{width:min(14px,40%); border-radius:3px 3px 0 0; background:var(--color-primary);}
.bars .bar.s2{background:var(--color-success);} .bars .bar.s3{background:var(--color-secondary);} .bars .bar.muted{background:var(--track-default);}
.bars-x{display:flex; gap:10px; font-size:11px; color:var(--text-muted); margin-top:8px;}
.bars-x span{flex:1; text-align:center;}
.gauge{display:grid; gap:6px;}
.gauge .top{display:flex; justify-content:space-between; font-size:var(--fs-sm); color:var(--text-heading);}
.gauge .top .v{font-family:var(--font-latin); color:var(--text-muted);}

/* Gantt */
.gantt{display:grid; grid-template-columns:minmax(260px,1.2fr) 70px 80px minmax(520px,3fr); font-size:var(--fs-sm); min-width:980px;}
.gantt > div{border-bottom:1px solid var(--border-default); padding:0 10px; min-height:40px; display:flex; align-items:center;}
.gantt .gh{background:var(--surface-page); font-weight:500; color:var(--text-heading); min-height:36px; position:sticky; top:0;}
.gantt .gname{gap:6px; white-space:nowrap; overflow:hidden;}
.gantt .gname.l1{font-weight:500; color:var(--text-heading);}
.gantt .gname.l2{padding-left:26px; color:var(--text-heading);}
.gantt .gname.l3{padding-left:42px;}
.gantt .gnum{justify-content:center; font-family:var(--font-latin);}
.gantt .gpm input{width:56px; height:28px; text-align:center; border:1px solid var(--color-warning); background:var(--color-warning-soft); border-radius:var(--radius-sm); font-family:var(--font-latin); font-size:12px; color:var(--text-heading);}
.gantt .gtrack{position:relative; padding:0; background-image:linear-gradient(90deg, var(--border-default) 1px, transparent 1px); background-size:10% 100%;}
.gantt .gmonths{padding:0; display:grid; grid-template-columns:repeat(10,1fr);}
.gantt .gmonths span{text-align:center; font-size:12px; border-left:1px solid var(--border-default); line-height:36px;}
.g-plan{position:absolute; height:14px; top:50%; transform:translateY(-50%); background:var(--track-default); border-radius:3px;}
.g-act{position:absolute; height:14px; top:50%; transform:translateY(-50%); background:var(--color-primary); border-radius:3px;}
.g-act.late{background:var(--color-danger);}
.g-today{position:absolute; top:0; bottom:0; width:0; border-left:2px dashed var(--color-danger); z-index:1;}
.g-today span{position:absolute; top:2px; left:4px; font-size:10px; color:var(--color-danger); font-weight:700; white-space:nowrap;}

/* Heatmap */
.heat{display:grid; gap:4px; font-size:12px;}
.heat .hrow{display:grid; grid-template-columns:90px repeat(10,minmax(44px,1fr)); gap:4px; align-items:center;}
.heat .hcell{height:30px; border-radius:var(--radius-sm); display:grid; place-items:center; font-family:var(--font-latin); background:var(--surface-page); color:var(--text-muted); border:1px solid var(--border-default);}
.heat .hcell.ok{background:var(--color-primary); color:#fff; border-color:transparent;}
.heat .hcell.low{background:var(--color-primary-soft); color:var(--color-primary); border-color:transparent;}
.heat .hcell.over{background:var(--color-warning-soft); color:#b88a00; border-color:var(--color-warning);}
.heat .hcell.plan{background:var(--surface-card); border-style:dashed;}
.heat .hh{font-size:11px; color:var(--text-muted); text-align:center;}

/* Matrix status cells */
.cell-st{display:inline-flex; align-items:center; justify-content:center; min-width:52px; padding:3px 8px; border-radius:var(--radius-pill); font-size:11px; font-weight:700;}

/* Doc preview */
.doc-sheet{overflow-x:auto; background:#fff; color:#222; border:1px solid var(--border-default); border-radius:var(--radius-md); padding:28px 32px; font-size:13px; line-height:1.7; box-shadow:var(--shadow-raised);}
.doc-sheet h3{color:#111; font-size:18px; text-align:center; margin-bottom:12px; font-weight:700;}
.doc-sheet .meta{font-size:12px; color:#555; text-align:center; margin-bottom:16px;}
.doc-sheet table{width:100%; border-collapse:collapse; font-size:12px;}
.doc-sheet th,.doc-sheet td{border:1px solid #bbb; padding:6px 8px; vertical-align:top; color:#222;}
.doc-sheet th{background:#f2f2f2; font-weight:700;}
.doc-sheet .auto{color:#7a7f8c;}
.doc-sheet .edited{background:#fff5d6;}
.doc-sheet .sec{font-weight:700; margin:14px 0 6px; display:flex; align-items:center; justify-content:space-between;}
.doc-sheet .sec .rev{font-size:11px; font-weight:400; color:#3366ff; cursor:pointer;}
.doc-sheet .src{font-size:11px; color:#3366ff; border-bottom:1px dotted #3366ff; cursor:help;}
.doc-sheet .sign{display:flex; justify-content:space-around; margin-top:18px; font-size:12px;}

/* Project cards (SCR-002) */
.proj-card{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px 24px; align-items:center; padding:20px 24px; background:var(--surface-card); border-radius:var(--radius-xl); text-decoration:none; color:inherit; transition:box-shadow var(--dur-fast);}
.proj-card:hover{box-shadow:var(--shadow-raised); color:inherit;}
.proj-card h3{font-size:17px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;}

/* Auth */
.auth-wrap{min-height:100%; display:grid; place-items:center; padding:40px 16px; background:linear-gradient(160deg, var(--surface-page) 0%, var(--surface-page) 55%, var(--color-primary-soft) 100%);}
.auth-card{width:100%; max-width:420px; background:var(--surface-card); border-radius:var(--radius-xl); padding:36px 32px; box-shadow:var(--shadow-raised); display:grid; gap:18px;}
.auth-logo{display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;}
.auth-logo .sb-mark{width:44px; height:44px; font-size:17px; border-radius:10px;}
.auth-logo h1{font-family:var(--font-latin); font-size:26px; font-weight:700;}
.auth-logo p{font-size:var(--fs-sm); color:var(--text-muted);}
.otp{display:grid; grid-template-columns:repeat(6,minmax(0,52px)); justify-content:center; gap:8px;}
.otp input{width:100%; min-width:0; padding:0; height:52px; text-align:center; font-family:var(--font-latin); font-size:20px; border:1px solid var(--border-default); border-radius:var(--radius-sm); background:var(--surface-input); color:var(--text-heading);}
.otp input:focus{outline:none; border-color:var(--color-primary); box-shadow:var(--shadow-focus);}
.divider-text{display:flex; align-items:center; gap:10px; font-size:var(--fs-xs); color:var(--text-muted);}
.divider-text::before,.divider-text::after{content:""; flex:1; height:1px; background:var(--border-default);}

/* Price cards */
.price-card{position:relative; padding:20px; border:1.5px solid var(--border-default); border-radius:var(--radius-xl); background:var(--surface-card); display:grid; gap:10px; align-content:start; cursor:pointer; text-align:left;}
.price-card:hover{border-color:var(--color-primary);}
.price-card.is-selected{border-color:var(--color-primary); box-shadow:var(--shadow-focus);}
.price-card .pn{font-family:var(--font-latin); font-size:18px; font-weight:700; color:var(--text-heading);}
.price-card .pp{font-family:var(--font-latin); font-size:20px; color:var(--text-heading);}
.price-card .pp small{font-size:12px; color:var(--text-muted);}
.price-card ul{list-style:none; display:grid; gap:4px; font-size:var(--fs-sm);}
.price-card li::before{content:"✓ "; color:var(--color-success); font-weight:700;}
.ribbon{position:absolute; top:12px; right:12px;}

/* Calendar strip (WBS-304) */
.week-strip{display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.day{display:grid; place-items:center; gap:2px; width:64px; padding:8px 0; border-radius:var(--radius-md); background:var(--surface-page); font-size:12px; color:var(--text-muted); border:0; cursor:pointer; position:relative;}
.day b{font-family:var(--font-latin); font-size:15px; color:var(--text-heading); font-weight:500;}
.day.is-active{background:var(--color-primary); color:#fff;} .day.is-active b{color:#fff;}
.day.miss::after{content:""; position:absolute; top:6px; right:8px; width:6px; height:6px; border-radius:50%; background:var(--color-danger);}

/* Kanban-ish member list */
.member{display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--border-default); font-size:var(--fs-sm);}
.member:last-child{border-bottom:0;}
.member .grow .t{color:var(--text-heading); font-weight:500;}
.member .grow .s{font-size:12px; color:var(--text-muted);}

/* Screen index (index.html) */
.idx-hero{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:24px; align-items:stretch;}
.idx-group h3{font-size:15px; margin:0 0 10px; display:flex; align-items:center; gap:8px;}

/* 6. Responsive ------------------------------------------------------------- */
@media (min-width:1640px){ .kpi-row.c6{grid-template-columns:repeat(6,minmax(0,1fr));} }
@media (max-width:1320px){
  .kpi-row{grid-template-columns:repeat(2,minmax(0,1fr));}
  .kpi-row.c5{grid-template-columns:repeat(3,minmax(0,1fr));}
  .split,.split-r{grid-template-columns:minmax(0,1fr);}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .idx-hero{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:1100px){ .status-line{display:none;} .grid-3{grid-template-columns:repeat(2,minmax(0,1fr));} .modal-side{grid-template-columns:minmax(0,1fr);} .modal-side > .side{border-left:0; border-top:1px solid var(--border-default);} }
@media (max-width:860px){
  .app,.app.nav-collapsed{grid-template-columns:minmax(0,1fr); grid-template-areas:"topbar" "main";}
  .sb-inner{position:static; height:100%;}
  .sidebar{position:fixed; left:0; top:0; bottom:0; width:240px; z-index:50; transform:translateX(-100%); transition:transform var(--dur-base) var(--ease-standard);}
  .app.nav-open .sidebar{transform:translateX(0);}
  .app.nav-collapsed .sb-name,.app.nav-collapsed .label,.app.nav-collapsed .chev,.app.nav-collapsed .sb-caption{display:inline;}
  .app.nav-collapsed .nav-group.is-open .nav-sub{display:flex;}
  .app.nav-collapsed .sb-brand{padding:0 24px; justify-content:flex-start;}
  .app.nav-collapsed .nav-link{justify-content:flex-start;}
  .scrim{display:none; position:fixed; inset:0; z-index:45; background:var(--overlay);}
  .app.nav-open .scrim{display:block;}
  .grid-2,.split-even,.form-grid{grid-template-columns:minmax(0,1fr);}
  .stepper{grid-template-columns:repeat(2,minmax(0,1fr));}
  .persona{display:none;}
}
@media (max-width:640px){
  .topbar{gap:8px; padding:0 12px;}
  main.content{padding:16px;}
  .stack,.grid-2,.grid-3,.split,.split-r,.split-even{gap:16px;}
  .grid-3,.grid-4,.kpi-row,.kpi-row.c3,.kpi-row.c5,.kpi-row.c6{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;}
  .card{padding:20px;} .card-head::before{left:-20px;}
  .page-head h1{font-size:22px;}
  .project-select .name{max-width:96px;}
  .user-meta,.hide-sm{display:none;}
  .tb-icons{gap:6px;} .tb-btn{width:36px; height:36px;}
  .stat{padding:16px;} .stat .ico{width:36px; height:36px;} .stat .value{font-size:20px;}
  .form-row{grid-template-columns:minmax(0,1fr); gap:6px;}
  .modal{padding:16px 8px;}
  .toast-wrap{left:16px; right:16px;}
}
@media (max-width:420px){ .project-select .badge{display:none;} .project-select .name{max-width:70px;} .kpi-row,.kpi-row.c3,.kpi-row.c5,.kpi-row.c6{grid-template-columns:minmax(0,1fr);} }
@media print{ .sidebar,.topbar,.devnote{display:none;} .app{display:block;} }
/* (ProjeX 추가, 2차 S11) 대시보드 PDF — 브라우저 인쇄용: 버튼·접는 표 숨김, 카드가 쪽 사이에서 잘리지 않게 */
.print-only{display:none;}
@media print{
  .page-actions,details{display:none !important;}
  .print-only{display:block; margin:0 0 8px; color:#555;}
  .card,.stat{break-inside:avoid; box-shadow:none;}
  body{background:#fff;}
}

/* ---- 회사 관리자(CAD) · 문의·지원 ---- */
.sb-mark.org{background:var(--color-teal);}
.role-list{display:grid; gap:4px;}
.role-list .cap{font-size:var(--fs-xs); color:var(--text-muted); padding:10px 4px 4px;}
.role-item{display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; border:1px solid transparent; border-radius:var(--radius-sm); background:transparent; color:var(--text-body); font:inherit; font-size:var(--fs-body); text-align:left; cursor:pointer;}
.role-item:hover{background:var(--surface-subtle);}
.role-item.is-selected{background:var(--color-primary-soft); border-color:var(--color-primary); color:var(--text-heading); font-weight:500;}
.role-item .grow{flex:1; min-width:0;}
.role-item .n{font-family:var(--font-latin); font-size:var(--fs-sm); color:var(--text-muted);}
.perm td.c input{width:16px; height:16px; accent-color:var(--color-primary); vertical-align:middle;}
.perm td.c input:disabled{opacity:.35; cursor:not-allowed;}
.perm .grp td{background:var(--surface-page); font-size:var(--fs-xs); color:var(--text-muted); font-weight:500; padding-top:6px; padding-bottom:6px;}
.tk-thread{display:grid; gap:12px;}
.tk-msg{border:1px solid var(--border-default); border-radius:var(--radius-md); padding:12px 14px; background:var(--surface-card);}
.tk-msg.op{background:var(--color-primary-soft); border-color:transparent;}
.tk-msg.memo{background:var(--color-warning-soft); border:1px dashed var(--color-warning);}
.tk-msg .hd{display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; font-size:var(--fs-xs); color:var(--text-muted); margin-bottom:6px;}
.tk-msg .hd b{color:var(--text-heading); font-weight:500; font-size:var(--fs-sm);}
.tk-msg p{margin:0; font-size:var(--fs-sm); line-height:1.7; color:var(--text-body);}
.tk-msg .att{display:inline-flex; align-items:center; gap:4px; margin-top:8px; font-size:var(--fs-xs); color:var(--color-primary);}
.demo-links{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; font-size:var(--fs-xs); color:var(--text-muted);}
.demo-links a{display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border:1px solid var(--border-default); border-radius:var(--radius-pill); background:var(--surface-card); color:var(--text-heading); text-decoration:none;}
.demo-links a:hover{border-color:var(--color-primary); color:var(--color-primary);}
.demo-links > span{display:inline-flex; align-items:center; gap:4px;}
.stat .ico[class*="t-"]{color:#fff !important;} /* 다크 모드에서 경고·성공 아이콘이 배경색과 같아 보이지 않던 문제 */