/* GUNIV — 고3 학생이 쓰는 화면. 칙칙하지 않게 (사람이 바란 것):
   밝은 분홍·연보라를 주색으로, 둥근 카드와 부드러운 그림자. 그래도 숫자는 또렷해야 한다 —
   글자 색은 진하게 두고, 꾸밈은 바탕·테두리·딱지에만 쓴다. 기기가 어두운 모드면 따라간다. */
:root {
  --바탕: #fff6fa;
  --바탕2: #fbefff;
  --카드: #ffffff;
  --글: #2b2140;
  --흐린글: #8b7fa3;
  --선: #f2e3ef;
  --주색: #f0569b;
  --주색진: #d63d84;
  --보라: #8b6cff;
  --주색옅음: #ffe4f1;
  --보라옅음: #efe9ff;
  --민트: #1a9e8a;
  --민트옅음: #dcf7f2;
  --노랑옅음: #fff4cf;
  --노랑글: #946200;
  --빨강: #e5484d;
  --무지개: linear-gradient(135deg, #ff8fc4 0%, #b39bff 100%);
  --그림자: 0 6px 22px rgba(214, 61, 132, .08);
  --둥글: 18px;
  --메뉴넓이: 76px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --바탕: #1b1424; --바탕2: #221a2e; --카드: #2a2037; --글: #f5eefc; --흐린글: #b2a5c7; --선: #3b2f4b;
    --주색: #ff7eb6; --주색진: #ff9cc8; --보라: #b39bff; --주색옅음: #4a2340; --보라옅음: #33295a;
    --민트: #5fdcc8; --민트옅음: #173f3a; --노랑옅음: #3d3214; --노랑글: #ffd66b;
    --그림자: 0 6px 22px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { scroll-padding-top: 70px; }
body {
  margin: 0; background: var(--바탕); color: var(--글);
  font-family: 'Noto Sans KR', system-ui, -apple-system, sans-serif; font-size: 15px; line-height: 1.55;
}
a { color: var(--주색진); }
button, select, input { font: inherit; color: inherit; }
.hidden { display: none !important; }
h1, h2, h3, .상표, .쪽이름 { font-family: 'Jua', 'Noto Sans KR', sans-serif; font-weight: 400; letter-spacing: .2px; }
.흐림 { color: var(--흐린글); }
.작게 { font-size: .8rem; }
svg.아 { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; vertical-align: middle; }

/* ── 위 띠 ───────────────────────────────────────── */
.머리 {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px;
  height: 58px; padding: 0 14px; background: rgba(255, 255, 255, .85); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--선);
}
@media (prefers-color-scheme: dark) { .머리 { background: rgba(27, 20, 36, .85); } }
.상표 { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--글); font-size: 1.35rem; }
.상표 img { width: 30px; height: 30px; }
.쪽이름 { font-size: 1.1rem; color: var(--흐린글); margin-left: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.머리끝 { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.나 { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 4px; border-radius: 99px; background: var(--주색옅음); font-size: .85rem; font-weight: 500; }
.나 .동그라미 { width: 26px; height: 26px; border-radius: 50%; background: var(--무지개); color: #fff; display: grid; place-items: center; font-size: .78rem; }
.아이콘단추 {
  width: 38px; height: 38px; border-radius: 12px; border: 0; background: transparent; color: var(--글);
  display: inline-grid; place-items: center; cursor: pointer; text-decoration: none; padding: 0;
}
.아이콘단추:hover { background: var(--주색옅음); color: var(--주색진); }

/* ── 메뉴 — 넓은 화면은 왼쪽 아이콘 띠, 좁은 화면은 열고 닫는 서랍 ──
   탭 줄을 없애 본문이 그 자리까지 쓴다 (사람이 바란 것) */
.메뉴 {
  position: fixed; z-index: 40; top: 58px; bottom: 0; left: 0; width: var(--메뉴넓이);
  background: var(--카드); border-right: 1px solid var(--선); padding: 10px 8px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px;
}
.메뉴 a {
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; border-radius: 14px;
  text-decoration: none; color: var(--흐린글); font-size: .68rem; text-align: center; line-height: 1.2;
}
.메뉴 a:hover { background: var(--바탕2); color: var(--글); }
.메뉴 a.고름 { background: var(--무지개); color: #fff; box-shadow: 0 6px 16px rgba(240, 86, 155, .3); }
.메뉴 a .아 { width: 22px; height: 22px; }
.메뉴 .가름 { height: 1px; background: var(--선); margin: 6px 4px; }
.본문 { margin-left: var(--메뉴넓이); padding: 22px 26px 70px; max-width: calc(1320px + var(--메뉴넓이)); }
.메뉴그늘 { position: fixed; inset: 58px 0 0 0; z-index: 35; background: rgba(43, 33, 64, .35); }
@media (max-width: 860px) {
  .메뉴 { width: 230px; transform: translateX(-105%); transition: transform .2s ease; }
  .메뉴.열림 { transform: none; box-shadow: 10px 0 30px rgba(0,0,0,.15); }
  .메뉴 a { flex-direction: row; gap: 12px; font-size: .95rem; padding: 11px 14px; text-align: left; }
  .본문 { margin-left: 0; padding: 16px 14px 60px; }
  .나 span:last-child { display: none; }
  .쪽이름 { display: none; }
}
@media (min-width: 861px) { #메뉴열기 { display: none; } }

/* ── 쪽 머리 · 찾기 판 ─────────────────────────────── */
.쪽머리 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.쪽머리 h1 { margin: 0; font-size: 1.7rem; }
.쪽머리 .흐림 { font-size: .95rem; }
.쪽머리 .오른 { margin-left: auto; display: flex; gap: 6px; }
.찾기판 {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 14px; margin-bottom: 16px;
  background: var(--카드); border: 1px solid var(--선); border-radius: var(--둥글); box-shadow: var(--그림자);
}
.찾기판 input[type="search"], .찾기판 input[type="text"], .찾기판 input[type="number"], .찾기판 select, .입력 {
  padding: 9px 12px; border: 1.5px solid var(--선); border-radius: 12px; background: var(--바탕); min-width: 0;
}
.찾기판 input[type="search"] { flex: 1 1 200px; }
.찾기판 input:focus, .찾기판 select:focus, .입력:focus { outline: none; border-color: var(--주색); box-shadow: 0 0 0 3px var(--주색옅음); }
.찾기판 .묶 { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--흐린글); }
.찾기판 input[type="number"] { width: 76px; }
.찾기판 .줄바꿈 { flex-basis: 100%; height: 0; }
.단추 {
  padding: 9px 18px; border: 0; border-radius: 12px; background: var(--무지개); color: #fff; cursor: pointer; font-weight: 500;
  box-shadow: 0 6px 16px rgba(240, 86, 155, .25); white-space: nowrap;
}
.단추:hover { filter: brightness(1.05); }
.큰단추 { padding: 12px 20px; font-size: 1rem; }
.작은단추 { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border: 1.5px solid var(--선); border-radius: 10px; background: var(--카드); cursor: pointer; font-size: .82rem; white-space: nowrap; color: var(--글); text-decoration: none; }
.작은단추 .아 { width: 16px; height: 16px; }
.작은단추:hover { border-color: var(--주색); color: var(--주색진); }
.작은단추.켬 { background: var(--주색옅음); border-color: var(--주색); color: var(--주색진); }

/* 고르는 동그란 단추 (갈래·군 등) */
.알약들 { display: flex; flex-wrap: wrap; gap: 6px; }
.알약 { padding: 6px 14px; border-radius: 99px; border: 1.5px solid var(--선); background: var(--카드); cursor: pointer; font-size: .86rem; text-decoration: none; color: var(--글); }
.알약 small { color: var(--흐린글); margin-left: 3px; }
.알약.고름 { background: var(--주색); border-color: var(--주색); color: #fff; }
.알약.고름 small { color: #ffe4f1; }

/* ── 카드 ─────────────────────────────────────────── */
.카드 { background: var(--카드); border: 1px solid var(--선); border-radius: var(--둥글); padding: 16px 18px; box-shadow: var(--그림자); }
.카드 + .카드 { margin-top: 12px; }
.카드들 > .카드 + .카드 { margin-top: 0; }
.카드들 { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.카드들.넓게 { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); }
.빈곳 { padding: 40px 20px; text-align: center; color: var(--흐린글); background: var(--카드); border: 2px dashed var(--선); border-radius: var(--둥글); }

.딱지들 { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; align-items: center; }
.딱지 { display: inline-flex; align-items: center; gap: 3px; font-size: .76rem; padding: 2px 9px; border-radius: 99px; background: var(--바탕2); color: var(--흐린글); border: 1px solid var(--선); white-space: nowrap; }
.딱지 b { color: var(--글); font-weight: 700; }
.딱지.분홍 { background: var(--주색옅음); color: var(--주색진); border-color: transparent; }
.딱지.보라 { background: var(--보라옅음); color: var(--보라); border-color: transparent; }
.딱지.좋음 { background: var(--민트옅음); color: var(--민트); border-color: transparent; }
.딱지.주의 { background: var(--노랑옅음); color: var(--노랑글); border-color: transparent; }
.등수 { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 99px; background: var(--노랑옅음); color: var(--노랑글); font-size: .74rem; font-weight: 700; vertical-align: middle; }

/* 대학 카드 */
.대학카드 { position: relative; padding: 0; overflow: hidden; transition: transform .12s ease, box-shadow .12s ease; }
.대학카드:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(214, 61, 132, .16); }
.대학카드 .카드링크 { display: block; padding: 16px 78px 14px 18px; color: var(--글); text-decoration: none; }
.대학카드 .카드링크 b { font-size: 1.04rem; }
.대학카드 .띠 { height: 5px; background: var(--무지개); }
.담기 { display: inline-flex; gap: 5px; align-items: center; font-size: .78rem; color: var(--흐린글); cursor: pointer; white-space: nowrap; }
.담기 input { accent-color: var(--주색); }
.대학카드 > .담기 { position: absolute; top: 20px; right: 14px; }
.위치 { display: inline-flex; align-items: center; gap: 3px; }
.위치 .아 { width: 14px; height: 14px; }

/* 쪽 나누기 */
.쪽들 { display: flex; justify-content: center; align-items: center; gap: 4px; margin: 18px 0 6px; flex-wrap: wrap; }
.쪽들 button { min-width: 36px; height: 36px; padding: 0 10px; border-radius: 12px; border: 1.5px solid var(--선); background: var(--카드); cursor: pointer; }
.쪽들 button.고름 { background: var(--주색); border-color: var(--주색); color: #fff; }
.쪽들 button:disabled { opacity: .4; cursor: default; }
.쪽들 .흐림 { margin: 0 6px; font-size: .85rem; }

/* ── 홈 ───────────────────────────────────────────── */
.환영 {
  border-radius: 26px; padding: 28px 28px 24px; color: #fff; background: var(--무지개); position: relative; overflow: hidden;
  box-shadow: 0 16px 40px rgba(240, 86, 155, .25);
}
.환영::after { content: ''; position: absolute; right: -40px; top: -40px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255,255,255,.14); }
.환영 h1 { margin: 0 0 4px; font-size: 2rem; }
.환영 p { margin: 0 0 16px; opacity: .95; }
.환영 form { display: flex; gap: 8px; max-width: 640px; position: relative; z-index: 1; flex-wrap: wrap; }
.환영 input { flex: 1 1 220px; padding: 13px 16px; border-radius: 16px; border: 0; background: rgba(255,255,255,.96); color: #2b2140; }
.환영 .단추 { background: #2b2140; box-shadow: none; }
.홈칸 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 16px; }
.홈칸 h2 { margin: 0 0 10px; font-size: 1.2rem; display: flex; align-items: center; gap: 8px; }
.홈칸 h2 .아 { color: var(--주색); }
.바로가기 { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 16px; }
.바로가기 a {
  display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: var(--둥글); background: var(--카드);
  border: 1px solid var(--선); text-decoration: none; color: var(--글); box-shadow: var(--그림자);
}
.바로가기 a:hover { border-color: var(--주색); transform: translateY(-1px); }
.바로가기 .아 { width: 26px; height: 26px; color: var(--주색); }
.바로가기 b { font-family: 'Jua', sans-serif; font-weight: 400; font-size: 1.05rem; }
.바로가기 span { font-size: .78rem; color: var(--흐린글); }
.작은목록 { list-style: none; margin: 0; padding: 0; }
.작은목록 li { display: flex; gap: 10px; align-items: baseline; padding: 7px 0; border-top: 1px dashed var(--선); font-size: .9rem; }
.작은목록 li:first-child { border-top: 0; }
.날짜 { flex-shrink: 0; font-weight: 700; color: var(--주색진); min-width: 66px; }

/* ── 대학 하나 ───────────────────────────────────── */
.대학머리 { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; color: var(--흐린글); font-size: .9rem; margin: -6px 0 14px; }
.시기고르기 { display: inline-flex; padding: 4px; background: var(--바탕2); border-radius: 14px; gap: 4px; margin-bottom: 14px; }
.시기고르기 a { padding: 7px 22px; border-radius: 10px; text-decoration: none; color: var(--흐린글); font-weight: 500; }
.시기고르기 a.고름 { background: var(--카드); color: var(--주색진); box-shadow: var(--그림자); }
.요약칸 { display: grid; grid-template-columns: minmax(170px, 230px) 1fr; gap: 10px 26px; align-items: center; }
.큰수 small { display: block; color: var(--흐린글); font-size: .8rem; }
.큰수 b { font-family: 'Jua', sans-serif; font-weight: 400; font-size: 2.3rem; color: var(--주색진); }
.막대줄 { display: grid; grid-template-columns: 96px 1fr 72px; gap: 8px; align-items: center; font-size: .85rem; margin: 4px 0; }
.막대줄 b { text-align: right; font-weight: 500; }
.막대 { height: 10px; background: var(--바탕2); border-radius: 99px; overflow: hidden; }
.막대 i { display: block; height: 100%; background: var(--무지개); border-radius: 99px; }
.요약글 { grid-column: 1 / -1; margin: 4px 0 0; line-height: 1.75; }
h2.칸제목 { font-size: 1.3rem; margin: 26px 0 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
h2.칸제목 .아 { color: var(--주색); }
ul.변경 { margin: 0; padding: 14px 18px 14px 34px; line-height: 1.8; background: var(--카드); border: 1px solid var(--선); border-radius: var(--둥글); }
.일정줄들 { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 8px; }
.일정줄 { display: flex; gap: 10px; padding: 10px 14px; background: var(--카드); border: 1px solid var(--선); border-radius: 14px; font-size: .88rem; }
.일정줄 b { min-width: 0; flex: 1; font-weight: 500; }
.일정줄 span { color: var(--주색진); font-weight: 500; text-align: right; }

/* 전형 카드 — 표 칸이 좁아 세로로 길어지던 것을 카드로 바꿨다 */
.전형카드 { display: flex; flex-direction: column; gap: 6px; }
.전형카드 .윗줄 { display: flex; align-items: baseline; gap: 8px; }
.전형카드 .윗줄 b { font-size: 1.02rem; }
.전형카드 .인원 { margin-left: auto; font-family: 'Jua', sans-serif; font-size: 1.35rem; color: var(--주색진); white-space: nowrap; }
.전형카드 .칸 { font-size: .86rem; }
.전형카드 .칸 i { font-style: normal; color: var(--흐린글); margin-right: 6px; }
.쪽단추 { border: 1.5px solid var(--선); background: var(--카드); border-radius: 99px; padding: 1px 9px; cursor: pointer; font-size: .74rem; color: var(--주색진); white-space: nowrap; }
.쪽단추:hover { border-color: var(--주색); }

/* 표 (수능 반영 · 비교 · 일정) */
.표틀 { overflow-x: auto; background: var(--카드); border: 1px solid var(--선); border-radius: var(--둥글); box-shadow: var(--그림자); }
table.표 { width: 100%; border-collapse: collapse; font-size: .88rem; }
.표 th, .표 td { padding: 10px 12px; border-bottom: 1px solid var(--선); text-align: left; vertical-align: top; }
.표 thead th { font-weight: 500; color: var(--흐린글); background: var(--바탕2); white-space: nowrap; }
.표 tr:last-child td, .표 tr:last-child th { border-bottom: 0; }
.표 td.수 { text-align: center; white-space: nowrap; font-weight: 500; }
/* 비교는 대학 칸 넓이를 똑같이 — 글이 긴 대학 칸만 넓어져 나란히 보기가 어려웠다 (사람이 바란 것) */
table.비교표 { table-layout: fixed; }
.비교표 col.머리칸 { width: 130px; }
.비교표 th, .비교표 td { word-break: keep-all; overflow-wrap: anywhere; }
.비교표 th.안쪽 { padding-left: 24px; font-weight: 400; }
.비교표 tbody th { color: var(--흐린글); font-weight: 500; background: var(--바탕2); }

/* 학과 (대학 화면 · 학과 찾기) — 줄을 칸으로 깔아 세로로만 길어지지 않게 */
.단과 h3 { margin: 0 0 8px; font-size: 1.1rem; display: flex; align-items: baseline; gap: 8px; }
.학과들 { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 8px; }
.학과줄 { padding: 10px 12px; border-radius: 14px; background: var(--바탕); border: 1px solid var(--선); }
.학과줄 .윗줄 { display: flex; gap: 8px; align-items: baseline; }
.학과줄 .윗줄 b { flex: 1; min-width: 0; }
.학과줄 .윗줄 .수 { font-weight: 700; color: var(--주색진); white-space: nowrap; }
.반영칸 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 8px; text-align: center; font-size: .78rem; }
.반영칸 div { background: var(--바탕2); border-radius: 8px; padding: 4px 2px; }
.반영칸 div i { display: block; font-style: normal; color: var(--흐린글); font-size: .7rem; }
.반영칸 div b { font-weight: 700; }
.접힘 { margin-top: 6px; }
.접힘 summary { cursor: pointer; font-size: .8rem; color: var(--주색진); list-style: none; }
.접힘 summary::-webkit-details-marker { display: none; }

/* 나에게 맞는 대학 */
.맞춤대학 h3 { margin: 0; font-size: 1.2rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.지원줄 { display: grid; grid-template-columns: 46px 1fr; gap: 8px; padding: 10px 0 2px; border-top: 1px dashed var(--선); margin-top: 10px; }
.지원시기 { color: var(--보라); font-weight: 700; font-size: .85rem; padding-top: 5px; }
.지원전형 { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 5px 10px; border: 1.5px solid var(--선); border-radius: 12px; font-size: .84rem; background: var(--바탕); }
.지원전형.확인 { border-style: dashed; }

/* 원문 찾기 */
.결과묶음 h3 { margin: 0 0 8px; font-size: 1.05rem; }
.결과 { display: block; width: 100%; text-align: left; padding: 9px 10px; border: 0; border-top: 1px dashed var(--선); background: none; cursor: pointer; font-size: .88rem; color: var(--글); }
.결과:hover { background: var(--바탕2); }
mark { background: #ffe27a; color: #2b2140; padding: 0 2px; border-radius: 3px; }

/* 설정 */
.설정줄 { display: grid; grid-template-columns: 120px 1fr; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px dashed var(--선); }
.설정줄 > span { color: var(--흐린글); font-size: .9rem; }
.등급들 { display: flex; flex-wrap: wrap; gap: 8px; }
.등급칸 { display: flex; flex-direction: column; font-size: .78rem; color: var(--흐린글); gap: 2px; }
.등급칸 input { width: 66px; }
.순위들 { columns: 3 260px; column-gap: 20px; }
.순위줄 { display: grid; grid-template-columns: 58px 1fr 84px; gap: 6px; align-items: center; padding: 3px 0; break-inside: avoid; font-size: .88rem; }
.순위줄 input { padding: 5px 8px; width: 100%; }
.사람줄 { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px dashed var(--선); flex-wrap: wrap; }
.사람줄 b { min-width: 120px; }

/* ── 로그인 ───────────────────────────────────── */
.로그인 { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--무지개); }
.로그인-안 { width: min(360px, 100%); background: var(--카드); border-radius: 26px; padding: 30px 26px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 20px 50px rgba(43, 33, 64, .25); text-align: center; }
.로그인그림 { width: 64px; height: 64px; margin: 0 auto; }
.로그인-안 h1 { margin: 0; font-size: 2rem; }
.로그인-안 p { margin: 0 0 8px; }
.로그인-안 input { padding: 12px 14px; border: 1.5px solid var(--선); border-radius: 14px; background: var(--바탕); }
.로그인말 { color: var(--빨강); font-size: .88rem; min-height: 1.2em; }

/* ── ? 안내 · 원문 쪽 보기 ───────────────────────── */
.물음 { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--선); background: var(--카드); color: var(--흐린글); font-size: .75rem; font-weight: 700; line-height: 1; cursor: pointer; padding: 0; vertical-align: middle; font-family: 'Noto Sans KR', sans-serif; }
.물음:hover { color: var(--주색진); border-color: var(--주색); }
.물음창 { position: absolute; z-index: 60; width: min(420px, calc(100vw - 16px)); background: var(--카드); border: 1px solid var(--선); border-radius: 16px; padding: 14px 16px; box-shadow: 0 14px 34px rgba(43,33,64,.2); font-size: .88rem; line-height: 1.65; white-space: pre-wrap; }
.쪽창 { position: fixed; inset: 0; z-index: 80; background: rgba(43,33,64,.45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.쪽창-안 { background: var(--카드); border-radius: 20px; width: min(1100px, 100%); height: min(90vh, 100%); display: flex; flex-direction: column; overflow: hidden; }
.쪽창-머리 { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--선); }
.쪽창-단추 { display: flex; gap: 2px; }
/* 요강은 표를 칸 자리 그대로 뽑았다 — 줄바꿈하면 칸이 무너진다 */
.쪽글 { flex: 1; overflow: auto; margin: 0; padding: 16px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.45; white-space: pre; }

@media (max-width: 640px) {
  .요약칸 { grid-template-columns: 1fr; }
  .설정줄 { grid-template-columns: 1fr; }
  .카드들, .카드들.넓게, .학과들 { grid-template-columns: 1fr; }
  .환영 { padding: 22px 18px; }
  .환영 h1 { font-size: 1.6rem; }
}
.환영 select { padding: 13px 12px; border-radius: 16px; border: 0; background: rgba(255,255,255,.96); color: #2b2140; }
/* 날짜 글이 길면 항목 이름이 한 글자씩 세로로 쌓였다 — 둘 다 최소 넓이를 주고 넘치면 줄을 바꾼다 */
.일정줄 { flex-wrap: wrap; }
.일정줄 b { flex: 1 1 40%; }
.일정줄 span { flex: 1 1 50%; }