/*!
 * ec.css — 사이트 3 시험일정
 * 테마를 가리지 않도록 ec- 클래스로만 쓴다. 색은 currentColor 기준으로 잡아
 * 테마의 글자색을 따라간다.
 */

/*
 * ⚠ 값은 여기 없다 — 디자인 시스템(--wd-*)을 잇는다 (Stage 13, calc-ui.css 주석 참고).
 *
 * ⚠ :root 에 정의하는 이유: 처음에 .ec-box 범위에 뒀더니, .ec-box 자손이
 *   아닌 첫 화면 카드(.ec-card)에서 var(--ec-open-solid) 가 **미정의**가
 *   됐다. background: var(미정의) 는 조용히 투명이 되고, 흰 글자 배지가
 *   흰 카드 위에서 보이지 않았다 (2026-08-06 운영 스크린샷에서 발견 —
 *   글자 추출 검사는 보이지 않는 글자도 읽어서 못 잡는다).
 *   --ec- 접두사라 :root 에 둬도 부딪힐 것이 없다.
 */
:root {
	--ec-border: var(--wd-border, rgba(127, 127, 127, 0.35));
	--ec-surface: var(--wd-bg, rgba(127, 127, 127, 0.07));
	--ec-muted: var(--wd-muted, color-mix(in srgb, currentColor 70%, transparent));
	--ec-open: var(--wd-success, #1a7f37);
	--ec-accent: var(--wd-primary, #1f6feb);
	--ec-ok: var(--wd-success, #1a7f37);
	--ec-warn: var(--wd-warning, #a06800);
	--ec-bad: var(--wd-danger, #b3261e);
	/* 흰 글자를 얹는 바탕(배지·버튼) — wd 값은 흰 글자 대비를 검사가 보증한다. */
	--ec-open-solid: var(--wd-success, #1a7f37);
	--ec-accent-solid: var(--wd-primary, #1f6feb);
}

.ec-box {
	margin: 1.75rem 0;
	padding: 1rem 1.1rem;
	border: 1px solid var(--ec-border);
	border-radius: 10px;
	background: var(--ec-surface);
	line-height: 1.7;
}

.ec-box p {
	margin: 0 0 0.5rem;
}

.ec-box p:last-child {
	margin-bottom: 0;
}

.ec-badge {
	display: inline-block;
	margin-right: 0.4rem;
	padding: 0.1rem 0.5rem;
	border: 1px solid var(--ec-border);
	border-radius: 999px;
	font-size: 0.78rem;
	white-space: nowrap;
}

.ec-badge--open {
	color: #fff;
	background: var(--ec-open-solid);
	border-color: var(--ec-open-solid);
}

.ec-now strong,
.ec-next strong {
	font-variant-numeric: tabular-nums;
}

.ec-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.9rem;
}

.ec-btn {
	display: inline-block;
	padding: 0.45rem 0.9rem;
	color: #fff;
	background: var(--ec-accent-solid);
	border-radius: 6px;
	font-size: 0.92rem;
	text-decoration: none;
}

.ec-btn:hover {
	text-decoration: underline;
}

.ec-hint,
.ec-stamp {
	font-size: 0.8rem;
	color: var(--ec-muted);
}

.ec-stamp {
	margin-top: 0.6rem;
}

/* 내 시험 플래너 (Stage 13) */
.ec-planner__add { display: grid; grid-template-columns: 1fr auto; gap: .6rem; align-items: end; }
.ec-btn { padding: .5rem .9rem; font: inherit; font-size: .92rem; cursor: pointer;
	color: inherit; background: var(--ec-surface); border: 1px solid var(--ec-border); border-radius: 6px; }
.ec-btn:hover { border-color: var(--ec-accent); }
.ec-btn--quiet { font-size: .85rem; padding: .35rem .7rem; }
.ec-planner__msg { margin: .5rem 0 0; font-size: .88rem; min-height: 1.2em; }
.ec-planner__msg--ok { color: var(--ec-ok); }
.ec-planner__msg--warn { color: var(--ec-warn); }
.ec-warn { margin: .6rem 0; padding: .5rem .7rem; font-size: .88rem;
	background: var(--ec-surface); border-left: 3px solid var(--ec-warn); border-radius: 6px; }
.ec-planner__items { list-style: none; margin: .8rem 0 0; padding: 0;
	display: flex; flex-direction: column; gap: .7rem; }
.ec-planner__item { padding: .7rem .9rem; border-radius: 8px;
	background: var(--ec-surface); border-left: 3px solid var(--ec-border); }
.ec-planner__item--now { border-left-color: var(--ec-ok); }
.ec-planner__item--soon { border-left-color: var(--ec-accent); }
.ec-planner__item--alert { border-left-color: var(--ec-bad); }
.ec-planner__item--done, .ec-planner__item--unknown { opacity: .75; }
.ec-planner__head { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.ec-badge { font-size: .78rem; padding: 0 .4rem; border-radius: 4px; border: 1px solid currentColor; }
.ec-badge--now { color: var(--ec-ok); }
.ec-badge--soon { color: var(--ec-accent); }
.ec-badge--alert { color: var(--ec-bad); }
.ec-badge--wait, .ec-badge--done, .ec-badge--unknown { color: var(--ec-muted); }
.ec-planner__grade, .ec-planner__round { font-size: .85rem; color: var(--ec-muted); }
.ec-planner__round { margin: .25rem 0 .4rem; }
.ec-planner__ddays { list-style: none; margin: .3rem 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .3rem .8rem; }
.ec-planner__ddays li { display: flex; justify-content: space-between; gap: .5rem; font-size: .87rem; }
.ec-planner__label { color: var(--ec-muted); }
.ec-planner__dday { font-variant-numeric: tabular-nums; font-weight: 600; }
.ec-planner__dday.is-unknown { font-weight: 400; color: var(--ec-muted); }
.ec-planner__next { margin: .4rem 0 0; font-size: .9rem; }
.ec-planner__asof { margin: .25rem 0 0; font-size: .8rem; color: var(--ec-muted); }
.ec-planner__foot { display: flex; gap: .8rem; flex-wrap: wrap; align-items: baseline;
	margin-top: .5rem; font-size: .84rem; }
.ec-planner__fee { color: var(--ec-muted); }
.ec-linkbtn { background: none; border: none; padding: 0; font: inherit; font-size: .84rem;
	color: var(--ec-accent); cursor: pointer; text-decoration: underline; }
.ec-planner__io { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }
.ec-empty { color: var(--ec-muted); font-size: .9rem; }

/* 일정 변경 (Stage 14). 등급별 색은 위 :root 변수만 쓴다. */
.ec-planner__changes { list-style: none; margin: .5rem 0 0; padding: 0;
	display: flex; flex-direction: column; gap: .3rem; }
.ec-change { display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline;
	padding: .35rem .5rem; border-radius: 6px; font-size: .85rem;
	background: var(--ec-surface); border-left: 3px solid var(--ec-border); }
.ec-change--critical { border-left-color: var(--ec-bad); }
.ec-change--urgent   { border-left-color: var(--ec-bad); }
.ec-change--high     { border-left-color: var(--ec-warn); }
.ec-change--medium   { border-left-color: var(--ec-accent); }
.ec-change--low, .ec-change--info { border-left-color: var(--ec-border); }
.ec-change__label { font-weight: 600; white-space: nowrap; }
.ec-change--critical .ec-change__label, .ec-change--urgent .ec-change__label { color: var(--ec-bad); }
.ec-change--high .ec-change__label { color: var(--ec-warn); }
.ec-change__at { color: var(--ec-muted); font-size: .78rem; white-space: nowrap; }

/* ── 첫 화면 대시보드 (Stage 09) ──────────────────────────────────────── */
/*
 * ⚠ 상태를 색만으로 알리지 않는다. 배지에는 언제나 글자가 있고,
 *   '마감 임박' 줄은 배경도 함께 바뀐다.
 */
.ec-badge--soon {
	background: var(--wd-danger-soft, #fee2e2);
	color: var(--wd-danger, #dc2626);
	border-color: var(--wd-danger, #dc2626);
}
.ec-row--soon th, .ec-row--soon td { background: var(--wd-danger-soft, #fee2e2); }

/* 일정 카드 */
.ec-cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--wd-s-40, 1rem);
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
.ec-card {
	padding: var(--wd-s-40, 1rem);
	background: var(--wd-surface, #fff);
	border: 1px solid var(--wd-border, #e2e8f0);
	border-radius: var(--wd-r-md, 12px);
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}
.ec-card__head { margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.ec-card__round { font-size: 0.85rem; color: var(--wd-muted, #4b5768); }
/* 같은 기간이라 한 장으로 접힌 구분들 (fold 의 note) */
.ec-card__note { font-size: 0.8125rem; color: var(--wd-muted, #4b5768); }
.ec-card__label { margin: 0; font-weight: 700; font-size: 1.0625rem; }
.ec-card__dates { margin: 0; font-size: 0.9375rem; }
.ec-card__next { margin: 0; font-size: 0.875rem; color: var(--wd-muted, #4b5768); }
/*
 * ⚠ 손가락 자리. 여백을 목록이 아니라 링크에 준다
 *   (Stage 05·07 에서 두 번 겪은 실수 — li 에 주면 눌리는 곳은 글자뿐이다).
 */
.ec-card__links { margin: auto 0 0; display: flex; gap: var(--wd-s-40, 1rem); flex-wrap: wrap; }
.ec-card__links a {
	display: inline-flex;
	align-items: center;
	min-height: var(--wd-touch, 44px);
	font-weight: 600;
	text-decoration: none;
	color: var(--wd-primary, #1d4ed8);
}
.ec-card__links a:hover { text-decoration: underline; }

/* 이번 달 일정 — 격자가 아니라 목록 (390px 에서 격자 칸은 글자 두 개 폭이다) */
.ec-month { list-style: none; margin: 0; padding: 0; }
.ec-month__day { display: grid; grid-template-columns: 6rem 1fr; gap: var(--wd-s-30, .75rem); padding-block: 0.6rem; border-top: 1px solid var(--wd-border, #e2e8f0); }
.ec-month__day:first-child { border-top: 0; }
.ec-month__day--past { color: var(--wd-muted, #4b5768); }
.ec-month__date { font-weight: 700; font-variant-numeric: tabular-nums; }
.ec-month__day ul { list-style: none; margin: 0; padding: 0; }
.ec-month__day a {
	display: inline-flex;
	align-items: center;
	min-height: var(--wd-touch, 44px);
	color: inherit;
	text-decoration: none;
}
.ec-month__day a:hover { color: var(--wd-primary, #1d4ed8); text-decoration: underline; }
@media (max-width: 480px) {
	.ec-month__day { grid-template-columns: 1fr; gap: 0; }
}

/* 등급별 · 알림 목록 */
.ec-grades, .ec-alerts { list-style: none; margin: 0; padding: 0; }
.ec-grades li, .ec-alerts li { border-top: 1px solid var(--wd-border, #e2e8f0); }
.ec-grades li:first-child, .ec-alerts li:first-child { border-top: 0; }
.ec-grades a, .ec-alerts a {
	display: inline-flex;
	align-items: center;
	min-height: var(--wd-touch, 44px);
	font-weight: 600;
	color: var(--wd-text, #1e293b);
	text-decoration: none;
}
.ec-grades a:hover, .ec-alerts a:hover { color: var(--wd-primary, #1d4ed8); text-decoration: underline; }
.ec-alerts time { margin-left: 0.6rem; font-size: 0.85rem; color: var(--wd-muted, #4b5768); }

/* 자격증 검색 · 플래너 안내 */
.ec-search { display: flex; gap: var(--wd-s-30, .75rem); max-width: 30rem; }
.ec-search input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: var(--wd-touch, 44px);
	padding: 0 0.75rem;
	font: inherit;
	border: 1px solid var(--wd-border-strong, #6e7c8c);
	border-radius: var(--wd-r-sm, 6px);
}
.ec-search input:focus-visible { outline: 2px solid var(--wd-primary, #1d4ed8); outline-offset: 2px; }
.ec-planner-cta h2 { margin-top: 0; font-size: 1.25rem; }
.ec-planner-cta p { color: var(--wd-muted, #4b5768); }

/* ── 자격증 대표 페이지 (Stage 10) ────────────────────────────────────── */
.ec-qual { display: grid; gap: var(--wd-s-50, 1.5rem); }
.ec-qual__head, .ec-qual__fees { padding: var(--wd-s-40, 1rem); }
.ec-qual__fees h2, .ec-qual__schedule h2 { margin-top: 0; font-size: 1.125rem; }
.ec-qual__grade h3 { font-size: 1rem; margin-bottom: var(--wd-s-30, .75rem); }

/* 종목 목록 — 등급별 접이식. summary 가 손가락 자리다. */
.ec-qual-group {
	border: 1px solid var(--wd-border, #e2e8f0);
	border-radius: var(--wd-r-sm, 6px);
	background: var(--wd-surface, #fff);
	margin-block: var(--wd-s-30, .75rem);
}
.ec-qual-group > summary {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-height: var(--wd-touch, 44px);
	padding-inline: var(--wd-s-40, 1rem);
	font-weight: 700;
	cursor: pointer;
}
.ec-qual-group > summary:focus-visible { outline: 2px solid var(--wd-primary, #1d4ed8); outline-offset: -2px; }
.ec-qual-group__n { font-weight: 400; color: var(--wd-muted, #4b5768); font-size: 0.875rem; }
.ec-qual-group ul {
	list-style: none;
	margin: 0;
	padding: 0 var(--wd-s-40, 1rem) var(--wd-s-30, .75rem);
	display: grid;
	gap: 0;
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.ec-qual-group a {
	display: inline-flex;
	align-items: center;
	min-height: var(--wd-touch, 44px);
	color: var(--wd-text, #1e293b);
	text-decoration: none;
}
.ec-qual-group a:hover { color: var(--wd-primary, #1d4ed8); text-decoration: underline; }