:root {
	--bg: #f6f6f4;
	--panel: #ffffff;
	--panel2: #f1f0ec;
	--line: #e3e2dd;
	--ink: #1d1d1b;
	--ink2: #5f5e5a;
	--ink3: #8f8e88;
	--accent: #185fa5;
	--accent-bg: #e6f1fb;
	--ok: #0f6e56;
	--ok-bg: #e1f5ee;
	--bad: #a32d2d;
	--bad-bg: #fcebeb;
	--warn: #854f0b;
	--warn-bg: #faeeda;
	--g1: #534ab7;
	--g1-bg: #eeedfe;
	--g2: #0f6e56;
	--g2-bg: #e1f5ee;
	--g3: #993c1d;
	--g3-bg: #faece7;
	--radius: 10px;
}

[data-theme="dark"] {
	--bg: #16161a;
	--panel: #202024;
	--panel2: #2a2a2f;
	--line: #35353b;
	--ink: #ececea;
	--ink2: #a8a7a2;
	--ink3: #7a7975;
	--accent: #85b7eb;
	--accent-bg: #0c447c;
	--ok: #9fe1cb;
	--ok-bg: #085041;
	--bad: #f09595;
	--bad-bg: #791f1f;
	--warn: #fac775;
	--warn-bg: #633806;
	--g1: #afa9ec;
	--g1-bg: #3c3489;
	--g2: #9fe1cb;
	--g2-bg: #085041;
	--g3: #f0997b;
	--g3-bg: #712b13;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: "Pretendard", -apple-system, "Segoe UI", "Malgun Gothic", sans-serif;
	font-size: 15px;
	line-height: 1.6;
	-webkit-text-size-adjust: 100%;
}

.jp {
	font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif;
	line-height: 2.1;
}

ruby rt {
	font-size: .5em;
	color: var(--ink2);
	font-weight: 400;
	letter-spacing: 0;
}

.wrap { max-width: 860px; margin: 0 auto; padding: 0 16px 64px; }

/* 헤더 */
.top {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--bg);
	border-bottom: 1px solid var(--line);
}
.top-in {
	max-width: 860px;
	margin: 0 auto;
	padding: 10px 16px;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.brand { font-size: 16px; font-weight: 600; margin-right: auto; }
.brand span { color: var(--accent); }

.seg { display: flex; gap: 2px; background: var(--panel2); padding: 3px; border-radius: 8px; }
.seg button {
	border: 0; background: none; color: var(--ink2);
	font: inherit; font-size: 13px; padding: 5px 11px;
	border-radius: 6px; cursor: pointer;
}
.seg button.on { background: var(--panel); color: var(--ink); font-weight: 600; }

.tabs {
	max-width: 860px; margin: 0 auto;
	padding: 0 16px 8px;
	display: flex; gap: 4px; overflow-x: auto;
}
.tabs button {
	border: 0; background: none; color: var(--ink2);
	font: inherit; font-size: 13.5px; padding: 6px 12px;
	border-radius: 8px; cursor: pointer; white-space: nowrap;
}
.tabs button.on { background: var(--accent-bg); color: var(--accent); font-weight: 600; }

/* 공통 */
.card {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 18px;
	margin-top: 12px;
}
.muted { color: var(--ink2); font-size: 13px; }
.tiny { color: var(--ink3); font-size: 12px; }

.btn {
	border: 1px solid var(--line);
	background: var(--panel);
	color: var(--ink);
	font: inherit; font-size: 14px;
	padding: 9px 14px;
	border-radius: var(--radius);
	cursor: pointer;
}
.btn:hover { background: var(--panel2); }
.btn.pri { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.btn.pri:hover { filter: brightness(1.08); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.sm { padding: 6px 10px; font-size: 13px; }

.pill {
	display: inline-block; font-size: 11.5px; font-weight: 600;
	padding: 2px 9px; border-radius: 20px;
}
.pill.g1 { background: var(--g1-bg); color: var(--g1); }
.pill.g2 { background: var(--g2-bg); color: var(--g2); }
.pill.g3 { background: var(--g3-bg); color: var(--g3); }
.pill.i { background: var(--g3-bg); color: var(--g3); }
.pill.na { background: var(--g1-bg); color: var(--g1); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.acc { background: var(--accent-bg); color: var(--accent); }

.note {
	margin-top: 12px; padding: 10px 12px;
	border-radius: var(--radius);
	background: var(--warn-bg); color: var(--warn);
	font-size: 13.5px; line-height: 1.6;
}
.note.ok { background: var(--ok-bg); color: var(--ok); }
.note.bad { background: var(--bad-bg); color: var(--bad); }

/* 홈 */
.stats { display: flex; gap: 10px; margin-top: 12px; }
.stat { flex: 1; background: var(--panel2); border-radius: var(--radius); padding: 10px 12px; }
.stat b { display: block; font-size: 22px; font-weight: 600; line-height: 1.3; }

.mods { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin-top: 12px; }
.mod {
	background: var(--panel); border: 1px solid var(--line);
	border-radius: 12px; padding: 14px; cursor: pointer; text-align: left;
	font: inherit; color: inherit;
}
.mod:hover { border-color: var(--accent); }
.mod h3 { margin: 0 0 2px; font-size: 15px; font-weight: 600; }
.bar { height: 4px; background: var(--panel2); border-radius: 4px; margin-top: 10px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--accent); }

/* 학습 카드 */
.word-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.word { font-size: 30px; }
.steps { display: flex; align-items: center; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.step {
	flex: 1 1 110px; min-width: 0;
	background: var(--panel2); border-radius: var(--radius);
	padding: 8px 10px; text-align: center;
}
.step.hi { background: var(--accent-bg); }
.step.hi .sv { color: var(--accent); }
.step.done { background: var(--ok-bg); }
.step.done .sv { color: var(--ok); }
.st { font-size: 11.5px; color: var(--ink3); }
.step.hi .st { color: var(--accent); }
.step.done .st { color: var(--ok); }
.sv { font-size: 19px; }
.arw { color: var(--ink3); flex: 0 0 auto; }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 6px; margin-top: 14px; }
.form-grid button {
	border: 1px solid var(--line); background: var(--panel); color: var(--ink2);
	font: inherit; font-size: 13px; padding: 7px 6px; border-radius: 8px; cursor: pointer;
	text-align: center; line-height: 1.35;
}
.form-grid button.on { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.form-grid small { display: block; font-size: 11px; opacity: .75; }

.row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: 0; }
.row .lbl { font-size: 12.5px; color: var(--ink2); width: 78px; flex: 0 0 auto; }

.actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.actions .btn { flex: 1 1 100px; }

/* 퀴즈 */
.qbar { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink3); }
.qtarget { text-align: center; margin: 18px 0 6px; }
.qask { font-size: 13.5px; color: var(--ink2); }
.qask b { color: var(--accent); }
.qword { font-size: 34px; margin-top: 4px; }
.ansrow { display: flex; gap: 8px; margin-top: 16px; }
.inp {
	flex: 1; min-width: 0;
	border: 1px solid var(--line); background: var(--panel);
	color: var(--ink); font: inherit; font-size: 20px;
	padding: 10px 12px; border-radius: var(--radius); text-align: center;
}
.inp:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-top: 16px; }
.choices button {
	border: 1px solid var(--line); background: var(--panel); color: var(--ink);
	font: inherit; font-size: 16px; padding: 12px 8px; border-radius: var(--radius); cursor: pointer;
}
.choices button:hover { border-color: var(--accent); }
.choices button.ok { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
.choices button.bad { background: var(--bad-bg); border-color: var(--bad); color: var(--bad); }
.choices button:disabled { cursor: default; }

/* 단어장 */
.filters { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.filters input {
	flex: 1 1 180px; border: 1px solid var(--line); background: var(--panel);
	color: var(--ink); font: inherit; padding: 8px 12px; border-radius: var(--radius);
}
.dict { margin-top: 12px; }
.dict-row {
	display: flex; align-items: center; gap: 12px;
	padding: 9px 4px; border-bottom: 1px solid var(--line); cursor: pointer;
}
.dict-row:hover { background: var(--panel2); }
.dict-row .dw { font-size: 19px; flex: 0 0 auto; min-width: 130px; }
.dict-row .dm { font-size: 13.5px; color: var(--ink2); flex: 1; }

.empty { text-align: center; color: var(--ink3); padding: 40px 0; font-size: 14px; }
.hidden { display: none !important; }

@media (max-width: 560px) {
	.steps { flex-direction: column; align-items: stretch; }
	.steps .arw { display: none; }
	.step { display: flex; justify-content: space-between; align-items: center; text-align: left; }
	.word { font-size: 26px; }
	.qword { font-size: 28px; }
	.stats { flex-wrap: wrap; }
}