/*
 * ad-modern.css — 저작권·수익 센터 새 디자인 (2026-08-21)
 *
 * 좌측 snb 2단 메뉴 + 표로 만들던 옛 화면을, 자료실·마이페이지와 같은
 * 상단 탭 + 카드 레이아웃으로 다시 만든 것. 껍데기는 skin/modern/shell_top.php.
 *
 * 토큰 블록은 studymaterials/skin/modern/pds-modern.css 와 같은 스냅샷이다
 * (/var/services/web/.design/tokens.css 의 iteach 브랜드 값). tokens.css 가
 * 웹으로 직접 서빙되면 세 파일 모두 <link> 한 줄로 교체한다.
 */
:root {
	--font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
		'system-ui', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Segoe UI', Roboto, sans-serif;

	--fs-xs: .75rem; --fs-sm: .875rem; --fs-base: 1rem; --fs-md: 1.125rem;
	--fs-lg: 1.25rem; --fs-xl: 1.5rem; --fs-2xl: 1.875rem; --fs-3xl: 2.25rem;
	--line-tight: 1.3; --line-base: 1.65;
	--letter-tight: -.02em;
	--fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

	--space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.25rem;
	--space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem;

	--radius-sm: .25rem; --radius-md: .5rem; --radius-lg: .75rem; --radius-xl: 1rem; --radius-full: 9999px;

	--shadow-xs: 0 1px 2px rgb(0 0 0 / .04);
	--shadow-sm: 0 1px 3px rgb(0 0 0 / .08), 0 1px 2px rgb(0 0 0 / .04);
	--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .10), 0 2px 4px -2px rgb(0 0 0 / .06);
	--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .10), 0 4px 6px -4px rgb(0 0 0 / .05);

	--ease-out: cubic-bezier(.16, 1, .3, 1);
	--duration-fast: 150ms; --duration-base: 200ms;

	/* .pds-page-wrap 이 이 값을 쓴다. 예전엔 선언 없이 top2.php 의 :root 에
	 * 우연히 기대고 있어서, 헤더를 바꾸면 페이지가 조용히 full-bleed 로 퍼졌다.
	 * 스냅샷은 그 자체로 완결돼야 한다. */
	--container-max: 1400px;

	--gray-50: #f8fafc; --gray-100: #f1f5f9; --gray-200: #e2e8f0; --gray-300: #cbd5e1;
	--gray-400: #94a3b8; --gray-500: #64748b; --gray-600: #475569; --gray-700: #334155;
	--gray-800: #1e293b; --gray-900: #0f172a;

	--color-bg: #ffffff;
	--color-fg: var(--gray-900);
	--color-fg-muted: var(--gray-500);
	--color-fg-subtle: var(--gray-400);
	--color-border: var(--gray-200);
	--color-border-strong: var(--gray-300);
	--color-surface: var(--gray-50);
	--color-surface-2: var(--gray-100);

	--color-primary: #4f46e5; --color-primary-hover: #4338ca; --color-primary-active: #3730a3;
	--color-primary-fg: #fff; --color-primary-soft: #eef2ff; --color-primary-soft-fg: #3730a3;

	--color-accent: #b8893a; --color-accent-hover: #a37828;
	--color-accent-soft: #f6ecd6; --color-accent-soft-fg: #6e5018; --color-accent-fg: #fff;

	--color-success: #16a34a; --color-success-soft: #dcfce7;
	--color-danger: #dc2626; --color-danger-hover: #b91c1c; --color-danger-soft: #fee2e2;
	--color-warn: #d97706; --color-warn-soft: #fef3c7;
}

/* ─────────────────────────────────────────────────────────────
 * 페이지 래퍼 — top2.php 헤더와 짝. 레거시 #wrapper(1240px) /
 * .container article(970px) 대신 여기서 최대폭을 잡는다.
 * ───────────────────────────────────────────────────────────── */
.ad-page, .ad-page * { box-sizing: border-box; }
.ad-page {
	font-family: var(--font-sans);
	color: var(--color-fg);
	background: var(--color-bg);
	font-size: var(--fs-base);
	line-height: var(--line-base);
}
.ad-page a { color: inherit; text-decoration: none; }
.ad-page img { max-width: 100%; }
.ad-page-wrap {
	width: 100%; max-width: var(--container-max);
	margin: 0 auto; padding: 0 var(--space-6);
}
@media (max-width: 640px) { .ad-page-wrap { padding: 0 var(--space-4); } }

/* 상단 탭 — 자료실(.pds-tabnav)과 같은 기하 */
.ad-tabnav {
	display: flex; gap: var(--space-1); flex-wrap: wrap;
	border-bottom: 1px solid var(--color-border);
	margin-top: var(--space-5);
}
.ad-tabnav a {
	font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--color-fg-muted);
	padding: var(--space-3) var(--space-4); border-bottom: 2px solid transparent; margin-bottom: -1px;
	transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.ad-tabnav a:hover { color: var(--color-fg); }
.ad-tabnav a.active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: var(--fw-semibold); }

.ad-main { margin: var(--space-6) 0 var(--space-12); }

/* ── 히어로 (인사 + 요약) ────────────────────────────────── */
.ad-hero {
	background: linear-gradient(135deg, var(--color-primary-soft), var(--color-surface));
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	padding: var(--space-6) var(--space-6);
	margin-bottom: var(--space-5);
}
.ad-hero h2 {
	margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-bold);
	letter-spacing: var(--letter-tight); line-height: var(--line-tight);
}
.ad-hero .ad-hero-sub { margin-top: var(--space-2); font-size: var(--fs-sm); color: var(--color-fg-muted); }
.ad-hero-icons { display: inline-flex; align-items: center; gap: var(--space-1); vertical-align: -3px; }
.ad-hero-icons img { height: 16px; width: auto; }

/* ── 지표 타일 (CP / 캐쉬 / 코인 …) ─────────────────────── */
.ad-stats {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--space-3); margin-bottom: var(--space-5);
}
.ad-stat {
	background: var(--color-bg); border: 1px solid var(--color-border);
	border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5);
	box-shadow: var(--shadow-xs);
}
.ad-stat .label { font-size: var(--fs-xs); color: var(--color-fg-muted); font-weight: var(--fw-medium); }
.ad-stat .value {
	margin-top: var(--space-1); font-size: var(--fs-lg); font-weight: var(--fw-bold);
	letter-spacing: var(--letter-tight); font-variant-numeric: tabular-nums; word-break: break-all;
}
.ad-stat .value .unit { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--color-fg-muted); margin-left: 2px; }
.ad-stat .note { margin-top: var(--space-1); font-size: var(--fs-xs); color: var(--color-fg-subtle); }
.ad-stat.is-accent .value { color: var(--color-primary); }

/* ── 섹션 카드 ───────────────────────────────────────────── */
.ad-card {
	background: var(--color-bg); border: 1px solid var(--color-border);
	border-radius: var(--radius-lg); padding: var(--space-5);
	box-shadow: var(--shadow-xs); margin-bottom: var(--space-5);
}
.ad-card-title {
	display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
	margin: 0 0 var(--space-4); font-size: var(--fs-md); font-weight: var(--fw-semibold);
	letter-spacing: var(--letter-tight);
}
.ad-card-title .ad-sub { font-size: var(--fs-xs); font-weight: var(--fw-regular); color: var(--color-fg-muted); }
.ad-card-note { font-size: var(--fs-sm); color: var(--color-fg-muted); }
.ad-card-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-4); }

/* 라벨 + 값 목록 */
.ad-dl { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: var(--space-2) var(--space-4); margin: 0; }
.ad-dl dt { font-size: var(--fs-sm); color: var(--color-fg-muted); font-weight: var(--fw-medium); }
.ad-dl dd { margin: 0; font-size: var(--fs-sm); word-break: break-word; }
@media (max-width: 560px) { .ad-dl { grid-template-columns: 100px minmax(0, 1fr); } }

/* 체크리스트 (1일 무료충전 조건) */
.ad-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.ad-checklist li {
	display: flex; align-items: flex-start; gap: var(--space-2);
	font-size: var(--fs-sm); color: var(--color-fg-muted);
}
.ad-checklist li .mark {
	flex: 0 0 auto; width: 18px; height: 18px; border-radius: var(--radius-full);
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 11px; font-weight: var(--fw-bold);
	background: var(--color-surface-2); color: var(--color-fg-subtle);
}
.ad-checklist li.is-on { color: var(--color-fg); }
.ad-checklist li.is-on .mark { background: var(--color-success-soft); color: var(--color-success); }
.ad-checklist li .gain { margin-left: auto; font-weight: var(--fw-semibold); white-space: nowrap; color: var(--color-fg-subtle); }
.ad-checklist li.is-on .gain { color: var(--color-success); }

/* ── 표 ──────────────────────────────────────────────────── */
.ad-table {
	width: 100%; border-collapse: collapse;
	background: var(--color-bg); border: 1px solid var(--color-border);
	border-radius: var(--radius-lg); overflow: hidden;
	font-size: var(--fs-sm);
}
.ad-table thead th {
	background: var(--color-surface); border-bottom: 1px solid var(--color-border);
	padding: var(--space-3) var(--space-4);
	font-size: var(--fs-xs); font-weight: var(--fw-semibold);
	color: var(--color-fg-muted); text-align: center; white-space: nowrap;
}
.ad-table td {
	padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border);
	text-align: center; vertical-align: middle; word-break: break-word;
}
.ad-table tbody tr:last-child td { border-bottom: 0; }
.ad-table tbody tr:hover td { background: var(--color-surface); }
.ad-table td.left { text-align: left; }
.ad-table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ad-table a { color: var(--color-primary); }
.ad-table a:hover { text-decoration: underline; }
.ad-table tr.is-me td { background: var(--color-primary-soft); font-weight: var(--fw-semibold); }
.ad-table tr.is-me:hover td { background: var(--color-primary-soft); }
@media (max-width: 720px) {
	.ad-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.ad-table { min-width: 640px; }
}

/* 증감 배지 */
.ad-delta { font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ad-delta.is-plus { color: var(--color-primary); }
.ad-delta.is-minus { color: var(--color-danger); }

/* ── 버튼 / 칩 / 폼 ──────────────────────────────────────── */
.ad-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
	height: 38px; padding: 0 var(--space-5);
	border: 1px solid var(--color-border); border-radius: var(--radius-full);
	font-family: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold);
	background: var(--color-bg); color: var(--color-fg-muted);
	white-space: nowrap; cursor: pointer;
	transition: background var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out),
	            border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.ad-btn:hover { background: var(--color-surface); color: var(--color-fg); border-color: var(--color-border-strong); }
.ad-btn:focus-visible { outline: 3px solid var(--color-primary-soft); outline-offset: 2px; }
.ad-btn-primary { background: var(--color-primary); color: var(--color-primary-fg); border-color: var(--color-primary); box-shadow: var(--shadow-sm); }
.ad-btn-primary:hover { background: var(--color-primary-hover); color: var(--color-primary-fg); border-color: var(--color-primary-hover); box-shadow: var(--shadow-md); }
.ad-btn-danger { color: var(--color-danger); border-color: var(--color-danger-soft); }
.ad-btn-danger:hover { background: var(--color-danger-soft); color: var(--color-danger-hover); border-color: var(--color-danger); }

.ad-toolbar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.ad-toolbar .spacer { flex: 1 1 auto; }
.ad-select, .ad-input {
	height: 38px; padding: 0 var(--space-3);
	font-family: inherit; font-size: var(--fs-sm); color: var(--color-fg);
	background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md);
}
.ad-select:focus, .ad-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); }

.ad-empty {
	text-align: center; padding: var(--space-12) var(--space-4);
	color: var(--color-fg-muted); background: var(--color-surface); border-radius: var(--radius-lg);
}
.ad-footbar { display: flex; align-items: center; justify-content: center; margin-top: var(--space-5); }

/* 페이지네이션 — class/page.php 가 찍는 마크업에 맞춘다 (자료실과 동일) */
.ad-page .page_nav { margin: var(--space-2) auto 0; }
.ad-page .page_nav .paging { list-style: none; display: flex; justify-content: center; gap: 2px; margin: 0; padding: 0; flex-wrap: wrap; }
.ad-page .page_nav .paging li a, .ad-page .page_nav .paging li span {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 32px; height: 32px; padding: 0 var(--space-2);
	border: 1px solid var(--color-border); border-radius: var(--radius-md);
	font-size: var(--fs-sm); color: var(--color-fg-muted); background: var(--color-bg);
}
.ad-page .page_nav .paging li a:hover { border-color: var(--color-primary); color: var(--color-primary); }
.ad-page .page_nav .paging li.on a, .ad-page .page_nav .paging li a.on {
	background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-fg); font-weight: var(--fw-semibold);
}

/* 광고 슬롯 — 고정폭 <ins> 가 칸을 뚫지 않게 (자료실 .pds-ad 와 같은 처리) */
.ad-ad { max-width: 100%; overflow: hidden; text-align: center; line-height: 0; margin: var(--space-5) 0; }
.ad-ad ins, .ad-ad iframe { max-width: 100% !important; }

/* ─────────────────────────────────────────────────────────────
 * 레거시 폼 표 (.cForm) — 레거시 폼
 *
 * 이 화면의 폼은 필드명·검증 JS 가 서버 처리와 1:1 로 묶여 있어 마크업을
 * 갈아엎지 않았다. 대신 표를 라벨/입력 2단으로 다시 그려 새 디자인에 맞춘다.
 * bgcolor 속성(#F5F5F5 등)은 표현용 속성이라 CSS 가 이긴다 — 줄무늬가 사라진다.
 * ───────────────────────────────────────────────────────────── */
.ad-card table.cForm { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.ad-card table.cForm td {
	padding: var(--space-3) var(--space-2);
	border-bottom: 1px solid var(--color-border);
	vertical-align: top; line-height: var(--line-base); color: var(--color-fg);
	background: transparent;
}
.ad-card table.cForm tr:last-child td { border-bottom: 0; }
.ad-card table.cForm td:first-child:not([colspan]) {
	width: 150px; white-space: nowrap;
	color: var(--color-fg-muted); font-weight: var(--fw-medium);
}
.ad-card table.cForm td[colspan] { color: var(--color-fg-muted); font-size: var(--fs-xs); }
.ad-card table.cForm a { color: var(--color-primary); }
.ad-card table.cForm a:hover { text-decoration: underline; }
.ad-card table.cForm font[color="#999999"], .ad-card table.cForm td.ul { color: inherit; }
@media (max-width: 560px) {
	.ad-card table.cForm td:first-child:not([colspan]) { width: 96px; white-space: normal; }
}

/* 폼 컨트롤 — 페이지 전체 공통 */
.ad-page input[type=text], .ad-page input[type=password], .ad-page input[type=email],
.ad-page input[type=tel], .ad-page input[type=number], .ad-page select, .ad-page textarea {
	font-family: inherit; font-size: var(--fs-sm); color: var(--color-fg);
	background: var(--color-bg);
	border: 1px solid var(--color-border); border-radius: var(--radius-md);
	padding: var(--space-2) var(--space-3);
	max-width: 100%;
}
.ad-page textarea { line-height: var(--line-base); }
.ad-page input[type=text]:focus, .ad-page input[type=password]:focus, .ad-page input[type=email]:focus,
.ad-page input[type=tel]:focus, .ad-page input[type=number]:focus, .ad-page select:focus, .ad-page textarea:focus {
	outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.ad-page input[type=submit], .ad-page button[type=submit] { cursor: pointer; }

/* ─────────────────────────────────────────────────────────────
 * 레거시 마크업 재단장
 *
 * 이 센터의 9개 화면은 표·폼이 서버 처리와 촘촘히 엮여 있어 마크업을 갈아엎지
 * 않았다. 대신 옛 컨테이너(.normal_box / .bTable / .table_rank / .table_st1)와
 * 폼 컨트롤을 새 토큰으로 다시 그린다.
 * 단, <h3 style="background:url(...)!important"> 같은 인라인 important 는
 * CSS 로 이길 수 없어 파일에서 직접 걷어냈다.
 * ───────────────────────────────────────────────────────────── */
.ad-main h2 {
	margin: 0 0 var(--space-5); font-size: var(--fs-xl); font-weight: var(--fw-bold);
	letter-spacing: var(--letter-tight); line-height: var(--line-tight);
}
.ad-main h3 {
	margin: 0 0 var(--space-4); font-size: var(--fs-md); font-weight: var(--fw-semibold);
	letter-spacing: var(--letter-tight); background: none; padding-left: 0;
}
.ad-main .ad-card + h3, .ad-main h3 + .ad-card { margin-top: var(--space-5); }

/* 옛 안내 상자 */
.ad-main .normal_box, .ad-main .search_box {
	background: var(--color-bg); border: 1px solid var(--color-border);
	border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-xs);
	font-size: var(--fs-sm); line-height: var(--line-base); color: var(--color-fg);
	margin-bottom: var(--space-5);
}
.ad-main .normal_box ul { list-style: none; margin: 0 0 var(--space-2); padding-left: var(--space-4); position: relative; }
.ad-main .normal_box ul::before { content: '·'; position: absolute; left: 0; color: var(--color-fg-subtle); }
.ad-main .normal_box a, .ad-main .search_box a { color: var(--color-primary); }
.ad-main .normal_box a:hover { text-decoration: underline; }

/* 옛 표들 — 새 표 모양으로 */
.ad-main table.bTable, .ad-main table.table_rank, .ad-main table.rank, .ad-main table.table_st1 {
	width: 100%; border-collapse: collapse; font-size: var(--fs-sm);
	background: var(--color-bg); border: 1px solid var(--color-border);
	border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--space-5);
}
.ad-main table.bTable th, .ad-main table.table_rank th, .ad-main table.rank th, .ad-main table.table_st1 th,
.ad-main table.bTable thead td, .ad-main table.table_rank thead td, .ad-main table.rank thead td {
	background: var(--color-surface) !important; border: 0; border-bottom: 1px solid var(--color-border);
	padding: var(--space-3) var(--space-4);
	font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--color-fg-muted);
	text-align: center; white-space: nowrap;
}
.ad-main table.bTable td, .ad-main table.table_rank td, .ad-main table.rank td, .ad-main table.table_st1 td {
	background: transparent !important; border: 0; border-bottom: 1px solid var(--color-border);
	padding: var(--space-3) var(--space-4); text-align: center; vertical-align: middle;
	color: var(--color-fg); word-break: break-word; height: auto !important;
}
.ad-main table.bTable tr:last-child td, .ad-main table.table_rank tr:last-child td,
.ad-main table.rank tr:last-child td, .ad-main table.table_st1 tr:last-child td { border-bottom: 0; }
.ad-main table.bTable tr:hover td, .ad-main table.table_rank tr:hover td, .ad-main table.table_st1 tr:hover td { background: var(--color-surface) !important; }
.ad-main table a { color: var(--color-primary); }
.ad-main table a:hover { text-decoration: underline; }
.ad-main table.bTable td.left, .ad-main table td[align="left"] { text-align: left; }
.ad-main .ad-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* 옛 버튼 (.btn) — _header.php 가 짙은 남색으로 정의하던 것 */
.ad-main .btn, .ad-main input[type=submit], .ad-main button[type=submit] {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
	height: 38px; padding: 0 var(--space-5);
	background: var(--color-primary) !important; color: var(--color-primary-fg) !important;
	border: 1px solid var(--color-primary); border-radius: var(--radius-full) !important;
	font-family: inherit; font-size: var(--fs-sm) !important; font-weight: var(--fw-semibold);
	white-space: nowrap; cursor: pointer; text-decoration: none;
	box-shadow: var(--shadow-sm);
}
.ad-main .btn:hover, .ad-main input[type=submit]:hover, .ad-main button[type=submit]:hover {
	background: var(--color-primary-hover) !important; box-shadow: var(--shadow-md);
}

/* 옛 폼 컨트롤 */
.ad-main input[type=text], .ad-main input[type=input], .ad-main input[type=url],
.ad-main input[type=number], .ad-main input[type=file], .ad-main select, .ad-main textarea {
	font-family: inherit; font-size: var(--fs-sm); color: var(--color-fg);
	background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md);
	padding: var(--space-2) var(--space-3); max-width: 100%;
}
.ad-main input:focus, .ad-main select:focus, .ad-main textarea:focus {
	outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.ad-main form { margin-bottom: 0; }