/* 들어오는 화면들(로그인 · 수업 고르기)
   판 하나에 담는다: 표식 → 제목 → 할 일 하나 → 조용한 다른 길.
   파란색은 화면에 한 번만 쓴다(그 화면의 주된 버튼). 나머지는 테두리와 회색으로. */
:root {
	--ui: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Apple SD Gothic Neo", "Segoe UI", sans-serif;
	--mono: "SF Mono", ui-monospace, Menlo, "Geist Mono", Consolas, monospace;
	--page: #f5f5f7;        /* 판 뒤의 바탕 */
	--card: #ffffff;
	--field: #f5f5f7;
	--line: #d8d8dd;
	--line-2: #e8e8ed;
	--ink: #1d1d1f;
	--sub: #6e6e73;
	--faint: #86868b;
	--blue: #0071e3;
	--blue-2: #0077ed;
	--red: #d70015;
	--shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 28px rgba(0, 0, 0, .06);
	color-scheme: light;
}
@media (prefers-color-scheme: dark) {
	:root {
		--page: #000000;
		--card: #1c1c1e;
		--field: #2c2c2e;
		--line: #48484a;
		--line-2: #38383a;
		--ink: #f5f5f7;
		--sub: #98989d;
		--faint: #8e8e93;
		--blue: #0a84ff;
		--blue-2: #3b9bff;
		--red: #ff453a;
		--shadow: none;
		color-scheme: dark;
	}
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
	font-family: var(--ui); font-size: 15px; color: var(--ink); background: var(--page);
	letter-spacing: -.2px; -webkit-font-smoothing: antialiased; line-height: 1.5;
	display: grid; place-items: center; padding: 24px;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input { font: inherit; }
a { color: inherit; }

.card {
	width: min(100%, 400px); padding: 36px 32px 28px;
	background: var(--card); border: 1px solid var(--line-2); border-radius: 20px; box-shadow: var(--shadow);
}
body.wide .card { width: min(100%, 560px); padding: 32px; }

/* 판 맨 위: 표식 하나만 가운데. 이름 글자는 안 쓴다 - 제목이 이미 무슨 화면인지 말해 준다 (Apple 로그인 판처럼) */
.brand { display: flex; justify-content: center; margin-bottom: 18px; }
.brand .mark { width: 48px; height: 48px; border-radius: 14px; background: var(--blue); display: grid; place-items: center; box-shadow: 0 6px 18px color-mix(in srgb, var(--blue) 35%, transparent); }
.brand .mark svg { width: 28px; height: 28px; }

h1 { font-size: 25px; font-weight: 600; letter-spacing: -.5px; margin: 0 0 6px; line-height: 1.25; text-wrap: balance; }
.lede { font-size: 14px; color: var(--sub); margin: 0 0 24px; text-wrap: balance; word-break: keep-all; }   /* 한글이 낱말 중간에서 끊기지 않게 */
/* 초대 링크로 와서 수업 카드가 보이면 그게 주인공 - 파란 표식이 둘 겹치니 우리 표식은 숨긴다 */
.brand:has(+ .room:not([hidden])) { display: none; }
/* 표식이 가운데 있는 판(들어가기·새 비밀번호)은 제목도 가운데. 홈·계정 판은 왼쪽 그대로 */
.brand ~ h1, .brand ~ .lede { text-align: center; }

/* 초대 링크로 온 사람에게: 어느 수업인지가 먼저 */
.room { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; padding: 12px 14px; border-radius: 12px; background: var(--field); }
.room .rm { width: 34px; height: 34px; border-radius: 9px; background: var(--blue); display: grid; place-items: center; flex-shrink: 0; }
.room .rm svg { width: 20px; height: 20px; }
.room b { display: block; font-size: 15px; font-weight: 600; }
.room span { display: block; font-size: 13px; color: var(--sub); }

.pane { display: none; } .pane.on { display: flex; flex-direction: column; gap: 8px; }
input[type=text], input[type=password] {
	width: 100%; height: 44px; padding: 0 14px; outline: none;
	border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); font-size: 15px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
input::placeholder { color: var(--faint); }
input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent); }

/* 버튼은 두 단만: 이 화면의 할 일(파랑) · 다른 길(테두리) */
.go, .alt {
	width: 100%; height: 44px; border-radius: 10px;
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	font-size: 15px; font-weight: 500; transition: background .15s ease, border-color .15s ease;
}
.go { margin-top: 6px; background: var(--blue); color: #fff; }
.go:hover { background: var(--blue-2); }
.go:active { transform: scale(.995); }
.go[disabled] { background: var(--field); color: var(--faint); cursor: default; }
.alt { border: 1px solid var(--line); color: var(--ink); }
.alt:hover { background: var(--field); }
.alt svg { width: 17px; height: 17px; fill: currentColor; }
.go.sm, .alt.sm { width: auto; height: 44px; margin: 0; padding: 0 20px; flex-shrink: 0; }

.msg { margin: 14px 0 0; min-height: 20px; font-size: 13px; color: var(--red); }
.msg.ok { color: var(--sub); }

.others { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.foot { margin: 18px 0 0; text-align: center; font-size: 13.5px; color: var(--sub); }
.lnk { font-size: inherit; color: var(--blue); font-weight: 500; }
.lnk:hover { text-decoration: underline; }

/* ── 수업 고르기 ────────────────────────────────────────────────────────── */
.who { display: flex; align-items: center; gap: 11px; margin-bottom: 26px; }
.who .av { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: var(--field); color: var(--sub); }
.who .av svg { width: 60%; height: 60%; fill: currentColor; }
.who b { display: block; font-size: 15px; font-weight: 600; }
.who span { display: block; font-size: 13px; color: var(--sub); }
.who .out { margin-left: auto; font-size: 13.5px; color: var(--sub); text-decoration: none; }
.who .out:hover { color: var(--ink); text-decoration: underline; }

h2 { font-size: 13px; font-weight: 600; color: var(--faint); margin: 0 0 9px; }
.block { margin-bottom: 26px; }
.block:last-of-type { margin-bottom: 0; }
.row { display: flex; gap: 8px; }
.row input { flex: 1; min-width: 0; }
.hint { margin: 9px 0 0; font-size: 13px; color: var(--faint); }

.list { display: flex; flex-direction: column; gap: 8px; }
.list .empty { margin: 0; font-size: 14px; color: var(--faint); }
.item {
	display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 10px 13px 14px;
	border: 1px solid var(--line-2); border-radius: 12px; background: var(--card); text-align: left; cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}
.item:hover { background: var(--field); border-color: var(--line); }
.item:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.item .nm { font-size: 15px; font-weight: 600; }
.item .sub { font-size: 13px; color: var(--sub); margin-left: auto; white-space: nowrap; }
.item .copy { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--faint); flex-shrink: 0; }
.item .copy:hover { background: var(--line-2); color: var(--ink); }
.item .copy svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.item .arrow { color: var(--faint); font-size: 15px; }

/* 수업 줄의 "…" 메뉴 */
.rmenu { position: absolute; z-index: 20; min-width: 170px; padding: 6px; border-radius: 12px; background: var(--card); border: 1px solid var(--line-2); box-shadow: 0 8px 28px rgba(0, 0, 0, .18); display: flex; flex-direction: column; gap: 2px; }
.rmenu button { height: 36px; padding: 0 12px; border-radius: 8px; text-align: left; font-size: 14px; }
.rmenu button:hover { background: var(--field); }
.rmenu button.danger { color: var(--red); }
.rmenu button.danger:hover { background: color-mix(in srgb, var(--red) 10%, transparent); }
.who .out + .out { margin-left: 14px; }