/* 관문·전공을 고르는 공용 UI (260909)
*
* 🔴 **KMLE 를 포함한 모든 화면에 실린다**(head 계열 4곳에서 조건 없이 싣는다).
* `line.css` 와 다른 점이 이것이다. 여기 있는 두 장치는 KMLE 에서도 쓰이기 때문이다 —
* 관문 탭 목록 화면 전부(커뮤니티·QnA·공지·내서재). KMLE 화면에도 붙는다
* 전공 고르기 구매 화면은 **통합**이라 KMLE 에서 열어도 전문의 상품이 보인다
*
* 🔴🔴 **변수(`var(--gold)` 등)를 쓰지 마라. 값을 직접 적는다.**
* 그 변수들은 `line.css` 가 정의하는데 그 파일은 **KMLE 에 안 실린다.** 변수를 쓰면
* KMLE 에서 색이 통째로 빠진다.
* 🔴🔴 **치수를 `rem` 으로 쓰지 마라. `px` 로 쓴다.**
* 부트스트랩 3 이 `html{font-size:10px}` 을 건다. 그것을 되돌리는 `html{font-size:16px}` 는
* `line.css` 안에 있어 KMLE 에는 없다. rem 을 쓰면 **KMLE 에서만 62.5% 로 쪼그라든다.**
*
* 어휘를 한 벌로 두는 이유 — 같은 것을 고르는 화면이 여럿이다.
* 전공 고르기 학습이력(⑦) · 셀프모의고사(⑤) · 구매(⑨)
* 관문 고르기 내서재(⑦) · 커뮤니티·QnA·공지(⑥)
* **어휘가 다르면 사용자가 화면마다 새로 배운다.**
*/
/* ══ 관문 고르기 탭 ═══════════════════════════════════════════════════
* 조각 — views/common/element/lineTabs.ejs
* 🔴 기본값이 **지금 있는 관문**이라 처음 보는 화면은 언제나 내용이 있는 탭이다.
* 그래서 "빈 탭이 고장처럼 보인다" 는 문제가 없다(260909 대표님 재확정).
* ⚠️ 준비 중인 관문도 **탭에 남긴다.** 지우면 "언젠가 열린다" 는 것을 알 방법이 없다.
* 대신 흐리게 두고 건수로 알린다. */
.lineTabs {
display: flex; flex-wrap: wrap; gap: 6px;
margin: 0 0 16px; padding: 0;
}
.lineTab {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 14px; border-radius: 99px;
border: 1px solid #ddd; background: #fff; color: #666;
font-size: 13px; font-weight: 500; line-height: 1.2;
text-decoration: none; white-space: nowrap;
transition: border-color .15s, color .15s, background .15s;
}
.lineTab:hover, .lineTab:focus { text-decoration: none; color: #222; border-color: #bbb; }
.lineTab > b {
font-weight: 600; font-size: 11px; color: #8a8f9c;
background: #f1f2f5; border-radius: 99px; padding: 1px 7px;
font-variant-numeric: tabular-nums;
}
/* 지금 보고 있는 관문 — **한 눈에 보여야 한다.** 어디를 보고 있는지가 이 장치의 전부다. */
.lineTab.on {
background: #2b2823; border-color: #2b2823; color: #fff; font-weight: 600;
}
.lineTab.on > b { background: rgba(255,255,255,.18); color: #fff; }
/* 준비 중 — 눌러는 볼 수 있다. 들어가면 '준비 중' 안내가 뜬다. */
.lineTab.soon { border-style: dashed; color: #999; }
.lineTab.soon > b { background: #f6f6f8; }
/* 0건 — 눌러도 빈 목록이라 흐리게. ⚠️ 감추지는 않는다. 없다는 것도 정보다. */
.lineTab.empty { opacity: .5; }
.lineTab.empty.on { opacity: 1; }
@media (max-width: 619px) {
.lineTabs { gap: 5px; margin-bottom: 12px; }
.lineTab { padding: 6px 11px; font-size: 12px; }
}
/* ══════════════════════════════════════════════════════════════════════
* 전공 고르기 — 셀프모의고사(⑤) · 학습이력(⑦) · 구매(⑨) 가 함께 쓴다
* 시안 — docs/mockup/line-design-all-v1.html 의 `#selftest` 화면
*
* 🔴 **왜 이 장치인가** — 전공의 전공이 **26개**까지 간다. 알약 탭으로는 한 줄에 못 넣고,
* 가로 스크롤 띠는 **5~7개가 한계**라 26개를 옆으로 밀어 놓으면 지금 무엇이 있는지
* 보이지 않아 고를 수가 없다. 그래서 **접힌 줄 하나 + 펼치면 카드 그리드**로 간다.
* 이것은 **문제 목록의 '과목 선택' 과 같은 장치**다. 새 어휘를 만들지 않았다.
* ⚠️ 라벨은 **'전공'** 이다(260908 대표님 지시). 의사의 전공이 가정의학과·내과이고
* **그 아래가 과목**(순환기·소화기…)이다. 앞서 두 단이 다 '과목' 이라 뜻이 뭉개졌다.
* ⚠️ **KMLE 은 지금의 `All / Basic / Essential` 알약 그대로 둔다.** 셋뿐이라 문제가 없다.
*
* ── ⑤ 에게: 마크업 계약 ────────────────────────────────────────────
* 래퍼 `.lineSel` 이 **반드시** 있어야 한다. 여기에 CSS 변수가 걸려 있어서,
* 없으면 `#c9a227` 가 안 풀려 **색이 전부 빠진다.**
* 라인일 때만 씌운다 — `line && line !== 'kmle'`.
*
*