/* 휴가 현황 달력 */
[data-app="vacation-calendar"]{ display:flex; flex-direction:column; gap:12px; }
[data-app="vacation-calendar"] h3, [data-app="vacation-calendar"] h4{ margin:0; }
[data-app="vacation-calendar"] .vc-ex{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:8px 10px; border-radius:10px; background:#FFF6DB; color:#7A5200; }
[data-app="vacation-calendar"] .vc-ex p{ flex:1 1 240px; margin:0; font-size:13px; font-weight:700; line-height:1.45; }
[data-app="vacation-calendar"] .vc-ex .ndt-btn{ flex:none; min-width:96px; }
/* 위 막대: 달 넘기기 · 경고 인원 */
[data-app="vacation-calendar"] .vc-bar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 14px; }
[data-app="vacation-calendar"] .vc-nav{ display:flex; align-items:center; gap:6px; min-width:0; }
[data-app="vacation-calendar"] .vc-title{ min-width:7.5em; font-size:18px; font-weight:900; text-align:center; font-variant-numeric:tabular-nums; }
[data-app="vacation-calendar"] .vc-nav .ndt-btn{ padding:0 10px; }
[data-app="vacation-calendar"] .vc-limw{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:#33373D; }
[data-app="vacation-calendar"] .vc-lim{ width:58px; text-align:center; font-weight:800; }
/* 본문: 달력 + 오른쪽(고른 날·휴가 넣기) */
[data-app="vacation-calendar"] .vc-main{ display:grid; grid-template-columns:minmax(0,1.75fr) minmax(0,1fr); gap:12px; align-items:start; }
[data-app="vacation-calendar"] .vc-calw{ min-width:0; }
[data-app="vacation-calendar"] .vc-wd, [data-app="vacation-calendar"] .vc-cal{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px; }
[data-app="vacation-calendar"] .vc-wd span{ padding:2px 0 4px; font-size:12px; font-weight:800; color:#4B5059; text-align:center; }
[data-app="vacation-calendar"] .vc-wd .vc-wkd{ color:#9AA0A8; }
[data-app="vacation-calendar"] .vc-day{ position:relative; display:flex; flex-direction:column; align-items:stretch; gap:2px; min-width:0; min-height:84px; padding:3px 3px 4px; border:1px solid #E6E7EB; border-radius:8px; background:#fff; color:#1A1A1A; font:inherit; text-align:left; cursor:pointer; overflow:hidden; }
[data-app="vacation-calendar"] .vc-day:hover{ border-color:#B9BEC7; }
[data-app="vacation-calendar"] .vc-day:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
[data-app="vacation-calendar"] .vc-dn{ display:inline-flex; align-items:center; justify-content:center; align-self:flex-start; min-width:22px; height:22px; padding:0 4px; border-radius:11px; font-size:12.5px; font-weight:800; font-variant-numeric:tabular-nums; }
[data-app="vacation-calendar"] .vc-we{ background:#F4F5F7; }
[data-app="vacation-calendar"] .vc-we .vc-dn{ color:#9AA0A8; }
[data-app="vacation-calendar"] .vc-we .vc-chips{ opacity:.55; }
[data-app="vacation-calendar"] .vc-now .vc-dn{ background:#1A1A1A; color:#fff; }
[data-app="vacation-calendar"] .vc-sel{ border-color:#1A1A1A; box-shadow:inset 0 0 0 1px #1A1A1A; }
[data-app="vacation-calendar"] .vc-many{ background:#FDEEEC; border-color:#E8A39C; }
[data-app="vacation-calendar"] .vc-many.vc-sel{ border-color:#B42318; box-shadow:inset 0 0 0 1px #B42318; }
[data-app="vacation-calendar"] .vc-mn{ position:absolute; top:3px; right:3px; padding:1px 5px; border-radius:6px; background:#B42318; color:#fff; font-size:11px; font-weight:800; line-height:1.4; }
[data-app="vacation-calendar"] .vc-chips{ display:flex; flex-direction:column; gap:2px; min-width:0; }
[data-app="vacation-calendar"] .vc-chip{ display:flex; align-items:center; gap:3px; min-width:0; padding:1px 5px; border-radius:5px; font-size:12px; font-weight:700; line-height:1.4; white-space:nowrap; overflow:hidden; }
[data-app="vacation-calendar"] .vc-chip .vc-full{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
[data-app="vacation-calendar"] .vc-chip .vc-short{ display:none; }
[data-app="vacation-calendar"] .vc-chip i{ flex:none; font-style:normal; font-size:10.5px; font-weight:800; opacity:.85; }
[data-app="vacation-calendar"] .vc-al{ background:var(--c); color:#fff; }
[data-app="vacation-calendar"] .vc-half{ background:color-mix(in srgb, var(--c) 16%, #fff); border-left:3px solid var(--c); color:color-mix(in srgb, var(--c) 75%, #000); }
[data-app="vacation-calendar"] .vc-out{ background:#fff; border:1.5px dashed var(--c); color:color-mix(in srgb, var(--c) 75%, #000); }
[data-app="vacation-calendar"] .vc-blank{ min-height:0; }
[data-app="vacation-calendar"] .vc-legend{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; margin:8px 0 0; }
[data-app="vacation-calendar"] .vc-lg{ display:inline-block; width:14px; height:12px; margin-left:4px; border-radius:3px; vertical-align:middle; --c:#4A5568; }
[data-app="vacation-calendar"] .vc-lg-al{ background:var(--c); }
[data-app="vacation-calendar"] .vc-lg-half{ background:#E4E6EA; border-left:3px solid var(--c); }
[data-app="vacation-calendar"] .vc-lg-out{ border:1.5px dashed var(--c); }
[data-app="vacation-calendar"] .vc-lg-many{ background:#FDEEEC; border:1px solid #E8A39C; }
/* 오른쪽 */
[data-app="vacation-calendar"] .vc-side{ display:flex; flex-direction:column; gap:10px; min-width:0; }
[data-app="vacation-calendar"] .vc-dayp, [data-app="vacation-calendar"] .vc-form, [data-app="vacation-calendar"] .vc-pp, [data-app="vacation-calendar"] .vc-ml{ min-width:0; padding:10px 12px; border:1px solid #E6E7EB; border-radius:12px; background:#F8F9FB; }
[data-app="vacation-calendar"] .vc-dh, [data-app="vacation-calendar"] .vc-fh, [data-app="vacation-calendar"] .vc-pp h4, [data-app="vacation-calendar"] .vc-mh{ font-size:14px; font-weight:800; overflow-wrap:anywhere; }
[data-app="vacation-calendar"] .vc-dayp.vc-dmany{ background:#FDEEEC; border-color:#E8A39C; }
[data-app="vacation-calendar"] .vc-dayp.vc-dmany .vc-dh{ color:#912018; }
[data-app="vacation-calendar"] .vc-dl, [data-app="vacation-calendar"] .vc-mlist, [data-app="vacation-calendar"] .vc-people{ list-style:none; margin:6px 0 0; padding:0; }
[data-app="vacation-calendar"] .vc-dl:empty{ display:none; }
[data-app="vacation-calendar"] .vc-it{ display:flex; align-items:center; gap:8px; width:100%; min-height:40px; margin:0 0 4px; padding:5px 10px; border:1px solid #E3E5EA; border-radius:9px; background:#fff; color:#1A1A1A; font:inherit; font-size:13.5px; text-align:left; cursor:pointer; }
[data-app="vacation-calendar"] .vc-it:hover{ border-color:#B9BEC7; }
[data-app="vacation-calendar"] .vc-it.vc-editing{ border-color:#1A1A1A; box-shadow:inset 0 0 0 1px #1A1A1A; }
[data-app="vacation-calendar"] .vc-dot{ flex:none; width:12px; height:12px; border-radius:50%; background:var(--c); }
[data-app="vacation-calendar"] .vc-itx{ flex:1 1 auto; min-width:0; line-height:1.4; overflow-wrap:anywhere; }
[data-app="vacation-calendar"] .vc-itd{ color:#4B5059; font-size:12.5px; font-variant-numeric:tabular-nums; }
[data-app="vacation-calendar"] .vc-itm{ display:block; color:#6B717B; font-size:12px; }
[data-app="vacation-calendar"] .vc-ite{ flex:none; font-size:12px; font-weight:700; color:#6B717B; }
[data-app="vacation-calendar"] .vc-form{ display:flex; flex-direction:column; gap:8px; background:#fff; }
[data-app="vacation-calendar"] .vc-form.vc-fedit{ border-color:#1A1A1A; box-shadow:inset 0 0 0 1px #1A1A1A; }
[data-app="vacation-calendar"] .vc-f{ display:flex; flex-direction:column; gap:3px; min-width:0; font-size:12.5px; font-weight:800; color:#4B5059; }
[data-app="vacation-calendar"] .vc-f .ndt-in{ font-weight:600; color:#1A1A1A; }
[data-app="vacation-calendar"] .vc-f2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
[data-app="vacation-calendar"] .vc-fb .ndt-btn{ flex:1 1 auto; }
[data-app="vacation-calendar"] .vc-del{ min-width:110px; }
[data-app="vacation-calendar"] .vc-msg{ margin:0; min-height:1.4em; font-size:13px; line-height:1.45; color:#0D6A3A; font-weight:700; overflow-wrap:anywhere; }
[data-app="vacation-calendar"] .vc-msg.vc-bad{ color:#B42318; }
/* 아래: 사람별 · 이번 달 목록 */
[data-app="vacation-calendar"] .vc-bottom{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:12px; align-items:start; }
[data-app="vacation-calendar"] .vc-pp h4 small{ font-weight:600; }
[data-app="vacation-calendar"] .vc-people li{ display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; grid-template-areas:"sw pn pd del"; align-items:center; gap:4px 8px; padding:5px 0; border-top:1px solid #ECEDF0; }
[data-app="vacation-calendar"] .vc-people li.vc-none{ display:block; }
[data-app="vacation-calendar"] .vc-sw{ grid-area:sw; } [data-app="vacation-calendar"] .vc-pnw{ grid-area:pn; display:flex; align-items:center; gap:6px; min-width:0; }
[data-app="vacation-calendar"] .vc-pd{ grid-area:pd; } [data-app="vacation-calendar"] .vc-pdel{ grid-area:del; }
[data-app="vacation-calendar"] .vc-people li:first-child{ border-top:0; }
[data-app="vacation-calendar"] .vc-sw{ flex:none; width:32px; height:32px; border:3px solid #fff; border-radius:50%; background:var(--c); box-shadow:0 0 0 1px #D9DCE1; cursor:pointer; }
[data-app="vacation-calendar"] .vc-pn{ flex:1 1 auto; width:auto; min-width:0; max-width:170px; min-height:36px; background:#fff; font-weight:800; }
[data-app="vacation-calendar"] .vc-pex{ font-size:11.5px; font-weight:700; color:#7A5200; }
[data-app="vacation-calendar"] .vc-pex{ flex:none; }
[data-app="vacation-calendar"] .vc-pd{ font-size:13px; color:#33373D; text-align:right; font-variant-numeric:tabular-nums; }
[data-app="vacation-calendar"] .vc-pd b{ font-size:15px; font-weight:900; }
[data-app="vacation-calendar"] .vc-pdel{ flex:none; min-width:32px; }
[data-app="vacation-calendar"] .vc-none{ padding:8px 0; color:#6B717B; font-size:13px; }
[data-app="vacation-calendar"] .vc-padd{ display:flex; gap:6px; margin-top:6px; }
[data-app="vacation-calendar"] .vc-padd .ndt-in{ flex:1 1 auto; width:auto; min-width:0; background:#fff; }
[data-app="vacation-calendar"] .vc-padd .ndt-btn{ flex:none; }
[data-app="vacation-calendar"] .vc-pmsg{ margin:4px 0 0; min-height:1.2em; }
[data-app="vacation-calendar"] .vc-mlist{ max-height:300px; overflow:auto; margin-bottom:8px; }
[data-app="vacation-calendar"] .vc-rule{ margin:0; padding:8px 10px; border-radius:10px; background:#EEF3FC; color:#24407F; font-size:13px; font-weight:700; line-height:1.45; }
[data-app="vacation-calendar"] .vc-note{ margin:0; }
[data-app="vacation-calendar"] .vc-note.vc-warn{ padding:8px 10px; border-radius:10px; background:#FEF3F2; color:#912018; font-size:13px; font-weight:700; }
[data-app="vacation-calendar"] .vc-fbw:empty{ display:none; }
@media (max-width:860px){
  [data-app="vacation-calendar"] .vc-main, [data-app="vacation-calendar"] .vc-bottom{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:560px){
  [data-app="vacation-calendar"] .vc-bar{ justify-content:center; }
  [data-app="vacation-calendar"] .vc-nav{ width:100%; }
  [data-app="vacation-calendar"] .vc-title{ flex:1 1 auto; min-width:0; font-size:17px; white-space:nowrap; }
  [data-app="vacation-calendar"] .vc-nav{ gap:4px; }
  [data-app="vacation-calendar"] .vc-nav .ndt-btn{ padding:0 9px; }
  [data-app="vacation-calendar"] .vc-mn{ display:none; }
  [data-app="vacation-calendar"] .vc-many .vc-dn{ background:#B42318; color:#fff; }
  [data-app="vacation-calendar"] .vc-people li{ grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"sw pn del" "sw pd pd"; }
  [data-app="vacation-calendar"] .vc-pd{ text-align:left; }
  [data-app="vacation-calendar"] .vc-wd, [data-app="vacation-calendar"] .vc-cal{ gap:2px; }
  [data-app="vacation-calendar"] .vc-day{ min-height:58px; padding:2px 1px 3px; border-radius:6px; }
  [data-app="vacation-calendar"] .vc-dn{ min-width:20px; height:20px; font-size:12px; }
  [data-app="vacation-calendar"] .vc-chip{ padding:0 2px; font-size:10.5px; border-radius:4px; }
  [data-app="vacation-calendar"] .vc-half{ border-left-width:2px; }
  [data-app="vacation-calendar"] .vc-chip .vc-full, [data-app="vacation-calendar"] .vc-chip i{ display:none; }
  [data-app="vacation-calendar"] .vc-chip .vc-short{ display:block; min-width:0; overflow:hidden; text-overflow:clip; }
  [data-app="vacation-calendar"] .vc-lim, [data-app="vacation-calendar"] .vc-f .ndt-in, [data-app="vacation-calendar"] .vc-pn, [data-app="vacation-calendar"] .vc-padd .ndt-in{ font-size:16px; }
}
@media (max-width:420px){
  [data-app="vacation-calendar"] .vc-f2{ grid-template-columns:minmax(0,1fr); }
}
@media print{
  [data-app="vacation-calendar"] .vc-mlist{ max-height:none; overflow:visible; }
  [data-app="vacation-calendar"] .vc-chip, [data-app="vacation-calendar"] .vc-many, [data-app="vacation-calendar"] .vc-mn{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}