@charset "utf-8";
/*
 * API 센터 전용 보강 스타일.
 *
 * ⚠️ 새 이름을 짓지 않는 것이 원칙이다 — 포털의 정본 클래스는 im_board.css·style.css 의
 *    m-table / m-input-text / m-btn 이고, 그 이름을 쓰면 CSS 를 따로 쓸 일이 없다.
 *    다만 신청현황·통계처럼 구 포털에 없던 화면이 만든 apict-* 클래스는 정의가 어디에도
 *    없어 브라우저 기본 모양으로 나오고 있었다. 여기서 그 이름들을 정본과 같은 모양으로 맞춘다.
 *    (m-table: 위 검은 실선 / 행 구분선 #d8d8d8 / th 회색 배경, m-btn.type01: 파란 채움)
 */

/* ── 표 ─────────────────────────────────────────────── */
.apict-tbl {width:100%; border-top:1px solid #333; border-bottom:1px solid #cecece; font-size:15px;}
.apict-tbl caption {overflow:hidden; width:1px; height:1px; margin:-1px; clip:rect(0 0 0 0); position:absolute;}
.apict-tbl tr {border-bottom:1px solid #d8d8d8;}
.apict-tbl th {padding:14px 15px; background:#f7f8fa; color:#333; font-weight:600; text-align:center;}
.apict-tbl td {padding:12px 15px; color:#555; text-align:center; word-break:break-all;}
.apict-tbl th.al, .apict-tbl td.al {text-align:left;}
.apict-tbl .req, .apict-tbl .star {color:#e0483e;}
.apict-tbl input[type=text], .apict-tbl input[type=password], .apict-tbl select {
	padding:9px 10px; border:1px solid #e1e1e1; font-size:14px; font-family:inherit; color:#333; background:#fff;}
.apict-tbl input[type=text], .apict-tbl input[type=password] {min-width:220px;}
.apict-tbl .empty {padding:50px 0; color:#888;}
.table-wrap {overflow-x:auto;}

/* ── 버튼 ───────────────────────────────────────────── */
.apict-btn {display:inline-block; padding:11px 24px; border:1px solid #cfcfcf; border-radius:3px;
	background:#fff; color:#444; font-size:15px; font-family:inherit; line-height:1.2; cursor:pointer;
	transition:background-color .2s, border-color .2s, color .2s;}
.apict-btn:hover {border-color:#9aa0a6; background:#f4f5f7;}
.apict-btn.point {border-color:#2c7bd4; background:#2c7bd4; color:#fff;}
.apict-btn.point:hover {border-color:#1f63ae; background:#1f63ae;}
.apict-btns {margin-top:30px; text-align:center;}
.apict-btns .apict-btn + .apict-btn {margin-left:6px;}
.api-actions {margin:0 0 14px; text-align:right;}

/* ── 안내 문구 ──────────────────────────────────────── */
.apict-msg {margin-top:6px; color:#777; font-size:13px; line-height:1.6;}
.sec-head {margin:34px 0 12px; font-size:18px; font-weight:700; color:#222;}
.sec-head:first-child {margin-top:0;}

/* ── 카드 / 발급키 ──────────────────────────────────── */
.apict-card {padding:24px; border:1px solid #e3e5e8; border-radius:6px; background:#fff;}
.apict-key {margin-bottom:22px; padding:18px 20px; border:1px solid #d9e4f2; border-radius:6px; background:#f3f7fc;}
.apict-key .k {display:block; margin-bottom:6px; color:#2c7bd4; font-size:13px; font-weight:700;}
.apict-key code {font-family:Consolas, Menlo, monospace; font-size:16px; letter-spacing:.5px; color:#1b1b1b;}
.apict-key .btn-copy {margin-left:8px; padding:5px 12px; border:1px solid #2c7bd4; border-radius:3px;
	background:#fff; color:#2c7bd4; font-size:13px; font-family:inherit; cursor:pointer;}
.apict-key .btn-copy:hover {background:#2c7bd4; color:#fff;}
.apict-key .d {margin-top:8px; color:#666; font-size:13px;}

/* ── 통계 요약 ──────────────────────────────────────── */
.apict-stat-row {display:flex; flex-wrap:wrap; gap:12px; margin-bottom:22px;}
.apict-stat {flex:1 1 160px; padding:18px 20px; border:1px solid #e3e5e8; border-radius:6px; background:#fff; text-align:center;}
.apict-stat .l {display:block; margin-bottom:6px; color:#777; font-size:13px;}
.apict-stat .n {display:block; color:#222; font-size:26px; font-weight:700; font-variant-numeric:tabular-nums;}
.apict-stat .st {display:block; margin-top:4px; color:#999; font-size:12px;}

/* ── 차트 ───────────────────────────────────────────── */
.chart-box {position:relative; height:320px; padding:16px; border:1px solid #e3e5e8; border-radius:6px; background:#fff;}
.chart-empty {padding:80px 0; color:#888; text-align:center;}

/* ── HTML 페이지 본문 ───────────────────────────────── */
.apict-html {line-height:1.8; color:#444;}
.apict-html img {max-width:100%; height:auto;}
.apict-html table {max-width:100%;}

@media (max-width:768px) {
	.apict-tbl {font-size:14px;}
	.apict-tbl th, .apict-tbl td {padding:10px 8px;}
	.apict-tbl input[type=text], .apict-tbl input[type=password] {min-width:0; width:100%;}
	.apict-stat {flex:1 1 100%;}
}