*{box-sizing:border-box}
:root{--bg:#f3f3f1;--line:#e7e7e4;--text:#202124;--muted:#929395;--blue:#e7effa;--blueText:#3e679b}
body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Pretendard","Noto Sans KR",sans-serif}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.app{width:calc(100% - 34px);height:calc(100vh - 34px);margin:17px auto;background:#fff;border:1px solid #ddd;border-radius:16px;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.08);display:flex;flex-direction:column}
.topbar{height:42px;border-bottom:1px solid var(--line);display:flex;align-items:center;position:relative}
.traffic{display:flex;gap:7px;margin-left:15px}.traffic i{width:12px;height:12px;border-radius:50%}.red{background:#ff5f57}.yellow{background:#febc2e}.green{background:#28c840}
.top-title{position:absolute;left:50%;transform:translateX(-50%);font-size:12px;font-weight:600;color:#555}
.top-right{margin-left:auto;margin-right:12px;display:flex;align-items:center;gap:10px}.top-search{width:155px;height:28px;border:1px solid #e6e6e6;border-radius:8px;padding:0 10px;font-size:11px}.avatar{width:25px;height:25px;border-radius:50%;background:#202124;color:#fff;display:grid;place-items:center;font-size:9px;font-weight:700}
.layout{display:flex;min-height:0;flex:1}.sidebar{width:185px;background:#f8f8f7;border-right:1px solid var(--line);padding:20px 12px;flex-shrink:0}.brand{padding:0 10px 25px}.brand strong{font-size:13px}.brand span{display:block;font-size:8px;color:#aaa;letter-spacing:1.5px;margin-top:4px}
.nav-title{font-size:8px;color:#aaa;letter-spacing:1px;margin:12px 10px 7px}.nav{width:100%;height:34px;border:0;background:transparent;border-radius:8px;text-align:left;padding:0 11px;color:#686a6d;font-size:11px;margin-bottom:3px;display:flex;align-items:center;gap:10px}.nav span{width:12px;text-align:center}.nav:hover{background:#efefed}.nav.active{background:var(--blue);color:var(--blueText);font-weight:600}
.main{flex:1;min-width:0;overflow:auto;background:#fff}.page{max-width:1120px;margin:auto;padding:30px 34px 50px}.eyebrow{font-size:8px;color:#aaa;letter-spacing:2px;margin-bottom:8px}.title{font-size:27px;margin:0 0 5px;letter-spacing:-1.2px}.sub{font-size:11px;color:#999;margin:0}.head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:24px}
.primary{border:0;background:#202124;color:#fff;border-radius:9px;padding:11px 16px;font-size:11px;font-weight:600}.secondary{border:1px solid #e4e4e2;background:#fff;color:#555;border-radius:8px;padding:9px 13px;font-size:11px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:26px}.stat{border:1px solid var(--line);border-radius:12px;padding:15px}.stat-label{font-size:8px;color:#999}.stat-num{font-size:25px;font-weight:700;margin:8px 0 4px}.stat-desc{font-size:8px;color:#aaa}
.section-head{display:flex;justify-content:space-between;align-items:center;margin:18px 0 10px}.section-head h3{font-size:13px;margin:0}.link{font-size:9px;color:#999;cursor:pointer}
.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.project-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;cursor:pointer;background:#fff}.project-card:hover{box-shadow:0 8px 20px rgba(0,0,0,.07);transform:translateY(-2px)}.cover{height:115px;background:linear-gradient(135deg,#ddd5c8,#b9b4ab);position:relative}.cover.c2{background:linear-gradient(135deg,#d4d2cc,#aaa9a3)}.cover.c3{background:linear-gradient(135deg,#c5beb3,#8e897f)}.status{position:absolute;top:9px;left:9px;background:#fff;border-radius:5px;padding:4px 6px;font-size:7px;color:#666}.project-body{padding:12px}.project-name{font-size:12px;font-weight:700}.project-sub{font-size:9px;color:#999;margin-top:4px}.project-meta{display:flex;justify-content:space-between;border-top:1px solid #eee;margin-top:10px;padding-top:9px;color:#aaa;font-size:8px}
.bottom{display:grid;grid-template-columns:1.2fr .8fr;gap:13px;margin-top:14px}.box{border:1px solid var(--line);border-radius:12px;padding:15px}.material-row{display:flex;align-items:center;gap:10px;background:#fafaf9;border-radius:8px;padding:8px;margin-top:7px}.swatch{width:34px;height:34px;border-radius:7px;background:#d8d0c3}.swatch.dark{background:#575650}.swatch.gray{background:#c4c5c1}.material-name{font-size:9px;font-weight:600}.material-maker{font-size:8px;color:#aaa;margin-top:3px}.pill{margin-left:auto;font-size:7px;padding:4px 6px;border-radius:10px;background:#e8f5ed;color:#3c8e5b}.quick{background:#f6f6f4;border-radius:8px;padding:10px;margin-top:8px;font-size:10px;cursor:pointer}.quick:hover{background:#eeeeeb}
.toolbar{display:flex;gap:8px;margin-bottom:17px}.toolbar input{height:38px;flex:1;border:1px solid #e3e3e1;border-radius:9px;padding:0 12px;font-size:11px;outline:none}.filter{height:38px;border:1px solid #e3e3e1;border-radius:9px;background:#fff;padding:0 12px;font-size:10px}
.list{display:grid;gap:9px}.list-card{border:1px solid var(--line);border-radius:11px;padding:14px 15px;display:flex;align-items:center;gap:14px;cursor:pointer}.list-card:hover{background:#fafaf8}.mini-cover{width:64px;height:48px;border-radius:7px;background:linear-gradient(135deg,#d8d0c3,#b8b0a5)}.list-main{flex:1}.list-title{font-size:12px;font-weight:700}.list-sub{font-size:9px;color:#999;margin-top:4px}.list-meta{font-size:9px;color:#aaa;text-align:right}
.detail-info{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:11px;margin-bottom:18px}.info-cell{padding:13px;border-right:1px solid var(--line)}.info-cell:last-child{border:0}.info-label{font-size:8px;color:#aaa}.info-value{font-size:11px;font-weight:600;margin-top:6px}.space-head{display:flex;justify-content:space-between;align-items:center;margin:18px 0 10px}.space-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.space{border:1px solid var(--line);border-radius:10px;padding:14px;cursor:pointer}.space:hover{background:#fafaf8}.space b{font-size:11px}.space p{font-size:8px;color:#aaa;margin:5px 0 0}.back{border:0;background:none;color:#777;font-size:10px;padding:0;margin-bottom:12px}.danger{color:#b44;border-color:#efd5d5}
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.3);display:none;align-items:center;justify-content:center;z-index:10;backdrop-filter:blur(3px)}.modal-bg.show{display:flex}.modal{width:430px;background:#fff;border-radius:15px;box-shadow:0 25px 70px rgba(0,0,0,.2);overflow:hidden}.modal-head{padding:17px 18px;border-bottom:1px solid #eee;display:flex;justify-content:space-between;align-items:center;font-size:13px}.icon-btn{border:0;background:none;font-size:20px;color:#999}.modal-body{padding:18px}.modal-body label{display:block;font-size:9px;color:#777;margin-bottom:13px}.modal-body input,.modal-body select,.modal-body textarea{display:block;width:100%;margin-top:6px;border:1px solid #e3e3e1;border-radius:8px;padding:9px 10px;font-size:11px;outline:none}.modal-body textarea{height:70px;resize:none}.modal-actions{display:flex;justify-content:flex-end;gap:7px;padding:13px 18px;border-top:1px solid #eee;background:#fafaf9}
.toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,20px);background:#202124;color:#fff;padding:10px 15px;border-radius:9px;font-size:10px;opacity:0;pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}.project-grid{grid-template-columns:1fr 1fr}.bottom{grid-template-columns:1fr}.space-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.sidebar{width:68px;padding:15px 7px}.brand strong{font-size:0}.brand strong:after{content:"SM";font-size:13px}.brand span,.nav-title{display:none}.nav{justify-content:center;padding:0}.nav span{margin:0}.nav{font-size:0}.nav span{font-size:12px}.page{padding:22px 18px}.project-grid{grid-template-columns:1fr}.detail-info{grid-template-columns:1fr 1fr}.top-search{display:none}}
/* =========================
   PROCESS CALENDAR
========================= */

.process-calendar{
  padding:24px;
  margin-top:24px;
  overflow:hidden;
}

.calendar-header{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  margin-bottom:24px;
}

.calendar-header h2{
  margin:0;
  min-width:150px;
  text-align:center;
  font-size:20px;
  font-weight:700;
}

.calendar-arrow{
  width:36px;
  height:36px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:9px;
  cursor:pointer;
  font-size:20px;
  color:#555;
}

.calendar-arrow:hover{
  background:#f7f7f5;
}

.calendar-week{
  display:grid;
  grid-template-columns:repeat(7, minmax(0,1fr));
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}

.calendar-week > div{
  padding:12px 8px;
  text-align:center;
  font-size:11px;
  font-weight:600;
  color:#777;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#fafaf8;
}

.calendar-grid{
  display:grid;
  grid-template-columns:repeat(7, minmax(0,1fr));
  border-left:1px solid var(--line);
}

.calendar-day{
  min-height:110px;
  padding:10px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#fff;
}

.calendar-day.empty{
  background:#fafafa;
}

.calendar-date{
  font-size:12px;
  font-weight:600;
  margin-bottom:8px;
}

.calendar-date.sun{
  color:#c96b6b;
}

.calendar-date.sat{
  color:#6688b8;
}

.calendar-events{
  display:flex;
  flex-direction:column;
  gap:4px;
}

@media(max-width:700px){

  .process-calendar{
    padding:12px;
  }

  .calendar-header{
    gap:12px;
  }

  .calendar-header h2{
    font-size:16px;
    min-width:120px;
  }

  .calendar-day{
    min-height:80px;
    padding:7px;
  }

  .calendar-week > div{
    padding:9px 4px;
    font-size:10px;
  }

  .calendar-date{
    font-size:11px;
  }

}