/* ============================================================ MADE LMS — 공통 디자인 시스템 _proto/styles.css 에서 **토큰과 body 기본만** 승계한다(B-9). 프로토 전용 크롬(proto-bar·디바이스 프레임·목업 토글)은 안 가져온다 — 그것들은 클릭 프로토타입의 연출 장치이지 실제 앱의 것이 아니다. ⚠ 디버그 패널 스타일은 여기 없다. debug.js 가 자기 CSS를 안에 담는다 — 그래야 운영에서 그 파일 하나를 빼면 도구가 통째로 사라진다(M-L A안). ============================================================ */ @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"); :root{ --red:#f0333e; --ink:#353535; --mute:#8f8b86; --faint:#b5b0aa; --line:#e2dfdb; --line2:#ececea; --line3:#f1efec; --ok:#1e8a53; --ok-bg:#e9f6ef; --warn:#c9871d; --warn-bg:#fdf3e2; --red-bg:#fdeaeb; --card:#f7f7f7; --seg:#ebe9e5; --bg:#eceae6; --panel:#fbfaf9; } *{box-sizing:border-box} html,body{margin:0} body{ background:var(--bg); font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,sans-serif; color:var(--ink); -webkit-font-smoothing:antialiased; } /* ---------- 진입 화면 ---------- 가운데 카드 한 장 골격이다. 인증층(B-6b)의 로그인 폼이 .entry-card 안에 그대로 얹히도록 카드 바깥(중앙 정렬·배경·여백)과 안쪽을 갈라 두었다. */ .entry{ min-height:100vh; display:flex;align-items:center;justify-content:center; padding:24px; } .entry-card{ width:100%;max-width:380px; background:var(--panel); border:1px solid var(--line2); border-radius:18px; padding:36px 28px; text-align:center; } .entry-card .brand{ margin:0 0 18px; font-size:22px;font-weight:800;letter-spacing:-.3px; } .entry-card .brand-r{color:var(--red)} .entry-card h1{ margin:0 0 12px; font-size:16px;font-weight:700; } .entry-card .lead{ margin:0 0 20px; font-size:13.5px;line-height:1.7;color:var(--mute); } .entry-card .note{ margin:0;padding-top:18px; border-top:1px solid var(--line3); font-size:12.5px;line-height:1.6;color:var(--faint); } .entry-card .note b{color:var(--ink)} /* ============================================================ 데스크톱 셸 · 리스트 컴포넌트 (B-16) _proto/styles.css(136행 근방)에서 옮겨 심었다. desk/org.html·director/teachers.html 둘 다 같은 셸을 쓰므로 이번부터 공용화가 맞다 — login.html이 화면 내 인라인 스타일을 쓴 전례("화면이 지금 하나라서다")는 화면이 둘인 지금 그 조건이 깨진다. ============================================================ */ .desk-shell{width:min(1180px,100%);background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 2px 16px rgba(0,0,0,.07);display:flex;flex-direction:column} .shell-topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 22px;border-bottom:1px solid var(--line3)} .shell-topbar .brand{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:700} .shell-topbar .brand .sep{color:var(--line)} .shell-main{display:grid;grid-template-columns:216px 1fr;min-height:580px} .shell-side{border-right:1px solid var(--line3);background:var(--panel);padding:14px 12px;display:flex;flex-direction:column;gap:3px} .shell-side .sect{font-size:11px;font-weight:700;color:var(--mute);padding:10px 12px 4px;letter-spacing:.3px} .shell-side a{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:10px;text-decoration:none;color:var(--ink);font-size:14px;font-weight:600} .shell-side a .ic{width:18px;text-align:center;flex:none} .shell-side a:hover{background:#fff} .shell-side a.on{background:var(--ink);color:#fff} .shell-content{padding:26px 30px;min-width:0} .shell-content .ct-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:18px;gap:12px} .shell-content .ct-head h1{margin:0;font-size:20px;font-weight:800} .avatar{width:32px;height:32px;border-radius:50%;background:var(--seg);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700} /* ---------- 칩 / 배지 ---------- */ .chip{display:inline-block;padding:7px 15px;border-radius:999px;font-size:13px;font-weight:600;background:#fff;border:1px solid var(--line);color:var(--mute);cursor:pointer;text-decoration:none} .chip.on{background:var(--ink);color:#fff;border-color:var(--ink)} .badge{display:inline-block;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px} .badge.ok{color:var(--ok);background:var(--ok-bg)} .badge.warn{color:var(--warn);background:var(--warn-bg)} .badge.red{color:var(--red);background:var(--red-bg)} .badge.mute{color:var(--mute);background:var(--line3)} /* ---------- 카드 / 리스트 / 행 ---------- */ .card{background:#fff;border:1px solid var(--line2);border-radius:16px;padding:16px} .card + .card{margin-top:12px} .list{background:#fff;border:1px solid var(--line2);border-radius:16px;overflow:hidden} .row{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line3);text-decoration:none;color:inherit} .list .row:last-child{border-bottom:0} .row:hover{background:var(--panel)} .row .t{font-size:15px;font-weight:700} .row .s{font-size:12.5px;color:var(--mute);margin-top:2px} .muted{color:var(--mute)} /* ---------- 버튼 ---------- */ .btn{display:flex;align-items:center;justify-content:center;min-height:52px;border-radius:12px;font-size:16px;font-weight:700;text-decoration:none;cursor:pointer;border:1.5px solid transparent} .btn.dark{background:var(--ink);color:#fff} .btn.outline{background:#fff;border-color:var(--red);color:var(--red)} .btn.ghost{background:#fff;border-color:var(--line);color:var(--mute);font-weight:600} .btn.sm{min-height:46px;font-size:15px;border-radius:11px} /* 작은 보조 버튼 — 표 행의 「수정」, 머리의 「+ 등록」 등. R1-a(#247)로 org·students의 지역 정의 2벌을 승격했다(둘이 문자 단위 동일이었다 — 값이 갈리기 전에 걷었다). */ .btn-mini{font-size:12.5px;font-weight:600;color:var(--mute);border:1px solid var(--line);border-radius:8px;padding:5px 12px;cursor:pointer;background:#fff;font-family:inherit} .btn-mini.primary{color:var(--ink);border-color:var(--ink)} /* 사이드바 하단 로그아웃 — .page-side의 .who 아래. login.html #logout과 같은 톤(mute·line). R1-a(#247)로 org·students·teachers의 지역 정의 3벌을 승격했다(셋이 문자 단위 동일이었다). ⚠ 모바일 헤더의 .logout-mini(이 파일 아래)와는 다른 컴포넌트다 — 자리도 크기도 다르다. */ .logout-btn{margin:10px 12px 0;padding:9px 12px;font:inherit;font-size:13px; color:var(--mute);background:#fff;border:1px solid var(--line);border-radius:10px;cursor:pointer} .logout-btn:hover{background:var(--panel)} /* ---------- 입력 필드 ---------- */ .field{background:#fff;border:1px solid var(--line);border-radius:12px;padding:15px 16px;font-size:15px;color:var(--faint)} .field.filled{color:var(--ink)} .label{font-size:12.5px;font-weight:600;color:var(--mute);margin:0 0 8px} .stack{display:flex;flex-direction:column;gap:10px} /* ---------- 반응형(디버그 디바이스 강제 토글과 호환) ---------- */ html[data-device="mobile"] .desk-shell{width:390px} html[data-device="mobile"] .shell-main{grid-template-columns:1fr} html[data-device="mobile"] .shell-side{display:none} html[data-device="mobile"] .shell-content{padding:16px} html[data-device="mobile"] .shell-content .ct-head{flex-direction:column;align-items:flex-start;gap:6px} /* ============================================================ 전체 페이지 셸 (B-16, 2026-08-13 마스터 지시로 개정) .entry는 "카드 한 장을 화면 가운데 띄우는" 로그인 전용 골격이다 (min-height:100vh; align-items:center; justify-content:center). 관리 화면을 그 안에 넣고 인라인 스타일로 정렬만 뒤집어 쓰면 껍데기를 이겨 쓰는 모양이 된다 — 목업이 원래 쓰던 골격(_proto/director/teachers.html:19, 사이드바가 뷰포트 높이를 채우고 본문이 나머지를 먹는 구조)과 다르다. .page-shell이 그 골격을 담는 자리다. ⚠ .desk-shell(카드형)과는 다른 컴포넌트다 — 카드형이 필요한 화면(로그인류)은 .entry/.desk-shell을, 뷰포트 전체를 쓰는 관리 화면은 .page-shell을 쓴다. ============================================================ */ .page-shell{min-height:100vh;display:flex;background:var(--bg)} .page-side{width:220px;flex:none;background:#fff;border-right:1px solid var(--line3);padding:22px 14px 18px;display:flex;flex-direction:column;gap:3px} .page-side .logo-row{font-size:19px;font-weight:800;letter-spacing:-.4px;padding:0 12px 18px} .page-side .sect{font-size:11px;font-weight:700;color:var(--mute);padding:10px 12px 4px;letter-spacing:.3px} .page-side a{display:block;padding:11px 14px;border-radius:10px;font-size:14.5px;font-weight:500;color:var(--mute);text-decoration:none} .page-side a:hover{background:var(--panel)} .page-side a.on{font-weight:700;background:var(--ink);color:#fff} .page-side .spacer{flex:1} .page-side .who{display:flex;align-items:center;gap:10px;padding:12px 12px 0;border-top:1px solid var(--line3);margin-top:8px} .page-side .who .name{font-size:13.5px;font-weight:700} /* 부제(브랜드+지점명) — line-height·min-height 가 **빈 칸의 자리를 지킨다**(#284 · manager 판정 2026-10-07, 원장 2983). 이 두 값 없이는 좌하단 묶음이 화면 뜨는 순간 통째로 뛴다: · 그 값은 /api/branches 왕복 뒤에 오므로 **첫 그림에서는 이 칸이 비어 있고**, 빈 블록은 줄상자가 없어 높이가 0 이다 — 그래서 글자통이 「한 줄」에서 「두 줄」로 자란다. · .who 가 align-items:center 라 그 블록 높이 = max(.avatar 32px, 글자통) + 패딩 12px 이다. 글자통 두 줄이 32px 을 넘는 순간부터 블록이 자라고, 넘는지는 **line-height:normal 이 폰트 메트릭으로 얼마가 되느냐**에 달렸다 — 13.5px+12px 의 1.2 배가 30.6px 라 **여유가 1.4px 뿐이고, 한글 폰트의 normal 은 그보다 크기 쉽다.** 재지 않고는 못 닫는 값이다. · 그리고 .who 는 .spacer{flex:1} 뒤라 자라면 **아바타·이름·로그아웃이 통째로 위로 뛴다.** 사이드바 맨 아래여서 눈에 띈다. ⇒ 빈 칸에 한 줄치를 미리 잡아 두면 normal 이 무엇으로 풀리든 **높이가 변할 수 없다.** ⛔ line-height 를 함께 못 박는 것이 핵이다 — 안 박으면 min-height(15px)와 실제 줄 높이가 갈려 그 차이만큼 여전히 움직인다. 둘은 한 몸이라 따로 지우지 마라. ⚠ **차 있을 때의 모양은 안 바뀐다** — 값이 한 줄짜리(「메이드 미리내」)라 min-height 가 안 걸린다. ⚠ 이 둘은 **색·크기 토큰이 아니라 레이아웃 계약**이다. 전에는 그 계약을 폰트 메트릭에 맡겨 두고 있었고(전역 line-height 가 없다), 그것이 위 1.4px 의 원인이다 — 값을 발명한 것이 아니라 비어 있던 계약을 채운 것이다(manager 판정). */ .page-side .who .sub{font-size:12px;color:var(--mute);line-height:1.25;min-height:1.25em} /* 이름 옆 역할(#284) — 이름(13.5px·700)보다 약해야 이름의 일부로 안 읽힌다. 값은 새로 만들지 않고 이 파일에 이미 선 톤을 빌렸다: 12px·mute 는 바로 위 .sub 와 같고, 500 은 .page-side a 와 같다. */ .page-side .who .name .role{font-size:12px;font-weight:500;color:var(--mute);margin-left:5px} .page-main{flex:1;min-width:0;display:flex;flex-direction:column} .page-topbar{display:flex;justify-content:space-between;align-items:center;background:#fff;border-bottom:1px solid var(--line2);padding:15px 28px} .page-topbar h1{margin:0;font-size:18px;font-weight:800;letter-spacing:-.3px} .page-topbar .sub{font-size:13.5px;font-weight:500;color:var(--mute);margin-left:8px} .page-body{flex:1;min-height:0;display:flex;flex-direction:column} /* ============================================================ 데스크 목록 표 · 필터 줄 (R1-a · #247) director/teachers.html의 `.t-*`와 desk/students.html의 `.s-*`가 **접두어만 다른 동형** 이었다(골격 5선언이 문자 단위 동일). 게다가 두 화면에 다 있는 `.c-name`이 110px vs 96px로 **값이 갈리기 시작한 상태**였다 — 이름을 `.dlist-*` 하나로 모으고 갈린 값을 여기서 정한다. ⚠ 칸 폭은 원칙적으로 화면 소유다. 두 화면에 **다 있는** `.c-name`·`.c-status`만 여기 두고, 한 화면에만 있는 칸(`.c-subject`·`.c-classes`·`.c-grade`·`.c-enroll` 등)과 자리(margin), 행 선택 연출(cursor·hover·.on)은 각 화면의 `