/* ==========================================================================
 * aipado theme — main stylesheet
 *   배경 #fff · 포인트 #4f8cff · 보더 #e0e0e0 / 카드 0.5px #ebebeb
 * ========================================================================== */

/* ───── Reset ───── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif;
	background: #fff;
	color: #1a1a1a;
	line-height: 1.6;
	font-size: 15px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
a    { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }
button   { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
ol, ul   { list-style: none; }

/* ───── Layout ───── */
.container          { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.container--narrow  { max-width: 820px; }

/* ───── Header ───── */
.site-header {
	background: #fff;
	border-bottom: 1px solid #e0e0e0;
	position: sticky;
	top: 0;
	z-index: 50;
}
.site-header__inner {
	display: flex; align-items: center; justify-content: space-between;
	height: 64px;
}
.site-logo {
	font-size: 24px; font-weight: 700; letter-spacing: -0.5px;
	color: #1a1a1a;
}
.site-logo span { color: #4f8cff; }
.site-nav, .site-nav .site-menu { display: flex; }
.site-menu { gap: 28px; }
.site-menu a {
	color: #444; font-size: 14px; font-weight: 500;
	transition: color .15s;
}
.site-menu a:hover, .site-menu li.current-menu-item a { color: #4f8cff; }
.nav-toggle {
	display: none; width: 40px; height: 40px;
	font-size: 22px; color: #444;
	align-items: center; justify-content: center;
}

/* ───── Main ───── */
.site-main { padding: 0 0 60px; min-height: 60vh; }

/* ───── News Ticker ───── */
.news-ticker {
	background: #f8faff;
	border-bottom: 1px solid #ebebeb;
	padding: 12px 0;
}
.news-ticker .container {
	display: flex; align-items: center; gap: 18px;
	overflow: hidden;
}
.ticker-label {
	color: #4f8cff; font-size: 12px; font-weight: 700;
	white-space: nowrap; letter-spacing: 0.3px;
}
.ticker-track {
	display: flex; gap: 28px; white-space: nowrap;
	overflow: hidden; flex: 1; min-width: 0;
}
.ticker-item {
	color: #444; font-size: 13px;
	text-overflow: ellipsis; overflow: hidden; max-width: 360px;
	transition: color .15s;
}
.ticker-item:hover { color: #4f8cff; }

/* ───── Hero ───── */
.hero {
	padding: 60px 0 50px;
	border-bottom: 1px solid #ebebeb;
}
.hero__label {
	display: inline-block;
	color: #4f8cff; font-size: 13px; font-weight: 600;
	margin-bottom: 14px;
}
.hero__title {
	font-size: clamp(28px, 5vw, 48px);
	font-weight: 800; letter-spacing: -1.5px; line-height: 1.2;
	color: #0f172a;
}
.hero__title .accent { color: #4f8cff; }
.hero__title a       { color: inherit; }
.hero__excerpt {
	color: #888; font-size: 16px;
	margin-top: 14px; max-width: 680px;
}

/* ───── Section heads ───── */
.section-head {
	display: flex; align-items: baseline; justify-content: space-between;
	margin-bottom: 22px; padding: 40px 0 0;
	gap: 12px; flex-wrap: wrap;
}
.section-head--center {
	flex-direction: column; align-items: center; text-align: center;
	gap: 8px; padding-bottom: 12px;
}
.section-title {
	font-size: 22px; font-weight: 700;
	color: #1a1a1a; letter-spacing: -0.5px;
}
.section-desc {
	color: #888; font-size: 14px;
	max-width: 540px;
}
.section-more { color: #888; font-size: 13px; transition: color .15s; }
.section-more:hover { color: #4f8cff; }

/* ───── Category tabs ───── */
.cat-tabs {
	display: flex; gap: 8px; flex-wrap: wrap;
	margin-bottom: 18px;
}
.cat-tab {
	padding: 8px 16px; border-radius: 999px;
	background: #f5f5f5; color: #444;
	font-size: 13px; font-weight: 500;
	transition: background-color .15s, color .15s;
	border: none; cursor: pointer; line-height: 1.2;
}
.cat-tab:hover           { background: #ebf2ff; color: #4f8cff; }
.cat-tab.is-active       { background: #4f8cff; color: #fff; }

/* ───── Filter bar ───── */
.filter-bar {
	display: flex; gap: 18px; flex-wrap: wrap;
	padding: 4px 0 18px;
}
.filter-bar label {
	font-size: 13px; color: #444;
	cursor: pointer; user-select: none;
	display: inline-flex; align-items: center;
}
.filter-bar input[type=checkbox] {
	margin-right: 6px; accent-color: #4f8cff;
	width: 14px; height: 14px;
}

/* ───── News grid ───── */
.news-grid {
	display: grid; gap: 18px;
	grid-template-columns: repeat(2, 1fr);
}
.news-grid__item { display: flex; }
.news-card {
	display: flex; flex-direction: column; gap: 8px;
	padding: 20px;
	border: 0.5px solid #ebebeb; border-radius: 12px;
	background: #fff;
	transition: border-color .15s, transform .15s, box-shadow .15s;
	flex: 1; width: 100%;
}
.news-card:hover {
	border-color: #bfdbfe;
	transform: translateY(-1px);
	box-shadow: 0 4px 16px rgba(79,140,255,.06);
}
.news-card__meta { display: flex; align-items: center; gap: 8px; }
.cat-badge {
	display: inline-block;
	padding: 2px 8px; border-radius: 4px;
	background: #ebf2ff; color: #4f8cff;
	font-size: 11px; font-weight: 600;
}
.news-card__time { color: #bbb; font-size: 12px; }
.news-card__title {
	font-size: 15px; font-weight: 700;
	color: #1a1a1a; line-height: 1.4;
}
.news-card__excerpt {
	color: #888; font-size: 13px; line-height: 1.55;
}

/* ───── News numbered list ───── */
.news-numbered { margin-top: 4px; }
.news-numbered__row {
	display: grid;
	grid-template-columns: 36px 1fr auto auto;
	gap: 16px; align-items: center;
	padding: 16px 0;
	border-bottom: 0.5px solid #ebebeb;
}
.news-numbered__num {
	font-size: 14px; color: #bbb; font-weight: 600;
	text-align: center;
}
.news-numbered__body { min-width: 0; }
.news-numbered__title { font-size: 15px; font-weight: 600; color: #1a1a1a; }
.news-numbered__exc {
	color: #888; font-size: 13px; margin-top: 2px;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.news-numbered__cat  { color: #4f8cff; font-size: 12px; font-weight: 500; }
.news-numbered__time { color: #bbb; font-size: 12px; white-space: nowrap; }

/* ───── Tool grid ───── */
.tool-grid       { display: grid; gap: 16px; }
.tool-grid--3    { grid-template-columns: repeat(3, 1fr); }
.tool-card {
	display: flex; flex-direction: column; gap: 10px;
	padding: 18px;
	border: 0.5px solid #ebebeb; border-radius: 12px;
	background: #fff;
	transition: border-color .15s, transform .15s, box-shadow .15s;
}
.tool-card:hover {
	border-color: #bfdbfe;
	transform: translateY(-1px);
	box-shadow: 0 4px 16px rgba(79,140,255,.06);
}
.tool-card__head { display: flex; align-items: center; gap: 12px; }
.tool-card__icon {
	width: 40px; height: 40px;
	display: flex; align-items: center; justify-content: center;
	background: #f5f5f5; border-radius: 10px;
	font-size: 20px; flex-shrink: 0;
}
.tool-card__title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tool-card__title strong {
	font-size: 15px; color: #1a1a1a; font-weight: 700;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tool-card__cat { color: #888; font-size: 11px; }
.tool-card__excerpt {
	color: #888; font-size: 13px; line-height: 1.5;
	min-height: 2.5em;
}
.tool-card__badges { display: flex; flex-wrap: wrap; gap: 6px; }

/* ───── Badges ───── */
.badge {
	display: inline-block; padding: 3px 9px;
	border-radius: 999px;
	font-size: 11px; font-weight: 500;
	line-height: 1.4;
}
.badge-free  { background: #ebf2ff; color: #4f8cff; }
.badge-paid  { background: #fafafa; color: #888; border: 0.5px solid #ebebeb; }
.badge-ko    { background: #fff7ed; color: #b45309; }
.badge-price { background: #fafafa; color: #444; border: 0.5px solid #ebebeb; }

/* ───── Score ───── */
.tool-card__score {
	display: flex; align-items: center; gap: 10px;
	margin-top: 4px;
}
.score-bar {
	flex: 1; height: 4px;
	background: #f0f0f0; border-radius: 2px; overflow: hidden;
}
.score-bar__fill { height: 100%; background: #4f8cff; }
.score-num {
	font-size: 13px; color: #1a1a1a; font-weight: 700;
	min-width: 28px; text-align: right;
}

/* ───── Dual section (랭킹 + 뉴스레터) ───── */
.dual-section__inner {
	display: grid; gap: 32px;
	grid-template-columns: 1.4fr 1fr;
	margin-top: 20px;
}
.rank-list__item {
	display: grid;
	grid-template-columns: 32px 36px 1fr auto;
	gap: 12px; align-items: center;
	padding: 12px 0;
	border-bottom: 0.5px solid #ebebeb;
}
.rank-list__num {
	font-size: 14px; color: #bbb; font-weight: 700;
	text-align: center;
}
.rank-list__item.is-top .rank-list__num { color: #4f8cff; }
.rank-list__icon {
	width: 36px; height: 36px;
	display: flex; align-items: center; justify-content: center;
	background: #f5f5f5; border-radius: 8px;
	font-size: 18px;
}
.rank-list__name {
	font-size: 14px; color: #1a1a1a; font-weight: 600;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rank-list__name:hover { color: #4f8cff; }
.rank-list__score {
	color: #4f8cff; font-size: 14px; font-weight: 700;
	min-width: 32px; text-align: right;
}

.newsletter-box {
	padding: 24px;
	border: 0.5px solid #ebebeb; border-radius: 12px;
	background: #f8faff;
}
.newsletter-box__desc { color: #444; font-size: 13px; margin-bottom: 14px; }
.newsletter-form { display: flex; gap: 8px; }
.newsletter-form input[type=email] {
	flex: 1; min-width: 0;
	padding: 10px 14px;
	border: 1px solid #e0e0e0; border-radius: 8px;
	font-size: 14px; font-family: inherit;
	background: #fff;
	transition: border-color .15s, box-shadow .15s;
}
.newsletter-form input[type=email]:focus {
	outline: none; border-color: #4f8cff;
	box-shadow: 0 0 0 3px rgba(79,140,255,.12);
}
.newsletter-form button {
	padding: 10px 18px; border-radius: 8px;
	background: #4f8cff; color: #fff;
	font-size: 14px; font-weight: 600;
	transition: background-color .15s;
	white-space: nowrap;
}
.newsletter-form button:hover:not(:disabled) { background: #3b78ee; }
.newsletter-form button:disabled { opacity: .5; cursor: not-allowed; }
.newsletter-form__feedback {
	font-size: 13px; margin-top: 10px; min-height: 1.4em;
	color: transparent;
}
.newsletter-form__feedback.is-success { color: #4f8cff; }
.newsletter-form__feedback.is-error   { color: #b91c1c; }

/* ───── News single ───── */
.news-single { padding: 30px 0 60px; }
.back-link {
	display: inline-block; color: #888; font-size: 13px;
	margin-bottom: 20px; transition: color .15s;
}
.back-link:hover { color: #4f8cff; }
.news-single__meta {
	display: flex; align-items: center; gap: 10px;
	color: #bbb; font-size: 13px; margin-bottom: 14px;
}
.news-single__title {
	font-size: clamp(26px, 4vw, 40px);
	font-weight: 800; letter-spacing: -1px; line-height: 1.25;
	color: #0f172a;
}
.news-single__body {
	font-size: 16px; line-height: 1.8;
	color: #1a1a1a; margin-top: 24px;
}
.news-single__body p             { margin: 0 0 16px; }
.news-single__body h2            { font-size: 22px; margin: 30px 0 12px; }
.news-single__body h3            { font-size: 18px; margin: 24px 0 10px; }
.news-single__body a             { color: #4f8cff; text-decoration: underline; text-underline-offset: 2px; }
.news-single__body img           { border-radius: 8px; margin: 18px 0; }
.news-single__body blockquote    { border-left: 3px solid #4f8cff; padding-left: 16px; color: #444; margin: 18px 0; }
.news-single__body ul, .news-single__body ol { margin: 0 0 16px 22px; }
.news-single__body li            { list-style: disc; margin-bottom: 6px; }
.news-single__body ol li         { list-style: decimal; }
.news-single__body code          { background: #f5f5f5; padding: 2px 6px; border-radius: 4px; font-size: 13px; }
.news-single__body pre {
	background: #f5f5f5; padding: 16px; border-radius: 8px;
	overflow-x: auto; font-size: 13px; margin: 18px 0;
}

.related-news, .related-tools {
	padding-top: 30px; border-top: 0.5px solid #ebebeb;
	margin-top: 30px;
}

/* ───── Tool single ───── */
.tool-single { padding: 30px 0 60px; }
.tool-single__head {
	display: grid; grid-template-columns: 80px 1fr auto;
	gap: 20px; align-items: center;
	margin-bottom: 30px;
	padding-bottom: 24px; border-bottom: 0.5px solid #ebebeb;
}
.tool-single__icon {
	width: 80px; height: 80px;
	display: flex; align-items: center; justify-content: center;
	background: #f5f5f5; border-radius: 16px;
	font-size: 36px;
}
.tool-single__cat {
	color: #4f8cff; font-size: 13px; font-weight: 600;
	margin-bottom: 4px; display: inline-block;
}
.tool-single__title {
	font-size: clamp(24px, 4vw, 32px);
	font-weight: 800; letter-spacing: -0.5px;
}
.tool-single__badges {
	display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap;
}
.tool-single__score {
	text-align: center; padding: 14px 22px;
	border-radius: 12px; background: #ebf2ff;
}
.tool-single__score-label {
	display: block; color: #4f8cff;
	font-size: 11px; font-weight: 600;
	text-transform: uppercase; letter-spacing: 0.5px;
}
.tool-single__score-num {
	display: block; color: #4f8cff;
	font-size: 40px; font-weight: 800; line-height: 1.1;
	margin-top: 4px;
}
.tool-single__body { font-size: 16px; line-height: 1.8; color: #1a1a1a; }
.tool-single__body p { margin: 0 0 14px; }
.tool-single__body a { color: #4f8cff; text-decoration: underline; }

/* ───── Ranking page ───── */
.rank-table { padding: 8px 0; }
.rank-table__row {
	display: grid;
	grid-template-columns: 48px 48px 1fr 110px 1fr 50px;
	gap: 14px; align-items: center;
	padding: 14px 0;
	border-bottom: 0.5px solid #ebebeb;
}
.rank-table__num {
	font-size: 18px; font-weight: 800;
	color: #bbb; text-align: center;
}
.rank-table__row.is-top .rank-table__num { color: #4f8cff; }
.rank-table__icon {
	width: 44px; height: 44px;
	display: flex; align-items: center; justify-content: center;
	background: #f5f5f5; border-radius: 10px;
	font-size: 20px;
}
.rank-table__name { font-size: 15px; font-weight: 600; color: #1a1a1a; }
.rank-table__name:hover { color: #4f8cff; }
.rank-table__cat { color: #888; font-size: 12px; }
.rank-table__bar { height: 6px; background: #f0f0f0; border-radius: 3px; overflow: hidden; }
.rank-table__fill { height: 100%; background: #4f8cff; }
.rank-table__score { color: #4f8cff; font-weight: 700; text-align: right; }

/* ───── Newsletter page ───── */
.newsletter-page { padding: 50px 0; }
.newsletter-points {
	margin: 24px auto 30px;
	max-width: 480px;
}
.newsletter-points li {
	padding: 12px 16px;
	border-bottom: 0.5px solid #ebebeb;
	font-size: 14px; color: #444;
}
.newsletter-points li::before {
	content: '✓';
	color: #4f8cff; font-weight: 700;
	margin-right: 10px;
}
.newsletter-points strong { color: #1a1a1a; }
.newsletter-form--big { max-width: 480px; margin: 0 auto; }
.newsletter-form--big input[type=email] { padding: 14px 18px; font-size: 15px; }
.newsletter-form--big button { padding: 14px 22px; font-size: 15px; }
.newsletter-form--big + .newsletter-form__feedback {
	text-align: center; max-width: 480px; margin: 10px auto 0;
}
.newsletter-extra {
	margin-top: 40px; padding-top: 30px;
	border-top: 0.5px solid #ebebeb;
	color: #444; font-size: 15px; line-height: 1.8;
}

/* ───── Pagination ───── */
.pagination, .nav-links, .page-numbers-list {
	display: flex; justify-content: center; gap: 6px;
	margin-top: 30px; flex-wrap: wrap;
}
.page-numbers {
	display: inline-block; padding: 6px 12px;
	border: 0.5px solid #ebebeb; border-radius: 6px;
	font-size: 13px; color: #444;
	transition: all .15s;
}
.page-numbers.current {
	background: #4f8cff; color: #fff; border-color: #4f8cff;
}
.page-numbers:not(.current):hover {
	border-color: #4f8cff; color: #4f8cff;
}

/* ───── Footer ───── */
.site-footer {
	background: #fafafa;
	border-top: 1px solid #e0e0e0;
	padding: 30px 0 24px;
	margin-top: 40px;
}
.site-footer__top {
	display: flex; align-items: baseline; gap: 14px;
	flex-wrap: wrap; margin-bottom: 16px;
}
.site-footer__top .site-logo { font-size: 20px; }
.site-footer__tagline { color: #888; font-size: 13px; }
.site-footer__bottom {
	display: flex; justify-content: space-between;
	color: #bbb; font-size: 12px;
	flex-wrap: wrap; gap: 8px;
}

/* ───── Misc / utility ───── */
.empty-state {
	text-align: center; color: #888;
	padding: 30px 0; font-size: 14px;
}

/* ===================================================================
 * Responsive
 * =================================================================== */
@media (max-width: 880px) {
	.site-nav { display: none; }
	.site-nav.is-open {
		display: block; position: absolute;
		top: 64px; left: 0; right: 0;
		background: #fff;
		border-bottom: 1px solid #e0e0e0;
		padding: 14px 20px;
	}
	.site-nav.is-open .site-menu {
		flex-direction: column; gap: 14px;
	}
	.nav-toggle { display: inline-flex; }

	.news-grid     { grid-template-columns: 1fr; }
	.tool-grid--3  { grid-template-columns: 1fr; }
	.dual-section__inner { grid-template-columns: 1fr; gap: 24px; }

	.news-numbered__row {
		grid-template-columns: 28px 1fr;
		row-gap: 4px; padding: 14px 0;
	}
	.news-numbered__cat, .news-numbered__time {
		grid-column: 2 / 3; font-size: 11px;
	}
	.news-numbered__exc { white-space: normal; }

	.hero          { padding: 40px 0 30px; }
	.section-head  { padding-top: 30px; }

	.tool-single__head {
		grid-template-columns: 60px 1fr;
		grid-template-rows: auto auto;
	}
	.tool-single__icon { width: 60px; height: 60px; font-size: 28px; }
	.tool-single__score {
		grid-column: 1 / 3; padding: 10px;
		display: flex; align-items: baseline; justify-content: center; gap: 12px;
	}
	.tool-single__score-num { font-size: 28px; }

	.rank-table__row {
		grid-template-columns: 36px 40px 1fr 50px;
		row-gap: 6px;
	}
	.rank-table__cat, .rank-table__bar {
		grid-column: 2 / 5;
	}
}

@media (max-width: 540px) {
	.ticker-item       { max-width: 220px; }
	.news-card         { padding: 16px; }
	.tool-card         { padding: 14px; }
	.filter-bar        { flex-wrap: wrap; gap: 12px; }
	.newsletter-form   { flex-direction: column; }
	.newsletter-form button { width: 100%; }
	.site-header__inner { height: 56px; }
	.site-nav.is-open  { top: 56px; }
}