/* pk-theme.css — 3정5행 화면 공통 디자인 (v1.38, 시안 A 「정돈된 사내 도구」)
 * - 모든 화면 <head>의 마지막 <style> 뒤에 둔다(같은 우선순위에서 이 파일이 이김).
 * - 화면 전용: 인쇄(@media print)는 건드리지 않는다. 인쇄 양식·현대하모니 글꼴은 각 화면 인쇄 CSS가 정본.
 * - 토큰(--pk-*)을 먼저 쓰고, 화면별 스타일은 토큰을 참조해 맞춘다.
 */
:root{
  --pk-navy:#16356e; --pk-navy-2:#0f2752; --pk-navy-ink:#c9d4ea; --pk-navy-line:rgba(255,255,255,.26);
  --pk-ground:#eef1f5; --pk-panel:#ffffff; --pk-line:#d9dfe8; --pk-line-2:#e8ecf2; --pk-subtle:#f6f8fb;
  --pk-ink:#16202e; --pk-ink-2:#4a5568; --pk-ink-3:#5f6a7b;
  --pk-ok:#17784a; --pk-ok-bg:#e5f3ec; --pk-warn:#a15c00; --pk-warn-bg:#fdf1dc;
  --pk-bad:#b42318; --pk-bad-bg:#fdecea; --pk-info:#1f5fbf; --pk-info-bg:#e8f0fc; --pk-teal:#0f6b5c; --pk-teal-bg:#e6f4f1;
  --pk-r:8px; --pk-r-sm:6px;
  --pk-ease:cubic-bezier(.16,1,.3,1);
  --pk-shadow-1:0 1px 2px rgba(22,32,46,.06);
  --pk-shadow-2:0 8px 22px -10px rgba(22,53,110,.28);
  --pk-font:'Pretendard Variable','Pretendard','Malgun Gothic','맑은 고딕',system-ui,sans-serif;
}

@media screen{
  /* ---------- 브라우저 기본 요소도 디자인의 일부 ---------- */
  ::selection{background:#c9d8f3;color:var(--pk-ink)}
  :focus-visible{outline:2px solid #3b7be0;outline-offset:2px}
  html{scrollbar-color:#b7c2d3 transparent}
  ::-webkit-scrollbar{width:11px;height:11px}
  ::-webkit-scrollbar-thumb{background:#c3ccda;border-radius:8px;border:3px solid transparent;background-clip:content-box}
  ::-webkit-scrollbar-thumb:hover{background-color:#a7b3c6}
  ::-webkit-scrollbar-track{background:transparent}
  table{font-variant-numeric:tabular-nums}
  input,select,textarea{accent-color:var(--pk-navy);caret-color:var(--pk-navy)}

  /* ---------- 로고: 흰 배경 없이 그림자만 ---------- */
  img[src*="/static/logo.png"]{background:none!important;filter:drop-shadow(0 0 .6px rgba(255,255,255,.75)) drop-shadow(0 2px 3px rgba(0,0,0,.28))}
  .pk-bar img[src*="/static/logo.png"],.bar img[src*="/static/logo.png"],.pk-shell img[src*="/static/logo.png"]{filter:drop-shadow(0 0 .8px rgba(255,255,255,.9)) drop-shadow(0 2px 5px rgba(0,0,0,.45))}

  /* ---------- 떠 있는 버튼: [개선사항 전달]은 채팅 버튼 위(왼쪽 아래)로 모아 본문 제목을 가리지 않게 ---------- */
  .pk-sug-btn{top:auto!important;bottom:calc(84px + var(--pk-bottom-notice-height,0px))!important;left:26px!important;width:40px!important;height:40px!important;padding:0!important;gap:0!important;justify-content:center!important;font-size:0!important;border-radius:50%!important;opacity:1!important}
  .pk-sug-btn .pk-i{width:18px!important;height:18px!important}
  /* 떠 있는 버튼 아래로 마지막 내용이 가려지지 않게 바닥 여백 */
  body:has(#pk-chat-fab){padding-bottom:80px}
  /* 한국어는 낱말 단위로 줄바꿈, 버튼·상태 칩·월 표시는 한 줄 */
  body{word-break:keep-all;overflow-wrap:break-word}
  @media (max-width:760px){.pk-panel{overflow-x:auto;max-width:100%;min-width:0}}
  .mnav button,.mprev,.mnext,.cal-nav{white-space:nowrap}
  /* 휴대폰: 떠 있는 버튼은 오른쪽 아래(왼쪽 부서명 열을 가리지 않음) */
  @media (max-width:700px){.pk-sug-btn{left:auto!important;right:18px!important;bottom:calc(70px + var(--pk-bottom-notice-height,0px))!important}}
  .pk-btn,.pk-st,.pk-seg button,.pk-shell .ni,.pk-shell .tools button,button.pk-btn{white-space:nowrap}

  /* ---------- 아이콘(pk-icons.js가 이모지를 선 아이콘으로 바꿈) ---------- */
  .pk-i{width:1.15em;height:1.15em;flex:0 0 auto;vertical-align:-.2em;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;margin-right:.35em}
  .pk-i.only{margin-right:0}

  /* ---------- 상단바(.pk-bar: 실적·체크시트·관리 화면 공통) ---------- */
  .pk-bar{background:var(--pk-navy)!important;font-size:12.5px!important;letter-spacing:-.15px;gap:8px;box-shadow:0 1px 0 rgba(0,0,0,.18),0 4px 14px -6px rgba(10,25,55,.4)}
  .pk-bar b{font-size:13.5px!important;font-weight:700!important;letter-spacing:-.25px!important}
  .pk-bar button,.pk-bar a.btn{border-radius:var(--pk-r-sm)!important;font-weight:600!important;transition:background-color .18s ease,border-color .18s ease,color .18s ease;filter:none!important}
  .pk-bar button.ghost,.pk-bar .pk-extend,.pk-bar .pk-presence,.pk-bar .pk-admin,.pk-bar .pk-home{background:transparent!important;color:#fff!important;border:1px solid var(--pk-navy-line)!important}
  .pk-bar button.ghost:hover,.pk-bar .pk-extend:hover,.pk-bar .pk-presence:hover,.pk-bar .pk-admin:hover,.pk-bar .pk-home:hover{background:rgba(255,255,255,.1)!important}
  .pk-bar .pk-more-btn,.pk-bar #workMenuBtn{background:rgba(255,255,255,.12)!important;color:#fff!important;border:1px solid var(--pk-navy-line)!important}
  .pk-bar .pk-more-btn:hover,.pk-bar #workMenuBtn:hover{background:rgba(255,255,255,.2)!important}
  .pk-bar .pk-logout{background:#fff!important;color:var(--pk-navy)!important;border:0!important}
  .pk-bar .pk-clock,.pk-bar .clk{color:var(--pk-navy-ink)!important;font-variant-numeric:tabular-nums}
  .pk-bar .pk-last,.pk-bar #lastlog{color:#9fb0d2!important}

  /* ---------- 드롭다운 메뉴(작업 메뉴·관리자 메뉴·접속자) ---------- */
  .pk-work-menu,.pk-more-menu,.pk-admin-menu,.pk-presence-menu,.pk-nav-menu,.admin-more{border:1px solid var(--pk-line)!important;border-radius:10px!important;box-shadow:0 18px 40px -16px rgba(16,30,60,.35),0 2px 6px rgba(16,30,60,.08)!important;padding:6px!important}
  .pk-work-menu button,.pk-more-menu button,.pk-admin-menu button,.pk-nav-menu a,.pk-nav-menu button{border-radius:6px!important;font-weight:600!important;color:var(--pk-ink)!important;transition:background-color .15s ease,color .15s ease}
  .pk-work-menu button:hover,.pk-more-menu button:hover,.pk-admin-menu button:hover,.pk-nav-menu a:hover,.pk-nav-menu button:hover{background:#eef3fb!important;color:var(--pk-navy)!important}
  .pk-work-menu .lbl,.pk-more-menu .pk-menu-label{font-size:11.5px!important;font-weight:700!important;color:var(--pk-ink-3)!important;letter-spacing:0}
  .pk-work-menu .sep,.pk-more-menu .pk-menu-sep{background:var(--pk-line-2)!important}
  .pk-nav-cur{background:#eef3fb!important;color:var(--pk-navy)!important}
  .pk-nav-here{background:var(--pk-navy)!important}

  /* ---------- 보관함 사진 선택 팝업(계획서·월별 실적, 인라인 스타일을 공통 문법으로) ---------- */
  #poolPick{background:rgba(15,30,60,.45)!important}
  #poolPick>div{border-radius:12px!important;box-shadow:0 24px 60px -20px rgba(0,0,0,.4)!important;font-family:var(--pk-font)}
  #poolPick>div>div:first-child{font-weight:700!important;color:var(--pk-ink)!important;font-size:15px;border-color:var(--pk-line-2)!important}
  #poolPick #poolX{background:transparent!important;color:var(--pk-ink-3);display:grid;place-items:center}
  #poolPick #poolX:hover{background:var(--pk-subtle)!important;color:var(--pk-navy)}
  #poolPick label{font-size:12.5px!important;color:var(--pk-ink-2)!important;font-weight:600!important}
  #poolPick select,#poolPick input{height:38px!important;padding:0 10px!important;border:1px solid var(--pk-line)!important;border-radius:var(--pk-r-sm)!important;font:inherit;font-size:13.5px}
  #poolPick #poolReset{height:38px;font-weight:600!important;border-color:var(--pk-line)!important;border-radius:var(--pk-r-sm)!important}
  #poolPick>div>div:last-child{color:var(--pk-ink-3)!important;font-size:12.5px!important;border-color:var(--pk-line-2)!important}

  /* ---------- 공통 부품(새 화면·정리한 화면에서 사용) ---------- */
  .pk-panel{background:var(--pk-panel);border:1px solid var(--pk-line);border-radius:var(--pk-r)}
  .pk-panel-h{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--pk-line-2)}
  .pk-panel-h h2,.pk-panel-h h3{margin:0;font-size:15px;letter-spacing:-.2px;color:var(--pk-ink)}
  .pk-panel-h .sub{color:var(--pk-ink-3);font-size:12.5px;font-weight:500}
  .pk-st{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;border-radius:999px;padding:3px 10px 3px 8px;white-space:nowrap;line-height:1.4;transition:background-color .4s var(--pk-ease),color .4s var(--pk-ease)}
  .pk-st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
  .pk-st.ok{color:var(--pk-ok);background:var(--pk-ok-bg)} .pk-st.warn{color:var(--pk-warn);background:var(--pk-warn-bg)}
  .pk-st.bad{color:var(--pk-bad);background:var(--pk-bad-bg)} .pk-st.idle{color:var(--pk-ink-3);background:#f1f3f6} .pk-st.info{color:var(--pk-info);background:var(--pk-info-bg)}
  .pk-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 14px;border-radius:var(--pk-r-sm);border:1px solid transparent;font:inherit;font-weight:600;font-size:13.5px;cursor:pointer;background:var(--pk-navy);color:#fff;transition:background-color .18s ease,border-color .18s ease,box-shadow .2s var(--pk-ease)}
  .pk-btn:hover{background:var(--pk-navy-2)}
  .pk-btn.sec{background:#fff;color:var(--pk-navy);border-color:var(--pk-line)}
  .pk-btn.sec:hover{border-color:#b8c4d8;background:var(--pk-subtle)}
  .pk-btn.danger{background:var(--pk-bad)} .pk-btn.danger:hover{background:#951d14}
  .pk-btn:disabled{opacity:.45;cursor:not-allowed}
  .pk-btn.sm{height:30px;padding:0 10px;font-size:12.5px}
  [hidden]{display:none!important}
  .pk-seg{display:inline-flex;background:#f1f4f8;border-radius:7px;padding:3px}
  .pk-seg button{border:0;background:transparent;padding:5px 12px;border-radius:5px;font:inherit;font-weight:600;color:var(--pk-ink-2);font-size:13px;cursor:pointer;transition:background-color .2s,color .2s,box-shadow .2s}
  .pk-seg button.on{background:#fff;color:var(--pk-navy);box-shadow:0 1px 3px rgba(22,32,46,.12)}
  .pk-table{width:100%;border-collapse:collapse}
  .pk-table th{font-size:12px;font-weight:600;color:var(--pk-ink-3);text-align:left;padding:10px 18px;border-bottom:1px solid var(--pk-line-2);background:#fafbfd}
  .pk-table th.num,.pk-table td.num{text-align:right}
  .pk-table td{padding:12px 18px;border-bottom:1px solid var(--pk-line-2);vertical-align:middle}
  .pk-table tr:last-child td{border-bottom:0}
  .pk-table tbody tr{transition:background-color .15s}
  .pk-table tbody tr:hover{background:#f7f9fc}

  /* ---------- 모션 ---------- */
  /* 버튼 누름: transform을 쓰는 버튼과 겹치지 않도록 개별 scale 속성을 사용 */
  button:not(:disabled):active,.pk-btn:active,a.pk-press:active,.enter-main:active,.enter:active{scale:.97}
  button,.pk-btn,a.pk-press,.enter-main,.enter{transition-property:background-color,border-color,color,box-shadow,opacity,scale;transition-duration:.18s;transition-timing-function:var(--pk-ease)}
  /* 화살표 아이콘은 마우스를 올리면 앞으로 */
  a:hover>.pk-go,button:hover>.pk-go{translate:3px 0}
  .pk-go{transition:translate .25s var(--pk-ease)}
  /* 상태가 바뀔 때 한 번 채워지는 효과(마감 등) */
  .pk-st.just{animation:pkFill .7s var(--pk-ease)}
  @keyframes pkFill{from{clip-path:inset(0 100% 0 0 round 999px)}to{clip-path:inset(0 0 0 0 round 999px)}}
  /* 화면 진입: 내용이 아래에서 8px 올라오며 나타남(각 화면 본문에 .pk-enter) */
  .pk-enter{animation:pkEnter .5s var(--pk-ease) both}
  @keyframes pkEnter{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
}

/* 페이지 이동 전환(지원 브라우저: Chrome·Edge 126 이상). 상단바는 고정, 본문만 바뀜 */
@view-transition{navigation:auto}
@media screen{
  .pk-bar,.bar,.pk-shell{view-transition-name:pk-bar}
  ::view-transition-old(root){animation:pkVtOut .16s ease-in both}
  ::view-transition-new(root){animation:pkVtIn .38s var(--pk-ease) both}
  ::view-transition-group(pk-bar){animation:none}
  @keyframes pkVtOut{to{opacity:0}}
  @keyframes pkVtIn{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}
  button:active,.pk-btn:active{scale:none}
}

/* 인쇄: 로고는 배경·그림자 없이 로고만 */
@media print{
  img[src*="/static/logo.png"]{filter:none!important;box-shadow:none!important;background:none!important}
  .pk-i{display:none!important}
}