/* eXERD SAM 라이선스 포털 (2026-10-23 새 단장)
   바탕은 차분한 회색, 내용은 흰 카드, 강조색은 하나(파랑), 상표 점은 토마토 빨강. 둥근 모서리·여백·얇은 선으로 정돈하고 장식은 넣지 않는다.
   글꼴은 Pretendard(CDN, 없으면 시스템 고딕). 표 구조와 클래스 이름은 그대로라 템플릿은 바뀌지 않는다. */
:root {
	--fg:#1c1f23; --fg-2:#3b4046; --muted:#6b7280; --line:#e4e7eb; --line-2:#d3d8de;
	--bg:#f3f5f8; --card:#fff; --accent:#2d72e5; --accent-h:#245fc4; --accent-soft:#e8f0fd; --ring:rgba(45,114,229,.22);
	--brand:#e4432f;
	--warn-bg:#fff4e8; --warn-fg:#9a4a0e; --info-bg:#e9f8ef; --info-fg:#1b6b3a; --danger:#c62828; --danger-soft:#fdecec;
	--r:14px; --r-sm:9px;
	--shadow:0 1px 2px rgba(16,24,40,.04), 0 12px 32px -16px rgba(16,24,40,.14);
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font:15px/1.55 "Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif; color:var(--fg); background:var(--bg); -webkit-font-smoothing:antialiased; }

/* 머리글: 반투명 흰색 + 흐림, 얇은 밑선 */
header.top { position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:14px; min-height:56px; padding:0 24px; color:var(--fg); background:rgba(255,255,255,.8); -webkit-backdrop-filter:saturate(180%) blur(16px); backdrop-filter:saturate(180%) blur(16px); border-bottom:1px solid rgba(16,24,40,.08); }
header.top a.brand { display:inline-flex; align-items:center; gap:9px; color:var(--fg); text-decoration:none; font-weight:700; font-size:16px; letter-spacing:-.01em; }
header.top .brand .mark { width:10px; height:10px; border-radius:3px; background:linear-gradient(135deg,#ff6a4d,var(--brand)); box-shadow:0 0 0 3px rgba(228,67,47,.12); }
header.top .brand .product { font-weight:500; color:var(--fg-2); }
header.top .brand small { font-weight:400; opacity:.75; margin-left:6px; }
header.top .spacer { flex:1; }
header.top .role { display:inline-block; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:600; background:var(--accent-soft); color:var(--accent-h); margin-right:6px; }
header.top .small { color:var(--muted); }
header.top form { margin:0; }
header.top button { background:transparent; color:var(--fg-2); border:1px solid var(--line-2); border-radius:999px; padding:5px 13px; cursor:pointer; font-size:13px; }
header.top button:hover { background:#fff; color:var(--fg); border-color:#b9c0c8; }

main { max-width:1200px; margin:28px auto; padding:0 24px; }
h1 { font-size:24px; font-weight:700; letter-spacing:-.02em; margin:0 0 6px; }
h2 { font-size:17px; font-weight:600; letter-spacing:-.01em; margin:28px 0 10px; }
h3 { font-size:13px; font-weight:600; margin:0 0 10px; color:var(--muted); }
.sub { color:var(--muted); margin:0 0 16px; }
.small { color:var(--muted); font-size:13px; }
main a { color:var(--accent); text-decoration:none; }
main a:hover { text-decoration:underline; }

/* 카드·알림 */
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; margin-bottom:18px; box-shadow:var(--shadow); overflow-x:auto; }
.msg { padding:11px 14px; border-radius:10px; margin-bottom:14px; font-size:14px; }
.msg.info { background:var(--info-bg); color:var(--info-fg); }
.msg.warn { background:var(--warn-bg); color:var(--warn-fg); }
.msg code { word-break:break-all; }

/* 표 */
table { width:100%; border-collapse:collapse; font-size:14px; }
th, td { text-align:left; padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--muted); font-weight:600; font-size:12.5px; background:transparent; white-space:nowrap; }
tbody tr:last-child td { border-bottom:0; }
tbody tr:last-child th ~ td { border-bottom:1px solid var(--line); }   /* 항목 이름이 왼쪽에 있는 표는 마지막 줄도 밑선을 이름 칸과 똑같이 (2026-10-28) */
td.num, th.num { text-align:right; }
table.kv th { width:140px; color:var(--muted); }
table.data { min-width:720px; }
tr.cur td { background:#f0fdf4; }
td.nowrap { white-space:nowrap; }

/* 상태 칩 */
.tag { display:inline-block; white-space:nowrap; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:500; background:var(--accent-soft); color:var(--accent-h); }
.tag.pending { background:#fdf3d7; color:#8a5a0a; }
.tag.blocked, .tag.expired { background:var(--danger-soft); color:#a12626; }
.tag.ok { background:#dff5e7; color:#1a6b3a; }
.tag.renew { background:#ffe9d6; color:#9a4a0e; }
.tag.none { background:#eef0f3; color:#6b7280; }
.tag.admin { background:#e6e9fb; color:#3b43a8; }

/* 버튼·입력 */
form.inline { display:inline; }
button, .btn { font:inherit; font-size:14px; font-weight:500; color:var(--fg); border:1px solid var(--line-2); background:#fff; border-radius:var(--r-sm); padding:7px 14px; cursor:pointer; text-decoration:none; display:inline-block; line-height:1.4; transition:background .15s, border-color .15s, box-shadow .15s; }
button:hover, .btn:hover { background:#f6f8fa; border-color:#b9c0c8; text-decoration:none; }
button.primary, .btn.primary { background:var(--accent); color:#fff; border-color:var(--accent); font-weight:600; }
button.primary:hover, .btn.primary:hover { background:var(--accent-h); border-color:var(--accent-h); }
button.danger { color:var(--danger); border-color:#f0b8b8; }
button.danger:hover { background:var(--danger-soft); }
button:disabled { opacity:.5; cursor:default; }
button:focus-visible, .btn:focus-visible { outline:none; box-shadow:0 0 0 4px var(--ring); }
input[type=text], input[type=email], input[type=password], input[type=date], select { font:inherit; font-size:15px; color:var(--fg); padding:8px 11px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:#fff; transition:border-color .15s, box-shadow .15s; }
input:focus, select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--ring); }
.row { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
.row label { display:flex; flex-direction:column; gap:4px; font-size:12.5px; color:var(--muted); }
.actions form.inline { margin:0 8px 8px 0; }
.actions select { padding:6px 8px; }
details summary { cursor:pointer; color:var(--muted); }

/* 상세 화면: 항목 줄 끝에 그 항목의 작업 버튼, 카드 아래에 위험한 작업 (2026-10-28) */
button.sm { padding:4px 11px; font-size:13px; border-radius:8px; }
table.acts th, table.acts td { vertical-align:middle; }
table.acts td.act { width:1%; white-space:nowrap; text-align:right; padding-top:5px; padding-bottom:5px; }
table.acts td.act form.inline + form.inline { margin-left:6px; }
.card-foot { display:flex; justify-content:flex-end; align-items:center; gap:8px; margin-top:14px; }

/* 확인 창(사용권 회수 사유, 2026-10-28) */
dialog.dlg { border:0; border-radius:var(--r); padding:22px 24px 20px; width:min(460px, calc(100vw - 32px)); color:var(--fg); box-shadow:0 24px 60px -20px rgba(16,24,40,.45); }
dialog.dlg::backdrop { background:rgba(16,24,40,.35); }
dialog.dlg h3 { font-size:17px; color:var(--fg); margin:0 0 6px; }
dialog.dlg fieldset { border:0; padding:0; margin:16px 0 14px; display:flex; flex-wrap:wrap; gap:8px; }
dialog.dlg legend { float:left; width:100%; padding:0; margin-bottom:8px; font-size:13px; font-weight:600; color:var(--fg-2); }
dialog.dlg fieldset label { display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border:1px solid var(--line-2); border-radius:999px; font-size:14px; cursor:pointer; }
dialog.dlg fieldset label:has(input:checked) { border-color:var(--accent); background:var(--accent-soft); color:var(--accent-h); }
dialog.dlg label.note { display:block; font-size:13px; font-weight:600; color:var(--fg-2); }
dialog.dlg label.note input { display:block; width:100%; margin-top:6px; }
.dlg-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }

/* 지표 */
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; }
.stat { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; box-shadow:var(--shadow); }
.stat .v { font-size:26px; font-weight:700; letter-spacing:-.02em; }
.stat .k { color:var(--muted); font-size:12.5px; }
.grid2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:12px; }

/* 좁은 카드: 로그인·비밀번호·내 라이선스·오프라인 */
.login { max-width:440px; margin:8vh auto 40px; padding:32px 36px 26px; border-radius:18px; }
.login h1 { font-size:26px; margin-bottom:8px; }
.login label { display:block; margin-bottom:14px; font-size:13px; font-weight:500; color:var(--fg-2); }
.login input { width:100%; margin-top:5px; padding:11px 13px; }
/* 비밀번호 표시: 체크박스와 글자를 한 줄로, 비밀번호 칸 바로 밑에 (2026-10-28) */
.login label.show-pw { display:flex; align-items:center; gap:6px; margin:-6px 0 16px; font-weight:400; color:var(--muted); cursor:pointer; }
.login label.show-pw input { width:auto; margin:0; padding:0; }
.login button.primary { width:100%; padding:12px 16px; font-size:15px; border-radius:11px; margin-top:4px; }
.login .switch { text-align:center; margin:18px 0 0; font-size:14px; }
.login .switch a { color:var(--accent); }
.login .pane-forgot { display:none; }
.login.show-forgot .pane-login { display:none; }
.login.show-forgot .pane-forgot { display:block; }
.login.js .pane { animation:pane-in .22s ease-out; }   /* 자바스크립트로 넘길 때만 살짝 움직인다 */
@keyframes pane-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.actions-row { display:flex; gap:8px; flex-wrap:wrap; margin:18px 0 0; }
.actions-row .btn { padding:9px 16px; }

/* 머리글 도움말: ? 아이콘에 마우스를 올리거나 초점을 주면 설명 상자 (2026-10-23) */
.help { position:relative; display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; margin-left:3px; border:1px solid var(--line-2); border-radius:50%; color:var(--muted); font-size:11px; font-weight:700; line-height:1; cursor:help; vertical-align:-2px; outline:none; }
.help::before { content:"?"; }
.help:hover, .help:focus { border-color:var(--accent); color:var(--accent); }
.help-tip { display:none; position:absolute; left:calc(100% + 10px); top:-8px; z-index:20; width:300px; padding:10px 12px; border-radius:10px; background:#1c1f23; color:#fff; font-size:12.5px; font-weight:400; line-height:1.55; white-space:normal; text-align:left; box-shadow:0 10px 30px -10px rgba(16,24,40,.4); }
.help-tip b { color:#fff; font-weight:700; margin-right:4px; }
.help:hover .help-tip, .help:focus .help-tip, .help:focus-within .help-tip { display:block; }

/* 관리자 화면 탐색 */
.tabs { display:flex; gap:2px; border-bottom:1px solid var(--line); margin:14px 0 18px; }
.tabs a { padding:9px 14px; text-decoration:none; color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-1px; font-weight:600; font-size:14px; }
.tabs a.on { color:var(--fg); border-bottom-color:var(--accent); }
.tabs a:hover { color:var(--fg); text-decoration:none; }
.subnav { display:flex; gap:6px; flex-wrap:wrap; margin:0 0 16px; }
.subnav a { padding:6px 13px; border:1px solid var(--line); border-radius:999px; background:var(--card); color:var(--muted); text-decoration:none; font-size:13px; font-weight:500; }
.subnav a.on { background:var(--fg); border-color:var(--fg); color:#fff; }
.subnav a:hover { color:var(--fg); text-decoration:none; } .subnav a.on:hover { color:#fff; }
.pager { display:flex; flex-wrap:wrap; gap:6px; align-items:center; justify-content:center; margin:14px 0 4px; font-size:13px; }
.pager a, .pager b { display:inline-block; min-width:28px; text-align:center; padding:3px 7px; border:1px solid var(--line); border-radius:8px; text-decoration:none; background:#fff; }
.pager a:hover { border-color:#b9c0c8; text-decoration:none; }
.pager b { background:var(--fg); color:#fff; border-color:var(--fg); }
.pager .small { margin-left:6px; }

/* 반응형 (2026-10-20). 넓은 표(.data)는 카드 안에서 가로 스크롤, 사용자 목록·접속 기록(.stack)은 휴대폰에서 행을 카드로 쌓음 */
@media (max-width:700px) {
	main { margin:14px auto; padding:0 14px; }
	header.top { padding:0 14px; gap:8px; min-height:52px; flex-wrap:nowrap; }
	header.top a.brand { font-size:15px; white-space:nowrap; }
	header.top .small { display:none; }
	header.top .role { display:none; }
	header.top > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
	header.top button { padding:4px 10px; white-space:nowrap; }
	h1 { font-size:21px; }
	h2 { font-size:16px; margin:20px 0 8px; }
	.card { padding:14px; border-radius:12px; }
	.tabs { margin:8px 0 12px; }
	.tabs a { padding:8px 10px; font-size:13px; }
	.stats { grid-template-columns:1fr 1fr; gap:8px; }
	.stat .v { font-size:22px; }
	.row { gap:8px; }
	.row label { width:100%; }
	.row input[type=text], .row input[type=email], .row select, .row input[type=date] { width:100%; }
	.row label > span { display:flex; gap:6px; align-items:center; }
	.row button { width:100%; }
	.login { margin:12px auto 24px; padding:22px 18px 18px; border-radius:14px; }
	.login h1 { font-size:23px; }
	.actions form.inline { display:block; margin:0 0 8px; }
	.actions button, .actions select { width:100%; }
	table { font-size:13px; }
	th, td { padding:7px 6px; }
	table.stack, table.stack tbody, table.stack tr, table.stack td { display:block; width:100%; }
	table.stack thead { display:none; }
	table.stack tr { border:1px solid var(--line); border-radius:10px; padding:8px 10px; margin-bottom:8px; background:var(--card); }
	table.stack tr.cur { background:#f0fdf4; }
	table.stack td { border:0; padding:2px 0; white-space:normal; }
	table.stack td:empty { display:none; }
	table.stack td[data-label]::before { content:attr(data-label); color:var(--muted); font-size:12px; display:inline-block; min-width:96px; }
	table.stack td.num { text-align:left; }
	.pager a, .pager b { min-width:32px; padding:5px 8px; }
	.grid2 { gap:8px; }
	table.kv th { width:110px; }
}
.caps-warn { display:block; margin-top:5px; font-size:13px; font-weight:500; color:var(--warn-fg); }
.caps-warn[hidden] { display:none; }