/* KP AI 3판 — Claude 앱 측정값 기반 (KP_AI_ref) */
:root{
  --bg:#fcfcfb; --bg-side:#fafaf9; --bg-main:#fcfcfb; --surface:#fff; --surface-1:#fcfcfb; --surface-2:#f9f9f7;
  --ink:#0b0b0b; --ink2:#52514e; --ink3:#898781; --ink4:#c3c2b7;
  --ring:rgba(11,11,11,.1); --ring2:rgba(11,11,11,.2); --hover:rgba(11,11,11,.05); --pressed:rgba(11,11,11,.1); --selected:#edece8;
  --bubble:rgba(11,11,11,.05); --card:#fcfcfb; --clay:#d97757; --blue:#2a78d6; --link:#184f95; --danger:#8e2626; --danger-btn:#d03b3b; --warn-bg:rgba(244,161,2,.35); --warn-ink:#734500;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Pretendard","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;
  --serif:Georgia,"Times New Roman","Apple SD Gothic Neo","Malgun Gothic","Noto Serif KR",serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --side:288px; --feed:736px; --compw:768px; --compw-empty:640px;
  --sh-pop:0 0 0 1px var(--ring),0 8px 24px rgba(0,0,0,.12),0 2px 6px rgba(0,0,0,.08);
  --sh-btn:inset 0 0 0 1px var(--ring),0 1px 2px rgba(0,0,0,.05);
  --sh-modal:0 0 0 1px var(--ring),0 4px 8px rgba(11,11,11,.08),0 12px 28px -2px rgba(11,11,11,.08);
  --body-fs:15px; --body-lh:22px;
}
:root[data-theme="dark"]{
  --bg:#151515; --bg-side:#111111; --bg-main:#151515; --surface:#20201f; --surface-1:#1b1b1a; --surface-2:#242423;
  --ink:#f0efec; --ink2:#c3c2b7; --ink3:#898781; --ring:rgba(255,255,255,.1); --ring2:rgba(255,255,255,.2); --hover:rgba(255,255,255,.06); --pressed:rgba(255,255,255,.12); --selected:#262625;
  --bubble:rgba(255,255,255,.07); --card:#1b1b1a; --sh-btn:inset 0 0 0 1px var(--ring),0 1px 2px rgba(0,0,0,.3); --warn-bg:rgba(244,161,2,.25); --warn-ink:#f2c56b;
}
:root[data-font="sans"]{ --serif:var(--sans); }
:root[data-size="small"]{ --body-fs:14px; --body-lh:20px } :root[data-size="large"]{ --body-fs:17px; --body-lh:25px }
:root[data-width="narrow"]{ --feed:640px; --compw:672px } :root[data-width="wide"]{ --feed:900px; --compw:932px }

*{box-sizing:border-box} html,body{height:100%;margin:0}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);font-size:14px;line-height:21px;-webkit-font-smoothing:antialiased}
button,input,textarea,select{font:inherit;color:inherit} button{cursor:pointer;background:none;border:none;padding:0}
input,textarea{background:rgba(255,255,255,.5);border:none;border-radius:8px;padding:6px 12px;outline:none;box-shadow:inset 0 0 0 1px var(--ring)}
:root[data-theme="dark"] input,:root[data-theme="dark"] textarea{background:rgba(255,255,255,.04)}
input:focus,textarea:focus{box-shadow:inset 0 0 0 1px #fff,0 0 0 1px var(--blue),0 0 6px 1px #cde2fb}
.hidden{display:none!important} .grow{flex:1} .dim{color:var(--ink3)} .err{color:var(--danger-btn);font-size:13px;min-height:1.2em} .hint{color:var(--ink3);font-size:13px;line-height:17px} .hint.sm{font-size:12px}
kbd{font:13px var(--sans);color:var(--ink3)} .search-btn kbd{font-size:12px;border:none}
#stamp{position:fixed;bottom:4px;right:8px;font-size:10.5px;color:var(--ink3);z-index:5;pointer-events:none}
.screen{height:100%}
.ic{display:inline-flex;width:1em;height:1em;font-size:20px;line-height:1;flex:none;vertical-align:middle} .ic svg{width:100%;height:100%} .ic.sm16{font-size:16px} .ic.tiny{font-size:12px} .ic.bold svg{stroke-width:2.2}
.ib{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;color:var(--ink);position:relative} .ib:hover{background:var(--hover)} .ib.on{background:var(--pressed)}
.ib.sm{width:28px;height:28px;border-radius:7px} .ib.sm .ic{font-size:16px} .ib.xs{width:20px;height:28px} .ib.xs .ic{font-size:12px;color:var(--ink3)}
.btn{display:inline-flex;align-items:center;gap:4px;height:32px;padding:0 12px;border-radius:8px;font-size:14px;background:rgba(255,255,255,.1);box-shadow:var(--sh-btn);color:var(--ink);white-space:nowrap} .btn:hover{background:var(--hover)}
.btn.sm{height:28px;padding:0 10px;border-radius:7px} .btn.xs{height:28px;padding:0 10px;border-radius:7px;font-size:14px}
.btn.dark,.btn.primary{background:var(--ink);color:var(--bg);font-weight:500;box-shadow:none} .btn.dark:hover,.btn.primary:hover{opacity:.9} .btn.dark .ic{color:var(--bg)}
.btn.danger{background:var(--danger-btn);color:#fff;font-weight:500;box-shadow:none} .btn:disabled,.btn.disabled{opacity:.4;pointer-events:none}
.avatar{width:24px;height:24px;border-radius:50%;background:var(--pressed);display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:500;flex:none} .avatar.lg{width:32px;height:32px;font-size:13px}

/* 로그인 */
#login{display:flex;align-items:center;justify-content:center;background:var(--bg)}
.login-card{background:var(--surface);box-shadow:var(--sh-modal);border-radius:12px;padding:32px 28px;width:340px;display:flex;flex-direction:column;gap:10px}
.login-card input{height:36px}
.wordmark{display:inline-flex;align-items:center;font-family:var(--serif);font-size:20px;line-height:20px;font-weight:500;color:var(--ink);white-space:nowrap} .wordmark.small{font-size:20px} .login-card .wordmark{font-size:28px;line-height:32px;justify-content:center} .sub{color:var(--ink3);margin-bottom:8px}

/* 앱 상단 바 */
#main{display:flex;flex-direction:column}
#titlebar{height:48px;display:grid;grid-template-columns:var(--side) 1fr auto;align-items:center;padding:0 8px;-webkit-app-region:drag;background:var(--bg)}
#titlebar button{-webkit-app-region:no-drag}
.tb-l{display:flex;gap:2px;align-items:center;padding-left:4px} .tb-l .ib{width:24px;height:24px;border-radius:6px;color:var(--ink2)} .tb-l .ic{font-size:16px}
.tb-c{display:flex;align-items:center;gap:2px;padding-left:8px}
.tb-title{height:28px;padding:0 8px;border-radius:7px;font-size:14px;color:var(--ink)} .tb-title:hover{background:var(--hover)}
.tb-r{display:flex;align-items:center;gap:4px} .tb-r .ib{width:28px;height:28px;border-radius:7px} .tb-r .ib .ic{font-size:18px}
.cnt{font-size:12px;color:var(--ink2);margin-left:2px}
#body{flex:1;display:flex;min-height:0}
body.collapsed #side,body.collapsed #sideResizer{display:none} body.collapsed #titlebar{grid-template-columns:auto 1fr auto}

/* 사이드바 (288) */
#side{width:var(--side);background:var(--bg-side);display:flex;flex-direction:column;flex:none}
#sideResizer{width:12px;margin-left:-6px;cursor:col-resize;z-index:2}
.side-top{height:48px;display:flex;align-items:center;padding:0 12px 0 44px;margin-top:-48px;pointer-events:none}
.search-btn{display:flex;align-items:center;gap:8px;margin:4px 8px 0;height:32px;padding:0 8px;border-radius:8px;background:rgba(255,255,255,.5);box-shadow:inset 0 0 0 .5px var(--ring),0 1px 2px rgba(0,0,0,.05);color:var(--ink3);font-size:14px;text-align:left}
:root[data-theme="dark"] .search-btn{background:rgba(255,255,255,.04)}
.search-btn .ic{font-size:16px} .search-btn span{flex:1}
.menu{display:flex;flex-direction:column;padding:8px 8px 0;gap:0}
.menu a{display:flex;align-items:center;gap:8px;height:32px;padding:0 6px;margin-bottom:1px;border-radius:8px;color:var(--ink2);font-size:14px;cursor:pointer;text-decoration:none}
.menu a .ic{font-size:20px;width:20px;color:var(--ink2)} .menu a .ic[data-ic=plus]{font-size:16px;width:20px;color:var(--ink)}
.menu a:hover{background:var(--hover)} .menu a.on{background:var(--selected);color:var(--ink)} .menu a.muted{color:var(--ink3)} .menu a.muted .ic{opacity:.5}
#sideScroll{flex:1;overflow:auto;padding:0 8px 8px}
.grp{margin-top:22px} .grp-h{display:flex;align-items:center;height:24px;padding:4px 0 4px 4px;color:var(--ink3);font-size:13px;line-height:16px;margin:0 2px}
.grp-h span{flex:1;padding-left:2px} .grp-h .ib{width:24px;height:24px;border-radius:6px;opacity:0;color:var(--ink2)} .grp:hover .grp-h .ib{opacity:1} .grp-h .ib .ic{font-size:16px}
.conv{display:flex;align-items:center;gap:8px;height:32px;padding:0 6px;margin-bottom:1px;border-radius:8px;color:var(--ink2);font-size:14px;cursor:pointer;position:relative}
.conv .ic{font-size:20px;width:20px;flex:none;color:var(--ink2)} .conv span.t{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv:hover{background:var(--hover)} .conv.on{background:var(--selected);color:var(--ink)}
.conv .doc{font-size:16px;color:var(--ink3);margin-right:2px} .conv .more{position:absolute;right:4px;width:24px;height:24px;border-radius:6px;display:none;align-items:center;justify-content:center;background:var(--selected)} .conv:hover .more{display:inline-flex} .conv .more .ic{font-size:16px}
.side-bottom{height:48px;display:flex;align-items:center;padding:0 8px;gap:4px}
.me-btn{display:flex;align-items:center;gap:8px;height:32px;padding:0 8px 0 2px;border-radius:8px;flex:1;min-width:0;text-align:left} .me-btn:hover{background:var(--hover)}
.me-name{font-size:14px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .me-dot,.me-plan{font-size:12px;color:var(--ink3);white-space:nowrap} .me-btn .ic.tiny{color:var(--ink3);margin-left:auto}
.side-bottom > .ib{width:32px;height:32px;color:var(--ink2)} .side-bottom > .ib .ic{font-size:16px}

/* 가운데 */
#content{flex:1;min-width:0;background:var(--bg-main);display:flex;flex-direction:column;position:relative}
.page{flex:1;min-height:0;display:flex;flex-direction:column}
#chat{position:relative}
#messages{flex:1;overflow:auto;padding:12px 0 24px}
.welcome{display:flex;align-items:center;justify-content:center;gap:10px;height:100%} .welcome .mark{width:32px;height:32px;border-radius:50%;background:var(--clay);display:inline-block;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.greet{font-family:var(--serif);font-size:32px;line-height:38.4px;font-weight:360;color:var(--ink)}
#chat.welcome-mode{justify-content:center} #chat.welcome-mode #messages{flex:0 0 auto;padding:0 0 24px} #chat.welcome-mode .welcome{height:auto}
#chat.welcome-mode #composerWrap{flex:0 0 auto;padding-bottom:30vh} #chat.welcome-mode #composer{max-width:var(--compw-empty)} #chat.welcome-mode #legal{display:block}
#legal{display:none;text-align:center;font-size:12px;line-height:19.5px;color:var(--ink2);margin-top:16px}
.msg{max-width:var(--feed);margin:0 auto 16px;padding:0 8px} .msg.user{display:flex;justify-content:flex-end;margin-bottom:28px;margin-top:12px}
.msg.user .bubble{background:var(--bubble);padding:12px 16px;border-radius:12px;max-width:80%;font-size:15px;line-height:20px;white-space:pre-wrap;word-break:break-word} .msg.user .bubble .att{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.msg.user .bubble .att span{font-size:12px;background:var(--surface-2);box-shadow:0 1px 2px rgba(0,0,0,.05);border-radius:10px;padding:4px 8px}
.msg.assistant{position:relative;padding-left:4px}
.msg.assistant .mark{position:absolute;left:4px;top:-2px;width:20px;height:20px;color:var(--clay);display:none} .msg.assistant.streaming .mark{display:block;animation:pulse 1.2s ease-in-out infinite} .msg.assistant.streaming.hasbody .mark{display:none}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.85)}}
.tools{display:flex;flex-direction:column;gap:2px;margin:0 0 8px 0}
.tl{display:flex;align-items:center;gap:4px;min-height:24px;font-size:14px;line-height:20px;color:var(--ink2);padding:1.75px 0;padding-left:0}
.msg.streaming .tools .tl.run{color:var(--ink)} .msg.assistant.streaming:not(.hasbody) .tools,.msg.assistant.streaming:not(.hasbody) .approval,.msg.assistant.streaming:not(.hasbody) .warn,.msg.assistant.streaming:not(.hasbody) .error{margin-left:32px} .msg.assistant.streaming .acts{visibility:hidden}
.tl .tog{display:inline-flex;align-items:center;justify-content:center;width:12px;height:20px;color:var(--ink3)} .tl .tog .ic{font-size:12px}
.tl-card{margin:4px 0 8px;border-radius:12px;box-shadow:0 0 0 1px var(--ring);padding:12px;font-size:14px;line-height:20px;display:none}
.tl-card.open{display:block} .tl-card .r1{display:flex;gap:8px;align-items:center;color:var(--ink3)} .tl-card .r1 b{font-weight:400;color:var(--ink)} .tl-card .r2{color:var(--ink3);margin-top:4px}
.txt{font-family:var(--serif);font-size:var(--body-fs);line-height:var(--body-lh);color:var(--ink);word-break:break-word}
.txt p{margin:0 0 4px;padding-bottom:12px} .txt p:last-child{padding-bottom:0}
.txt h2,.txt h3,.txt h4{font-family:var(--sans);margin:16px 0 8px;line-height:1.3} .txt h2{font-size:20px} .txt h3{font-size:17px} .txt h4{font-size:15px}
.txt ul,.txt ol{margin:0 0 12px;padding-left:30px} .txt li{padding-left:7.5px;margin:2px 0} .txt strong{font-weight:600}
.txt pre{background:var(--surface-2);box-shadow:0 0 0 1px var(--ring);border-radius:8px;padding:12px;overflow:auto;font:13px/1.5 var(--mono);margin:8px 0 12px} .txt code{background:var(--surface-2);padding:1px 5px;border-radius:4px;font:13px var(--mono)}
.txt table{border-collapse:collapse;margin:8px 0 12px;font-family:var(--sans);font-size:13.5px} .txt td,.txt th{border:1px solid var(--ring);padding:4px 8px}
.txt a{color:var(--link)} .txt .cite{display:inline-flex;align-items:center;height:18px;padding:0 6px;border-radius:9px;background:var(--surface-2);box-shadow:0 0 0 .5px var(--ring);font:12px/17px var(--sans);color:var(--ink2);text-decoration:none;margin:0 2px;vertical-align:middle}
.cursor::after{content:"";display:inline-block;width:8px;height:14px;background:var(--ink);margin-left:2px;vertical-align:-2px;animation:blink 1s infinite} @keyframes blink{50%{opacity:0}}
.acts{display:flex;align-items:center;gap:0;margin:8px 0 0 -2px;height:24px} .acts .ib{width:24px;height:24px;border-radius:6px;color:var(--ink3)} .acts .ib .ic{font-size:16px} .acts .ib.on{color:var(--clay)} .acts time{font-size:11px;color:var(--ink3);padding-left:6px}
.warn{color:var(--warn-ink);background:var(--warn-bg);border-radius:8px;padding:6px 10px;font-size:13px;margin:6px 0} .error{color:var(--danger);font-size:13px;margin:6px 0}
/* 승인 카드 */
.approval{margin:8px 0;border-radius:12px;box-shadow:0 0 0 1px var(--ring);background:var(--surface);padding:12px 14px;font-family:var(--sans)}
.approval .a-t{font-size:14px;font-weight:500;display:flex;align-items:center;gap:8px} .approval .a-d{font-size:13px;color:var(--ink2);margin:4px 0 10px;font-family:var(--mono);word-break:break-all}
.approval .a-b{display:flex;gap:8px;justify-content:flex-end} .approval.done{opacity:.6}

/* 입력창 */
#composerWrap{padding:0 24px 8px;display:flex;flex-direction:column;align-items:stretch}
#composer{max-width:var(--compw);width:100%;margin:0 auto}
.box{background:var(--surface);border-radius:14px;padding:8px;box-shadow:0 4px 20px rgba(0,0,0,.035),0 0 0 1px var(--ring);display:flex;flex-direction:column;gap:8px}
#chat:not(.welcome-mode) .box{box-shadow:0 4px 20px rgba(0,0,0,.075),0 0 0 1px var(--ring2)}
.box-row1{display:flex;align-items:flex-start;gap:0;min-height:32px} #chat.welcome-mode #replyLabel,#chat.welcome-mode #underTools{display:none} #underTools{display:inline-flex;align-items:center} .reply-label{font-size:15px;color:var(--ink3);padding:5.5px 0 5.5px 6px;line-height:21px;white-space:nowrap}
.box textarea{flex:1;background:transparent;box-shadow:none;border:none;resize:none;padding:5.5px 8px;font-size:15px;line-height:21px;max-height:240px;min-height:32px} .box textarea::placeholder{color:var(--ink3)}
.send{width:32px;height:32px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink);box-shadow:var(--sh-btn);flex:none;background:var(--surface)} .send .ic{font-size:20px} .send.stop{background:var(--ink);color:var(--bg);box-shadow:none}
.box-row2{display:flex;align-items:center;gap:0;height:32px} .mic-group{display:inline-flex;align-items:center}
.under{display:flex;align-items:center;justify-content:space-between;height:24px;margin-top:8px;padding:0 0 0 0} .ul,.ur{display:flex;align-items:center;gap:2px}
.tx{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 8px;border-radius:6px;font-size:13px;line-height:19px;color:var(--ink2)} .tx:hover{background:var(--hover)} .tx.model{color:var(--ink)} .tx .ic.tiny{color:var(--ink3)}
.uc{font-size:13px;color:var(--ink3);line-height:17px;text-align:center;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#chat:not(.welcome-mode) #boxRow2{display:none} #chat:not(.welcome-mode) #btnSend{display:inline-flex} #chat:not(.welcome-mode) #btnProject{display:none}
#chat:not(.welcome-mode) .box{padding:8px 8px 8px 0} #chat:not(.welcome-mode) #underNote::before{content:"KP AI는 AI이므로 실수를 할 수 있습니다."}
#chat.welcome-mode #btnSend.ready{display:inline-flex}
.attach-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px} .chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;background:var(--surface);box-shadow:var(--sh-btn);border-radius:8px;padding:4px 8px} .chip b{cursor:pointer;color:var(--ink3)}
#btnMic.rec{color:var(--clay);animation:blink 1s infinite}

/* 활동 패널 */
#activity{position:absolute;top:-4px;right:8px;width:320px;background:var(--surface);border:1px solid var(--ring);border-radius:12px;box-shadow:0 1px 2px rgba(0,0,0,.05);padding:8px 9px 9px;z-index:3;max-height:70vh;overflow:auto}
.act-head{display:flex;align-items:center;justify-content:space-between;padding:4px 8px 6px;font-size:13px;font-weight:500}
.act-sec{font-size:13px;font-weight:500;padding:8px 8px 4px;color:var(--ink)} .act-row{display:flex;align-items:center;gap:10px;height:32px;padding:6px 8px;border-radius:8px;font-size:14px;color:var(--ink2);text-decoration:none}
.act-row:hover{background:var(--hover)} .act-row .ic{font-size:16px;color:var(--ink2)} .act-row .nm{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .act-row .rt{font-size:12px;color:var(--ink3);white-space:nowrap;max-width:140px;overflow:hidden;text-overflow:ellipsis}

/* 팝업·메뉴 */
.popover{position:fixed;background:var(--surface);border-radius:12px;box-shadow:var(--sh-pop);padding:4px;z-index:40;min-width:128px;max-height:80vh;overflow:auto;font-size:14px;line-height:20px}
.mi{display:flex;align-items:center;gap:8px;height:32px;padding:6px 10px;border-radius:8px;cursor:pointer;color:var(--ink);white-space:nowrap} .mi:hover,.mi.hl{background:var(--hover)} .mi .ic{font-size:20px;color:var(--ink)} .mi .ic.arrow{font-size:16px;color:var(--ink3);margin-left:auto}
.mi .lbl{flex:1} .mi .kbd{color:var(--ink3);font-size:13px;margin-left:auto} .mi .val{color:var(--ink3);font-size:13px;margin-left:auto} .mi.danger{color:var(--danger)} .mi.danger .ic{color:var(--danger)} .mi .chk{font-size:20px;color:var(--blue);margin-left:auto}
.mi.two{height:auto;min-height:50px;align-items:flex-start;padding:6px 10px 7px} .mi.two .lbl{display:flex;flex-direction:column} .mi.two .lbl small{font-size:13px;line-height:17px;color:var(--ink3)}
.mi .badge{font-size:10px;font-weight:500;line-height:13px;padding:0 4px;border-radius:4px;background:var(--hover);color:var(--ink2);margin-left:8px} .mi .badge.caution{background:var(--warn-bg);color:var(--warn-ink)}
.mi.noicon{padding-left:10px} .mi .sw{width:32px;height:18px;border-radius:9px;background:var(--ink4);position:relative;margin-left:auto;flex:none;transition:.15s} .mi .sw::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(11,11,11,.06),0 2px 8px rgba(11,11,11,.08);transition:.15s} .mi .sw.on{background:var(--blue)} .mi .sw.on::after{left:16px}
.mi.disabled{opacity:.4;pointer-events:none}
.msep{height:1px;background:var(--ring);margin:4px 0} .mhead{font-size:13px;line-height:17px;font-weight:500;color:var(--ink3);padding:4px 10px} .mhead.wrap{white-space:normal;font-weight:400}
.mcombo{display:flex;align-items:center;gap:8px;height:32px;padding:0 12px;color:var(--ink3)} .mcombo .ic{font-size:16px} .mcombo input{flex:1;background:transparent;box-shadow:none;padding:0;font-size:14px;color:var(--ink)}
.mi .ico16{width:16px;height:16px;border-radius:4.32px;background:var(--surface);box-shadow:0 0 0 1px var(--ring);display:inline-flex;align-items:center;justify-content:center;font-size:10px;flex:none}

/* 공유 */
.popover.share{width:480px;padding:16px 20px 16px;display:flex;flex-direction:column;gap:12px} .sh-head{display:flex;align-items:center;justify-content:space-between} .sh-head h2{margin:0;font-size:15px;font-weight:580}
.sh-row{display:flex;gap:8px} .search-box{display:flex;align-items:center;gap:8px;height:32px;padding:0 12px;border-radius:8px;background:rgba(255,255,255,.5);box-shadow:inset 0 0 0 1px var(--ring)} .search-box .ic{font-size:16px;color:var(--ink3)} .search-box input{flex:1;background:transparent;box-shadow:none;padding:0;min-width:0}
:root[data-theme="dark"] .search-box{background:rgba(255,255,255,.04)}
.sh-access{display:flex;align-items:center;gap:12px;height:44px;padding:6px 8px;margin:0 -8px;border-radius:8px} .sh-access:hover{background:var(--hover)} .sh-access-t{font-weight:500;flex:1} .sh-access .ic{font-size:16px}
.sh-user{display:flex;align-items:center;gap:12px;padding:4px 0} .sh-foot{display:flex;justify-content:flex-end;gap:8px;border-top:.5px solid var(--ring);padding-top:12px} .sh-foot .btn .ic{font-size:20px}

/* 모달 */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;z-index:60}
.dlg{background:var(--surface);border-radius:12px;box-shadow:var(--sh-modal);padding:24px;width:520px;max-height:85vh;overflow:auto;display:flex;flex-direction:column;gap:16px}
.dlg h2{margin:0;font-size:22px;line-height:28px;font-weight:580;display:flex;align-items:center} .dlg h2 .ib{margin-left:auto}
.dlg label{display:flex;flex-direction:column;gap:8px;font-size:14px;font-weight:500} .dlg label small{font-weight:400;color:var(--ink3);font-size:13px} .dlg input{height:32px} .dlg textarea{height:auto;min-height:80px} .dlg textarea{height:80px;padding:8px 12px}
.dlg .foot{display:flex;justify-content:flex-end;gap:12px;margin-top:8px}
.dlg.alert{width:400px;gap:8px} .dlg.alert h2{font-size:15px;font-weight:500;line-height:20px} .dlg.alert p{margin:0;font-size:14px;color:var(--ink2)}

/* 설정 모달 */
.settings{width:1024px;height:800px;max-width:96vw;max-height:92vh;background:var(--surface);border-radius:12px;box-shadow:var(--sh-modal);display:flex;overflow:hidden}
.st-nav{width:212px;background:var(--bg-side);padding:12px;display:flex;flex-direction:column;overflow:auto} .st-nav .search-box{margin-bottom:0}
.st-group{font-size:12px;color:var(--ink3);padding:12px 8px 0;line-height:17px;margin-bottom:12px}
.st-nav button{display:flex;align-items:center;gap:12px;height:32px;padding:0 8px;border-radius:8px;color:var(--ink2);font-size:14px;margin-bottom:1px;text-align:left} .st-nav button .ic{font-size:20px;color:var(--ink2)} .st-nav button:hover{background:var(--hover)} .st-nav button.on{background:var(--pressed);color:var(--ink);font-weight:500}
.st-body{flex:1;position:relative;padding:24px;overflow:auto} .st-close{position:absolute;top:12px;right:12px}
.st-body h3{font-size:15px;font-weight:580;margin:0 0 4px;line-height:20px} .st-body h4{font-size:14px;font-weight:500;margin:20px 0 4px}
.st-row{display:flex;align-items:center;gap:28px;padding:12px 0;border-top:1px solid rgba(11,11,11,.05)} .st-row:first-of-type{border-top:none} .st-row .l{flex:1} .st-row .l .d{font-size:14px;color:var(--ink3);margin-top:4px} .st-row .l .t{font-size:14px}
.seg{display:inline-flex;background:var(--hover);border-radius:8px;padding:1px;height:32px} .seg button{height:30px;padding:0 12px;border-radius:7px;font-size:14px;color:var(--ink2)} .seg button.on{background:var(--surface);color:var(--ink);box-shadow:var(--sh-btn)} .seg button .ic{font-size:20px} .seg.icons button{width:30px;padding:0}
table.grid{width:100%;border-collapse:collapse;font-size:13px} table.grid th,table.grid td{border-bottom:1px solid var(--ring);padding:6px 8px;text-align:left} table.grid th{font-weight:500;color:var(--ink2);font-size:13px} table.grid input{height:28px;padding:4px 8px;width:100%} table.grid .btn{height:28px} table.grid th{white-space:nowrap} table.grid.audit td:not(.wrap){white-space:nowrap} table.grid td.wrap{white-space:pre-wrap;word-break:break-all}
.ok{color:#2e7d4f}

/* 페이지 공통 (사용자 지정·프로젝트·아티팩트·예약) */
.pg{width:960px;max-width:calc(100% - 48px);margin:0 auto;padding:8px 0 40px;overflow:auto;flex:1}
.pg-title{font-family:var(--serif);font-size:24px;line-height:32px;font-weight:500;margin:0 0 24px}
.pg-head{display:flex;align-items:center;gap:8px;margin-bottom:24px} .pg-head .pg-title{margin:0}
.pg-bar{display:flex;align-items:center;gap:8px;height:32px;margin-bottom:28px} .pg-bar .search-box{width:256px} .pg-bar .btn.dark .ic{font-size:20px} .pg-bar .btn.dark .ic.tiny{font-size:16px;opacity:.6}
.tabs{display:flex} .tabs button{height:32px;padding:0 12px;border-radius:6px;font-size:14px;font-weight:500;color:var(--ink3)} .tabs button.on{color:var(--ink)} .tabs button:hover{background:var(--hover)}
.pg-h2-sm{font-size:12px;font-weight:500;color:var(--ink3);margin:0 0 4px}
.pg h3.sec{font-size:15px;font-weight:580;margin:0 0 4px;display:flex;align-items:center;gap:8px} .pg h3.sec .cnt{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--hover);font-size:11px;font-weight:500;color:var(--ink2);margin:0}
.lst{margin:0 -12px 32px}
.lrow{display:flex;align-items:center;gap:12px;padding:12px 20px;border-radius:12px;min-height:63px;cursor:pointer;text-align:left;width:100%} .lrow:hover{background:var(--hover)} .lrow .ic.lead{font-size:20px;color:var(--ink3);width:20px}
.lrow .lb{flex:1;min-width:0} .lrow .nm{font-size:14px;font-weight:500;display:flex;align-items:center;gap:8px} .lrow .cat{font-size:11px;font-weight:500;color:var(--ink2);padding:1px 6px;border-radius:5.5px;box-shadow:0 0 0 1px var(--ring)} .lrow .ds{font-size:13px;line-height:17px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px}
.lrow time,.lrow .when{font-size:13px;color:var(--ink3);white-space:nowrap} .lrow .sw{width:34px;height:19px;border-radius:10px;background:var(--ink4);position:relative;flex:none;cursor:pointer} .lrow .sw::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.1);transition:.15s} .lrow .sw.on{background:var(--blue)} .lrow .sw.on::after{left:17px} .lrow .sw.lock{opacity:.6;cursor:not-allowed}
.card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 24px} .pcard{background:var(--card);border-radius:12px;padding:16px;min-height:112px;box-shadow:inset 0 0 0 1px var(--ring);display:flex;flex-direction:column;gap:4px;position:relative;cursor:pointer} .pcard:hover{background:var(--surface-2)}
.pcard .nm{font-size:14px;font-weight:500;display:flex;align-items:center;gap:6px} .pcard .nm .ic{font-size:16px;color:var(--ink3)} .pcard .ds{font-size:13px;color:var(--ink2);flex:1} .pcard time{font-size:13px;color:var(--ink3)} .pcard .more{position:absolute;top:12px;right:12px;display:none} .pcard:hover .more{display:inline-flex}
.ecard{background:var(--card);border-radius:11px;padding:14px;min-height:105px;display:flex;gap:12px;align-items:flex-start;cursor:pointer;box-shadow:0 0 0 1px transparent} .ecard:hover{box-shadow:0 0 0 1px var(--ring)}
.ico{width:48px;height:48px;border-radius:8px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--ring);display:flex;align-items:center;justify-content:center;color:var(--ink3);flex:none;overflow:hidden;position:relative} .ico .ic{font-size:26px} .ico img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:18%;background:#fff;border-radius:inherit} .ico[style*="width:32px"] .ic,.ico[style*="width:20px"] .ic{font-size:18px} .ico[style*="width:16px"]{border-radius:4px} .ico[style*="width:16px"] .ic{font-size:11px} .ico[style*="width:56px"] .ic{font-size:30px} .ico[style*="width:16px"] img,.ico[style*="width:20px"] img{padding:0}
.ecard .lb{flex:1;min-width:0} .ecard .nm{font-size:14px;font-weight:500;display:flex;align-items:center;gap:6px} .ecard .ds{font-size:13px;line-height:17px;color:var(--ink2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:4px} .ecard .by{font-size:13px;color:var(--ink3);margin-top:4px} .ecard .act{display:flex;gap:12px;flex:none;margin-left:4px}
.btn.sq{width:28px;padding:0;justify-content:center} .btn.sm.try{padding:0 8px} .btn.sm.try .ic{font-size:20px} .btn.added{color:var(--blue)} .dot{color:var(--ink3);margin:0 2px} .cat{font-size:11px;font-weight:500;color:var(--ink2);padding:1px 6px;border-radius:5.5px;box-shadow:0 0 0 1px var(--ring);white-space:nowrap;line-height:16px}
.dsec{margin-bottom:32px} .pg h3.sec .lnk{display:inline-flex;align-items:center;gap:4px;font-size:14px;font-weight:500;color:var(--ink);height:28px;padding:0 6px;border-radius:6px} .pg h3.sec .lnk:hover{background:var(--hover)}
.banner{position:relative;border-radius:16px;padding:32px 36px;margin-bottom:32px;min-height:170px;background:linear-gradient(135deg,#f3ede4,#e6ddd0 60%,#d9cbb9);color:#0b0b0b;overflow:hidden} .banner .kick{font-size:11px;font-weight:600;letter-spacing:.08em;color:#52514e} .banner h2{font-family:var(--serif);font-size:30px;line-height:36px;font-weight:500;margin:10px 0 6px} .banner .d{font-size:15px;color:#52514e;max-width:520px} .banner .btn{margin-top:18px;background:#fff} .banner .dots{position:absolute;right:20px;bottom:16px;display:flex;gap:6px} .banner .dots span{width:6px;height:6px;border-radius:3px;background:rgba(11,11,11,.2)} .banner .dots span.on{background:#0b0b0b}
:root[data-theme="dark"] .banner{background:linear-gradient(135deg,#2a2622,#1f1d1a 60%,#191816);color:var(--ink)} :root[data-theme="dark"] .banner .kick,:root[data-theme="dark"] .banner .d{color:var(--ink2)} :root[data-theme="dark"] .banner .btn{background:var(--surface-2);color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:8px} .chip-btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:16px;box-shadow:inset 0 0 0 1px var(--ring);font-size:14px;color:var(--ink)} .chip-btn:hover{background:var(--hover)} .chip-btn .n{font-size:12px;color:var(--ink3)} .chips.small{gap:6px;margin-top:6px} .chip-s{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:11px;background:var(--hover);font-size:12px;color:var(--ink2);font-family:var(--mono)}
.lhead{display:flex;align-items:center;gap:8px;margin-bottom:8px} .lhead h3.sec{margin:0}
.lrow2{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;min-height:56px;cursor:pointer} .lrow2:hover{background:var(--hover)} .lrow2 .lb{flex:1;min-width:0} .lrow2 .nm{font-size:14px;font-weight:500;display:flex;align-items:center;gap:6px} .lrow2 .ds{font-size:13px;line-height:17px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}
.strow{display:flex;align-items:center;gap:8px} .strow .more{opacity:0} tr:hover .strow .more{opacity:1} .okrow{display:inline-flex;align-items:center;gap:6px;color:var(--ink2);font-size:14px} .okrow .ic{color:var(--ink)}
.lrow .more{opacity:0;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px} .lrow:hover .more{opacity:1} .lrow .more:hover{background:var(--pressed)}
.dlg.wide{width:640px;max-width:calc(100vw - 48px);max-height:calc(100vh - 80px);overflow:auto} .dhead{display:flex;align-items:flex-start;gap:14px;margin-bottom:12px} .dhead .lb{flex:1;min-width:0} .dhead h2{margin:0 0 4px;font-size:18px} .ddesc{font-size:14px;line-height:21px;margin:0 0 8px;white-space:pre-wrap} .dlg h4{font-size:14px;font-weight:580;margin:14px 0 6px;display:flex;align-items:center;gap:6px} .dlist{margin:0;padding-left:18px;font-size:13px;line-height:19px;color:var(--ink2)} .dlist b{color:var(--ink)} .dlg .foot{margin-top:18px;display:flex;align-items:center;gap:8px} .dlg .foot a{color:var(--link)}
.dsys-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:20px} .dsys-head .btn .ic{font-size:20px} .dsys-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px} .dstable td .more{opacity:0} .dstable tr:hover td .more{opacity:1}
.dlg select{height:36px;padding:0 10px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--ring);background:var(--surface);color:var(--ink);font-size:14px;width:100%} .dlg textarea{width:100%;padding:8px 10px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--ring);background:var(--surface);color:var(--ink);font-size:14px;font-family:inherit;resize:vertical}
.table{width:100%;border-collapse:collapse} .table th{text-align:left;font-size:13px;font-weight:500;color:var(--ink2);height:32px;padding:0 12px} .table td{height:45px;padding:0 12px;font-size:14px} .table td .nm{font-weight:500;display:flex;align-items:center;gap:8px}
.devbox{margin-top:40px;padding:24px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--ring);display:flex;align-items:center;gap:16px} .devbox .t{font-weight:580} .devbox .d{color:var(--ink2);margin-top:4px}
.pd{display:flex;gap:46px;width:1094px;max-width:calc(100% - 32px);margin:0 auto;padding:24px 0;overflow:auto;flex:1} .pd-l{width:696px;max-width:100%} .pd-r{width:352px;flex:none;padding-top:0}
.pd-l .pg-title{margin:0 16px 32px} .pd-box{margin:0 0 0} .pd .under{margin:0 8px 36px}
.pd-h2{font-size:14px;color:var(--ink3);font-weight:400;margin:0 16px 8px} .pd-rec{display:flex;align-items:center;height:54px;padding:0 12px;border-radius:8px;cursor:pointer;margin:0 4px} .pd-rec:hover{background:var(--hover)} .pd-rec span{flex:1} .pd-rec time{font-size:14px;color:var(--ink3)}
.pd-row{display:flex;align-items:center;gap:12px;height:53px;padding:0 12px;border-radius:8px;width:100%;text-align:left;font-size:14px;color:var(--ink)} .pd-row:not(.static):hover{background:var(--hover)} .pd-row .ic{font-size:20px;color:var(--ink2)} .pd-sub{font-size:12px;color:var(--ink3);margin-left:4px} .pd-note{font-size:12px;color:var(--ink3);padding:12px}
.new-row{display:flex;gap:12px;margin:8px 0 32px} .ncard{width:136px;height:119px;border-radius:14px;background:var(--card);box-shadow:inset 0 0 0 1px var(--ring);display:flex;flex-direction:column;justify-content:flex-end;padding:8px;cursor:pointer;position:relative} .ncard:hover{background:var(--surface-2)} .ncard .lb{font-size:13px;font-weight:500;display:flex;align-items:center;gap:6px} .ncard .lb small{font-size:10px;font-weight:500;color:var(--link)} .ncard .ic{position:absolute;top:28px;left:50%;transform:translateX(-50%);font-size:40px;color:var(--ink3)}
.art-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .acard{height:234px;border-radius:12px;background:var(--card);box-shadow:inset 0 0 0 1px var(--ring);display:flex;flex-direction:column;cursor:pointer;text-decoration:none;color:var(--ink);overflow:hidden} .acard:hover{background:var(--surface-2)}
.acard .thumb{flex:1;background:var(--surface-2);display:flex;align-items:center;justify-content:center;color:var(--ink3);font-size:40px} .acard .meta{padding:0 14px 14px}
.acard .ty{width:28px;height:28px;border-radius:8px;background:var(--surface);box-shadow:0 0 0 1px var(--ring);display:inline-flex;align-items:center;justify-content:center;margin:-14px 0 5px} .acard .ty .ic{font-size:16px;color:#7161e0}
.acard .nm{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .acard .sub{font-size:12px;color:var(--ink3);display:flex;align-items:center;gap:6px;margin-top:4px} .acard .sub .ic{font-size:16px}
.empty{display:flex;flex-direction:column;align-items:center;gap:16px;padding:32px 0 44px} .empty-art{width:96px;height:96px;display:flex;align-items:center;justify-content:center;color:var(--ink4)} .empty-art .ic{font-size:72px} .empty p{margin:0;font-size:14px;color:var(--ink3)}
.tpl-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 24px;border-top:1px dashed var(--ring);padding-top:40px} .tcard{min-height:101px;border-radius:8px;padding:8px 8px 8px 16px;display:flex;gap:24px;cursor:pointer;text-align:left} .tcard:hover{background:var(--hover)} .tcard .ic.lead{font-size:20px;color:var(--ink2);margin-top:8px} .tcard .t{font-size:14px;font-weight:500;margin-top:8px} .tcard .d{font-size:14px;color:var(--ink2);margin-top:2px} .tcard .w{font-size:13px;color:var(--ink3);margin-top:6px;display:flex;align-items:center;gap:8px} .tcard .w .ic{font-size:16px}

.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:8px 14px;border-radius:10px;z-index:99;font-size:13px;max-width:80vw;box-shadow:0 8px 24px rgba(0,0,0,.2)} .toast.warn{background:var(--danger-btn);color:#fff}
@media (max-width:900px){#side{position:absolute;z-index:30;height:calc(100% - 48px);top:48px;box-shadow:var(--sh-pop)} #titlebar{grid-template-columns:auto 1fr auto} .card-grid,.art-grid,.tpl-grid{grid-template-columns:1fr} .pd{flex-direction:column} .pd-r{width:100%}}
.dmore summary{font-size:13px;color:var(--link);cursor:pointer;margin:6px 0 4px 18px}

.nbadge{position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--danger-btn);color:#fff;font-size:10px;font-weight:600;display:inline-flex;align-items:center;justify-content:center} .ib:has(.nbadge){position:relative} .st-nav .nbadge{position:static;margin-left:auto}