/* ECNEX — main styles */
:root {
	--accent: #1F6BFF;
	--ink: #0B1220;
	--text: #3B4456;
	--muted: #5B6475;
	--line: #E6E8EE;
	--soft: #F5F7FB;
	--dark: #0B1220;
	--dark-2: #141C2E;
	--dark-3: #1A2234;
	--dark-line: #36405A;
	--on-dark: #C3C9D6;
	--on-dark-muted: #A3ABBC;
	--accent-on-dark: #8FA6FF;
	--radius: 16px;
	--font: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
}
.lang-ja { --font: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; background: #fff; color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.6; word-break: keep-all; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
.lang-ja body, body.lang-ja { word-break: normal; line-break: strict; overflow-wrap: anywhere; }
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 8px; }
.skip-link:focus { left: 8px; color: #fff; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.container--narrow { max-width: 860px; }
.container--form { max-width: 820px; }
.center { text-align: center; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--line); }
.admin-bar .site-header { top: 32px; }
.site-header__inner { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-logo img { display: block; height: 36px; width: auto; }
.site-nav { display: flex; align-items: center; gap: 28px; font-size: 15px; font-weight: 500; }
.site-header__right { display: flex; align-items: center; gap: 12px; }
.lang-switch { display: flex; gap: 2px; font-size: 13px; font-weight: 700; }
.lang-switch a { padding: 8px; color: var(--muted); min-height: 36px; display: inline-flex; align-items: center; }
.lang-switch a[aria-current="true"] { color: var(--ink); font-weight: 800; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0 28px; border-radius: 10px; font-weight: 700; font-size: 17px; border: 0; cursor: pointer; transition: transform .15s ease, opacity .15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { color: #fff; opacity: .92; }
.btn--ghost { background: #fff; border: 1px solid #D5D9E2; color: var(--ink); }
.btn--sm { height: 44px; padding: 0 20px; font-size: 15px; }
.btn--block { width: 100%; }
.pill-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid #D5D9E2; background: #fff; font-size: 15px; font-weight: 700; }
.more { font-size: 15px; font-weight: 700; }
.card .more { color: var(--accent); margin-top: auto; padding-top: 6px; }
.card .more:hover { text-decoration: underline; }

/* Typography */
.eyebrow { margin: 0; font-size: 15px; font-weight: 700; color: var(--accent); }
.h2 { margin: 0; font-size: 36px; font-weight: 800; letter-spacing: -.8px; line-height: 1.35; }
.h2--lg { font-size: 40px; letter-spacing: -1px; line-height: 1.4; }
.h3 { margin: 0; font-size: 22px; font-weight: 700; }
.lead { margin: 0; font-size: 17px; line-height: 1.7; color: var(--muted); }
.text { margin: 0; font-size: 16px; line-height: 1.7; color: var(--muted); }
.small { margin: 0; font-size: 14px; color: var(--muted); }
em.hl { font-style: normal; color: var(--accent); }
.hl-line { color: var(--accent); }
.muted-line { color: var(--muted); }
.source { margin: 24px 0 0; font-size: 13px; color: #8A93A6; }
.tag { font-size: 14px; font-weight: 800; color: var(--accent); }

/* Sections */
.sec { padding: 96px 0; }
.sec--soft { background: var(--soft); }
.sec--dark { background: var(--dark); color: #fff; }
.sec--dark .eyebrow, .sec--dark .tag { color: var(--accent-on-dark); }
.sec--dark .lead, .sec--dark .text { color: var(--on-dark); }
.sec--dark em.hl { color: var(--accent-on-dark); }
.sec--dark .muted-line { color: var(--on-dark); }
.sec--flush-top { padding-top: 0; }
.sec--tight-bottom { padding-bottom: 48px; }
.sec--divider { border-top: 1px solid #1F2840; }
.sec-head { display: flex; flex-direction: column; gap: 12px; max-width: 760px; margin-bottom: 48px; }
.sec-head--center { text-align: center; align-items: center; margin-left: auto; margin-right: auto; }
.sec-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 48px; }
.sec-head-row .sec-head { margin-bottom: 0; }

/* Grid & cards */
.grid { display: grid; gap: 24px; }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.card { padding: 36px 32px; border-radius: var(--radius); border: 1px solid var(--line); background: #fff; display: flex; flex-direction: column; gap: 12px; }
.card--soft { background: var(--soft); border: 0; }
.card--plain { border: 0; }
.card--dark { background: var(--dark-2); border: 0; }
.card__label { font-size: 16px; color: var(--text); }
.card--dark .card__label { color: var(--on-dark); font-size: 15px; }
.num { font-size: 48px; font-weight: 800; color: var(--accent); line-height: 1.15; font-variant-numeric: tabular-nums; }
.num--light { color: #fff; font-size: 44px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip, .badge { font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: var(--soft); color: var(--text); white-space: nowrap; }
.badge--white { background: #fff; }
.badge--accent { background: var(--accent); color: #fff; font-size: 12px; font-weight: 800; padding: 4px 10px; }
.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.checklist li::before { content: '✓ '; color: var(--accent); font-weight: 700; }

/* Hero (floating cards + reveal) */
.hero { padding: 112px 0 96px; background: var(--soft); }
.hero .container { display: flex; flex-direction: column; gap: 28px; }
.hero__title { margin: 0; font-size: 60px; line-height: 1.2; font-weight: 800; letter-spacing: -1.5px; }
.hero__lead { margin: 0; max-width: 680px; font-size: 19px; line-height: 1.7; color: var(--text); }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; padding-top: 8px; }
.hero--fx { position: relative; overflow: hidden; min-height: clamp(700px, calc(100vh - 73px), 880px); display: flex; align-items: center; padding: 96px 0; background: #070B1A; color: #fff; isolation: isolate; }
.hero--fx .hero__content { position: relative; z-index: 2; align-items: center; text-align: center; gap: 24px; }
.hero--fx .eyebrow { color: var(--accent-on-dark); }
.hero--fx .hero__title { font-size: 52px; color: #fff; max-width: 820px; }
.hero--fx .hero__lead { color: var(--on-dark); max-width: 640px; }
.hero--fx .hero__actions { justify-content: center; }
.hero--fx em.hl { color: var(--accent-on-dark); }
.btn--outline { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .35); color: #fff; }
.btn--outline:hover { color: #fff; background: rgba(255, 255, 255, .14); }
.hero__glow { position: absolute; left: 50%; top: 52%; width: 1100px; height: 1100px; margin: -550px 0 0 -550px; border-radius: 50%; background: radial-gradient(circle, rgba(97, 80, 255, .55) 0%, rgba(31, 68, 224, .28) 36%, rgba(7, 11, 26, 0) 68%); animation: heroGlow 9s ease-in-out infinite; pointer-events: none; z-index: 0; }
.hero__floats { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hc { position: absolute; opacity: 0; animation: heroPop .9s cubic-bezier(.2, .8, .2, 1) forwards; }
.hc__f { animation: heroFloat 6.5s ease-in-out infinite; }
.hc--logo .hc__f { animation-duration: 7.5s; }
.mini { width: 200px; padding: 16px 18px; border-radius: 18px; background: #fff; color: var(--ink); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); display: flex; flex-direction: column; gap: 4px; }
.mini--row { flex-direction: row; align-items: center; gap: 14px; }
.mini--row > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.mini__label { font-size: 12px; color: var(--muted); }
.mini__value { font-size: 20px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.mini__value--warm { color: #F2703A; }
.mini__bars { display: flex; align-items: flex-end; gap: 5px; height: 56px; margin-top: 8px; }
.mini__bars i { flex: 1; border-radius: 3px; background: #D9E1FF; }
.mini__bars i.is-hot { background: var(--accent); }
.mini__donut { width: 58px; height: 58px; flex-shrink: 0; border-radius: 50%; background: conic-gradient(var(--accent) calc(var(--p) * 1%), #E6E8EE 0); position: relative; }
.mini__donut::after { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: #fff; }
.mini__line { display: block; width: 100%; height: 56px; margin-top: 8px; color: #F2703A; }
.mini__stars { font-size: 14px; color: #F5A623; letter-spacing: 1px; margin-top: 4px; }
.mini__progress { display: block; height: 6px; border-radius: 6px; background: #E6E8EE; overflow: hidden; margin-top: 6px; }
.mini__progress i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 6px; animation: heroBar 2.4s 1.4s cubic-bezier(.2, .8, .2, 1) forwards; }
.mini__up { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; background: #E7F6EF; color: #0E8A6A; display: flex; align-items: center; justify-content: center; }
.logo-tile { width: 76px; height: 76px; border-radius: 20px; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 18px 40px rgba(0, 0, 0, .3); }
.logo-tile--wide { width: 92px; }
.logo-tile--sm { width: 60px; height: 60px; border-radius: 16px; }
.logo-tile--dim { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .55); box-shadow: none; border: 1px solid rgba(255, 255, 255, .08); backdrop-filter: blur(4px); }
.logo-tile--dim strong { font-size: 13px; font-weight: 800; white-space: nowrap; }
.logo-tile--pill { width: auto; height: 52px; padding: 0 18px; border-radius: 999px; }
.hero__mlogos { display: none; gap: 10px; justify-content: center; padding-top: 8px; }
@keyframes heroGlow { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes heroPop { from { opacity: 0; transform: translateY(32px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes heroFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes heroBar { to { width: 72%; } }
.hero-in { opacity: 0; animation: heroUp .9s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes heroUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@media (max-width: 1399px) { .hc--card { display: none; } }
@media (max-width: 900px) {
	.hero--fx { min-height: 0; padding: 72px 0 64px; }
	.hero__floats { display: none; }
	.hero__mlogos { display: flex; }
	.hero--fx .hero__glow { width: 700px; height: 700px; margin: -350px 0 0 -350px; }
}

/* Services */
.svc { gap: 18px; border-radius: 20px; }
.svc__head { display: flex; align-items: center; gap: 10px; }
.svc__name { font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: 999px; background: var(--ink); color: #fff; }
.svc__title { margin: 0; font-size: 21px; line-height: 1.45; font-weight: 800; letter-spacing: -.4px; }
.svc__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.svc .chip { background: #fff; border: 1px solid #D5D9E2; }
.svc .chip--accent { background: #E6ECFF; border-color: #E6ECFF; color: var(--accent); }
.svc__fit { margin-top: auto; padding-top: 18px; border-top: 1px solid #E1E5EE; display: flex; flex-direction: column; gap: 10px; }
.svc__fit strong { font-size: 14px; font-weight: 800; }
.svc__fit ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.svc__fit li { font-size: 15px; color: var(--text); }
.svc__fit li::before { content: '✓ '; color: var(--accent); font-weight: 800; }
.svc .more { margin-top: 0; }

/* Funnel — neon step boxes (ECNEX color system) */
.sec--neon { background: radial-gradient(ellipse at 50% 0%, #142A6B 0%, #070B1A 60%); }
.sec--neon .grid-3 { gap: 28px; }
.sec--neon .points { margin-top: 28px; gap: 20px; }
.sec--neon .neo { position: relative; border: 0; box-shadow: 0 0 0 1px rgba(var(--gl), .9), 0 0 14px rgba(var(--gl), .55), 0 0 38px rgba(var(--gl), .35), inset 0 0 22px rgba(255, 255, 255, .1); transition: transform .35s ease, box-shadow .35s ease; animation: neoPulse 3.2s ease-in-out infinite alternate; }
.sec--neon .neo:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(var(--gl), 1), 0 0 22px rgba(var(--gl), .8), 0 0 60px rgba(var(--gl), .55), inset 0 0 26px rgba(255, 255, 255, .16); }
.sec--neon .neo-1 { --gl: 61, 120, 255; }
.sec--neon .neo-2 { --gl: 31, 107, 255; animation-delay: -1s; }
.sec--neon .neo-3 { --gl: 91, 163, 255; animation-delay: -2s; }
.sec--neon .neo-4 { --gl: 232, 236, 244; animation-delay: -.5s; }
.sec--neon .neo { background: #0A2D7A; color: #fff; }
.sec--neon .neo .tag { color: #9CC4FF; }
.sec--neon .neo .text, .sec--neon .neo.point span { color: rgba(255, 255, 255, .82); }
.sec--neon .neo .chip { background: rgba(255, 255, 255, .14); color: #fff; }
.sec--neon .neo .h3 { color: inherit; }
@keyframes neoPulse { from { filter: brightness(.92); } to { filter: brightness(1.08); } }
@media (prefers-reduced-motion: reduce) { .neo { animation: none; transition: none; } }

/* Funnel points */
.points { margin-top: 16px; gap: 16px; }
.point { padding: 20px 24px; border-radius: 14px; border: 1px solid var(--line); background: #fff; color: var(--ink); display: flex; flex-direction: column; gap: 4px; }
.point strong { font-size: 16px; font-weight: 800; }
.point span { font-size: 14px; color: var(--muted); }

/* Platform cards */
.platform { gap: 20px; padding: 40px 36px; border-radius: 20px; }
.platform__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.platform__logo { margin: 0; line-height: 0; }
.platform__logo img { width: auto; }

/* Channels */
#channels .h2 { margin-bottom: 48px; }
.channels-main { gap: 16px; }
.channel { min-height: 96px; border-radius: 14px; border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px; text-align: center; }
.channel img { width: auto; max-width: 100%; }
.channel span { font-size: 13px; color: var(--muted); }
.channel .badge--accent { color: #fff; font-size: 12px; }
.channel strong { font-size: 20px; font-weight: 800; }
.channel--main { border: 2px solid var(--accent); align-items: flex-start; text-align: left; padding: 28px; gap: 12px; }
.channel--main p { margin: 0; font-size: 15px; color: var(--text); }
.channel--muted { opacity: .75; }
.channels-sub { margin-top: 16px; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
.compliance { margin: 24px 0 0; text-align: center; font-size: 15px; font-weight: 700; color: var(--text); }

/* Pointailer */
.pointailer .sec-head { gap: 16px; }
.pointailer__stage { display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap; }
.phone { display: block; width: 280px; height: 580px; border-radius: 44px; border: 10px solid var(--ink); background: #fff; overflow: hidden; box-shadow: 0 24px 48px rgba(11, 18, 32, .18); transition: transform .25s ease; }
.phone:hover { transform: translateY(-6px); }
.phone { display: flex; flex-direction: column; }
.phone__bar { display: block; width: 100%; height: auto; flex-shrink: 0; }
.phone__view { display: block; flex-grow: 1; min-height: 0; overflow: hidden; }
.phone__scroll { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; animation: wmjPhoneScroll 18s ease-in-out infinite; }
@keyframes wmjPhoneScroll { 0%, 8% { object-position: 50% 0%; } 50%, 58% { object-position: 50% 100%; } 100% { object-position: 50% 0%; } }
.stars { font-size: 14px; color: var(--accent); }

/* Flow box */
.flow { margin-top: 24px; padding: 32px 36px; border-radius: var(--radius); border: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.flow strong { font-size: 20px; font-weight: 800; }
.flow p { margin: 6px 0 0; font-size: 15px; color: var(--muted); }

/* Results (case cards) */
.case { border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; background: #fff; transition: transform .25s ease, box-shadow .25s ease; }
.case:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(11, 18, 32, .08); }
.case__media { position: relative; aspect-ratio: 4 / 3; background: #E3E7EF; display: flex; align-items: center; justify-content: center; }
.case__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case__media::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; background: linear-gradient(180deg, rgba(11, 18, 32, 0), rgba(11, 18, 32, .78)); }
.case__ph { font-size: 13px; color: var(--muted); }
.case__label { position: absolute; left: 20px; bottom: 18px; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.case__no { font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 6px; background: #0A2D7A; color: #fff; }
.case__label h3 { margin: 0; font-size: 20px; font-weight: 800; color: #fff; }
.case__body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 12px; flex-grow: 1; }
.case__ba { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.case__ba div { display: flex; gap: 12px; font-size: 15px; }
.case__ba dt { color: #8A93A6; flex-shrink: 0; width: 52px; }
.case__ba dd { margin: 0; color: var(--muted); line-height: 1.55; word-break: keep-all; }
.case__ba strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.case__quote { margin: auto 0 0; padding: 16px 18px; border-radius: 12px; background: var(--soft); font-size: 15px; line-height: 1.65; font-weight: 700; color: #0A2D7A; word-break: keep-all; text-wrap: balance; }
.source--light { color: #8A93A6; }

/* Influencer */
.influencer { margin-top: 56px; gap: 20px; }
.influencer__cards { display: flex; flex-direction: column; gap: 20px; }
.icard { flex-grow: 1; padding: 36px 32px; border-radius: 18px; background: #F7F8FA; color: var(--ink); display: flex; align-items: center; gap: 20px; }
.icard svg { flex-shrink: 0; color: var(--accent); }
.icard > div { display: flex; flex-direction: column; gap: 6px; }
.icard__label { font-size: 16px; color: var(--muted); }
.icard strong { font-size: 22px; font-weight: 800; }
.icard__sub { font-size: 13px; color: var(--muted); }
.chart { margin: 0; padding: 40px 32px 28px; border-radius: 18px; background: #F7F8FA; color: var(--ink); display: flex; flex-direction: column; align-items: center; gap: 24px; }
.chart__bars { height: 340px; display: flex; align-items: flex-end; justify-content: center; gap: 56px; }
.chart__col { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.chart__val { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chart__val--accent { color: var(--accent); }
.chart__bar { width: 96px; height: 40px; overflow: hidden; border-radius: 22px; color: #fff; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 14px; font-weight: 700; transition: height 1.8s cubic-bezier(.2, .8, .2, 1); }
.chart.is-in .chart__bar { height: var(--h); }
.chart__bar--a { background: var(--muted); }
.chart__bar--b { background: var(--accent); }
.chart figcaption { font-size: 14px; font-weight: 700; color: var(--text); }

/* Offline */
.stores { gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.store { min-height: 88px; border-radius: 14px; background: #fff; color: var(--ink); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; text-align: center; padding: 0 12px; }
.steps { list-style: none; margin: 0; padding: 0; }
.steps--dark { margin-top: 48px; }
.step { display: flex; flex-direction: column; gap: 10px; padding-top: 24px; border-top: 2px solid var(--ink); }
.step strong { font-size: 19px; font-weight: 700; }
.step p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--muted); }
.steps--dark .step { border-top-color: var(--dark-line); }
.steps--dark .step p { color: var(--on-dark); }

/* Works */
/* Works (portfolio grid with SNS / 매체 filter) */
.wk-r { position: absolute; opacity: 0; pointer-events: none; }
.wk-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.wk-tabs label { cursor: pointer; font-size: 15px; font-weight: 700; padding: 10px 18px; border-radius: 999px; border: 1px solid #D5D9E2; background: #fff; color: var(--text); transition: all .2s; }
.wk-tabs label:hover { border-color: var(--accent); color: var(--accent); }
.r-all:checked ~ .wk-tabs .t-all, .r-sns:checked ~ .wk-tabs .t-sns, .r-media:checked ~ .wk-tabs .t-media { background: #0A2D7A; border-color: #0A2D7A; color: #fff; }
.r-sns:checked ~ .wk-grid .wk[data-c="media"], .r-media:checked ~ .wk-grid .wk[data-c="sns"] { display: none; }
.wk-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.wk { display: block; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid var(--line); transition: transform .3s ease, box-shadow .3s ease; animation: wkIn .5s ease both; }
.wk:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(10, 45, 122, .16); }
.wk-img { aspect-ratio: 800 / 570; overflow: hidden; background: #E3E7EF; }
.wk-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.wk:hover .wk-img img { transform: scale(1.06); }
.wk-cap { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; }
.wk-cap strong { font-size: 15px; font-weight: 800; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-cap span { flex-shrink: 0; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: #E6ECFF; color: var(--accent); }
.wk[data-c="media"] .wk-cap span { background: #0A2D7A; color: #fff; }
@keyframes wkIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 1024px) { .wk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px) { .wk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .wk-cap { padding: 10px 12px; } .wk-cap strong { font-size: 13px; } .wk-cap span { display: none; } }
@media (prefers-reduced-motion: reduce) { .wk, .wk-img img { transition: none; animation: none; } }
.works { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 16px; }
.work { aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: #E3E7EF; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--muted); }
.work img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
a.work:hover img { transform: scale(1.04); }

/* Reviews */
.quote { margin: 0; gap: 20px; }
.quote blockquote { margin: 0; font-size: 16px; line-height: 1.8; color: var(--text); }
.quote figcaption { font-size: 14px; color: var(--muted); }
.quote figcaption strong { color: var(--ink); }

/* FAQ (hover / focus / tap to open) */
.faq { border-top: 2px solid var(--ink); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q { width: 100%; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border: 0; background: transparent; font-size: 17px; font-weight: 700; color: var(--ink); text-align: left; cursor: pointer; }
.faq__icon { flex-shrink: 0; font-size: 22px; font-weight: 400; color: var(--muted); transition: transform .3s ease; }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.faq__a > div { overflow: hidden; }
.faq__a p { margin: 0; padding: 0 0 20px; font-size: 15px; line-height: 1.8; color: var(--muted); }
.faq__item:hover .faq__a, .faq__item:focus-within .faq__a, .faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__item:hover .faq__icon, .faq__item:focus-within .faq__icon, .faq__item.is-open .faq__icon { transform: rotate(45deg); }
.faq__item:hover .faq__q { color: var(--accent); }

/* Inquiry form */
.form { padding: 40px; border-radius: 20px; background: var(--dark-2); display: flex; flex-direction: column; gap: 28px; }
.form fieldset { margin: 0; padding: 0; border: 0; }
.form legend { padding: 0 0 12px; font-size: 15px; font-weight: 700; }
.radios { display: flex; gap: 10px; flex-wrap: wrap; }
.radio { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--dark-line); font-size: 15px; cursor: pointer; }
.checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 6px 16px; }
.check { display: flex; align-items: flex-start; gap: 10px; min-height: 40px; padding-top: 8px; font-size: 15px; line-height: 1.5; cursor: pointer; }
.check input { flex-shrink: 0; margin: 2px 0 0; }
.check input, .radio input { width: 18px; height: 18px; accent-color: var(--accent); }
.check a { color: var(--accent-on-dark); text-decoration: underline; }
.form__row { gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 500; }
.field input, .field select, .field textarea { min-height: 48px; padding: 12px 14px; border-radius: 8px; border: 1px solid var(--dark-line); background: var(--dark); color: #fff; font-size: 15px; }
.field select option { color: var(--ink); background: #fff; }
.agree { display: flex; flex-direction: column; gap: 4px; color: var(--on-dark); font-size: 14px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.notice { margin: 0 0 24px; padding: 16px 20px; border-radius: 12px; font-weight: 700; }
.notice--ok { background: #E7F6EF; color: #0E6B4F; }
.notice--err { background: #FDECEC; color: #A42A2A; }

/* Footer */
.site-footer { padding: 64px 0 48px; background: #070C17; color: var(--on-dark-muted); font-size: 14px; line-height: 1.8; }
.site-footer__top { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 40px; }
.site-footer__brand img { display: block; width: 160px; height: auto; margin-bottom: 12px; }
.site-footer__brand p { margin: 0; }
.site-footer nav { display: flex; flex-direction: column; gap: 6px; }
.site-footer h2 { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: #fff; }
.site-footer a { color: var(--on-dark-muted); }
.site-footer a:hover { color: #fff; }
.site-footer__bottom { margin-top: 40px; padding-top: 28px; border-top: 1px solid #1F2840; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.site-footer__biz p { margin: 0; }
.site-footer__copy { padding-top: 10px; }
.site-footer__privacy { color: #fff !important; font-weight: 700; }

/* Floating chat button */
.fab-stack { position: fixed; right: 24px; bottom: 24px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.fab { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px 0 18px; border-radius: 999px; font-weight: 700; font-size: 15px; box-shadow: 0 10px 28px rgba(11, 18, 32, .16); transition: transform .2s ease, box-shadow .2s ease; animation: fabIn .6s 1s cubic-bezier(.2, .8, .2, 1) both; }
.fab:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(11, 18, 32, .22); }
.fab--doc { background: #fff; color: var(--ink); border: 1px solid #E6E8EE; }
.fab--doc:hover { color: #0A2D7A; }
.fab--kakao { background: #FEE500; color: #191919; animation-delay: 1.15s; }
.fab--kakao:hover { color: #191919; }
.fab--line { background: #06C755; color: #fff; animation-delay: 1.15s; }
.fab--line:hover { color: #fff; }
@keyframes fabIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fab { animation: none; } }

/* Blog / pages */
main.page { padding: 72px 0 96px; }
.page__head { margin-bottom: 40px; display: flex; flex-direction: column; gap: 8px; }
.page__head time, .post-card time { font-size: 14px; color: var(--muted); }
.post-list { display: flex; flex-direction: column; gap: 32px; }
.post-card { display: grid; grid-template-columns: 220px 1fr; gap: 24px; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.post-card:not(.has-post-thumbnail) { grid-template-columns: 1fr; }
.post-card__img img { border-radius: 12px; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.post-card h2 { margin: 4px 0 8px; font-size: 22px; }
.post-card p { margin: 0; color: var(--muted); }
.entry__img img { border-radius: 16px; margin-bottom: 32px; }
.entry__content { font-size: 17px; line-height: 1.85; color: var(--text); }
.entry__content h2, .entry__content h3 { color: var(--ink); line-height: 1.4; margin: 2em 0 .6em; }
.entry__content a { color: var(--accent); text-decoration: underline; }
.pager { margin-top: 40px; }
.pager .nav-links { display: flex; gap: 8px; flex-wrap: wrap; }
.pager .page-numbers { display: inline-flex; min-width: 40px; min-height: 40px; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--line); padding: 0 10px; }
.pager .current { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Mobile */
@media (max-width: 782px) {
	.admin-bar .site-header { top: 46px; }
}
@media (max-width: 768px) {
	html { scroll-padding-top: 120px; }
	.site-header__inner { height: auto; flex-wrap: wrap; padding-top: 10px; row-gap: 0; column-gap: 12px; padding-left: 16px; padding-right: 16px; }
	.site-logo img { height: 24px; }
	.site-nav { order: 3; width: 100%; overflow-x: auto; white-space: nowrap; gap: 22px; padding: 12px 0; margin-top: 10px; border-top: 1px solid #EEF0F4; scrollbar-width: none; }
	.site-nav::-webkit-scrollbar { display: none; }
	.btn--sm { height: 40px; padding: 0 14px; font-size: 14px; }
	.container { padding: 0 20px; }
	.sec { padding: 64px 0; }
	.sec--flush-top { padding-top: 0; }
	.sec-head, .sec-head-row { margin-bottom: 32px; }
	.hero { padding: 64px 0; }
	.hero--fx .hero__title { font-size: 32px; }
	.hero__title { font-size: 32px; letter-spacing: -.8px; line-height: 1.3; }
	.hero__lead { font-size: 16px; }
	.h2, .h2--lg { font-size: 25px; letter-spacing: -.5px; line-height: 1.4; }
	.h3 { font-size: 20px; }
	.lead, .text { font-size: 15px; }
	.lead br, .text br { display: none; }
	.num, .num--light { font-size: 32px; }
	.card, .platform, .icard { padding: 24px 20px; }
	.form { padding: 24px 18px; }
	.chart { padding: 28px 16px 20px; }
	.chart__bars { gap: 20px; height: 300px; }
	.chart__val { font-size: 14px; }
	.phone { width: 240px; height: 500px; }
	.flow { padding: 24px 20px; }
	.post-card { grid-template-columns: 1fr; }
	.fab-stack { right: 14px; bottom: 14px; gap: 8px; }
	.fab { min-height: 44px; padding: 0 16px 0 13px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.faq__a, .faq__icon, .chart__bar, .phone, .btn { transition: none; }
	.hero-in, .hc { opacity: 1; animation: none; }
	.hc__f, .hero__glow, .mini__progress i { animation: none; }
	.mini__progress i { width: 72%; }
	.phone__scroll { animation: none; }
}