/* THE-K Colorful V3 - force final visual layer */
:root{--v3-bg:#f4f6fb;--v3-nav:#211a3c;--v3-purple:#6f4cff;--v3-text:#1d2230;--v3-muted:#737b90;--v3-line:#e7eaf2}
html,body{background:var(--v3-bg)!important;color:var(--v3-text)!important}
#app{display:grid!important;grid-template-columns:252px minmax(0,1fr)!important;min-height:100vh!important;padding:0!important;background:var(--v3-bg)!important}
#app>nav{grid-column:1!important;grid-row:1/3!important;position:fixed!important;left:0!important;top:0!important;width:252px!important;height:100vh!important;background:linear-gradient(180deg,#211a3c 0%,#171329 100%)!important;padding:28px 18px!important;display:flex!important;flex-direction:column!important;gap:6px!important;border:0!important;overflow:auto!important;z-index:20!important;box-shadow:8px 0 28px rgba(25,19,55,.12)!important}
#app>nav:before{content:"THE K SPARTA\A학생관리 프로그램"!important;white-space:pre!important;color:white!important;font-size:22px!important;font-weight:900!important;line-height:1.35!important;margin:0 10px 24px!important;letter-spacing:-.3px!important}
#app>nav button{display:block!important;width:100%!important;color:#d9d4ee!important;background:transparent!important;text-align:left!important;border:0!important;border-radius:12px!important;padding:12px 14px!important;font-size:14px!important;font-weight:700!important;box-shadow:none!important}
#app>nav button.active,#app>nav button:hover{background:linear-gradient(135deg,#6f4cff,#8c72ff)!important;color:#fff!important;transform:none!important}
#app>header{grid-column:2!important;height:92px!important;background:transparent!important;color:var(--v3-text)!important;padding:22px 34px!important;border:0!important;display:flex!important;align-items:center!important;justify-content:space-between!important;box-shadow:none!important}
#app>header .brand{color:var(--v3-purple)!important;font-size:12px!important;font-weight:900!important;letter-spacing:1.5px!important}
.header-title{display:flex!important;align-items:center!important;gap:12px!important}.header-title h1{margin:3px 0 0!important;font-size:25px!important}.version-chip{font-size:10px!important;font-weight:900!important;color:#fff!important;background:linear-gradient(135deg,#ff7a59,#ff4f91)!important;padding:6px 9px!important;border-radius:999px!important}
#app>header .button,#app>header button{background:#fff!important;color:#2a2f3d!important;border:1px solid var(--v3-line)!important;border-radius:11px!important;padding:10px 13px!important;box-shadow:0 5px 15px rgba(35,31,69,.05)!important}
#app>main{grid-column:2!important;width:auto!important;max-width:none!important;margin:0!important;padding:0 34px 42px!important;background:transparent!important}
.dashboard-hero{display:flex!important;justify-content:space-between!important;align-items:center!important;background:linear-gradient(135deg,#6f4cff 0%,#8d73ff 55%,#b08fff 100%)!important;color:#fff!important;border-radius:22px!important;padding:26px 28px!important;margin:4px 0 18px!important;box-shadow:0 18px 36px rgba(98,73,220,.22)!important;overflow:hidden!important;position:relative!important}
.dashboard-hero:after{content:"";position:absolute;right:-45px;top:-65px;width:210px;height:210px;border-radius:50%;background:rgba(255,255,255,.13)}
.dashboard-hero h2{margin:5px 0!important;font-size:27px!important;color:#fff!important}.dashboard-hero p{margin:0!important;color:#eeeaff!important}.eyebrow{font-size:11px!important;font-weight:900!important;letter-spacing:1.3px!important}.hero-date{background:rgba(255,255,255,.18)!important;padding:12px 15px!important;border-radius:14px!important;font-weight:800!important;z-index:1!important}
.metrics{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px!important;margin:0 0 20px!important}
.metrics article{background:#fff!important;border:1px solid var(--v3-line)!important;border-radius:18px!important;padding:20px!important;box-shadow:0 12px 30px rgba(42,35,83,.07)!important;position:relative!important;overflow:hidden!important;min-height:112px!important}
.metrics article:before{content:""!important;position:absolute!important;left:0!important;top:0!important;width:100%!important;height:5px!important;background:#6f4cff!important}.metrics article:nth-child(2):before{background:#2fb477!important}.metrics article:nth-child(3):before{background:#4b8cff!important}.metrics article:nth-child(4):before{background:#f39b43!important}
.metrics article span{color:var(--v3-muted)!important;font-size:13px!important}.metrics article strong{display:block!important;margin-top:11px!important;font-size:28px!important;color:var(--v3-text)!important}
.section-title{margin:24px 0 14px!important}.section-title h2{font-size:19px!important;color:var(--v3-text)!important}.section-title p{color:var(--v3-muted)!important}
.card,.table-wrap,.student-card,.record-card,.seat,.monitor-card,.report-paper{background:#fff!important;border:1px solid var(--v3-line)!important;border-radius:18px!important;box-shadow:0 12px 30px rgba(42,35,83,.07)!important}
.student-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important}.student-card{padding:18px!important}
.table-wrap{overflow:hidden!important}table{background:#fff!important}th{background:#fafbfe!important;color:var(--v3-muted)!important}th,td{border-color:#edf0f6!important}
.primary{background:linear-gradient(135deg,#6f4cff,#8b70ff)!important;border-color:#6f4cff!important;color:white!important;border-radius:11px!important}
.seat-grid{display:grid!important;grid-template-columns:repeat(5,minmax(130px,1fr))!important;gap:13px!important}.seat{padding:20px!important;text-align:center!important}.seat.used{background:#f0edff!important;border-color:#d2c8ff!important}
#counseling .record-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important}
.alim-grid{display:grid!important;grid-template-columns:1.05fr .95fr!important;gap:18px!important}.alim-form{display:grid!important;grid-template-columns:1fr 1fr!important;gap:13px!important}.alim-form h3,.alim-form button,.alim-form .check{grid-column:1/-1!important}.alim-form label{display:grid!important;gap:7px!important}.alim-form .check{display:flex!important;background:#f5f2ff!important;padding:12px!important;border-radius:11px!important}.talk-bubble{background:#fff7c9!important;border:1px solid #ebde91!important;border-radius:14px!important;padding:16px!important;margin:12px 0!important;line-height:1.65!important}.test-send{display:grid!important;grid-template-columns:1fr auto auto!important;gap:8px!important;margin-top:18px!important}.log-result{max-width:360px!important;white-space:pre-wrap!important;font-size:12px!important}
@media(max-width:1050px){#app{grid-template-columns:1fr!important}#app>nav{position:relative!important;width:auto!important;height:auto!important;grid-column:1!important;grid-row:auto!important;flex-direction:row!important;flex-wrap:wrap!important}#app>nav:before{display:none!important}#app>header,#app>main{grid-column:1!important}.metrics{grid-template-columns:repeat(2,1fr)!important}.student-grid{grid-template-columns:repeat(2,1fr)!important}.alim-grid{grid-template-columns:1fr!important}.seat-grid{grid-template-columns:repeat(3,1fr)!important}}


/* V4 FIX: 로그인 전에는 관리자 사이드바와 앱을 완전히 숨김 */
#app[hidden]{display:none!important}
#login[hidden]{display:none!important}
body:has(#login:not([hidden])){overflow:auto}
#login.login-page{
  position:relative!important;
  z-index:10000!important;
  width:100%!important;
  min-height:100vh!important;
  margin:0!important;
}
#login .login-card{position:relative!important;z-index:2!important}

/* V4: 실시간 좌석 배치도 */
.realtime-seat-board{
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:20px;
  box-shadow:0 12px 32px rgba(43,38,80,.07);
}
.seat-summary{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-bottom:18px;
}
.seat-summary article{
  border:1px solid var(--line);
  border-radius:14px;
  padding:15px;
  background:#fafbfe;
}
.seat-summary span{display:block;color:var(--muted);font-size:12px}
.seat-summary strong{display:block;font-size:24px;margin-top:5px}
.seat-legend{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
  margin:0 0 18px;
  color:var(--muted);
  font-size:13px;
}
.seat-legend i{
  width:13px;height:13px;border-radius:4px;display:inline-block;margin-right:5px;vertical-align:-2px;
}
.seat-legend .lg-present{background:#6e4cff}
.seat-legend .lg-away{background:#f39b43}
.seat-legend .lg-assigned{background:#dcd7ff}
.seat-legend .lg-empty{background:#edf0f5;border:1px solid #d8dce5}
.floor-plan{
  border:2px solid #ebe8f8;
  border-radius:18px;
  background:#f8f8fc;
  padding:18px;
}
.floor-top{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  margin-bottom:20px;
  color:#7a7394;
  font-size:12px;
}
.floor-top .entrance{
  justify-self:center;
  background:#201a3b;
  color:#fff;
  border-radius:9px;
  padding:8px 20px;
}
.floor-top .desk{
  justify-self:end;
  border:1px dashed #aaa3c8;
  border-radius:9px;
  padding:8px 14px;
  background:#fff;
}
.floor-zones{
  display:grid;
  grid-template-columns:1fr 70px 1fr;
  gap:14px;
  align-items:stretch;
}
.floor-aisle{
  border-left:2px dashed #d8d3e9;
  border-right:2px dashed #d8d3e9;
  display:grid;
  place-items:center;
  color:#9b95ad;
  font-size:11px;
  writing-mode:vertical-rl;
  letter-spacing:3px;
}
.seat-zone{
  display:grid;
  grid-template-columns:repeat(3,minmax(105px,1fr));
  gap:12px;
}
.live-seat{
  position:relative;
  min-height:112px;
  padding:15px 12px;
  border-radius:15px;
  text-align:center;
  border:1px solid #dde0e8;
  background:#fff;
  transition:.15s;
  cursor:pointer;
}
.live-seat:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(55,45,95,.10)}
.live-seat .seat-no{font-size:17px;font-weight:900;display:block}
.live-seat .student-name{font-size:14px;font-weight:800;margin:9px 0 5px;display:block}
.live-seat .seat-time{font-size:11px;color:var(--muted)}
.live-seat .seat-state{
  position:absolute;right:8px;top:8px;
  width:9px;height:9px;border-radius:50%;
}
.live-seat.present{background:#eeeaff;border-color:#b8aaff}
.live-seat.present .seat-state{background:#6e4cff;box-shadow:0 0 0 5px #6e4cff20}
.live-seat.away{background:#fff5e9;border-color:#f1bf87}
.live-seat.away .seat-state{background:#f39b43;box-shadow:0 0 0 5px #f39b4320}
.live-seat.assigned{background:#f7f5ff;border-color:#ddd7f8}
.live-seat.assigned .seat-state{background:#b7acd9}
.live-seat.empty{background:#fff;color:#858b99;border-style:dashed}
.live-seat.empty .seat-state{background:#d7dbe3}
.live-seat .seat-delete{
  margin-top:8px;padding:4px 8px;font-size:10px;border-radius:7px;background:#fff8;border-color:#dfe2ea;
}
.realtime-note{margin-top:14px;color:var(--muted);font-size:12px;text-align:right}
@media(max-width:900px){
  .floor-zones{grid-template-columns:1fr}
  .floor-aisle{height:30px;writing-mode:horizontal-tb;border:0;border-top:2px dashed #d8d3e9;border-bottom:2px dashed #d8d3e9}
  .seat-zone{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:650px){
  .seat-summary{grid-template-columns:repeat(2,1fr)}
  .seat-zone{grid-template-columns:repeat(2,1fr)}
  .floor-top{grid-template-columns:1fr}
  .floor-top .entrance,.floor-top .desk{justify-self:center;margin:4px}
}

.template-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.template-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:17px;box-shadow:0 10px 26px rgba(43,38,80,.06)}.template-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:13px}.template-head strong{font-size:16px}.template-meta{display:grid;grid-template-columns:160px 1fr;gap:10px;margin-bottom:10px}.template-card label{display:grid;gap:6px;font-size:12px;color:var(--muted)}.template-card input,.template-card select,.template-card textarea{width:100%;border:1px solid var(--line);border-radius:9px;padding:9px;background:#fff;color:var(--text)}.template-card textarea{font-family:inherit;line-height:1.5;resize:vertical}.template-card .form-check{display:flex;flex-direction:row;align-items:center;gap:6px;background:#f4f1ff;padding:7px 9px;border-radius:9px}.template-card .form-check input{width:auto}.template-guide label{display:grid;gap:7px;margin:12px 0}.template-guide select{width:100%;padding:10px;border:1px solid var(--line);border-radius:9px}@media(max-width:900px){.template-cards{grid-template-columns:1fr}.template-meta{grid-template-columns:1fr}}