/*
Theme Name: Krexos
Author: Krexos Lab
Description: A cryptocurrency exchange WordPress theme with fixed left sidebar navigation, market ticker, and horizontal card layouts.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: krexos
Tags: crypto, exchange, sidebar, dark, finance
*/

/* ==========================================================================
   CSS Variables & Reset
   ========================================================================== */
:root {
	--krx-dark: #1A1A2E;
	--krx-gold: #D4A853;
	--krx-white: #FAFAFA;
	--krx-border: #E0E0E0;
	--krx-text: #2D2D3A;
	--krx-text-light: #6B7280;
	--krx-sidebar-w: 260px;
	--krx-radius: 12px;
	--krx-font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--krx-font-head: Georgia, 'Times New Roman', serif;
	--krx-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
	font-family: var(--krx-font-body);
	font-size: 16px;
	line-height: 1.65;
	color: var(--krx-text);
	background: var(--krx-white);
	overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--krx-transition); }
ul, ol { list-style: none; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--krx-font-head);
	font-weight: 700;
	line-height: 1.25;
	color: var(--krx-dark);
}

.krx-sr-only {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.krx-skip {
	position: absolute; top: -100%; left: 16px; z-index: 9999;
	padding: 8px 16px; background: var(--krx-gold); color: var(--krx-dark);
	border-radius: 4px; font-weight: 600;
}
.krx-skip:focus { top: 16px; }

/* ==========================================================================
   Layout
   ========================================================================== */
.krx-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 32px;
}

.krx-main {
	margin-left: var(--krx-sidebar-w);
	min-height: 100vh;
}

.krx-section {
	padding: 64px 0;
	border-bottom: 1px solid var(--krx-border);
}

.krx-section:last-child { border-bottom: none; }

.krx-section-head {
	margin-bottom: 40px;
}

.krx-eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: var(--krx-gold);
	margin-bottom: 8px;
}

.krx-section-title {
	font-size: clamp(24px, 3vw, 36px);
	color: var(--krx-dark);
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.krx-btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 12px 28px; border-radius: 8px; font-size: 14px;
	font-weight: 600; letter-spacing: 0.3px; cursor: pointer;
	transition: all var(--krx-transition); border: 2px solid transparent;
	text-align: center;
}

.krx-btn--gold {
	background: var(--krx-gold); color: var(--krx-dark); border-color: var(--krx-gold);
}
.krx-btn--gold:hover { background: #c49a45; border-color: #c49a45; transform: translateY(-1px); }

.krx-btn--dark {
	background: var(--krx-dark); color: var(--krx-white); border-color: var(--krx-dark);
}
.krx-btn--dark:hover { background: #2a2a42; transform: translateY(-1px); }

.krx-btn--outline {
	background: transparent; color: var(--krx-dark); border-color: var(--krx-border);
}
.krx-btn--outline:hover { border-color: var(--krx-gold); color: var(--krx-gold); }

.krx-btn--ghost {
	background: transparent; color: rgba(255,255,255,0.8); border-color: rgba(255,255,255,0.3);
}
.krx-btn--ghost:hover { color: #fff; border-color: rgba(255,255,255,0.6); }

.krx-btn--ghost-light {
	background: transparent; color: var(--krx-dark); border-color: rgba(26,26,46,0.3);
}
.krx-btn--ghost-light:hover { border-color: var(--krx-dark); }

.krx-btn--sm { padding: 8px 18px; font-size: 13px; }
.krx-btn--block { display: flex; width: 100%; }

/* ==========================================================================
   Sidebar (fixed left, dark)
   ========================================================================== */
.krx-sidebar {
	position: fixed; top: 0; left: 0; bottom: 0;
	width: var(--krx-sidebar-w); z-index: 1000;
	background: var(--krx-dark);
	display: flex; flex-direction: column;
	justify-content: space-between;
	padding: 32px 20px;
	overflow-y: auto;
}

.krx-sidebar__top { flex: 1; }

.krx-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 40px; }
.krx-brand__img { width: 36px; height: 36px; border-radius: 8px; }
.krx-brand__name {
	font-family: var(--krx-font-head);
	font-size: 20px; font-weight: 700; color: #fff;
}
.krx-brand--mobile .krx-brand__name { color: var(--krx-dark); }
.krx-brand--footer .krx-brand__name { color: var(--krx-dark); font-size: 22px; }

.krx-nav-list li { margin-bottom: 4px; }
.krx-nav-list a {
	display: flex; align-items: center; gap: 12px;
	padding: 12px 14px; border-radius: 8px;
	font-size: 14px; font-weight: 500;
	color: rgba(255,255,255,0.7);
	transition: all var(--krx-transition);
}
.krx-nav-list a:hover,
.krx-nav-list .current-menu-item a {
	background: rgba(212,168,83,0.12); color: var(--krx-gold);
}
.krx-nav-icon { width: 20px; height: 20px; flex-shrink: 0; }
.krx-nav-icon svg { width: 20px; height: 20px; }

.krx-sidebar__bottom {
	display: flex; flex-direction: column; gap: 10px;
	padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.1);
}

/* ==========================================================================
   Language Switcher
   ========================================================================== */
.krx-langswitch { display: flex; gap: 4px; margin-bottom: 8px; }
.krx-langswitch a {
	padding: 4px 10px; border-radius: 4px; font-size: 12px; font-weight: 600;
	transition: all var(--krx-transition);
}
.krx-langswitch--dark a { color: rgba(255,255,255,0.5); }
.krx-langswitch--dark a:hover { color: #fff; }
.krx-langswitch--dark .krx-active { background: rgba(212,168,83,0.2); color: var(--krx-gold); }
.krx-langswitch--light a { color: var(--krx-text-light); }
.krx-langswitch--light a:hover { color: var(--krx-dark); }
.krx-langswitch--light .krx-active { background: rgba(212,168,83,0.15); color: var(--krx-gold); }

/* ==========================================================================
   Mobile Topbar & Overlay
   ========================================================================== */
.krx-topbar {
	display: none; position: fixed; top: 0; left: 0; right: 0;
	height: 56px; z-index: 999; background: var(--krx-white);
	border-bottom: 1px solid var(--krx-border);
	align-items: center; padding: 0 16px; gap: 12px;
}
.krx-burger {
	width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
	background: none; border: none; cursor: pointer; color: var(--krx-dark);
}
.krx-burger svg { width: 22px; height: 22px; }

.krx-overlay {
	display: none; position: fixed; inset: 0; z-index: 999;
	background: rgba(0,0,0,0.5); opacity: 0; pointer-events: none;
	transition: opacity var(--krx-transition);
}
.krx-overlay--visible { opacity: 1; pointer-events: auto; }

.krx-noscroll { overflow: hidden; }

/* ==========================================================================
   Grid System
   ========================================================================== */
.krx-grid { display: grid; gap: 24px; }
.krx-grid--2col { grid-template-columns: repeat(2, 1fr); }
.krx-grid--3col { grid-template-columns: repeat(3, 1fr); }
.krx-grid--4col { grid-template-columns: repeat(4, 1fr); }

/* ==========================================================================
   Horizontal Post Card (image left 40% + text right 60%)
   ========================================================================== */
.krx-card--h {
	display: grid; grid-template-columns: 40% 60%;
	background: #fff; border-radius: var(--krx-radius);
	border: 1px solid var(--krx-border);
	overflow: hidden; transition: all var(--krx-transition);
}
.krx-card--h:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.08); transform: translateY(-2px); }

.krx-card__thumb { position: relative; overflow: hidden; }
.krx-card__thumb img {
	width: 100%; height: 100%; object-fit: cover;
	border-radius: var(--krx-radius) 0 0 var(--krx-radius);
}
.krx-badge {
	position: absolute; top: 12px; left: 12px;
	padding: 4px 10px; border-radius: 4px;
	font-size: 11px; font-weight: 700; text-transform: uppercase;
	background: var(--krx-gold); color: var(--krx-dark);
	letter-spacing: 0.5px;
}

.krx-card__body { padding: 24px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.krx-card__title { font-size: 18px; line-height: 1.35; }
.krx-card__title a:hover { color: var(--krx-gold); }
.krx-card__excerpt { font-size: 14px; color: var(--krx-text-light); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.krx-card__meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--krx-text-light); flex-wrap: wrap; }
.krx-card__author { display: flex; align-items: center; gap: 6px; }
.krx-card__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--krx-border); }

.krx-avatar {
	display: inline-flex; align-items: center; justify-content: center;
	width: 24px; height: 24px; border-radius: 50%;
	background: var(--krx-dark); color: var(--krx-gold);
	font-size: 10px; font-weight: 700;
}
.krx-avatar--lg { width: 48px; height: 48px; font-size: 16px; }

/* ==========================================================================
   Market Ticker
   ========================================================================== */
.krx-ticker-section { padding: 0; border-bottom: 1px solid var(--krx-border); background: var(--krx-dark); }

.krx-ticker { overflow: hidden; position: relative; padding: 14px 0; }
.krx-ticker__track {
	display: flex; gap: 40px; width: max-content;
	animation: krx-scroll 30s linear infinite;
}
.krx-ticker--paused .krx-ticker__track { animation-play-state: paused; }

@keyframes krx-scroll {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

.krx-ticker__item { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.krx-ticker__sym { font-weight: 700; font-size: 13px; color: #fff; }
.krx-ticker__price { font-size: 13px; color: rgba(255,255,255,0.8); font-variant-numeric: tabular-nums; }
.krx-ticker__change { font-size: 12px; font-weight: 600; }
.krx-up { color: #34d399; }
.krx-down { color: #f87171; }

.krx-ticker-cta { padding: 12px 32px; display: flex; justify-content: flex-end; }

/* ==========================================================================
   Features Section (3 blocks)
   ========================================================================== */
.krx-feat-card {
	padding: 32px 24px; border-radius: var(--krx-radius);
	border: 1px solid var(--krx-border); background: #fff;
	transition: all var(--krx-transition);
}
.krx-feat-card:hover { border-color: var(--krx-gold); box-shadow: 0 4px 20px rgba(212,168,83,0.1); }
.krx-feat-icon {
	display: flex; align-items: center; justify-content: center;
	width: 48px; height: 48px; border-radius: 10px;
	background: rgba(212,168,83,0.1); color: var(--krx-gold);
	margin-bottom: 16px;
}
.krx-feat-icon svg { width: 24px; height: 24px; }
.krx-feat-card h3 { font-size: 18px; margin-bottom: 8px; }
.krx-feat-card p { font-size: 14px; color: var(--krx-text-light); line-height: 1.6; }

/* ==========================================================================
   Instruments Grid (4 cols)
   ========================================================================== */
.krx-instr-card {
	text-align: center; padding: 32px 16px;
	border-radius: var(--krx-radius); border: 1px solid var(--krx-border);
	background: #fff; transition: all var(--krx-transition);
}
.krx-instr-card:hover { border-color: var(--krx-gold); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.06); }
.krx-instr-icon { width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 12px; object-fit: cover; }
.krx-instr-card h4 { font-size: 16px; margin-bottom: 6px; }
.krx-instr-card p { font-size: 13px; color: var(--krx-text-light); line-height: 1.55; }
.krx-instruments__cta { text-align: center; margin-top: 32px; }

/* ==========================================================================
   Advantages (alternating rows)
   ========================================================================== */
.krx-adv-row {
	display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
	align-items: center; margin-bottom: 48px;
}
.krx-adv-row:last-child { margin-bottom: 0; }
.krx-adv-row--reverse .krx-adv-img { order: 2; }
.krx-adv-row--reverse .krx-adv-text { order: 1; }
.krx-adv-img img { border-radius: var(--krx-radius); width: 100%; height: 300px; object-fit: cover; }
.krx-adv-text h3 { font-size: 22px; margin-bottom: 12px; }
.krx-adv-text p { font-size: 15px; color: var(--krx-text-light); line-height: 1.7; }

/* ==========================================================================
   CTA Banner (amber gold full-width)
   ========================================================================== */
.krx-cta-banner { background: var(--krx-gold); border-bottom: none; }
.krx-cta-banner__inner { text-align: center; }
.krx-cta-banner__title { font-size: clamp(22px, 3vw, 32px); color: var(--krx-dark); margin-bottom: 10px; }
.krx-cta-banner__text { font-size: 16px; color: rgba(26,26,46,0.75); margin-bottom: 28px; }
.krx-cta-banner__btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ==========================================================================
   Articles Section
   ========================================================================== */
.krx-articles__cta { text-align: center; margin-top: 32px; }
.krx-first__cta { text-align: center; margin-top: 32px; }

/* First-screen hero banner (assets/images/banner-hero.png) as a soft backdrop
   layer; the section's existing light background stays as the overlay so the
   2-column cards remain fully readable. */
.krx-first { position: relative; overflow: hidden; }
.krx-first__bg {
	position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background-size: cover; background-position: center; background-repeat: no-repeat;
	opacity: .14;
}
.krx-first > .krx-container { position: relative; z-index: 1; }

/* ==========================================================================
   Footer (2-column minimal light)
   ========================================================================== */
.krx-footer {
	margin-left: var(--krx-sidebar-w);
	padding: 48px 0 0;
	border-top: 1px solid var(--krx-border);
	background: #fff;
}
.krx-footer__grid {
	display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
	padding-bottom: 40px;
}
.krx-footer__about { font-size: 14px; color: var(--krx-text-light); margin: 12px 0 16px; line-height: 1.6; }

.krx-social { display: flex; gap: 12px; margin-bottom: 12px; }
.krx-social a {
	display: flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; border-radius: 8px;
	background: rgba(26,26,46,0.05); color: var(--krx-text-light);
	transition: all var(--krx-transition);
}
.krx-social a:hover { background: var(--krx-gold); color: var(--krx-dark); }
.krx-social svg { width: 18px; height: 18px; }

.krx-footer__links h5 { font-size: 14px; font-weight: 700; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 1px; }
.krx-footer__links ul { margin-bottom: 20px; }
.krx-footer__links li { margin-bottom: 8px; }
.krx-footer__links a { font-size: 14px; color: var(--krx-text-light); }
.krx-footer__links a:hover { color: var(--krx-gold); }

.krx-footer__bottom {
	display: flex; justify-content: space-between; align-items: center;
	padding: 20px 0; border-top: 1px solid var(--krx-border);
	font-size: 13px; color: var(--krx-text-light);
}
.krx-footer__legal { display: flex; gap: 16px; }
.krx-footer__legal a:hover { color: var(--krx-gold); }

/* ==========================================================================
   Archive / Listing
   ========================================================================== */
.krx-archive-header { margin-bottom: 32px; }
.krx-archive-title { font-size: clamp(24px, 3vw, 34px); margin-bottom: 8px; }
.krx-archive-desc { font-size: 15px; color: var(--krx-text-light); }
.krx-empty { font-size: 16px; color: var(--krx-text-light); text-align: center; padding: 48px 0; }

.krx-pagination {
	display: flex; justify-content: center; gap: 4px;
	margin-top: 40px; flex-wrap: wrap;
}
.krx-pagination a, .krx-pagination span {
	display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; border-radius: 6px;
	font-size: 14px; font-weight: 500; border: 1px solid var(--krx-border);
	transition: all var(--krx-transition);
}
.krx-pagination a:hover { border-color: var(--krx-gold); color: var(--krx-gold); }
.krx-pagination .current { background: var(--krx-gold); border-color: var(--krx-gold); color: var(--krx-dark); font-weight: 700; }

/* ==========================================================================
   Single Post (left TOC sidebar + right content)
   ========================================================================== */
.krx-single__layout {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 48px;
	align-items: start;
}

.krx-single__aside {
	position: sticky; top: 32px;
}

.krx-toc { margin-bottom: 24px; padding: 20px; background: #fff; border-radius: var(--krx-radius); border: 1px solid var(--krx-border); }
.krx-toc__title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--krx-text-light); margin-bottom: 12px; }
.krx-toc__list { border-left: 2px solid var(--krx-border); padding-left: 12px; }
.krx-toc__item { margin-bottom: 6px; }
.krx-toc__item--sub { padding-left: 12px; }
.krx-toc__link { font-size: 13px; color: var(--krx-text-light); transition: color var(--krx-transition); display: block; padding: 3px 0; }
.krx-toc__link:hover, .krx-toc__link--active { color: var(--krx-gold); }

.krx-author-card {
	padding: 20px; background: #fff; border-radius: var(--krx-radius);
	border: 1px solid var(--krx-border); margin-bottom: 24px; text-align: center;
}
.krx-author-card h5 { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--krx-text-light); margin: 12px 0 4px; }
.krx-author-card__name { font-size: 14px; font-weight: 600; }

.krx-side-cta {
	padding: 20px; background: var(--krx-dark); border-radius: var(--krx-radius); color: #fff;
}
.krx-side-cta h5 { font-size: 15px; color: #fff; margin-bottom: 6px; }
.krx-side-cta p { font-size: 13px; color: rgba(255,255,255,0.7); margin-bottom: 14px; }

.krx-single__header { margin-bottom: 24px; }
.krx-single__header .krx-badge { position: static; display: inline-block; margin-bottom: 12px; }
.krx-single__title { font-size: clamp(26px, 3.5vw, 38px); margin-bottom: 12px; }
.krx-single__meta { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--krx-text-light); }
.krx-single__thumb { margin-bottom: 32px; }
.krx-img-rounded { border-radius: var(--krx-radius); width: 100%; }

.krx-single__body { font-size: 16px; line-height: 1.8; }
.krx-single__body h2 { font-size: 24px; margin: 36px 0 16px; padding-top: 20px; border-top: 1px solid var(--krx-border); }
.krx-single__body h3 { font-size: 20px; margin: 28px 0 12px; }
.krx-single__body p { margin-bottom: 16px; }
.krx-single__body ul, .krx-single__body ol { margin: 0 0 16px 20px; }
.krx-single__body ul { list-style: disc; }
.krx-single__body ol { list-style: decimal; }
.krx-single__body li { margin-bottom: 6px; }
.krx-single__body blockquote {
	border-left: 3px solid var(--krx-gold); padding: 16px 20px;
	margin: 20px 0; background: rgba(212,168,83,0.05);
	border-radius: 0 var(--krx-radius) var(--krx-radius) 0;
	font-style: italic; color: var(--krx-text-light);
}
.krx-single__body img { border-radius: 8px; margin: 20px 0; }
.krx-single__body a { color: var(--krx-gold); text-decoration: underline; }
.krx-single__body a:hover { color: var(--krx-dark); }
.krx-single__body code { background: rgba(26,26,46,0.05); padding: 2px 6px; border-radius: 4px; font-size: 14px; }
.krx-single__body pre { background: var(--krx-dark); color: #e2e8f0; padding: 20px; border-radius: 8px; overflow-x: auto; margin: 20px 0; }
.krx-single__body pre code { background: none; padding: 0; color: inherit; }

.krx-single__tags { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--krx-border); font-size: 13px; }
.krx-single__tags a { display: inline-block; padding: 4px 10px; background: rgba(212,168,83,0.1); border-radius: 4px; color: var(--krx-gold); margin: 4px 4px 4px 0; font-weight: 500; }
.krx-single__tags a:hover { background: var(--krx-gold); color: var(--krx-dark); }

/* ==========================================================================
   Page Template
   ========================================================================== */
.krx-page__content { max-width: 780px; margin: 0 auto; }
.krx-page__title { font-size: clamp(26px, 3.5vw, 38px); margin-bottom: 24px; }
.krx-page__body { font-size: 16px; line-height: 1.8; }
.krx-page__body h2 { font-size: 24px; margin: 32px 0 14px; }
.krx-page__body h3 { font-size: 20px; margin: 24px 0 10px; }
.krx-page__body p { margin-bottom: 16px; }
.krx-page__body ul, .krx-page__body ol { margin: 0 0 16px 20px; }
.krx-page__body ul { list-style: disc; }
.krx-page__body ol { list-style: decimal; }
.krx-page__body li { margin-bottom: 6px; }

/* ==========================================================================
   Search Form
   ========================================================================== */
.krx-searchform { display: flex; gap: 8px; max-width: 480px; margin: 24px auto 0; }
.krx-searchform__input {
	flex: 1; padding: 10px 16px; border: 1px solid var(--krx-border);
	border-radius: 8px; font-size: 14px; outline: none;
	transition: border-color var(--krx-transition);
}
.krx-searchform__input:focus { border-color: var(--krx-gold); }

/* ==========================================================================
   404
   ========================================================================== */
.krx-404__inner { text-align: center; padding: 80px 0; }
.krx-404__title { font-size: clamp(28px, 4vw, 42px); margin-bottom: 12px; }
.krx-404__text { font-size: 16px; color: var(--krx-text-light); margin-bottom: 28px; }
.krx-404__search { margin-top: 32px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
	.krx-grid--4col { grid-template-columns: repeat(2, 1fr); }
	.krx-single__layout { grid-template-columns: 1fr; }
	.krx-single__aside { position: static; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
	.krx-adv-row { grid-template-columns: 1fr; gap: 24px; }
	.krx-adv-row--reverse .krx-adv-img { order: 0; }
	.krx-adv-row--reverse .krx-adv-text { order: 0; }
}

@media (max-width: 900px) {
	.krx-sidebar { transform: translateX(-100%); transition: transform var(--krx-transition); }
	.krx-sidebar--open { transform: translateX(0); }
	.krx-overlay { display: block; }
	.krx-topbar { display: flex; }
	.krx-main { margin-left: 0; padding-top: 56px; }
	.krx-footer { margin-left: 0; }
	.krx-grid--3col { grid-template-columns: 1fr; }
	.krx-single__aside { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
	.krx-grid--2col { grid-template-columns: 1fr; }
	.krx-grid--4col { grid-template-columns: 1fr; }
	.krx-card--h { grid-template-columns: 1fr; }
	.krx-card__thumb img { border-radius: var(--krx-radius) var(--krx-radius) 0 0; height: 200px; }
	.krx-container { padding: 0 16px; }
	.krx-section { padding: 40px 0; }
	.krx-footer__grid { grid-template-columns: 1fr; gap: 32px; }
	.krx-footer__bottom { flex-direction: column; gap: 8px; text-align: center; }
	.krx-cta-banner__btns { flex-direction: column; align-items: center; }
	.krx-adv-img img { height: 200px; }
}