/* 글이 놓인 «면»을 바탕에서 떼어 놓는 한 곳 — 다크·라이트 둘 다 (26.08.08) */

/*
 * 왜 만드나
 *   「글씨 나온 것들 화면 배색 분리를 더 해 달라」는 말을 들었다.
 *   재 보니 대비(글자↔바탕)는 이미 통과한다 — /high/ 는 미달 0종이다.
 *   모자란 것은 **면과 면의 분리**였다. 실측하니 /high/ 에서 «글이 든 판»이
 *   1종뿐이었고 그마저 바탕과 밝기차 0 이었다. 글이 전부 바탕에 그냥 얹혀 있다.
 *
 *   읽히기는 해도 «어디서 어디까지가 한 덩이인지»가 안 보인다.
 *   100분을 보는 화면에서 눈이 지치는 까닭이 그것이다.
 *
 * 무엇을 따르나
 *   저장소의 실측 문서 §3-2 가 정한 3단을 그대로 쓴다.
 *     페이지 배경      캔버스
 *     읽는 것(개념)    한 단 올린 면 + 왼쪽 강조선
 *     하는 것(문제)    한 단 올린 면 + 그림자 한 단계 + 위쪽 강조 띠
 *   같은 흰(또는 남색) 카드 두 개를 나란히 두면 학생은 어디서부터 «해야»
 *   하는지 모른다. 무게로 가른다.
 *
 * 왜 새 파일인가
 *   worksurface.css 는 학습 페이지 7종만 싣는다. 입구(/high/)와 리포트는 안 싣는다.
 *   그런데 분리는 «고등 화면 전부»의 문제다. 그래서 밝기(appearance.css)처럼
 *   한 곳에 두고 필요한 화면이 가져다 쓴다.
 *
 * 안 하는 것
 *   · 색을 새로 만들지 않는다 — 표면 3단(--night/--dusk/--dusk-2)은 이미 있다
 *   · 마크업을 안 건드린다. 있는 클래스에 면만 준다
 */

/* ── 면 사다리 ────────────────────────────────────────────────
   다크는 밝기값 자체가 작아서 «차»로는 못 가른다. 비율로 본다.
     #0A0E27 → #141B44  비율 1.13   (한 단)
     #0A0E27 → #1E2A5E  비율 1.37   (두 단)
   한 단만으로는 눈에 잘 안 들어와서, 테두리 1px 를 함께 준다.
   면과 선을 같이 쓰면 둘 중 하나가 약해도 경계가 남는다. */
:root{
  --sf-1: var(--dusk,   #141B44);   /* 글이 놓이는 면 — 한 단 */
  --sf-2: var(--dusk-2, #1E2A5E);   /* 면 위의 면 — 두 단 */
  --sf-line: var(--panel-border, rgba(169,180,232,.22));
}
html[data-appearance="light"]{
  --sf-1: #FFFFFF;
  --sf-2: #F4F7FB;
  --sf-line: #DDE4EE;
}

/* ── 글 덩이를 면 위에 올린다 ────────────────────────────────
   `.sec`(제목+설명 묶음)과 `.hero`(첫 인사)가 바탕에 그냥 얹혀 있었다. */
.sf-panel,
.wrap > .sec,
.wrap > .hero{
  background: var(--sf-1);
  border: 1px solid var(--sf-line);
  border-radius: var(--r-16, 16px);
  padding: var(--sp-7, 24px);
}
/* 붙어 있으면 두 덩이가 한 덩이로 보인다. 사이를 벌린다. */
.wrap > .sec + .sec,
.wrap > .hero + .sec{ margin-top: var(--sp-7, 24px); }

/* ── 읽는 것과 하는 것을 다른 무게로 (실측 §3-2) ─────────────
   `.ways a`(시험 4종 입구)와 `.weak a`(다시 볼 곳)는 «누르는 것»이다.
   면을 한 단 더 올리고 왼쪽에 띠를 준다 — 목록에서 눈이 먼저 닿는 자리다. */
.ways a,
.weak a,
.sf-do{
  background: var(--sf-2);
  border: 1px solid var(--sf-line);
  border-left: 3px solid var(--star, #FFD27D);
}

/* ── 표 안의 줄 ──────────────────────────────────────────────
   줄이 많은 곳은 한 줄 걸러 면을 살짝 바꾼다. 선을 더 긋는 것보다
   눈이 덜 피곤하다 — 선은 개수만큼 시선을 끊는다. */
.sf-rows > *:nth-child(even){ background: color-mix(in srgb, var(--sf-2) 55%, transparent); }

/* ── 학습 페이지 쪽 ──────────────────────────────────────────
   개념 카드(.lcard)는 이미 면이 있다. 여기서는 «무게»를 더한다.

   **테두리 굵기의 주인은 이 파일이다** (26.08.08 S-2).
   worksurface.css 가 `html .lcard{border-width:1px}` 로 네 변을 한꺼번에 정하고
   있었고, 특이도가 높아 아래 왼쪽 띠를 죽였다 — 실측 3px 바람 · 1px 실제.
   그쪽에서 굵기를 지웠으므로 여기가 네 변을 다 갖는다.
   `html` 을 붙이는 것은 페이지 인라인 CSS(0,0,1,0)를 넘기 위해서다. */
html .lcard{
  border-width: 1px;
  border-left-width: 3px;
  border-left-color: var(--aurora, #5EEAD4);   /* 읽는 것 */
}
/* 문제를 푸는 카드는 «하는 것»이다 — 위쪽 띠와 그림자 한 단계 */
html body[data-phase]:not([data-phase="0"]) .lcard{
  border-width: 1px;
  border-top-width: 3px;
  border-top-color: var(--ember, #5B8CFF);
  box-shadow: var(--shadow-lg, var(--sh-2));
}

/* 제시문은 문제 카드 «안»의 면이다. 한 단 더 올려 발문과 보기를 끊는다. */
.prob-q{ background: var(--sf-2) !important; }

/* ── 꽉 찬 판 위의 글자 (26.08.08 C-8) ───────────────────────
   강조색으로 판을 채우고 그 위에 **흰 글자**를 얹은 자리가 셋 있었다.
   이 저장소의 다크 강조색은 밝은 색이라 흰 글자와 대비가 안 난다.

     개념 탭 `.vt.on`      흰 글자 on #FF8C69 = **2.28:1**
     학부모 리포트 단추     흰 글자 on #5B8CFF = **3.16:1**
     분석 화면 단추        옅은 판 위 보라 글자 = **1.5:1**

   셋 다 그 화면에서 가장 중요한 자리였는데 가장 안 읽혔다.
   규칙은 하나다 — **밝은 판에는 바탕 남색 글자.** (aurora 12.9 · star 13.4 · ember 8.3)
   페이지 인라인 7벌을 고치는 대신 여기서 한 번 덮는다. */
html .vt.on{ color: var(--night, #0A0E27); }

/* ── 라이트에서 남는 어두운 판 (26.08.08 C-8) ────────────────
   `high/review.html` 과 `high/analysis.html` 의 상단 막대가
   `rgba(10,14,39,.96)` 을 **직접 적었다.** 토큰을 안 거치므로 appearance.css 가
   못 바꾸고, 라이트에서는 그 남색 위에 검은 글자가 얹혀 1.01:1 이 된다.
   `/high/` 입구에서 겪은 것과 같은 갈래다 — 인라인에 박힌 어두운 판.
   두 파일을 각각 고치는 대신 여기서 한 번 덮는다. */
html[data-appearance="light"] .bar{
  background: var(--sf-1) !important;
  border-bottom: 1px solid var(--sf-line);
}
/* 표의 숫자도 같은 막대 위에 있었다 — 색을 본문 글자색으로 되돌린다 */
html[data-appearance="light"] .bar .ttl,
html[data-appearance="light"] .bar a{ color: var(--moon); }

/* 표의 셀 배경도 같은 식으로 박혀 있었다 (`rgba(20,27,68,.85)` 등).
   라이트에서 남색 셀 위에 흐린 글자가 얹혀 1.25~2.04:1 이 됐다.
   면은 밝게, 글자는 본문색으로 되돌린다. */
html[data-appearance="light"] thead th{ background: var(--sf-2); color: var(--moon); }
html[data-appearance="light"] tbody tr.cor td{ background: var(--sf-2); }
html[data-appearance="light"] tfoot td{ background: var(--sf-2); color: var(--moon); }

/* 「0」 칸은 일부러 흐리게 둔 것이다 — 값이 없다는 뜻이라 맞는 뜻이다.
   다만 `rgba(169,180,232,.45)` 는 어두운 바탕에서만 성립한다.
   라이트에서는 1.97:1 로 사실상 안 보인다. 뜻(흐리게)은 지키고 값만 바꾼다 —
   `--mist` 가 밝기를 따라 뒤집히므로 그걸 쓰면 두 모드에서 다 읽힌다. */
html[data-appearance="light"] td.zero{ color: var(--mist); }

/* ── 테마명 아래의 2022 교육과정 이름 (26.08.08) ────────────────
   「변화의 회랑」·「증식과 되감기」는 그대로 두고, 그 아래에 실제 이름을 붙인다.
   테마명이 주인공이고 실제 이름은 **길잡이**다 — 그래서 한 단 작고 흐리게 둔다.
   지우거나 바꾸지 않는다. 학생이 교과서·시험지와 이을 수 있으면 된다.

   세 자리가 서로 다른 파일에서 그려지지만 모양은 하나여야 한다.
   그래서 여기 한 곳에 모은다 — 값의 주인이 둘이면 갈린다(S-2 에서 배운 것). */
.map-real,                        /* 학습 페이지 지도 제목 아래 */
.gate-real{                       /* 관문 이름 아래 */
  font-size: var(--fs-label, 12px);
  color: var(--mist);
  letter-spacing: .02em;
  margin-top: var(--sp-1, 2px);
}
/* 관문 머리글은 좌우 배치라, 실제 이름이 제목 «바로 아래»로 가게 줄을 바꾼다 */
.gate-head{ flex-wrap: wrap; }
.gate-real{ flex-basis: 100%; order: 2; margin-top: 0; }
.gate-count{ order: 1; }

/* ── 풀이 단계 검토 (26.08.08 P3-16~18) ──────────────────────
   맞은 줄과 틀린 줄의 무게를 다르게 둔다. 맞은 줄은 «지나가는 것»이라 옅게,
   틀린 줄은 «멈춰 볼 것»이라 왼쪽에 띠를 준다.
   색만으로 알리지 않는다 — ✓/✕ 글자와 「맞음」이 함께 있다. */
.sr-list{ list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-3,6px); }
.sr-list li{
  display:grid; grid-template-columns:auto 1fr; gap:var(--sp-4,8px);
  align-items:baseline;
  padding:var(--sp-4,8px) var(--sp-5,12px);
  border-radius:var(--r-8,8px); background:var(--sf-1);
  font-size:var(--fs-body-s,14px); line-height:1.5;
}
.sr-mk{ font-weight:700; }
.sr-ex{ font-variant-numeric:tabular-nums; }
.sr-ok{ opacity:.78; }                                  /* 지나가는 줄 */
.sr-ok .sr-mk{ color:var(--aurora,#5EEAD4); }
.sr-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.sr-no{ border-left:3px solid var(--hp-red,#FF6B6B); opacity:1; }  /* 멈춰 볼 줄 */
.sr-no .sr-mk{ color:var(--hp-red,#FF6B6B); }
.sr-why{ grid-column:2; font-size:var(--fs-label,12px); color:var(--mist); margin-top:var(--sp-2,4px); }
.sr-head{ font-weight:700; margin-bottom:var(--sp-5,12px); font-size:var(--fs-body-s,14px); }
.sr-head-ok{ color:var(--aurora,#5EEAD4); }
.sr-stop{
  margin-top:var(--sp-5,12px); padding:var(--sp-4,8px) var(--sp-5,12px);
  border-radius:var(--r-8,8px); background:var(--sf-2);
  font-size:var(--fs-label,12px); color:var(--mist); line-height:1.6;
}
.sr-none{ font-size:var(--fs-body-s,14px); color:var(--mist); }

/* ── A-1 이어받은 줄과 점수 (26.08.18) ────────────────────────
   맞은 줄(.sr-ok)과 **같은 색을 쓰지 않는다.** 초록으로 그리면
   「맞음」으로 읽히고, 그러면 잘라 내기로 막던 오해가 그대로 돌아온다.
   중립색으로 낮추고 왼쪽 선만 남겨 «이어진 줄»로 보이게 한다. */
.sr-ft{ border-left:3px solid var(--mist,#94A3B8); opacity:.9; }
.sr-ft .sr-mk{ color:var(--mist,#94A3B8); }
.sr-ftno{ border-left:3px solid var(--hp-red,#FF6B6B); opacity:.72; }
.sr-ftno .sr-mk{ color:var(--hp-red,#FF6B6B); }
.sr-score{
  display:flex; align-items:center; gap:var(--sp-4,8px); flex-wrap:wrap;
  margin:0 0 var(--sp-5,12px); padding:var(--sp-3,6px) var(--sp-5,12px);
  border-radius:var(--r-8,8px); background:var(--sf-2);
  font-size:var(--fs-body-s,14px); color:var(--mist); font-variant-numeric:tabular-nums;
}
.sr-score b{ color:var(--ink,#E2E8F0); font-size:var(--fs-body,15px); }
.sr-ft-note{ font-size:var(--fs-label,12px); opacity:.85; }

/* ── 보기 설정 (26.08.08 P2-10) ──────────────────────────────
   고른 것이 «눌린 것»으로 보여야 한다. 색만으로 안 알린다 —
   테두리와 배경이 함께 바뀌고 aria-pressed 대신 글자가 굵어진다. */
.vp-row{ display:flex; align-items:center; gap:var(--sp-3,6px); margin-bottom:var(--sp-4,8px); }
.vp-row:last-child{ margin-bottom:0; }
.vp-k{ font-size:var(--fs-label,12px); color:var(--mist); min-width:32px; }
.vp-b{
  flex:1; min-height:var(--h-chip,28px);
  border:1px solid var(--sf-line); border-radius:var(--r-8,8px);
  background:transparent; color:var(--mist);
  font-family:inherit; font-size:var(--fs-label,12px); cursor:pointer;
}
.vp-b:hover{ border-color:var(--aurora); }
.vp-b.on{
  background:var(--sf-2); border-color:var(--aurora);
  color:var(--moon); font-weight:var(--fw-bold,700);
}

/* 별탑 지도(SVG)의 회랑 이름 아래 — 글자가 아니라 도형이라 fill 로 준다 */
.twr-real{
  font-family: "Gowun Dodum", inherit;
  fill: var(--mist); font-size: 11px; pointer-events: none;
}
.twr-node.lit .twr-real{ fill: var(--moon); }