@import url("theme.css?v=20260906a");

/* ============================================================================
 * home.css — 학생용 홈 화면 공통 조판 (초·중·고 셋이 같이 쓴다)  · 2026-08 리디자인
 *
 * 흰 배경 · 인디고+민트 · 카드 그리드. 표를 걷어내고 프로젝트 한 건을 카드 한 장으로 본다.
 * 아이콘은 전부 인라인 SVG(스트로크 1.8) — 외부 폰트·CDN 없음(오프라인 동작).
 * 글꼴은 시스템 스택. Pretendard 가 깔린 PC 면 그걸 쓰고, 없으면 맑은 고딕으로 내려간다.
 *
 * 짝이 되는 그리기 코드는 common/home.js 다. 학교급마다 다른 것(제목·안내 문구·READY
 * 범위)은 각 index.html 의 HOME 객체에만 둔다 — 조판과 코드는 여기 한 벌뿐이다.
 * ========================================================================= */

/* ★색·글꼴 토큰은 전부 common/theme.css 에 있다 (2026-08-20).
   여기서 색을 새로 만들지 않는다. 남는 것은 이 화면만의 치수뿐이다. */
:root {
  --r: 16px;
  --r-sm: 10px;
}


* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--tx);
  font: 400 16px/1.65 var(--font-ui);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
svg { display: block; }
.i { width: 1em; height: 1em; flex: 0 0 auto; stroke: currentColor; fill: none;
     stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ── 공통 컨트롤 ─────────────────────────────────────────────────────── */
button {
  font: inherit; letter-spacing: inherit; min-height: 44px; padding: 10px 16px;
  border: 1px solid transparent; border-radius: 12px; cursor: pointer;
  background: var(--tx); color: #fff; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .08s;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
}
button:active:not(:disabled) { transform: translateY(1px); }
button.ghost { background: var(--panel); color: var(--tx-2); border-color: var(--line); font-weight: 500; }
button.ghost:hover:not(:disabled) { border-color: var(--line-strong); background: var(--panel2); }
button.ghost.on {
  background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; font-weight: 600;
}
input, select {
  font: inherit; letter-spacing: inherit; color: var(--tx);
  border: 1px solid var(--line); border-radius: 12px; padding: 10px 13px;
  background: var(--panel2); min-height: 44px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
input:focus, select:focus, button:focus-visible {
  outline: none; background: #fff;
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--acc-soft);
}
input::placeholder { color: var(--faint); }
select {
  appearance: none; padding-right: 34px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 16px;
}

/* ── 헤더 ────────────────────────────────────────────────────────────── */
header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255, 255, 255, .88); backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
  padding: 14px 28px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
header .mark {
  width: 38px; height: 38px; border-radius: 11px; flex: 0 0 auto;
  background: linear-gradient(140deg, var(--accent) 0%, var(--acc) 45%, var(--ok) 100%);
  color: #fff; display: grid; place-items: center; font-size: 20px;
  box-shadow: 0 4px 12px -4px rgba(79, 70, 229, .55);
}
header h1 {
  margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.025em;
  display: flex; align-items: center; gap: 9px;
}
header .lv {
  font-size: 12px; font-weight: 700; letter-spacing: 0;
  color: var(--accent-ink); background: var(--accent-soft);
  border-radius: 999px; padding: 3px 10px;
}
header .sub { color: var(--dim); font-size: 13.5px; }
header .sp { flex: 1; }
.stat {
  display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--dim);
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; background: var(--panel2);
}
.stat b { color: var(--tx); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── 본문 ────────────────────────────────────────────────────────────── */
main { padding: 26px 28px 72px; max-width: 1320px; margin: 0 auto; }

.notice {
  display: flex; gap: 13px; align-items: flex-start;
  background: var(--accent-soft); border: 1px solid var(--acc-line); border-radius: var(--r);
  padding: 15px 18px; margin-bottom: 20px; font-size: 15px; color: var(--tx-2); line-height: 1.6;
}
.notice .i { font-size: 20px; color: var(--accent); margin-top: 1px; }
.notice b { color: var(--accent-ink); font-weight: 700; }
.notice.warn { background: var(--warn-soft); border-color: var(--line); }
.notice.warn .i, .notice.warn b { color: var(--warn); }

/* ── 도구 막대 ───────────────────────────────────────────────────────── */
.tools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 22px; }
.search { position: relative; flex: 1 1 280px; max-width: 380px; }
.search .i {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  font-size: 18px; color: var(--faint); pointer-events: none;
}
.search input { width: 100%; padding-left: 41px; }
.tools .lbl { color: var(--faint); font-size: 13px; font-weight: 600; margin-left: 4px; }

/* ── 학년 구분 ───────────────────────────────────────────────────────── */
.grade {
  display: flex; align-items: baseline; gap: 10px;
  margin: 30px 0 14px; font-size: 16px; font-weight: 700; letter-spacing: -0.02em;
}
.grade::before {
  content: ''; width: 4px; height: 17px; border-radius: 2px; background: var(--accent);
  align-self: center;
}
.grade span { font-size: 13px; font-weight: 500; color: var(--faint); font-variant-numeric: tabular-nums; }

/* ── 카드 그리드 ─────────────────────────────────────────────────────── */
.cards {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(316px, 1fr));
}
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 10px;
  box-shadow: var(--shadow); transition: border-color .16s, box-shadow .16s, transform .16s;
}
.card.ready:hover { border-color: var(--acc-line); box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.card.soon { background: var(--panel2); border-style: dashed; }
.card.soon .ttl, .card.soon .unit { color: var(--faint); }

.card .top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.no {
  font: 700 12.5px/1 var(--font-num); letter-spacing: 0;
  color: var(--accent-ink); background: var(--accent-soft);
  border-radius: 7px; padding: 5px 9px;
}
.card.soon .no { color: var(--faint); background: var(--subtle); }
.card .top .sp { flex: 1; }
/* 큐브 수 배지 — 아이콘·글자·테두리 모두 회색 한 가지로 통일한다.
 * 큐브 대수는 고르는 기준이 아니라 참고 정보라, 색으로 눈을 끌 이유가 없다. */
.cubes {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; border-radius: 999px; padding: 4px 10px 4px 8px;
  border: 1px solid var(--line-strong); color: var(--dim); background: #fff;
}
.cubes .i { font-size: 13px; color: var(--dim); }

.card .ttl { font-size: 16.5px; font-weight: 700; line-height: 1.45; letter-spacing: -0.022em; margin: 0; }
.card .unit { font-size: 13.5px; color: var(--dim); margin: -4px 0 0; }

.meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 3px; }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--tx-2); background: var(--panel2);
  border: 1px solid var(--line); border-radius: 8px; padding: 4px 9px;
}
.chip .i { font-size: 13px; color: var(--faint); }
/* ★센서 이름은 **고르는 기준이 아니라 참고 정보**다 (2026-08-20 대표 지정).
   글자는 슬롯 안의 다른 보조 글씨와 같은 회색으로 내린다. */
.chip.sensor { color: var(--dim); background: var(--ok-soft); border-color: transparent; }
.chip.sensor .i { color: var(--dim); }

/* ★단추는 **가운데**에 놓고, 그 위의 가로줄은 없앤다 (2026-08-21 대표 지정).
 *   줄은 「위쪽은 설명, 아래쪽은 행동」을 갈라 주려던 것이었는데, 85장이 줄줄이
 *   같은 줄을 그으니 목록 전체가 눈금자처럼 보였다. 단추가 이미 파랗고 크다 —
 *   행동이 어디인지는 줄 없이도 안다.
 *   ⟹ 줄과 그 위아래 여백(1+13+12=26px)이 사라진 만큼 카드가 낮아진다. */
.card .go { margin-top: 8px; padding-top: 0; border-top: 0;
  display: flex; align-items: center; justify-content: center; gap: 10px; }
/* 오른쪽으로 밀던 스페이서 — 가운데 정렬에서는 자리를 차지하면 안 된다.
 * (home.js 가 넣는 것이라 여기서 죽인다. 85장이 쓰는 자리라 JS 를 건드리지 않는다) */
.card .go .sp { display: none; }
.open {
  background: var(--accent); color: #fff; border-radius: 12px; font-weight: 700;
  min-height: 42px; padding: 9px 18px; box-shadow: 0 2px 8px -2px rgba(79, 70, 229, .5);
}
.open:hover:not(:disabled) { background: var(--accent-ink); }
.open .i { font-size: 17px; }
.soonbtn {
  background: transparent; color: var(--faint); border: 1px solid var(--line);
  font-weight: 500; min-height: 42px; padding: 9px 16px; cursor: default;
}
/* .readydot — 「바로 시작할 수 있어요」 문구를 뺐다 (2026-08-20). 규칙도 함께 지웠다. */

/* ── 첫 화면(student/) — 학교급 고르기 ───────────────────────────────────
 * 학생이 맨 처음 만나는 화면이다. 카드 세 장뿐이므로 프로젝트 카드보다 넉넉하게 잡는다. */
.levels {
  display: grid; gap: 16px; margin-top: 4px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.lvcard {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: 24px 22px 20px; display: flex; flex-direction: column; gap: 12px;
  box-shadow: var(--shadow); transition: border-color .16s, box-shadow .16s, transform .16s;
}
.lvcard:hover { border-color: var(--acc-line); box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.lvcard .sym {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); font-size: 24px;
}
.lvcard h2 {
  margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.028em;
  display: flex; align-items: baseline; gap: 9px;
}
.lvcard h2 .n { font-size: 13px; font-weight: 600; color: var(--faint); font-variant-numeric: tabular-nums; }
.lvcard .desc { margin: -2px 0 0; font-size: 14.5px; color: var(--dim); line-height: 1.65; }
.lvcard .enter { margin-top: auto; padding-top: 16px; }
.lvcard .enter button { width: 100%; }

/* ── S큐브 랩 카드 (2026-08-13) ───────────────────────────────────────────
 * 학교급 카드 셋과 **성격이 다른 물건**이라 격자에 끼우지 않고 아래에 가로로 눕혔다 —
 * 넷째 칸으로 넣으면 "학교급이 넷"으로 읽힌다. 색은 민트 계열로 갈라 둔다
 * (인디고 = 교육과정 프로젝트 / 민트 = 자유 실험). */
.labcard {
  margin-top: 18px; background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow);
  padding: 20px 22px; display: flex; align-items: center; gap: 18px;
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.labcard:hover { border-color: var(--line-strong);
  box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.labcard .sym {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px;
  display: grid; place-items: center;
  background: var(--ok-soft); color: var(--ok); font-size: 24px;
}
.labbody { flex: 1; min-width: 0; }
.labcard h2 {
  margin: 0 0 4px; font-size: 20px; font-weight: 700; letter-spacing: -0.028em;
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
}
.labtag {
  font-size: 12px; font-weight: 700; color: var(--ok);
  background: var(--ok-soft); border-radius: 999px; padding: 3px 10px 3px 8px;
  display: inline-flex; align-items: center; gap: 4px;
}
.labtag .i { font-size: 13px; color: var(--ok); }
.labcard .desc { margin: 0; font-size: 14.5px; color: var(--dim); line-height: 1.65; }
.labchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.labcard .enter { flex: 0 0 auto; margin: 0; padding: 0; }
.labcard .enter button { white-space: nowrap; }

/* ── 빈 결과 ─────────────────────────────────────────────────────────── */
.empty {
  text-align: center; color: var(--faint); padding: 56px 20px;
  border: 1px dashed var(--line); border-radius: var(--r);
}
.empty .i { font-size: 34px; margin: 0 auto 12px; color: var(--line-strong); }

/* ── 꼬리말 ──────────────────────────────────────────────────────────── */
.foot {
  color: var(--faint); font-size: 12.5px; line-height: 1.8; margin-top: 42px;
  padding-top: 20px; border-top: 1px solid var(--line);
}

/* ── 태블릿·좁은 화면 ────────────────────────────────────────────────── */
@media (max-width: 720px) {
  header { padding: 12px 16px; }
  main { padding: 20px 16px 60px; }
  .cards { grid-template-columns: 1fr; }
  .search { max-width: none; }
}
@media (pointer: coarse) {
  .card .go button { min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .card.ready:hover { transform: none; }
}

@media (max-width: 720px) {
  .labcard { flex-direction: column; align-items: flex-start; gap: 14px; }
  .labcard .enter { width: 100%; }
  .labcard .enter button { width: 100%; }
}


/* ── 교사 앱 안에서 고른 카드 (?embed=1) ──────────────────────────────────
 * 학생 태블릿에는 이 상태가 없다 — 거기서는 누르면 그 자리에서 넘어가기 때문이다.
 * 선생님 화면에서는 화면이 안 바뀌므로 「무엇을 골랐는지」가 남아야 한다. */
.card.picked, .lvcard.picked {
  border-color: var(--accent); box-shadow: var(--shadow-lift);
}
.card.picked .no { background: var(--accent); color: #fff; }
.lvcard.picked .sym { background: var(--accent); color: #fff; }