/* 씨익 학습자료 목록 — Figma ImSbwO7Hg4s2GmlBJvkX22, frame 2769:4425.
   색·치수는 Figma 실측값이다. 눈대중으로 바꾸지 말 것. */

/* Pretendard-SemiBold 는 font_css.css 에 없다. woff2 는 assets/woff2/ 에 있다. */
@font-face{
  font-family:'Pretendard-SemiBold';
  src:url('../assets/woff2/Pretendard-SemiBold.woff2') format('woff2');
  font-weight:normal; font-style:normal;
}

:root{
  --ssiik-ink:#111;
  --ssiik-gray:#505050;
  --ssiik-line:#F1F1F5;
  /* 카드·버튼·패널 행이 공유하는 hover 테두리. 한 값이 세 곳에 리터럴로 흩어져 있었다 —
     팔레트를 조정할 때 한 곳만 고치고 나머지가 옛 색으로 남으면, 화면에서는 "미묘하게
     다르다" 로만 드러나서 못 잡는다. */
  --ssiik-line-hover:#D9D9E0;
  /* 폼 컨트롤 테두리(라디오 등). 카드 테두리(--ssiik-line)보다 한 단계 진하다. Figma 실측. */
  --ssiik-line-regular:#E5E5EC;

  /* ── 강조색 (단원평가 패널 탭·라디오, Figma Button/Pink) ──
     ⚠ **두 개인 이유가 있다. 글자에는 -text 를, 그 밖에는 -accent 를 쓴다.**
     시안 값 #FF5760 은 흰 바탕에서 3.10:1 이다. 2px 밑줄이나 18px 라디오 링 같은
     비텍스트에는 기준(3:1)을 넘지만, 16px SemiBold 탭 글자(기준 4.5:1)에는 못 미친다.
     글자만 4.66:1 이 되도록 낮춘 값을 따로 둔다 — 시안을 지킬 수 있는 자리는 그대로 지키고
     법이 요구하는 자리에서만 벗어난다. */
  --ssiik-accent:#FF5760;
  --ssiik-accent-text:#DE2B36;
  /* 준비중 라벨 색. ⚠ 시안 값(#B0B0BA + opacity .6)은 흰 카드 위 대비가 1.54:1 이고,
     opacity 를 걷어내도 #B0B0BA 자체가 2.15:1 이라 읽을 수 없다(본문 16px 는 large text 가
     아니라 기준 4.5:1). 화면의 48개 버튼 중 42개가 이 상태다 — "무엇이 준비 중인지 알 수
     있어야 한다"는 이 스타일의 목적 자체가 안 지켜진다.
     이 페이지가 이미 쓰는 #767676(스크롤탑 화살표 stroke)로 올린다 — 4.54:1.
     눈대중으로 새 색을 짓지 않으려고 기존 팔레트에서 골랐다. */
  --ssiik-soon:#767676;
  /* 자료가 하나도 없는 교재의 카드. 표지 잠금과 짝을 이루는 옅은 바탕이다. */
  --ssiik-locked-bg:#FAFAFB;
  --ssiik-locked-line:#E9E9EF;
}

body.ssiik-page{
  margin:0;
  /* 좌상단 연노랑 → 우하단 연파랑 대각 그라데이션.
     Figma 렌더 픽셀 실측: 112deg, #FEF9CF → #E5F0FC (중앙값 #F2F5E7 로 선형 확인). */
  background:linear-gradient(112deg, #FEF9CF 0%, #E5F0FC 100%);
  background-attachment:fixed;
  min-height:100vh;
}

.ssiik-main{
  position:relative;
  width:1524px;
  max-width:calc(100% - 40px);
  margin:0 auto;
  padding:60px 0 120px;
  box-sizing:border-box;
}

/* ── 히어로 (부제목 + 로고 + 학년 탭) ── */
.ssiik-hero{ display:flex; flex-direction:column; align-items:center; gap:32px; margin-bottom:48px; }
.ssiik-hero__titles{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.ssiik-hero__sub{ display:block; width:203px; height:44px; }
.ssiik-hero__logo{ display:block; width:206px; height:100px; }

.ssiik-tabs{ display:flex; align-items:flex-start; gap:21px; }
.ssiik-tab{
  appearance:none; background:none; border:0; padding:0 0 2px; cursor:pointer;
  font-family:'Pretendard-Medium', sans-serif;
  font-size:18px; line-height:26px; letter-spacing:-0.45px; color:var(--ssiik-gray);
  border-bottom:2px solid transparent;
}
.ssiik-tab.is-active{
  font-family:'Pretendard-Bold', sans-serif;
  color:var(--ssiik-ink);
  border-bottom-color:var(--ssiik-ink);
}

/* ── 마스코트(장식) — 탭과 카드 그리드 사이, 컨테이너 오른쪽 끝에 붙는다.
      Figma 노드 메타데이터의 x=1723(=컨테이너 바깥)을 믿고 컨테이너 밖에 뒀다가
      실제 렌더와 대조해서 잡았다. 렌더에서는 마스코트 박스 오른쪽 끝이
      컨테이너 오른쪽 끝(1722)에 맞고, 캐릭터는 콘텐츠 폭 안에 들어온다.
      컨테이너 안이라 어떤 폭에서도 가로스크롤을 만들지 않는다.
      좁은 폭에서는 가운데 정렬된 탭과 겹치므로 그때만 감춘다. ── */
.ssiik-mascot{
  position:absolute; top:200px; right:0;
  width:160px; height:120px; pointer-events:none;
}
@media (max-width:900px){ .ssiik-mascot{ display:none; } }

/* ── 카드 그리드 ──
   repeat(2,1fr) 은 트랙 최소폭이 min-content 라 카드가 안 줄고 넘친다.
   minmax(0,1fr) + 카드 내부 min-width:0 이 한 세트다. */
.ssiik-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; }

.ssiik-card{
  display:flex; align-items:center; gap:24px;
  padding:24px; box-sizing:border-box;
  background:#fff; border:1px solid var(--ssiik-line); border-radius:24px;
}
.ssiik-card[hidden]{ display:none; }

/* 표지 래퍼 — 잠금 배지를 얹을 자리. 크기는 표지가 갖고 있던 것을 그대로 물려받는다. */
.ssiik-card__coverwrap{ flex:none; position:relative; width:192px; height:248px; }

/* 치수는 래퍼가 갖는다 — 여기에 다시 적으면 둘이 어긋날 때 잠금 배지가 표지를 덜 덮는다. */
.ssiik-card__cover{
  display:block; width:100%; height:100%; object-fit:cover;
  border-radius:4px 12px 12px 4px;
  box-shadow:0 4px 12px rgba(0,0,0,0.12);
}

/* ── 자료가 하나도 없는 교재 ──
   ⚠ 글자에는 opacity 를 걸지 않는다. 준비중 버튼에서 이미 한 번 물렸다 —
      이미 흐린 색에 opacity 가 곱해져 대비가 1.54:1 까지 떨어졌었다.
      '흐림'은 표지와 카드 배경으로만 표현하고 제목·라벨 대비는 그대로 둔다. */
.ssiik-card.is-locked{ background:var(--ssiik-locked-bg); border-color:var(--ssiik-locked-line); }

.ssiik-card__lock{
  /* inset 대신 네 방향을 따로 적는다 — inset 은 Safari 14.1+ 이고, 이 사이트는 그보다
     낮은 학원 태블릿에서 물린 이력이 있다(Unity 6 replaceAll 사고). 한 줄 값이다. */
  position:absolute; top:0; right:0; bottom:0; left:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  border-radius:4px 12px 12px 4px;   /* 표지와 같은 모서리 */
  /* 검정 55%. 흰 글자 대비의 최악값은 **표지에서 가장 밝은 픽셀** 위에서 나오는데,
     그 상한은 순백(255,255,255)이다 — 55% 를 얹으면 rgb(115,115,115), 대비 4.76:1
     로 기준(4.5:1)을 넘는다. 표지 12장의 배지 영역 픽셀을 전부 훑어 실측했고 전부
     4.76:1 이었다(가장 밝은 픽셀이 순백이라 모두 같은 값이 나온다).
     흰색보다 밝은 표지는 있을 수 없으므로 **앞으로 표지가 교체돼도 이 값은 성립한다.**
     이 숫자를 올리면(더 투명하게) 그 보장이 깨진다. */
  background:rgba(0,0,0,0.55);
  color:#fff;
  font-family:'Pretendard-SemiBold', sans-serif;
  font-size:15px; line-height:22px; letter-spacing:-0.35px;
}

.ssiik-card__body{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:16px; }
.ssiik-card__title{
  margin:0;
  font-family:'Pretendard-SemiBold', sans-serif;
  font-size:28px; line-height:38px; letter-spacing:-0.7px; color:var(--ssiik-ink);
}

.ssiik-rows{ display:flex; flex-direction:column; gap:12px; }
.ssiik-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.ssiik-row__label{
  flex:none;
  font-family:'Pretendard-Regular', sans-serif;
  font-size:18px; line-height:26px; color:var(--ssiik-gray);
}
.ssiik-row__btns{ flex:1 1 auto; min-width:0; max-width:390px; display:flex; align-items:center; gap:8px; }
/* 단원평가 행은 원장에게 세 칸(문제지·정답지·채점·진단)이다. 폭 390px 안에 3열로 서려면 좌우
   여백을 줄인다 — 24px 이면 「채점·진단」이 칸 폭(≈125px)에 닿는다. 학생·비로그인에게는 단원평가 행 전체를 숨긴다. */
.ssiik-row__btns--assessment{ flex-wrap:wrap; }
.ssiik-row__btns--assessment .ssiik-btn{ padding-left:12px; padding-right:12px; }

.ssiik-btn{
  flex:1 1 0; min-width:0;
  display:inline-flex; align-items:center; justify-content:center;
  height:48px; padding:10px 24px; box-sizing:border-box;
  background:#fff; border:1px solid var(--ssiik-line); border-radius:16px;
  font-family:'Pretendard-SemiBold', sans-serif;
  font-size:16px; line-height:24px; letter-spacing:-0.4px; color:var(--ssiik-ink);
  white-space:nowrap; cursor:pointer;
  text-decoration:none;
  transition:border-color .12s, box-shadow .12s;
}
.ssiik-btn:hover{ border-color:var(--ssiik-line-hover); box-shadow:0 2px 8px rgba(0,0,0,0.06); }

/* 준비중 — 라벨은 그대로 두고 흐리게. 무엇이 준비 중인지 알 수 있어야 한다.
   opacity 는 걷어냈다. 이미 흐린 색에 곱해져 대비를 1.54:1 까지 떨어뜨리던 주범이고,
   테두리까지 같이 흐려서 되살릴 값이 없다. 활성과는 글자색(#111 vs #767676)으로 갈린다. */
.ssiik-btn.is-soon{ color:var(--ssiik-soon); cursor:default; }
.ssiik-btn.is-soon:hover{ border-color:var(--ssiik-line); box-shadow:none; }

/* ── 우하단 스크롤탑 (level_list_v2 와 같은 패턴) ── */
.ssiik-fab{
  position:fixed; right:40px; bottom:40px; z-index:20;
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--ssiik-line);
  box-shadow:0 4px 12px rgba(0,0,0,0.12); cursor:pointer;
}

/* ── 좁은 화면: 2열 → 1열 ──
   경계는 1440px 이다(2026-09-08, 전에는 1200). 2열에서는 카드 하나가 좁아 버튼 상자가 1280px 에서
   270~300px 뿐인데, 원장 화면의 「교재(정답) E-Book」(글자 120px)과 세 칸 「채점·진단」이 그 안에서
   글자가 여백을 넘친다 — 「정답지 E-Book」 시절에도 이미 여백을 파먹고 있었다. 1440 부터는 글자에
   14px·26px 여유가 있고, 그 아래는 전폭 카드라 넉넉하다. 실측: scratch Playwright text_fit. */
@media (max-width:1439px){
  .ssiik-grid{ grid-template-columns:1fr; }
}
@media (max-width:720px){
  .ssiik-main{ padding:32px 0 80px; }
  .ssiik-card{ flex-direction:column; align-items:stretch; gap:16px; }
  .ssiik-card__coverwrap{ align-self:center; }
  .ssiik-card__title{ font-size:22px; line-height:30px; text-align:center; }
  .ssiik-row{ flex-direction:column; align-items:stretch; gap:8px; }
  .ssiik-row__btns{ max-width:none; }
  .ssiik-tabs{ flex-wrap:wrap; justify-content:center; gap:16px; }
  .ssiik-fab{ right:16px; bottom:16px; }
}