/* Local Pretendard variable font: ./fonts/PretendardVariable.woff2 */
@font-face{
  font-family:"Pretendard Variable";
  src:url("./fonts/PretendardVariable.woff2") format("woff2");
  font-style:normal;
  font-weight:45 920;
  font-display:swap;
}

:root{
  --white:#ffffff;
  --text:#172033;
  --text-soft:#4b5668;
  --muted:#8490a2;
  --line:#e5e9ef;
  --line-dark:#d6dce5;

  --blue:#2f66b3;
  --blue-dark:#245493;
  --blue-soft:#edf4fd;

  --green:#22a878;
  --purple:#7567d8;
  --orange:#ef8b32;
  --yellow:#f3b51b;

  --shadow:0 5px 18px rgba(27,48,78,.07);
  --shadow-hover:0 9px 24px rgba(27,48,78,.12);
}

*{
  box-sizing:border-box;
}

html{
  font-size:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:#fff;
  color:var(--text);

  font-family:
    "Pretendard Variable",
    Pretendard,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Noto Sans KR",
    "Malgun Gothic",
    sans-serif;

  -webkit-font-smoothing:antialiased;
}

button,
input{
  font:inherit;
}

button{
  cursor:pointer;
}

a{
  color:inherit;
}

.wrap{
  width:min(1180px,calc(100% - 48px));
  margin:0 auto;
}


/* =====================================================
   HEADER
===================================================== */

.site-header{
  background:#fff;
  border-bottom:1px solid var(--line);
}

.header-inner{
  width:min(1180px,calc(100% - 48px));
  height:76px;
  margin:0 auto;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
}

.school-logo{
  width:45px;
  height:45px;
  object-fit:contain;
}

.brand-text{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.school-name{
  font-size:1.0625rem;
  font-weight:800;
  letter-spacing:-.035em;
}

.school-name-en{
  color:#929cab;
  font-size:0.5625rem;
  font-weight:700;
  letter-spacing:.045em;
}

.header-time{
  color:#687487;
  font-size:0.75rem;
  font-weight:600;
  white-space:nowrap;
}


/* =====================================================
   MAIN
===================================================== */

main{
  padding:30px 0 64px;
}


/* =====================================================
   QUICK SYSTEM
===================================================== */

.system-section{
  margin-bottom:42px;
}

.system-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

.system-card{
  height:94px;
  padding:17px 18px;

  display:flex;
  align-items:center;
  gap:15px;

  border-radius:10px;

  color:#fff;
  text-decoration:none;

  box-shadow:0 5px 14px rgba(30,55,90,.11);

  transition:
    transform .17s ease,
    box-shadow .17s ease;
}

.system-card:hover{
  transform:translateY(-2px);
  box-shadow:0 9px 20px rgba(30,55,90,.16);
}

.system-card.home{
  background:linear-gradient(135deg,#397ee2,#2464c6);
}

.system-card.neis{
  background:linear-gradient(135deg,#2abb91,#159b73);
}

.system-card.evpn{
  background:linear-gradient(135deg,#8172e5,#6655cc);
}

.system-card.riro{
  background:linear-gradient(135deg,#f49b43,#ee7d22);
}

.system-icon{
  width:46px;
  height:46px;
  flex:0 0 46px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:10px;
  background:rgba(255,255,255,.16);
}

.system-icon svg{
  width:25px;
  height:25px;
}

.system-content{
  min-width:0;
  flex:1;
}

.system-name{
  font-size:0.9375rem;
  font-weight:800;
}

.system-desc{
  margin-top:4px;
  color:rgba(255,255,255,.82);
  font-size:0.625rem;
}

.system-arrow{
  font-size:1rem;
  opacity:.8;
  transition:transform .17s ease;
}

.system-card:hover .system-arrow{
  transform:translateX(3px);
}


/* =====================================================
   RESOURCE HEADER
===================================================== */

.resource-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:25px;
  margin-bottom:18px;
}

.resource-title h1{
  margin:0;
  font-size:1.5rem;
  font-weight:800;
  letter-spacing:-.045em;
}

.resource-title p{
  margin:6px 0 0;
  color:var(--muted);
  font-size:0.8125rem;
}

.resource-actions{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
}

.btn{
  height:38px;
  padding:0 13px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border:1px solid var(--line-dark);
  border-radius:6px;

  background:#fff;
  color:#505c6e;

  text-decoration:none;

  font-size:0.75rem;
  font-weight:750;
}

.btn:hover{
  color:var(--blue);
  border-color:#b7c8df;
  background:#f8fbff;
}

.btn.primary{
  color:#fff;
  background:var(--blue);
  border-color:var(--blue);
}

.btn.primary:hover{
  background:var(--blue-dark);
  border-color:var(--blue-dark);
}

.btn:disabled{
  opacity:.55;
  cursor:default;
}


/* =====================================================
   FILTER
===================================================== */

.filter-bar{
  padding:14px 0;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;

  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.chips{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
}

.chip{
  height:36px;
  padding:0 13px;

  display:inline-flex;
  align-items:center;
  gap:7px;

  border:1px solid var(--line);
  border-radius:6px;

  background:#fff;
  color:#596579;

  font-size:0.75rem;
  font-weight:750;
}

.chip:hover{
  border-color:#b7c7dc;
  background:#f8fbff;
}

.chip.active{
  border-color:var(--blue);
  background:var(--blue);
  color:#fff;
}

.chip-icon{
  width:18px;
  height:18px;

  display:flex;
  align-items:center;
  justify-content:center;
}

.chip-icon svg{
  width:17px;
  height:17px;
}

.search-wrap{
  position:relative;
  width:300px;
  flex:0 0 300px;
}

.search{
  width:100%;
  height:39px;

  padding:0 36px 0 12px;

  border:1px solid var(--line-dark);
  border-radius:6px;

  background:#fff;
  color:var(--text);

  outline:none;
  font-size:0.75rem;
}

.search:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 3px var(--blue-soft);
}

.search-icon{
  position:absolute;
  top:50%;
  right:11px;

  transform:translateY(-50%);
  display:flex;

  color:#8c97a7;
}

.search-icon svg{
  width:17px;
  height:17px;
}

.status{
  min-height:17px;
  margin-top:10px;

  color:#929baa;
  font-size:0.6875rem;
}


/* =====================================================
   IMPORTANT
===================================================== */

.important-section{
  margin-top:22px;
  padding:18px;

  background:#fffaf0;

  border:1px solid #f0e3bd;
  border-radius:8px;
}

.important-head{
  display:flex;
  align-items:center;
  gap:8px;

  margin-bottom:13px;
}

.important-head-icon{
  color:var(--yellow);
  display:flex;
}

.important-head-icon svg{
  width:20px;
  height:20px;
}

.important-title{
  font-size:0.9375rem;
  font-weight:800;
}

.important-desc{
  color:#8d8270;
  font-size:0.6875rem;
}

.important-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}

.important-card{
  position:relative;

  min-height:108px;
  padding:14px;

  display:flex;
  align-items:flex-start;
  gap:12px;

  background:#fff;

  border:1px solid #eadfca;
  border-radius:7px;

  text-decoration:none;

  transition:.15s ease;
}

.important-card:hover{
  border-color:#ddc992;
  box-shadow:var(--shadow);
  transform:translateY(-1px);
}


/* =====================================================
   FILE ICON
===================================================== */

.sheet-icon{
  width:36px;
  height:40px;

  flex:0 0 36px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:5px;

  background:#e9f7f0;
  color:#16865c;
}

.sheet-icon svg{
  width:22px;
  height:22px;
}


/* =====================================================
   STAR BUTTON
===================================================== */

.important-toggle{
  position:absolute;
  top:10px;
  right:10px;

  width:30px;
  height:30px;

  padding:0;

  display:flex;
  align-items:center;
  justify-content:center;

  border:0;
  border-radius:50%;

  background:transparent;
  color:#aab2bd;

  z-index:5;

  transition:
    color .15s ease,
    background .15s ease,
    transform .15s ease;
}

.important-toggle svg{
  width:20px;
  height:20px;
}

.important-toggle:hover{
  color:var(--yellow);
  background:#fff8e5;
  transform:scale(1.08);
}

.important-toggle.active{
  color:var(--yellow);
}

.important-toggle.category-important{
  color:#f4c95d;
}

.important-toggle.category-important:hover{
  color:#e8ad18;
  background:#fff8e5;
}

.important-toggle.busy{
  opacity:.45;
  pointer-events:none;
}

.important-toggle::after{
  content:attr(data-tooltip);

  position:absolute;
  right:0;
  top:34px;

  width:max-content;
  max-width:220px;

  padding:6px 9px;

  border-radius:5px;

  background:#273142;
  color:#fff;

  font-size:0.6875rem;
  font-weight:600;
  line-height:1.4;

  white-space:nowrap;

  opacity:0;
  visibility:hidden;

  transform:translateY(-2px);

  transition:
    opacity .08s ease,
    transform .08s ease;

  pointer-events:none;

  z-index:50;
}

.important-toggle:hover::after{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
  
/* =====================================================
   IMPORTANT CARD TEXT
===================================================== */

.important-info{
  min-width:0;
  flex:1;
  padding-right:28px;
}

.important-category{
  color:var(--blue);
  font-size:0.625rem;
  font-weight:800;
}

.important-card-title{
  margin-top:4px;

  font-size:0.875rem;
  line-height:1.4;
  font-weight:800;
}

.important-card-desc{
  margin-top:4px;

  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;

  color:var(--muted);
  font-size:0.6875rem;
  line-height:1.5;
}

.important-meta{
  margin-top:8px;

  color:#949daa;
  font-size:0.625rem;
}


/* =====================================================
   CATEGORY
===================================================== */

#content{
  padding-top:3px;
}

.category-section{
  padding-top:28px;
}

.category-head{
  margin-bottom:10px;

  display:flex;
  align-items:center;
  justify-content:space-between;
}

.category-heading{
  display:flex;
  align-items:center;
  gap:8px;
}

.category-icon{
  width:25px;
  height:25px;

  display:flex;
  align-items:center;
  justify-content:center;

  color:var(--blue);
}

.category-icon svg{
  width:23px;
  height:23px;
}

.category-head h2{
  margin:0;

  font-size:1.0625rem;
  font-weight:800;
  letter-spacing:-.025em;
}

.category-count{
  color:#9aa4b2;
  font-size:0.6875rem;
}


/* =====================================================
   FILE LIST
===================================================== */

.file-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));

  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}

.file-card{
  position:relative;

  min-height:112px;
  padding:15px;

  display:flex;
  align-items:flex-start;
  gap:12px;

  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);

  background:#fff;
  text-decoration:none;

  transition:.14s ease;
}

.file-card:hover{
  background:#f9fbfe;
}

.file-info{
  min-width:0;
  flex:1;

  /* 별 버튼 자리 */
  padding-right:28px;
}

.file-title{
  overflow:hidden;

  color:var(--text);

  font-size:0.875rem;
  line-height:1.4;
  font-weight:800;

  white-space:nowrap;
  text-overflow:ellipsis;
}

.file-desc{
  margin-top:5px;

  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;

  color:var(--muted);
  font-size:0.6875rem;
  line-height:1.5;
}

.file-meta{
  margin-top:10px;

  color:#929ba9;
  font-size:0.625rem;
}


/* =====================================================
   EMPTY
===================================================== */

.empty-state{
  padding:40px 0;

  text-align:center;

  color:var(--muted);
  font-size:0.8125rem;
}


/* =====================================================
   FOOTER
===================================================== */

.footer{
  margin-top:42px;
  padding:20px 0 4px;

  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;

  border-top:1px solid var(--line);

  color:#969fab;
  font-size:0.6875rem;
}

.footer-school{
  color:#687487;
  font-weight:800;
}


/* =====================================================
   DIALOG
===================================================== */

dialog{
  width:min(500px,calc(100% - 32px));
  max-height:calc(100vh - 40px);

  padding:0;

  border:1px solid var(--line);
  border-radius:10px;

  box-shadow:0 24px 70px rgba(28,38,52,.18);
}

dialog::backdrop{
  background:rgba(22,28,36,.38);
  backdrop-filter:blur(2px);
}

.modal{
  padding:27px;
  background:#fff;
}

.modal-header{
  padding-bottom:18px;
  margin-bottom:18px;
  border-bottom:1px solid var(--line);
}

.modal h3{
  margin:0 0 6px;
  font-size:1.3125rem;
}

.modal p{
  margin:0;
  color:var(--muted);
  font-size:0.75rem;
}

.field{
  margin-top:14px;
}

.modal label{
  display:block;
  margin-bottom:6px;

  color:#4a5568;
  font-size:0.75rem;
  font-weight:800;
}

.modal input{
  width:100%;
  height:41px;

  padding:0 11px;

  border:1px solid var(--line-dark);
  border-radius:5px;

  background:#fff;
  color:var(--text);

  outline:none;
  font-size:0.8125rem;
}

.modal input:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 3px var(--blue-soft);
}

.modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:7px;

  margin-top:22px;
  padding-top:17px;

  border-top:1px solid var(--line);
}

.notice{
  min-height:16px;
  margin-top:10px;

  color:var(--muted);
  font-size:0.6875rem;
}