/* Public graduation UI */
:root{
  --ink:#14213d;
  --muted:#64748b;
  --line:#dbe7ef;
  --paper:#ffffff;
  --soft:#f7fbfc;
  --brand:#0f766e;
  --brand-dark:#115e59;
  --brand-soft:#d9f5ee;
  --blue:#2563eb;
  --gold:#f59e0b;
  --success:#16a34a;
  --alert:#dc2626;
  --shadow:0 24px 70px rgba(15,23,42,.20);
  --radius:22px;
}

*{box-sizing:border-box}

html,
body{
  min-height:100%;
}

body{
  margin:0;
  color:var(--ink);
  font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background:
    radial-gradient(circle at top left, rgba(37,99,235,.18), transparent 34rem),
    radial-gradient(circle at bottom right, rgba(245,158,11,.18), transparent 30rem),
    linear-gradient(135deg, #ecfeff 0%, #f8fafc 45%, #eefbf4 100%);
  -webkit-font-smoothing:antialiased;
}

img{
  max-width:100%;
  height:auto;
}

.header-area{
  display:none;
}

.graduation-page{
  position:relative;
  isolation:isolate;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(18px, 4vw, 48px);
  overflow:hidden;
}

.edu-pattern{
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(15,118,110,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,.08) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to bottom, transparent, #000 14%, #000 82%, transparent);
}

.float-mark{
  position:absolute;
  z-index:-1;
  width:160px;
  aspect-ratio:1;
  border:1px solid rgba(15,118,110,.20);
  opacity:.32;
  filter:blur(.1px);
  animation:floatSoft 9s ease-in-out infinite;
}

.mark-book{
  left:5vw;
  bottom:8vh;
  border-radius:22px;
  transform:rotate(-12deg);
}

.mark-cap{
  top:9vh;
  right:7vw;
  border-radius:50%;
  animation-delay:-3s;
}

.announcement-shell,
.result-shell{
  width:min(100%, 980px);
  background:rgba(255,255,255,.88);
  border:1px solid rgba(255,255,255,.72);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  backdrop-filter:blur(18px);
}

.announcement-shell{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(320px, 430px);
  gap:28px;
  padding:clamp(22px, 4vw, 42px);
}

.announcement-intro,
.announcement-action{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.announcement-intro{
  gap:24px;
}

.school-brand,
.result-header{
  display:flex;
  align-items:center;
  gap:18px;
}

.brand-logo{
  flex:0 0 auto;
  width:96px;
  height:96px;
  display:grid;
  place-items:center;
  padding:10px;
  border-radius:20px;
  background:linear-gradient(180deg, #fff, #f1f5f9);
  box-shadow:0 16px 36px rgba(15,23,42,.14);
}

.brand-logo.compact{
  width:76px;
  height:76px;
  border-radius:18px;
}

.brand-logo img{
  display:block;
  max-width:86%;
  max-height:86%;
}

.eyebrow,
.section-label{
  margin:0 0 7px;
  color:var(--brand);
  font-size:12px;
  font-weight:800;
  letter-spacing:0;
  text-transform:uppercase;
}

h1{
  margin:0;
  color:#102a43;
  font-size:clamp(28px, 4.8vw, 52px);
  line-height:1.04;
  font-weight:850;
}

.result-header h1{
  font-size:clamp(24px, 4vw, 40px);
}

.school-name{
  margin:10px 0 0;
  color:var(--muted);
  font-weight:800;
}

.academic-card,
.countdown-panel,
.check-form,
.student-detail,
.result-message{
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(248,250,252,.78);
}

.academic-card{
  display:inline-flex;
  width:max-content;
  max-width:100%;
  flex-direction:column;
  gap:4px;
  padding:16px 18px;
}

.academic-card span{
  color:var(--muted);
  font-size:13px;
  font-weight:700;
}

.academic-card strong{
  color:var(--brand-dark);
  font-size:24px;
}

.countdown-panel{
  padding:18px;
}

.kr-count{
  min-height:86px;
}

.countdown{
  display:grid;
  grid-template-columns:repeat(4, minmax(62px, 1fr));
  gap:10px;
}

.time-unit{
  min-width:0;
  padding:12px 8px;
  text-align:center;
  border:1px solid rgba(15,118,110,.12);
  border-radius:14px;
  background:linear-gradient(180deg, #ffffff, #ecfdf5);
}

.time-unit .num{
  color:var(--brand-dark);
  font-size:clamp(20px, 3vw, 28px);
  line-height:1;
  font-weight:850;
  font-variant-numeric:tabular-nums;
}

.time-unit .label{
  margin-top:6px;
  color:var(--muted);
  font-size:12px;
  font-weight:700;
}

.check-form{
  margin-top:14px;
  padding:18px;
}

.check-form label{
  display:block;
  margin-bottom:10px;
  color:#334155;
  font-weight:800;
}

.input-group-modern{
  display:flex;
  gap:10px;
}

.search-input{
  width:100%;
  min-height:52px;
  flex:1;
  border:1px solid #cbd5e1;
  border-radius:14px;
  padding:0 15px;
  color:var(--ink);
  background:#fff;
  font-size:16px;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.search-input:focus{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 4px rgba(15,118,110,.14);
}

.search-input:disabled{
  color:#94a3b8;
  background:#eef2f7;
  cursor:not-allowed;
}

.search-btn,
.secondary-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  border:0;
  border-radius:14px;
  padding:0 20px;
  color:#fff;
  font-weight:850;
  white-space:nowrap;
  cursor:pointer;
  text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.search-btn{
  background:linear-gradient(135deg, var(--brand), var(--blue));
  box-shadow:0 14px 30px rgba(15,118,110,.24);
}

.search-btn:disabled{
  color:#cbd5e1;
  background:linear-gradient(135deg, #94a3b8, #64748b);
  box-shadow:none;
  cursor:not-allowed;
  transform:none;
  filter:none;
}

.secondary-btn{
  color:var(--brand-dark);
  background:var(--brand-soft);
}

.search-btn:not(:disabled):hover,
.secondary-btn:hover{
  color:#fff;
  text-decoration:none;
  transform:translateY(-1px);
  filter:saturate(1.08);
}

.secondary-btn:hover{
  color:var(--brand-dark);
}

.search-btn:focus,
.secondary-btn:focus{
  outline:3px solid rgba(37,99,235,.22);
  outline-offset:3px;
}

.kr-note{
  margin:12px 0 0;
  color:var(--muted);
  font-size:13px;
  line-height:1.55;
}

.check-form.is-locked{
  background:rgba(241,245,249,.86);
}

.check-form.is-locked label{
  color:#64748b;
}

.result-shell{
  max-width:760px;
  padding:clamp(22px, 4vw, 38px);
  text-align:left;
}

.result-shell.is-success{
  border-color:rgba(22,163,74,.24);
}

.result-shell.is-alert{
  border-color:rgba(220,38,38,.22);
}

.status-badge{
  margin:24px 0 18px;
  display:flex;
  justify-content:center;
}

.status-badge span{
  display:inline-flex;
  min-width:180px;
  justify-content:center;
  border-radius:999px;
  padding:13px 24px;
  color:#fff;
  font-size:22px;
  font-weight:900;
  letter-spacing:0;
  box-shadow:0 18px 34px rgba(15,23,42,.16);
}

.is-success .status-badge span{
  background:linear-gradient(135deg, var(--success), var(--gold));
}

.is-alert .status-badge span{
  background:linear-gradient(135deg, var(--alert), #f97316);
}

.student-detail{
  display:grid;
  gap:0;
  margin:0;
  overflow:hidden;
}

.student-detail div{
  display:grid;
  grid-template-columns:140px 1fr;
  gap:16px;
  padding:15px 18px;
  border-bottom:1px solid var(--line);
}

.student-detail div:last-child{
  border-bottom:0;
}

.student-detail dt{
  color:var(--muted);
  font-weight:800;
}

.student-detail dd{
  margin:0;
  color:var(--ink);
  font-weight:800;
}

.result-message{
  margin-top:16px;
  padding:18px;
  color:#334155;
  line-height:1.65;
}

.result-message p{
  margin:0;
}

.result-message strong{
  display:block;
  margin-bottom:10px;
  color:#991b1b;
  font-weight:900;
}

.result-actions{
  display:flex;
  justify-content:center;
  margin-top:18px;
}

.confetti-field{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
}

.confetti-field span{
  position:absolute;
  top:-30px;
  width:10px;
  height:18px;
  border-radius:3px;
  background:var(--gold);
  animation:confettiFall 2.8s ease-in-out forwards;
}

.confetti-field span:nth-child(1){left:18%;background:var(--gold);animation-delay:.1s}
.confetti-field span:nth-child(2){left:32%;background:var(--brand);animation-delay:.35s}
.confetti-field span:nth-child(3){left:48%;background:var(--blue);animation-delay:.05s}
.confetti-field span:nth-child(4){left:61%;background:#22c55e;animation-delay:.45s}
.confetti-field span:nth-child(5){left:74%;background:#f97316;animation-delay:.25s}
.confetti-field span:nth-child(6){left:86%;background:#06b6d4;animation-delay:.15s}

.enter-up{
  animation:enterUp .55s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes enterUp{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:translateY(0)}
}

@keyframes floatSoft{
  0%,100%{transform:translateY(0) rotate(-10deg)}
  50%{transform:translateY(-18px) rotate(-4deg)}
}

@keyframes confettiFall{
  0%{opacity:0;transform:translateY(-30px) rotate(0)}
  12%{opacity:1}
  100%{opacity:0;transform:translateY(72vh) rotate(220deg)}
}

.modal{z-index:1000001 !important;pointer-events:auto}
.modal-backdrop{z-index:1000000 !important;pointer-events:auto}
.modal .modal-content{pointer-events:auto}

.notice-modal{
  position:fixed;
  inset:0;
  z-index:2000000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(15,23,42,.56);
  backdrop-filter:blur(8px);
}

.notice-modal__box{
  width:min(100%, 520px);
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.72);
  border-radius:22px;
  background:rgba(255,255,255,.96);
  box-shadow:var(--shadow);
  padding:26px;
  animation:enterUp .35s cubic-bezier(.2,.8,.2,1) both;
}

.notice-modal__box::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:7px;
  background:linear-gradient(90deg, var(--brand), var(--blue), var(--gold));
}

.notice-modal__icon{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  margin-bottom:14px;
  border-radius:16px;
  color:var(--brand-dark);
  background:var(--brand-soft);
  font-size:25px;
  font-weight:900;
}

.notice-modal__title{
  margin:0;
  color:#102a43;
  font-size:24px;
  line-height:1.15;
  font-weight:850;
}

.notice-modal__message{
  margin:10px 0 0;
  color:#475569;
  line-height:1.65;
}

.notice-modal__actions{
  display:flex;
  justify-content:flex-end;
  margin-top:20px;
}

@media (max-width:880px){
  .graduation-page{
    align-items:flex-start;
    padding-top:24px;
    overflow:auto;
  }

  .announcement-shell{
    grid-template-columns:1fr;
    gap:18px;
  }

  .school-brand,
  .result-header{
    align-items:flex-start;
  }

  .brand-logo{
    width:82px;
    height:82px;
    border-radius:18px;
  }
}

@media (max-width:560px){
  .graduation-page{
    padding:14px;
  }

  .announcement-shell,
  .result-shell{
    border-radius:18px;
    padding:18px;
  }

  .school-brand,
  .result-header{
    gap:13px;
  }

  .brand-logo{
    width:68px;
    height:68px;
    border-radius:16px;
    padding:8px;
  }

  .brand-logo.compact{
    width:62px;
    height:62px;
  }

  .countdown{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .input-group-modern{
    flex-direction:column;
  }

  .search-btn,
  .secondary-btn{
    width:100%;
  }

  .academic-card{
    width:100%;
  }

  .student-detail div{
    grid-template-columns:1fr;
    gap:5px;
    padding:14px 16px;
  }
}

@media (max-width:360px){
  .announcement-shell,
  .result-shell,
  .check-form,
  .countdown-panel{
    padding:14px;
  }

  .time-unit{
    padding:10px 6px;
  }
}

@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}