:root{
  --green:#2864cb;
  --dark:#243953;
  --muted:#7c8ba1;
  --line:#e4eaf3;
  --bg:#f5f7fc;
  --lime:#c4dcff}
*{
  box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  color:var(--dark);
  font-family:'DM Sans','Noto Sans KR',sans-serif;
  font-size:16.667px}
button,input,select{
  font:inherit}
button,a,select{
   -webkit-tap-highlight-color:transparent}
button{
  cursor:pointer}
button{
  border:0;
  background:transparent;
  color:inherit}
button:focus-visible,a:focus-visible{
  outline:3px solid #99c66c;
  outline-offset:4px}
a{
  color:inherit}
svg{
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  vertical-align:middle}
.sidebar{
  width:244px;
  position:fixed;
  inset:0 auto 0 0;
  background:#fff;
  border-right:1px solid var(--line);
  padding:34px 23px;
  display:flex;
  flex-direction:column;
  z-index:10}
.brand{
  display:flex;
  gap:9px;
  align-items:center;
  font-size:22.667px;
  font-weight:800;
  letter-spacing:-1px}
.logo{
  display:grid;
  place-items:center;
  background:var(--green);
  color:white;
  width:36px;
  height:37px;
  border-radius:11px;
  font-size:25.667px;
  letter-spacing:-5px;
  padding-right:5px}
.brand-sub{
  font-size:12.667px;
  letter-spacing:2px;
  color:var(--muted);
  margin:10px 0 39px 46px}
.navlabel{
  font-size:12.667px;
  letter-spacing:1.8px;
  color:#9aa39b;
  margin:0 13px 12px}
.nav{
  display:flex;
  align-items:center;
  gap:13px;
  width:100%;
  padding:14px 15px;
  margin-bottom:7px;
  border-radius:9px;
  color:#737f77;
  text-align:left;
  font-weight:500}
.nav.active{
  background:#eaf1ff;
  color:var(--green);
  font-weight:700}
.nav .count{
  margin-left:auto;
  background:#fff0dc;
  color:#ad7c37;
  font-size:13.667px;
  border-radius:5px;
  padding:2px 6px}
.sidebar-bottom{
  margin-top:auto}
.small-tip{
  padding:18px 16px;
  background:#f0f5ff;
  border-radius:12px;
  font-size:14.667px;
  line-height:1.8;
  margin-bottom:23px}
.small-tip strong{
  display:block;
  color:var(--green);
  font-size:15.667px;
  margin-bottom:5px}
.profile{
  display:flex;
  align-items:center;
  gap:10px;
  border-top:1px solid var(--line);
  padding-top:21px;
  width:100%;
  text-align:left}
.avatar{
  width:36px;
  height:36px;
  border-radius:50%;
  background:#e7effe;
  display:grid;
  place-items:center;
  color:var(--green)}
.profile small{
  display:block;
  color:var(--muted);
  font-size:12.667px;
  margin-top:4px}
.shell{
  margin-left:244px}
.topbar{
  height:79px;
  border-bottom:1px solid var(--line);
  padding:0 42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#fff}
.breadcrumb{
  color:#8b948d;
  font-size:14.667px}
.breadcrumb span{
  color:#415574;
  margin-left:12px}
.top-actions{
  display:flex;
  align-items:center;
  gap:20px;
  font-size:14.667px}
.dept-select{
  border:1px solid var(--line);
  border-radius:7px;
  background:#fff;
  padding:8px 12px;
  color:#526687;
  max-width:170px}
.demo{
  font-size:12.667px;
  background:#edf3ff;
  color:#5c7cad;
  padding:5px 8px;
  border-radius:4px}
.main{
  max-width:1310px;
  margin:auto;
  padding:35px 42px}
.eyebrow{
  font-size:13.667px;
  color:var(--green);
  letter-spacing:1.6px;
  font-weight:700}
.greeting{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:27px}
h1{
  font-size:29.667px;
  letter-spacing:-1.2px;
  margin:10px 0}
p{
  color:#899087;
  line-height:1.8;
  margin:7px 0}
.date{
  font-size:14.667px;
  color:#79867c;
  display:flex;
  gap:8px;
  align-items:center}
.layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 297px;
  gap:25px}
.card{
  border:1px solid var(--line);
  border-radius:15px;
  background:#fff}
.lesson{
  padding:30px 32px;
  position:relative;
  overflow:hidden}
.card-top{
  display:flex;
  align-items:center;
  justify-content:space-between}
.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:5px;
  font-size:13.667px;
  font-weight:600;
  background:#edf3ff;
  color:#537aad}
.lesson-num{
  color:#a4aba0;
  font-size:13.667px;
  letter-spacing:1px}
.lesson h2{
  font-size:18.667px;
  margin:24px 0 4px;
  letter-spacing:-.5px}
.lesson .context{
  font-size:14.667px;
  margin-bottom:25px}
.expression-box{
  background:#f1f5fc;
  border:1px solid #e2eaf8;
  padding:29px 24px;
  border-radius:11px;
  position:relative}
.expression-box:after{
  content:'“';
  position:absolute;
  right:24px;
  top:4px;
  font-family:serif;
  font-size:102.667px;
  color:#dce6f7;
  line-height:1}
.expression{
  font-size:30.667px;
  letter-spacing:-.7px;
  font-weight:600;
  position:relative;
  z-index:1;
  padding-right:18px}
.translation{
  font-size:16.667px;
  color:#60789d;
  margin-top:10px}
.audio-btn{
  margin-top:23px;
  font-size:13.667px;
  display:flex;
  align-items:center;
  gap:8px;
  color:#6984ae}
.audio-btn svg{
  width:16px}
.similar-head{
  display:flex;
  justify-content:space-between;
  font-size:14.667px;
  font-weight:700;
  margin:26px 0 5px}
.similar-head span{
  font-weight:400;
  color:#9ca497;
  font-size:12.667px}
.similar-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 0;
  border-bottom:1px solid #f0f1ec}
.similar-row:last-child{
  border:0}
.n{
  font-size:12.667px;
  color:#8ba0bd;
  background:#f3f6fc;
  border-radius:5px;
  padding:5px 6px}
.similar-row strong{
  display:block;
  font-size:15.667px;
  font-weight:500}
.similar-row small{
  display:block;
  margin-top:5px;
  color:#9aa091;
  font-size:13.667px}
.similar-row button{
  margin-left:auto;
  color:#8da4c3}
.similar-row svg{
  width:16px}
.lesson-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid var(--line);
  margin-top:12px;
  padding-top:22px}
.time{
  color:#8a9484;
  font-size:13.667px}
.primary{
  background:var(--green);
  color:#fff;
  padding:13px 24px;
  border-radius:7px;
  font-weight:600;
  font-size:15.667px}
.primary:hover{
  background:#2053ad}
.primary:disabled{
  opacity:.45;
  cursor:not-allowed}
.primary svg{
  margin-left:22px;
  width:17px}
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:29px 0 15px}
.section-head h2{
  font-size:18.667px;
  margin:0}
.text-btn{
  font-size:13.667px;
  color:#8a9488}
.practice-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px}
.practice-card{
  padding:21px;
  display:block;
  text-align:left;
  position:relative;
  width:100%}
.practice-card:hover{
  border-color:#abc79c}
.practice-icon{
  background:#eaf1ff;
  color:#6685bd;
  width:35px;
  height:35px;
  display:grid;
  place-items:center;
  border-radius:9px;
  margin-bottom:16px}
.practice-card:nth-child(2) .practice-icon{
  color:#af9273;
  background:#f6f0e9}
.practice-card h3{
  font-size:16.667px;
  margin:0 0 7px}
.practice-card p{
  font-size:13.667px}
.practice-card .arrow{
  position:absolute;
  right:20px;
  top:27px;
  color:#a2ab99}
.panel{
  padding:23px;
  margin-bottom:20px}
.panel h3{
  font-size:16.667px;
  margin:0}
.progress-top{
  display:flex;
  justify-content:space-between;
  align-items:center}
.streak{
  color:#d99b45;
  font-size:13.667px;
  background:#fcf4e5;
  padding:5px 7px;
  border-radius:5px}
.week{
  display:flex;
  justify-content:space-between;
  margin:25px 0 23px}
.day{
  text-align:center;
  font-size:12.667px;
  color:#a0a69a}
.day div{
  width:27px;
  height:27px;
  margin-top:10px;
  border:1px solid #e9eddf;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:12.667px}
.day.done div{
  background:var(--green);
  color:#fff;
  border:0}
.day.today div{
  border:1.5px solid var(--green);
  color:var(--green)}
.progress-meta{
  display:flex;
  justify-content:space-between;
  font-size:13.667px}
.progress-meta strong{
  color:var(--green)}
.bar{
  height:5px;
  background:#edf2fb;
  border-radius:3px;
  overflow:hidden;
  margin-top:10px}
.bar i{
  display:block;
  height:100%;
  background:#6d97e5}
.note{
  font-size:12.667px;
  color:#a1a696;
  margin-top:12px}
.review-panel{
  background:#edf3ff;
  border-color:#dce7fa}
.review-panel .badge{
  color:#6286bf;
  font-size:12.667px;
  letter-spacing:1px}
.review-panel h3{
  margin-top:15px;
  line-height:1.7;
  font-size:18.667px}
.review-panel p{
  font-size:13.667px;
  margin-top:7px}
.review-panel button{
  margin-top:17px;
  padding:10px 12px;
  background:white;
  border:1px solid #d8e4fa;
  border-radius:6px;
  width:100%;
  text-align:left;
  font-size:13.667px}
.review-panel button span{
  float:right}
.school-heading{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:27px 0 14px;
  font-size:15.667px;
  font-weight:700}
.soon{
  font-size:11.667px;
  color:#a1a68e;
  background:#edf1fa;
  padding:4px 6px;
  border-radius:4px}
.school-tabs{
  display:flex;
  border-bottom:1px solid var(--line);
  gap:20px;
  margin-bottom:20px}
.school-tabs button{
  padding:0 0 12px;
  font-size:14.667px;
  color:#9ba391}
.school-tabs button.active{
  color:var(--green);
  border-bottom:2px solid var(--green)}
.school-empty{
  text-align:center;
  padding:10px 0 6px}
.school-empty svg{
  width:27px;
  height:27px;
  color:#b2bda6}
.school-empty p{
  font-size:13.667px;
  line-height:1.9}
.school-empty button{
  font-size:12.667px;
  color:#6583ad;
  margin-top:9px}
.footer{
  display:flex;
  justify-content:space-between;
  border-top:1px solid var(--line);
  margin-top:30px;
  padding-top:20px;
  color:#a8ae9f;
  font-size:12.667px}
.page-header{
  margin-bottom:27px}
.empty{
  padding:60px 24px;
  text-align:center}
.empty h3{
  font-size:21.667px}
.empty p{
  font-size:15.667px;
  margin-bottom:23px}
.history-row{
  padding:22px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--line)}
.history-row strong{
  display:block;
  margin:8px 0}
.history-row small{
  color:var(--muted)}
.stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-bottom:25px}
.stat{
  padding:24px}
.stat strong{
  display:block;
  font-size:31.667px;
  margin-top:14px;
  color:var(--green)}
dialog{
  border:1px solid var(--line);
  border-radius:17px;
  padding:30px;
  width:540px;
  max-width:calc(100% - 30px);
  max-height:90vh;
  color:var(--dark);
  box-shadow:0 20px 80px #1c2d5026}
dialog::backdrop{
  background:#1e305766;
  backdrop-filter:blur(3px)}
.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:16px}
.modal-head h2{
  margin:0;
  font-size:22.667px}
.close{
  font-size:25.667px;
  color:#94a08e}
.field{
  display:block;
  margin:17px 0;
  font-size:14.667px;
  font-weight:600}
.field input,.field select{
  display:block;
  width:100%;
  border:1px solid #dce5f2;
  padding:12px;
  border-radius:7px;
  margin-top:8px;
  background:#fff;
  color:var(--dark)}
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 14px}
.consent{
  font-size:13.667px;
  line-height:1.8;
  background:#f3f6fc;
  border-radius:7px;
  padding:13px;
  color:#7b8673}
.check{
  display:flex;
  gap:8px;
  font-size:14.667px;
  margin:15px 0;
  align-items:flex-start;
  line-height:1.7}
.full{
  width:100%;
  margin-top:10px}
.secondary{
  padding:11px 16px;
  border:1px solid var(--line);
  border-radius:7px;
  background:white}
.muted{
  font-size:14.667px;
  color:#8c9685;
  line-height:1.8}
.quiz{
  max-width:800px;
  margin:auto}
.quiz-area{
  padding:35px}
.quiz h2{
  font-size:25.667px}
.quiz-prompt{
  padding:25px;
  background:#f1f5fc;
  border-radius:10px;
  margin:25px 0;
  font-size:20.667px}
.dropzone{
  min-height:95px;
  border:1.5px dashed #aec3e6;
  border-radius:10px;
  padding:16px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  color:#a0ad92}
.words{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin:25px 0;
  min-height:50px}
.word{
  border:1px solid #d9e4f5;
  background:white;
  border-radius:7px;
  padding:12px 17px;
  box-shadow:0 3px 0 #e6edf9;
  cursor:grab;
  color:var(--dark)}
.match-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin:13px 0}
.match-meaning{
  background:#edf3fd;
  padding:15px;
  border-radius:7px;
  font-size:14.667px;
  display:flex;
  align-items:center;
  min-height:76px}
.match-target{
  border:1px dashed #aec3e6;
  border-radius:7px;
  padding:8px;
  min-height:76px;
  display:flex;
  align-items:center}
.match-target .word{
  font-size:13.667px;
  padding:9px;
  width:100%}
.result{
  padding:17px;
  background:#edf5ff;
  border-radius:8px;
  margin:20px 0;
  font-size:15.667px;
  line-height:1.8}
.result.wrong{
  background:#fff4e7;
  color:#967137}
.hidden{
  display:none}
#toast{
  position:fixed;
  bottom:28px;
  left:50%;
  transform:translateX(-50%);
  padding:14px 24px;
  background:var(--dark);
  color:#fff;
  border-radius:8px;
  z-index:100;
  font-size:15.667px;
  display:none}
.account-banner{
  background:#eaf2ff;
  padding:17px 22px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-radius:10px;
  margin-bottom:24px;
  font-size:14.667px}
.settings-card{
  padding:28px;
  margin-bottom:20px}
.settings-card h3{
  margin-top:0}
.mobile-brand{
  display:none}
@media(min-width:1500px){
  .main{
  padding-top:45px}
.lesson{
  padding:36px}
.expression-box{
  padding:35px 25px}
}
@media(max-width:1150px){
  .sidebar{
  width:205px;
  padding:28px 16px}
.shell{
  margin-left:205px}
.main{
  padding:28px}
.topbar{
  padding:0 28px}
.layout{
  grid-template-columns:minmax(0,1fr) 260px;
  gap:18px}
.lesson{
  padding:23px}
.expression{
  font-size:26.667px}
.brand{
  font-size:20.667px}
.demo{
  display:none}
}
@media(max-width:900px){
  .layout{
  grid-template-columns:1fr}
.aside{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px}
.school-heading{
  grid-column:1/-1;
  margin-top:0}
.school-panel{
  grid-column:1/-1}
.panel{
  margin-bottom:0}
.greeting .date{
  display:none}
}
@media(max-width:650px), (max-width:1000px) and (max-height:500px) and (orientation:landscape){
  .sidebar{
  inset:auto 0 0;
  width:auto;
  height:65px;
  padding:5px 8px;
  flex-direction:row;
  border-right:0;
  border-top:1px solid var(--line)}
.sidebar .brand,.brand-sub,.navlabel,.sidebar-bottom{
  display:none}
.sidebar nav{
  display:flex;
  width:100%;
  justify-content:space-around}
.nav{
  font-size:11.667px;
  flex-direction:column;
  gap:3px;
  padding:6px 9px;
  margin:0}
.nav .count{
  display:none}
.nav svg{
  width:20px;
  height:20px}
.shell{
  margin:0}
.topbar{
  height:65px;
  padding:0 20px}
.breadcrumb{
  display:none}
.mobile-brand{
  display:flex;
  font-size:19.667px;
  font-weight:800;
  align-items:center;
  gap:7px}
.mobile-brand .logo{
  width:29px;
  height:29px;
  font-size:20.667px;
  border-radius:8px}
.top-actions{
  gap:8px}
.dept-select{
  max-width:130px;
  font-size:13.667px}
.main{
  padding:26px 18px 90px}
h1{
  font-size:26.667px}
.greeting p{
  font-size:14.667px}
.lesson{
  padding:22px 19px}
.expression{
  font-size:27.667px}
.expression-box{
  padding:24px 17px}
.aside{
  grid-template-columns:1fr}
.school-heading,.school-panel{
  grid-column:auto}
.practice-card{
  padding:18px}
.practice-card p{
  font-size:12.667px}
.practice-card h3{
  font-size:15.667px}
.footer{
  font-size:11.667px;
  gap:10px}
.stats{
  gap:9px}
.stat{
  padding:16px;
  font-size:13.667px}
.stat strong{
  font-size:26.667px}
.quiz-area{
  padding:22px 18px}
.match-row{
  gap:10px}
.match-meaning{
  font-size:13.667px;
  padding:10px}
.account-banner{
  gap:12px;
  line-height:1.8}
.account-banner button{
  white-space:nowrap}
.top-actions>.icon-btn{
  display:none}
.lesson-footer .primary{
  padding:13px 16px}
}


.weekly-section{
  margin-top:24px}
.weekly-section .panel{
  margin-bottom:0}
.weekly-section .day div{
  width:34px;
  height:34px}
.aside{
  align-content:start}
.aside .school-heading{
  margin-top:0}


.nav-short{
  display:none}
.learning-only{
  grid-template-columns:minmax(0,1fr);
  max-width:960px;
  margin:auto}
.school-page{
  max-width:960px;
  margin:auto}
.school-filter{
  padding:24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:24px;
  flex-wrap:wrap}
.school-info{
  display:flex;
  align-items:center;
  gap:14px}
.school-info strong{
  font-size:16.667px}
.school-info p{
  font-size:13.667px;
  margin-bottom:0}
.school-symbol{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  background:#edf3ff;
  border-radius:12px;
  color:var(--green)}
.date-picker{
  display:flex;
  align-items:center;
  gap:8px}
.date-picker label{
  font-size:12.667px;
  color:#7c8ba1}
.date-picker input{
  display:block;
  margin-top:5px;
  border:1px solid var(--line);
  border-radius:7px;
  padding:9px;
  background:white;
  color:var(--dark);
  font:inherit;
  font-size:14.667px}
.date-picker .secondary{
  padding:10px 13px}
.school-results{
  padding:25px}
.school-results h2{
  font-size:18.667px;
  margin:0}
.school-results .empty svg{
  width:42px;
  height:42px;
  color:#82a3d9}
.school-source{
  text-align:center;
  margin-top:20px}
@media(max-width:650px), (max-width:1000px) and (max-height:500px) and (orientation:landscape){
  .sidebar nav{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0}
.nav-text{
  display:none}
.nav-short{
  display:block;
  white-space:nowrap;
  font-size:11.667px;
  letter-spacing:-.7px}
.sidebar .nav{
  padding:6px 0;
  min-width:0}
.school-filter,.school-results{
  padding:20px 16px}
.date-picker{
  width:100%;
  justify-content:center}
.school-results .card-top{
  align-items:start;
  gap:12px;
  flex-wrap:wrap}
.school-results .empty{
  padding:40px 0}
.school-results h2{
  font-size:17.667px}
.school-results .empty h3{
  font-size:20px}
}


/* Keep navigation reachable in short windows and landscape phones. */
.sidebar{
  overflow-y:auto;
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin}

.sidebar>*{
  flex-shrink:0}

@media(max-width:650px), (max-width:1000px) and (max-height:500px) and (orientation:landscape){
  
.sidebar{
  height:calc(65px + env(safe-area-inset-bottom,0px));
  padding:5px max(8px,env(safe-area-inset-right,0px)) calc(5px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px));
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-x:contain;
  scrollbar-width:thin}

.sidebar nav{
  min-width:280px;
  flex-shrink:0}

.main{
  padding-bottom:calc(90px + env(safe-area-inset-bottom,0px))}

}


.record-errors>.muted{
  margin-bottom:15px}
.compact-empty{
  padding:30px 18px}
.compact-empty h3{
  font-size:19px}
.compact-empty p{
  margin-bottom:0}
.error-date{
  margin-left:12px}
.error-expressions{
  list-style:none;
  margin:12px 0 0;
  padding:0}
.error-expressions li{
  margin-top:14px}
.error-type{
  font-size:12.667px;
  color:#6c8aba}
.error-row{
  gap:18px;
  align-items:start}
.error-row>.secondary{
  white-space:nowrap;
  margin-top:12px}
.error-expressions strong{
  line-height:1.6}
.dated-records{
  margin-top:32px}
.record-date-filter{
  padding:20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  flex-wrap:wrap}
.record-export{
  display:flex;
  justify-content:flex-end;
  margin:18px 0}
.history-row>div{
  min-width:0}
.history-row strong{
  overflow-wrap:anywhere}
@media(max-width:650px), (max-width:1000px) and (max-height:500px) and (orientation:landscape){
  .error-row{
  flex-direction:column}
.error-row>.secondary{
  align-self:flex-end;
  margin-top:0}
.record-date-filter{
  padding:16px}
.record-date-filter>.muted{
  width:100%;
  text-align:center}
.history-row:not(.error-row){
  gap:12px;
  flex-wrap:wrap}
.history-row>.secondary{
  white-space:nowrap}
}


.auth-shell{
  min-height:100dvh;
  display:flex;
  align-items:center;
  flex-direction:column;
  justify-content:center;
  padding:35px 20px;
  background:radial-gradient(ellipse at top,#e8efff,transparent 65%),var(--bg)}
.auth-brand{
  margin:0 0 26px}
.auth-card{
  width:100%;
  max-width:520px;
  padding:34px}
.auth-card h1{
  font-size:26.667px;
  line-height:1.5}
.auth-card>p{
  font-size:14.667px}
.auth-card .eyebrow{
  font-size:12.667px}
.auth-card .field{
  font-size:14.667px}
.auth-card .check{
  font-size:14.667px}
.auth-card .consent{
  font-size:13.667px}
.auth-card .primary,.auth-card .secondary{
  font-size:15.667px}
.auth-steps{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin:28px 0;
  font-size:13.667px;
  color:#6c83a7}
.google-login{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:13px;
  min-height:50px;
  margin-bottom:18px}
.google-login b{
  font-size:21px}
.auth-loading{
  padding:28px 0;
  color:#7082a3;
  text-align:center}
.auth-privacy{
  display:block;
  margin:25px auto 0;
  font-size:12.667px;
  text-decoration:underline;
  color:#8491a7}
.auth-footer{
  font-size:12.667px;
  margin-top:24px}
@media(max-width:650px){
  .auth-shell{
  justify-content:flex-start;
  padding-top:35px}
.auth-card{
  padding:26px 22px}
.auth-card h1{
  font-size:24.667px}
.auth-steps{
  font-size:12.667px;
  gap:6px}
}


.field input[readonly]{
  background:#edf3ff;
  color:#385f9a;
  border-color:#dbe6fa;
  cursor:default}
.fixed-school-note{
  display:block;
  font-size:12.667px;
  line-height:1.6;
  color:#8293ad;
  margin-top:7px}


#trackBtn{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis}
.lesson .pill{
  max-width:100%;
  white-space:normal}
.lesson .card-top{
  gap:14px;
  flex-wrap:wrap}


.local-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px}
.local-notice{
  font-size:13.667px;
  line-height:1.8;
  color:#7c8ba1}
.local-help{
  padding:16px;
  border-radius:9px;
  background:#edf3ff;
  margin:20px 0}
.local-danger{
  color:#a04545}
.restore-file{
  display:none}


.footer{
  flex-wrap:wrap;
  gap:10px}
.footer button{
  white-space:nowrap}

.neis-notice{margin:18px 0;padding:14px 16px;background:#eef4ff;border-radius:12px;line-height:1.7;color:#244c89}
.text-button{border:0;background:none;color:inherit;text-decoration:underline;font:inherit;cursor:pointer}
.timetable-wrap{overflow-x:auto;margin-top:20px}
.timetable{width:100%;border-collapse:collapse;text-align:left}
.timetable caption{text-align:left;padding-bottom:16px;font-weight:600}
.timetable th,.timetable td{padding:16px 12px;border-bottom:1px solid #e5eaf3;line-height:1.6}
.timetable thead{background:#f3f6fc}
.timetable th:first-child{width:80px;white-space:nowrap}
.meal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:20px;margin-top:20px}
.meal-card{padding:20px;background:#f8faff;border:1px solid #e5eaf3;border-radius:16px;min-width:0}
.meal-card .card-top{flex-wrap:wrap;gap:10px}
.meal-card h3{margin:0}
.meal-dishes{padding-left:20px;line-height:2;overflow-wrap:anywhere}
.meal-card details,.allergen-info{font-size:13px;line-height:1.8}
.meal-card summary,.allergen-info summary{cursor:pointer;color:#365f98;font-weight:600}
.meal-card details h4{margin-bottom:4px}
.meal-card details p{overflow-wrap:anywhere}
#neisError{color:#aa2d2d;font-size:13px}

/* 긴 앱 이름을 작은 화면에서도 모두 표시합니다. */
.brand-title{
  min-width:0;
  line-height:1.35;
  word-break:keep-all}
.brand .logo,.mobile-brand .logo{
  flex-shrink:0}
.sidebar .brand{
  font-size:16px}
@media(max-width:650px), (max-width:1000px) and (max-height:500px) and (orientation:landscape){
  .mobile-brand{
    min-width:0;
    font-size:14px}
  .mobile-brand .brand-title{
    max-width:8em}
  .topbar{
    height:auto;
    min-height:65px;
    gap:8px;
    padding:10px 14px}
  .top-actions .dept-select{
    max-width:95px}
}

.content-status{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#edf3ff;border:1px solid #d4e2fb;border-radius:12px;padding:12px 16px;margin-bottom:22px;font-size:14px;color:#315787}.content-status button{flex-shrink:0}@media(max-width:650px){.content-status{align-items:flex-start;flex-direction:column}}