/* =============================================================
   첫 화면 (index.html)
   PC: 왼쪽(인사말·소개·과목) + 오른쪽(로그인 카드 / 플래너)
   휴대폰: 인사말 → 카드 → 소개 → 과목 순서로 한 줄
   ============================================================= */

/* ---------- 배경 (화면 끝까지 하늘색) ---------- */
.hero {
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - 65px - env(safe-area-inset-top, 0px));
  min-height: calc(100dvh - 65px - env(safe-area-inset-top, 0px));
  background: radial-gradient(60% 80% at 15% 85%, rgba(126, 200, 255, 0.35), transparent 70%),
    radial-gradient(55% 70% at 85% 20%, rgba(95, 211, 192, 0.22), transparent 70%),
    linear-gradient(180deg, #f7fbff 0%, #eaf6fd 100%);
}

/* ---------- 두 칸 배치 ---------- */
.home {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  grid-template-areas: "left card";
  column-gap: 40px;
  align-items: start;
  padding-block: 32px 36px;
}
.home .left {
  grid-area: left;
  display: grid;
  gap: 22px;
  min-width: 0;
  padding-top: 24px;
}
.home .subj-wrap {
  min-width: 0; /* 슬라이드가 왼쪽 칸 밖으로 넓어지지 않게 */
}
.home .card {
  grid-area: card;
  align-self: start;
}

/* ---------- 인사말 / 오늘의 한마디 ---------- */
.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: var(--sky-d);
  background: #fff;
  border-radius: 999px;
  padding: 5px 12px;
  box-shadow: 0 1px 3px rgba(14, 134, 194, 0.15);
}
.home h1 {
  margin-top: 10px;
  font-family: var(--f-head);
  font-weight: 900;
  font-size: clamp(30px, 3.9vw, 50px);
  line-height: 1.22;
  letter-spacing: -0.03em;
}
.home h1 em {
  font-style: normal;
  color: var(--sky);
}
.home .lead {
  margin: 16px 0 0;
  max-width: 30em;
  font-size: 17px;
  color: var(--muted);
}

/* ---------- 소개 3칸 (공부 방식 · 기출 문제 · 목표) ---------- */
.mini-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 세 칸 같은 너비 */
  gap: 10px;
}
.ms {
  display: flex;
  flex-direction: column; /* 아이콘 위 · 글자 아래 → 세 칸 모양이 똑같이 */
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  padding: 14px 10px;
  text-align: center;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 16px;
}
.ms svg {
  width: 26px;
  height: 26px;
  flex: none;
  color: #5bb8ea;
}
.ms span {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.ms b {
  display: block;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

/* ---------- 과목 카드 ---------- */
.subj {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  align-items: center;
  height: 100%;
  min-width: 0;
  padding: 14px;
  text-decoration: none;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 20px;
  transition:
    box-shadow 0.15s,
    transform 0.1s,
    border-color 0.15s;
}
.subj:hover {
  box-shadow: 0 10px 26px rgba(15, 26, 43, 0.08);
  border-color: transparent;
}
.subj:active {
  transform: translateY(2px);
}
.subj .glyph {
  width: 46px;
  height: 46px;
  font-size: 20px;
  border-radius: 14px;
}
.subj h3 {
  min-width: 0;
  font-size: 17px;
  line-height: 1.3;
}

/* 로그인 전: 끊김 없이 왼쪽으로 흐르는 슬라이드 */
.marquee {
  overflow: hidden;
  padding-block: 2px 6px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 14px;
  width: max-content;
  animation: slide var(--dur, 32s) linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}
.track li {
  width: 220px;
  flex: none;
}
@keyframes slide {
  from {
    transform: translateX(0);
  }
  /* 목록을 두 번 이어 붙였으므로 절반 + 간격의 절반만큼 이동하면 처음과 같은 모습 */
  to {
    transform: translateX(calc(-50% - 7px));
  }
}

/* 로그인 후: 내 학년 과목만 2칸씩 고정 */
.marquee.fixed {
  padding: 0;
  -webkit-mask-image: none;
  mask-image: none;
}
.marquee.fixed .track {
  animation: none;
  width: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.marquee.fixed .track li {
  width: auto;
}

/* ---------- 로그인 / 회원가입 카드 ---------- */
#authBox {
  display: flex;
  flex-direction: column;
}
#authBox form {
  flex: 1;
  display: flex;
  flex-direction: column;
}
#authBox form .btn-sky {
  margin-top: auto;
}
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-bottom: 16px;
  padding: 4px;
  background: var(--soft);
  border-radius: 14px;
}
.auth-tabs button {
  border: none;
  background: none;
  border-radius: 11px;
  padding: 10px;
  font-weight: 700;
  font-size: 15px;
  color: var(--muted);
}
.auth-tabs button[aria-selected="true"] {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 4px rgba(15, 26, 43, 0.12);
}
#sid {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.12em;
  font-weight: 700;
}

/* 비밀번호 4칸: 투명한 입력칸 위에 * 네 칸을 겹쳐 보여 줌 */
.pin {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.pin input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 0;
  font-size: 16px;
  cursor: text;
}
.pc {
  height: 52px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 14px;
}
.pc::after {
  content: "*";
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  transform: translateY(4px);
  color: #c9d3dd;
}
.pc.on::after {
  color: var(--ink);
}
.pc.cur {
  border-color: var(--sky);
}

.keep {
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  margin: 2px 0 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
}
.keep input {
  width: 18px;
  height: 18px;
  accent-color: var(--sky);
}
.linkbtn {
  border: none;
  background: none;
  padding: 0;
  font-size: inherit;
  font-weight: 700;
  color: var(--sky-d);
  text-decoration: underline;
}

/* ---------- 스터디 플래너 ---------- */
.planner {
  display: grid;
  gap: 12px;
}
.pl-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px;
}
.pl-title {
  margin: 0;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.pl-who {
  margin: 2px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--sky-d);
}
.pl-week {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.pl-week b {
  color: var(--ink);
}
.pl-arrow {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 10px;
  background: var(--soft);
  font-size: 20px;
  line-height: 1;
  color: var(--ink);
}
.pl-arrow[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

/* 월~일 7칸 */
.pl-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.pl-day {
  display: grid;
  justify-items: center;
  gap: 1px;
  min-width: 0;
  padding: 8px 0 6px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 14px;
}
.pl-day .w {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.pl-day .w.sat {
  color: #2563c9;
}
.pl-day .w.sun {
  color: var(--bad);
}
.pl-day .n {
  font-size: 17px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.pl-day .dots {
  min-height: 14px;
  font-size: 10px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.pl-day.today {
  border-color: var(--sky);
}
.pl-day.on {
  background: var(--sky);
  border-color: var(--sky);
  color: #fff;
}
.pl-day.on .w,
.pl-day.on .dots {
  color: #fff;
}
.pl-day.full:not(.on) .dots {
  color: var(--ok);
  font-weight: 700;
}
.pl-day.off {
  opacity: 0.35;
  cursor: not-allowed;
}

/* 고른 날짜의 할 일 */
.pl-sum {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 700;
}
.pl-sum span:last-child {
  color: var(--muted);
  font-weight: 500;
}
.pl-bar {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--soft);
}
.pl-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--mint);
}
.pl-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
}
.pl-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
}
.pl-list label {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  cursor: pointer;
}
.pl-list input {
  width: 20px;
  height: 20px;
  flex: none;
  accent-color: var(--sky);
}
.pl-list .tx {
  font-size: 15px;
  overflow-wrap: anywhere;
}
.pl-list li.done .tx {
  text-decoration: line-through;
  color: var(--muted);
}
.pl-list .sj {
  flex: none;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  background: var(--sky-soft);
  color: var(--sky-d);
  border-radius: 999px;
}
.pl-list .del {
  flex: none;
  border: none;
  background: none;
  padding: 2px 4px;
  font-size: 18px;
  line-height: 1;
  color: var(--muted);
}
.pl-list .empty-li {
  justify-content: center;
  border-style: dashed;
  font-size: 13px;
  color: var(--muted);
}

/* 할 일 추가 */
.pl-add {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 6px;
}
.pl-add select,
.pl-add input {
  min-width: 0;
  padding: 10px;
  font-size: 15px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 12px;
}
.pl-add select {
  max-width: 120px;
}
.pl-add input:focus,
.pl-add select:focus {
  border-color: var(--sky);
  outline: none;
}
.pl-add button {
  border: none;
  border-radius: 12px;
  padding: 0 16px;
  background: var(--sky);
  color: #fff;
  font-weight: 700;
}

/* ---------- 화면 크기별 ---------- */
/* 태블릿 세로 · 휴대폰: 한 줄로 */
@media (max-width: 860px) {
  .home {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "greet" "card" "stats" "subj";
    row-gap: 18px;
    padding-block: 20px 28px;
  }
  .home .left {
    display: contents;
  }
  .home .greet {
    grid-area: greet;
  }
  .home .mini-stats {
    grid-area: stats;
  }
  .home .subj-wrap {
    grid-area: subj;
  }
}
@media (max-width: 520px) {
  .mini-stats {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 420px) {
  .pl-add {
    grid-template-columns: 1fr auto;
  }
  .pl-add select {
    grid-column: 1 / -1;
    max-width: none;
  }
  .pl-day .n {
    font-size: 15px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .track {
    animation: none;
  }
  .marquee {
    overflow-x: auto;
  }
}

/* =============================================================
   로그인 후 (.home.is-user)
   소개 3칸 숨김 · 플래너를 화면 높이만큼 크게 · 과목 카드 크게
   ============================================================= */
.home.is-user .mini-stats {
  display: none;
}

/* 과목 카드 크게 (아이콘 위 · 과목 이름 아래) */
.home.is-user .marquee.fixed .track {
  gap: 14px;
}
.home.is-user .subj {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  min-height: 150px;
  padding: 22px;
  border-radius: 22px;
}
.home.is-user .subj .glyph {
  width: 64px;
  height: 64px;
  font-size: 28px;
  border-radius: 18px;
}
.home.is-user .subj h3 {
  font-size: 22px;
}

/* 플래너 크게 */
.home.is-user .card {
  padding: 26px 28px;
}
.home.is-user .planner {
  gap: 16px;
}
.home.is-user .pl-title {
  font-size: 24px;
}
.home.is-user .pl-who {
  font-size: 14px;
}
.home.is-user .pl-week {
  font-size: 15px;
}
.home.is-user .pl-arrow {
  width: 38px;
  height: 38px;
  font-size: 22px;
}
.home.is-user .pl-days {
  gap: 8px;
}
.home.is-user .pl-day {
  padding: 12px 0 10px;
  border-radius: 16px;
}
.home.is-user .pl-day .w {
  font-size: 13px;
}
.home.is-user .pl-day .n {
  font-size: 22px;
}
.home.is-user .pl-day .dots {
  font-size: 11px;
}
.home.is-user .pl-sum {
  font-size: 16px;
}
.home.is-user .pl-bar {
  height: 8px;
}
.home.is-user .pl-list li {
  padding: 12px 14px;
}
.home.is-user .pl-list .tx {
  font-size: 16px;
}
.home.is-user .pl-list .empty-li {
  font-size: 14px;
  padding-block: 18px;
}
.home.is-user .pl-add {
  gap: 8px;
}
.home.is-user .pl-add select,
.home.is-user .pl-add input {
  padding: 13px 12px;
  font-size: 16px;
}
.home.is-user .pl-add button {
  padding: 0 22px;
  font-size: 16px;
}

/* PC: 플래너가 화면 아래까지 채우고, 할 일 목록이 남는 높이를 씀 */
@media (min-width: 861px) {
  .home.is-user {
    min-height: calc(100vh - 65px - env(safe-area-inset-top, 0px));
    min-height: calc(100dvh - 65px - env(safe-area-inset-top, 0px));
    align-items: stretch;
  }
  /* 왼쪽: 한마디는 위, 과목 카드는 남는 높이를 나눠 가짐 */
  .home.is-user .left {
    grid-template-rows: auto 1fr;
  }
  .home.is-user .subj-wrap,
  .home.is-user .marquee.fixed,
  .home.is-user .marquee.fixed .track {
    height: 100%;
  }
  .home.is-user .marquee.fixed .track {
    grid-auto-rows: 1fr;
  }
  .home.is-user .card {
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }
  .home.is-user .planner {
    flex: 1;
    grid-template-rows: auto auto auto auto 1fr auto;
  }
  .home.is-user .pl-list {
    max-height: none;
    min-height: 0;
    align-content: start;
  }
}