:root{
  --paper:#F5F6F8;
  --paper-raised:#FFFFFF;
  --ink:#1F2329;
  --ink-soft:#6B7280;
  --ink-faint:#9CA3AF;
  --line:#ECEDF1;
  --line-soft:#F2F3F5;
  --navy:#1878F5;
  --navy-deep:#0F5FD1;
  --accent:#FF4D3D;
  --accent-soft:#FFEDE9;
  --accent-ink:#D93F1F;
  --gold:#FF9500;
  --gold-soft:#FFF4E5;
  --blue:#1878F5;
  --blue-soft:#EAF3FF;
  --green:#07C167;
  --green-soft:#E8FBF1;
  --focus:#FF4D3D;
  --radius:14px;
  --radius-sm:10px;
  --radius-pill:999px;
  --shadow: 0 1px 2px rgba(31,35,41,0.05), 0 2px 8px rgba(31,35,41,0.06);
  --shadow-md: 0 2px 6px rgba(31,35,41,0.05), 0 10px 26px rgba(31,35,41,0.09);
  --font-sans:"Noto Sans SC","PingFang SC",-apple-system,BlinkMacSystemFont,"Microsoft YaHei","Segoe UI","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#17181C;
    --paper-raised:#1F2126;
    --ink:#EDEEF0;
    --ink-soft:#9AA0A8;
    --ink-faint:#686E77;
    --line:#2A2C31;
    --line-soft:#24262B;
    --navy:#4B9BFF;
    --navy-deep:#7CB4FF;
    --accent:#FF6B54;
    --accent-soft:#33231F;
    --accent-ink:#FF9683;
    --gold:#FFB13D;
    --gold-soft:#332A1A;
    --blue:#4B9BFF;
    --blue-soft:#1B2735;
    --green:#2ED88B;
    --green-soft:#122A20;
    --focus:#FF6B54;
    --shadow: 0 1px 2px rgba(0,0,0,0.35), 0 8px 20px rgba(0,0,0,0.3);
    --shadow-md: 0 2px 6px rgba(0,0,0,0.35), 0 10px 26px rgba(0,0,0,0.35);
  }
}
:root[data-theme="dark"]{
  --paper:#17181C; --paper-raised:#1F2126; --ink:#EDEEF0; --ink-soft:#9AA0A8; --ink-faint:#686E77;
  --line:#2A2C31; --line-soft:#24262B; --navy:#4B9BFF; --navy-deep:#7CB4FF; --accent:#FF6B54; --accent-soft:#33231F; --accent-ink:#FF9683;
  --gold:#FFB13D; --gold-soft:#332A1A; --blue:#4B9BFF; --blue-soft:#1B2735;
  --green:#2ED88B; --green-soft:#122A20; --focus:#FF6B54;
  --shadow: 0 1px 2px rgba(0,0,0,0.35), 0 8px 20px rgba(0,0,0,0.3);
  --shadow-md: 0 2px 6px rgba(0,0,0,0.35), 0 10px 26px rgba(0,0,0,0.35);
}
:root[data-theme="light"]{
  --paper:#F5F6F8; --paper-raised:#FFFFFF; --ink:#1F2329; --ink-soft:#6B7280; --ink-faint:#9CA3AF;
  --line:#ECEDF1; --line-soft:#F2F3F5; --navy:#1878F5; --navy-deep:#0F5FD1; --accent:#FF4D3D; --accent-soft:#FFEDE9; --accent-ink:#D93F1F;
  --gold:#FF9500; --gold-soft:#FFF4E5; --blue:#1878F5; --blue-soft:#EAF3FF;
  --green:#07C167; --green-soft:#E8FBF1; --focus:#FF4D3D;
  --shadow: 0 1px 2px rgba(31,35,41,0.05), 0 2px 8px rgba(31,35,41,0.06);
  --shadow-md: 0 2px 6px rgba(31,35,41,0.05), 0 10px 26px rgba(31,35,41,0.09);
}

*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:760px; margin:0 auto; padding:32px 24px 96px;}

/* top nav */
.topnav{
  position:sticky; top:0; z-index:10;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.topnav-inner{
  max-width:760px; margin:0 auto; padding:12px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.brand{font-size:14px; font-weight:700; color:var(--ink); letter-spacing:0.01em; text-decoration:none;}
.tabs{display:flex; gap:4px;}
.tab-link{
  display:inline-flex; align-items:center; gap:5px;
  font-size:13.5px; color:var(--ink-faint); text-decoration:none; font-weight:600;
  padding:7px 12px; border-radius:var(--radius-pill); border-bottom:none;
  transition:color .15s ease, background .15s ease;
}
.tab-link .tab-ic{width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.8; flex:0 0 auto;}
.tab-link:hover{color:var(--ink-soft);}
.tab-link.active{color:var(--accent); background:var(--accent-soft);}
.tab-link:focus-visible{outline:2px solid var(--focus); outline-offset:2px;}

header.page{
  display:flex; flex-direction:column; gap:10px;
  padding-bottom:24px; margin-bottom:8px;
}
.eyebrow{
  font-size:12.5px; letter-spacing:0.02em; color:var(--ink-soft);
  display:flex; gap:8px; align-items:center;
}
.eyebrow .dot{width:4px;height:4px;border-radius:50%;background:var(--ink-faint);}
h1{
  font-weight:700;
  font-size:clamp(24px,4.2vw,29px);
  line-height:1.3;
  margin:0;
  text-wrap:balance;
}
.sub{
  color:var(--ink-soft);
  font-size:14.5px;
  max-width:56ch;
}
.disclaimer{
  font-size:12.5px; color:var(--ink-faint); margin-top:2px;
}

.toolbar{
  display:flex; flex-wrap:wrap; gap:10px;
  margin:20px 0 24px;
}
button, .btn{
  font:inherit; cursor:pointer;
  border-radius:var(--radius-sm);
  border:1px solid var(--line);
  background:var(--paper-raised);
  color:var(--ink);
  padding:10px 16px;
  font-size:14px;
  display:inline-flex; align-items:center; gap:8px;
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .1s ease;
  text-decoration:none;
}
button:hover, .btn:hover{border-color:var(--ink-faint); box-shadow:var(--shadow);}
button:active, .btn:active{transform:scale(.98);}
button:disabled{opacity:0.5; cursor:not-allowed;}
button:focus-visible, .btn:focus-visible, a:focus-visible{
  outline:2px solid var(--focus); outline-offset:2px;
}
.btn-primary{
  background:var(--accent); border-color:var(--accent); color:#FFFFFF;
  font-weight:700; border-radius:var(--radius-pill); padding:10px 18px;
}
.btn-primary:hover{background:var(--accent-ink); border-color:var(--accent-ink); box-shadow:var(--shadow-md);}

/* ---------- D-day notice ---------- */
.notice{
  display:flex; align-items:center; gap:12px;
  background:var(--paper-raised); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:13px 16px; margin:20px 0;
}
.notice[hidden]{display:none;}
.notice .dd{
  flex:0 0 auto; background:var(--accent); color:#fff; font-weight:700; font-size:13px;
  padding:5px 10px; border-radius:var(--radius-pill); font-variant-numeric:tabular-nums;
}
.notice .tx{font-size:13.5px; flex:1; min-width:0;}
.notice .tx b{font-weight:700;}
.notice .dt{font-size:11.5px; color:var(--ink-faint); font-variant-numeric:tabular-nums; white-space:nowrap;}

.month-label{
  font-size:14px; font-weight:700; color:var(--ink);
  margin:0 0 12px;
}
.cal-card{
  background:var(--paper-raised); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:16px 14px 14px; margin-bottom:14px;
}

.cal-weekday-row{
  display:grid;
  grid-template-columns:repeat(7, minmax(0,1fr));
}
.cal-weekday{
  font-size:11px; color:var(--ink-faint); text-align:center;
  padding-bottom:6px; display:flex; flex-direction:column; line-height:1.3;
}
.cal-weekday-ko{font-size:9px; color:var(--ink-faint);}

/* 달력을 실제 표(table)처럼: 바깥 테두리는 그리드 컨테이너가, 안쪽 칸 사이 선은
   각 셀의 border-right/bottom이 담당해서 겹치는 두꺼운 선 없이 격자를 그린다.
   요일 칸은 minmax(0,1fr)로 내용과 무관하게 항상 동일한 폭으로 고정된다. */
.cal-grid{
  display:flex; flex-direction:column;
  border-top:1px solid var(--line); border-left:1px solid var(--line);
}

/* 한 주(week)를 하나의 그리드로: 1행=날짜 숫자, 2행부터는 이벤트 막대(bar) 레인.
   막대는 grid-column을 span으로 지정해 여러 날짜 칸을 가로지르는 하나의
   요소로 이어 그려진다. 막대 높이는 고정값(.cal-bar 참고)이라 레인 행도 항상
   같은 높이를 가지며, 각 .cal-day는 그 주의 전체 행(날짜 숫자 + 레인 전부)을
   span해서 하나의 통 셀이 되므로 같은 줄의 7칸 높이가 항상 완전히 같아진다. */
.cal-week{
  display:grid;
  grid-template-columns:repeat(7, minmax(0,1fr));
  grid-auto-rows:minmax(15px, auto);
  row-gap:2px; /* 날짜 숫자 줄, 그리고 쌓인 이벤트 막대 사이에 항상 동일한 간격을 줌 */
  min-height:64px; /* 이벤트 없는 주도 이 높이 이상을 유지해 다음 주와의 구분선이 항상 보이게 함 */
}
.cal-day{
  box-sizing:border-box;
  padding:2px 3px 0;
  background:transparent;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  min-width:0;
}
.cal-day.empty{background:transparent;}
.cal-day .daynum{
  font-size:11.5px; color:var(--ink-soft); font-variant-numeric:tabular-nums;
  line-height:1.2;
}
/* 모든 이벤트 막대를 고정 height/padding/font-size로 통일한 칩(chip).
   grid row는 내용에 맞춰 늘어날 수 있지만(align-self:start로 stretch를 끔),
   막대 자체는 항상 정확히 같은 크기를 유지한다. */
.cal-bar{
  height:16px;
  align-self:start;
  min-width:0;
  display:flex; align-items:center;
  font:inherit; font-size:10px; text-align:left; line-height:1;
  border:none; margin:0; padding:0 5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  cursor:pointer;
}
.cal-bar:hover{filter:brightness(0.94);}

.cal-detail{
  margin-top:14px; padding:18px 16px;
  border:none; border-radius:var(--radius); box-shadow:var(--shadow);
  background:var(--paper-raised);
}
.cal-detail.empty{
  color:var(--ink-faint); font-size:13.5px; text-align:center; padding:24px 20px;
  box-shadow:none; background:transparent;
}

.event-main{min-width:0;}
.row-top{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;}
.zh{font-size:16.5px; font-weight:700;}
.ko{font-size:13px; color:var(--ink-soft);}
.tag{
  display:inline-block; font-size:11.5px; letter-spacing:0.01em; font-weight:600;
  padding:3px 10px; border-radius:var(--radius-pill); margin-left:2px;
}
.tag-选课{background:var(--gold-soft); color:var(--gold);}
.tag-缴费{background:var(--accent-soft); color:var(--accent-ink);}
.tag-考试{background:var(--blue-soft); color:var(--blue);}
.tag-假期{background:var(--green-soft); color:var(--green);}
.tag-截止{background:var(--accent-soft); color:var(--accent-ink);}
.tag-学期{background:var(--blue-soft); color:var(--blue);}

.note{font-size:13.5px; color:var(--ink-soft); margin-top:6px; max-width:56ch;}
.event-actions{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap;}
.event-actions a, .event-actions button{
  font-size:12.5px; padding:6px 12px; border-radius:var(--radius-pill);
}

footer{
  margin-top:40px; padding-top:20px; border-top:1px solid var(--line);
  font-size:12.5px; color:var(--ink-faint);
}

/* review board */
.config-banner{
  background:var(--gold-soft); color:var(--gold);
  border:none; box-shadow:var(--shadow);
  border-radius:var(--radius-sm); padding:12px 16px;
  font-size:13.5px; margin:16px 0;
}
.config-banner[hidden]{display:none;}

#reviewForm{
  background:var(--paper-raised);
  border:none; box-shadow:var(--shadow);
  border-radius:var(--radius);
  padding:18px;
  margin-bottom:20px;
}
#reviewForm[hidden]{display:none;}
.form-row{margin-bottom:14px;}
.form-row label{
  display:block; font-size:13px; color:var(--ink-soft); margin-bottom:6px;
}
.form-row input, .form-row textarea{
  width:100%; font:inherit; font-size:14px;
  padding:10px 12px; border-radius:var(--radius-sm);
  border:1px solid var(--line); background:var(--paper); color:var(--ink);
}
.form-row input:focus, .form-row textarea:focus{
  outline:2px solid var(--focus); outline-offset:1px; border-color:var(--focus);
}
.form-row textarea{min-height:100px; resize:vertical;}
.field-error{color:var(--accent-ink); font-size:12.5px; margin-top:4px;}
.form-actions{display:flex; gap:10px; align-items:center;}
.form-status{font-size:13px; color:var(--ink-soft);}

.review-list{margin-top:4px; display:flex; flex-direction:column; gap:10px;}
.review-card{
  background:var(--paper-raised); border:none; box-shadow:var(--shadow);
  border-radius:var(--radius); padding:14px 16px;
}
.review-top{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.review-course{font-size:15px; font-weight:700;}
.review-professor{font-size:12.5px; color:var(--ink-soft);}
.credit-badge{
  margin-left:auto; display:inline-block; font-size:11.5px; font-weight:600; letter-spacing:0.01em;
  padding:3px 10px; border-radius:var(--radius-pill);
  background:var(--blue-soft); color:var(--blue);
  font-variant-numeric:tabular-nums;
}
.review-text{font-size:13.5px; color:var(--ink); margin-top:8px; line-height:1.65; white-space:pre-wrap;}
.review-date{font-size:11.5px; color:var(--ink-faint); margin-top:10px; font-variant-numeric:tabular-nums;}
.review-state{font-size:14px; color:var(--ink-soft); padding:24px 4px;}

@media (max-width:520px){
  .cal-day{padding:2px; min-height:15px;}
  .cal-day .daynum{font-size:10px;}
  .cal-bar{height:13px; font-size:8.5px; padding:0 3px;}
}

@media (max-width:480px){
  /* 상단 탭 메뉴: 한자+한글 라벨이 줄바꿈되지 않도록 폰트를 줄이고 nowrap 처리 */
  .tabs{gap:2px;}
  .tab-link{font-size:11px; padding:6px 8px; gap:3px; white-space:nowrap;}
  .tab-link .tab-ic{width:12px; height:12px;}

  /* D-day 배지(dd) + 텍스트(tx) + 날짜(dt)가 좁은 화면에서 겹치거나 잘리지 않도록
     첫 줄은 배지-날짜, 둘째 줄은 전체 너비의 텍스트로 세로 정렬 */
  .notice{flex-wrap:wrap; align-items:flex-start; row-gap:6px;}
  .notice .dd{order:1;}
  .notice .dt{order:2; margin-left:auto;}
  .notice .tx{order:3; flex:1 1 100%; line-height:1.5;}
}