/*
Theme Name: ANYONE WordPress Landing
Theme URI: https://anyonecompany.kr
Author: ANYONE COMPANY
Description: Figma(8WYP3OqVUFznaYu78IyezU) 워드프레스 서비스 랜딩페이지 1:1 구현 테마.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.1
License: GPLv2 or later
Text Domain: anyone
*/

/* ── Design tokens (Figma variables) ───────────────────────────── */
:root {
  --bg-base: #05060f;
  --bg-surface: #0a0e1c;
  --bg-card: #10152a;
  --bg-purple: #2b1845;
  --bg-purple-deep: #150b28;
  --accent-primary: #a8ff01;
  --border-default: #1b2340;
  --border-accent: #a8ff01;
  --text-primary: #ffffff;
  --text-secondary: #9aa0b5;
  --text-soft: #c5cad9;
  --text-tertiary: #5a6178;
  --text-on-accent: #0a0a0a;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;
  --pad-x: 120px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: Pretendard, "Pretendard Variable", -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: -0.5px;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
.mono { font-family: "Space Grotesk", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 16px; top: 16px; background: var(--accent-primary); color: var(--text-on-accent); padding: 8px 16px; border-radius: var(--radius-full); z-index: 100; }
:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 3px; }

/* ── Shared atoms ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; padding: 16px 32px;
  border-radius: var(--radius-full); font-size: 16px; font-weight: 600; line-height: 24px;
  white-space: nowrap; border: 0; cursor: pointer;
}
.btn--primary { background: var(--accent-primary); color: var(--text-on-accent); }
.btn--secondary { border: 1.5px solid var(--border-default); color: var(--text-primary); }
.btn--sm { padding: 12px 24px; font-size: 14px; line-height: 20px; }

.pill {
  display: inline-flex; align-items: center; padding: 8px 16px;
  border: 1px solid var(--accent-primary); border-radius: var(--radius-full);
  color: var(--accent-primary); font-size: 14px; font-weight: 600; line-height: 20px; white-space: nowrap;
}

.section-header { display: flex; flex-direction: column; gap: 16px; align-items: center; text-align: center; }
.section-header__eyebrow { font-size: 14px; font-weight: 600; line-height: 20px; color: var(--accent-primary); }
.section-header__title { margin: 0; font-size: 44px; font-weight: 800; line-height: 58px; letter-spacing: -0.66px; color: var(--text-primary); }
.section-header__sub { font-size: 18px; line-height: 30px; letter-spacing: -0.09px; color: var(--text-secondary); }

/* ── GNB ───────────────────────────────────────────────────────── */
.gnb {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px var(--pad-x); background: var(--bg-base); border: 1px solid var(--border-default);
  position: sticky; top: 0; z-index: 50;
}
.bi-logo { position: relative; display: inline-grid; width: 121.3px; height: 30px; }
.bi-logo__symbol { position: absolute; left: 0; top: 0; width: 30.888px; height: 30px; object-fit: cover; }
.bi-logo__mark { position: absolute; left: 38.59px; top: 0.15px; width: 82.715px; height: 29.704px; overflow: hidden; }
.bi-logo__mark img { position: absolute; top: 0; left: -46.65%; width: 146.65%; height: 100%; max-width: none; }
.gnb__menu { display: flex; align-items: center; gap: 36px; font-size: 14px; font-weight: 600; line-height: 20px; color: var(--text-secondary); }
.gnb__menu a:hover { color: var(--text-primary); }

/* ── Hero ──────────────────────────────────────────────────────── */
.hero {
  display: flex; align-items: center; justify-content: space-between;
  padding: 96px var(--pad-x) 120px;
  background: linear-gradient(180deg, #150b28 0%, #05060f 100%);
}
.hero__copy { display: flex; flex-direction: column; gap: 28px; align-items: flex-start; width: 640px; }
.hero__pills { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__title { margin: 0; font-size: 48px; font-weight: 900; line-height: 62px; letter-spacing: -0.96px; color: #fff; }
.hero__title .grad {
  background: linear-gradient(90deg, #e6ff05 0%, #66fe32 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__sub { font-size: 18px; line-height: 30px; letter-spacing: -0.09px; color: var(--text-secondary); }
.hero__cta { display: flex; gap: 16px; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; font-size: 14px; line-height: 22px; color: var(--text-secondary); }
.hero__trust .accent { color: var(--accent-primary); }
.hero__visual {
  position: relative; width: 460px; height: 520px; border-radius: var(--radius-xl); overflow: hidden;
  background: linear-gradient(131.5deg, #3d2a63 14.286%, #150b28 85.714%);
}
.hero__photo { position: absolute; left: 30px; top: 47px; width: 400px; height: 473px; object-fit: contain; }
.chip {
  position: absolute; display: inline-flex; padding: 10px 16px; border-radius: var(--radius-full);
  font-size: 13px; font-weight: 600; line-height: normal; white-space: nowrap;
}
.chip--team { left: 24px; top: 24px; background: var(--accent-primary); color: var(--text-on-accent); }
.chip--rating { left: 298px; top: 472px; padding: 9px 14px; background: rgba(10, 14, 28, 0.85); color: var(--accent-primary); }

/* ── Service rows ──────────────────────────────────────────────── */
.service { display: flex; align-items: center; justify-content: space-between; padding: 96px var(--pad-x); }
.service--alt { background: var(--bg-surface); flex-direction: row-reverse; }
.service__copy { display: flex; flex-direction: column; gap: 20px; width: 560px; }
.service__eyebrow { font-size: 14px; font-weight: 500; color: var(--accent-primary); }
.service__title { margin: 0; font-size: 34px; font-weight: 800; line-height: 44px; letter-spacing: -0.34px; color: var(--text-primary); }
.service__desc { font-size: 18px; line-height: 30px; letter-spacing: -0.09px; color: var(--text-secondary); }
.service__bullets { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.service__bullets li { display: flex; gap: 10px; align-items: center; font-size: 16px; line-height: 26px; letter-spacing: -0.08px; color: var(--text-soft); }
.service__bullets li::before { content: "✓"; font-size: 14px; font-weight: 700; color: var(--accent-primary); }
.service__visual {
  display: flex; align-items: center; justify-content: center;
  width: 460px; height: 340px; border: 1px solid #3d2a63; border-radius: 20px;
  background: linear-gradient(130.2deg, #2b1845 7.69%, #0a0e1c 84.6%);
  font-size: 120px; font-weight: 700; color: var(--accent-primary);
}

/* ── Stats ─────────────────────────────────────────────────────── */
.stats { display: flex; align-items: center; justify-content: space-between; padding: 72px var(--pad-x); background: var(--bg-purple-deep); }
.stat { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.stat__row { display: flex; gap: 4px; align-items: baseline; }
.stat__num { font-size: 72px; font-weight: 700; line-height: 78px; letter-spacing: -1.44px; color: var(--accent-primary); }
.stat__unit { font-size: 22px; font-weight: 700; line-height: 32px; letter-spacing: -0.22px; color: var(--text-primary); }
.stat__label { font-size: 16px; line-height: 26px; letter-spacing: -0.08px; color: var(--text-secondary); }

/* ── Process ───────────────────────────────────────────────────── */
.process { display: flex; flex-direction: column; gap: 48px; align-items: center; padding: 120px; }
.process__steps { display: flex; gap: 24px; }
.step {
  display: flex; flex-direction: column; gap: 14px; width: 282px; padding: 28px;
  background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg);
}
.step__num { font-size: 20px; font-weight: 700; color: var(--accent-primary); }
.step__title { margin: 0; font-size: 18px; font-weight: 700; line-height: 26px; letter-spacing: -0.09px; color: var(--text-primary); }
.step__desc { font-size: 14px; line-height: 22px; color: var(--text-secondary); }

/* ── Portfolio ─────────────────────────────────────────────────── */
.portfolio { display: flex; flex-direction: column; gap: 48px; padding: 96px var(--pad-x); background: var(--accent-primary); color: #0a0a0a; }
.portfolio__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.portfolio__eyebrow { font-size: 14px; font-weight: 500; }
.portfolio__title { margin: 14px 0; font-size: 44px; font-weight: 800; line-height: 54px; letter-spacing: -0.66px; }
.portfolio__sub { font-size: 16px; font-weight: 500; color: rgba(10, 10, 10, 0.7); }
.portfolio__count { font-size: 96px; font-weight: 700; line-height: 96px; letter-spacing: -1.92px; text-align: right; }
.portfolio__count-label { font-size: 14px; font-weight: 600; color: rgba(10, 10, 10, 0.7); text-align: right; }
.bento { display: flex; flex-direction: column; gap: 24px; }
.bento__row { display: flex; gap: 24px; flex-wrap: wrap; }
.pf-featured { width: 588px; max-width: 100%; background: #0a0a0a; border-radius: 18px; overflow: hidden; }
.pf-featured__bar { display: flex; gap: 12px; align-items: center; padding: 12px 18px; background: #141416; }
.pf-featured__dots { width: 39px; height: 9px; }
.pf-featured__addr { padding: 5px 14px; background: #22242a; border-radius: var(--radius-full); font-size: 12px; color: #9aa0b5; }
.pf-featured__screen {
  display: flex; align-items: center; justify-content: center; height: 150px;
  background: linear-gradient(157.8deg, #2b1845 7.69%, #0a0e1c 84.6%);
  font-size: 34px; font-weight: 700; letter-spacing: -0.34px; color: var(--accent-primary);
}
.pf-featured__info { display: flex; flex-direction: column; gap: 8px; padding: 20px 24px 24px; }
.pf-featured__cat { font-size: 12px; font-weight: 600; color: var(--accent-primary); }
.pf-featured__name { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -0.21px; color: #fff; }
.pf-card {
  display: flex; flex-direction: column; gap: 10px; width: 282px; height: 190px; padding: 24px;
  background: #0a0a0a; border-radius: 18px; color: #fff;
}
.pf-card__cat { font-size: 12px; font-weight: 600; color: var(--accent-primary); }
.pf-card__title { flex: 1; margin: 0; font-size: 18px; font-weight: 700; line-height: 26px; letter-spacing: -0.18px; }
.pf-card__meta { font-size: 12px; font-weight: 500; color: #9aa0b5; }
.pf-card--more .pf-card__plus { font-size: 48px; font-weight: 700; line-height: 52px; color: var(--accent-primary); }
.pf-card--more .pf-card__title { font-size: 16px; line-height: 24px; letter-spacing: 0; }
.pf-card--more .pf-card__link { font-size: 14px; font-weight: 600; color: var(--accent-primary); }

/* ── Pricing ───────────────────────────────────────────────────── */
.pricing { display: flex; flex-direction: column; gap: 48px; align-items: center; padding: 120px; }
.pricing__row { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; justify-content: center; }
.price-card {
  display: flex; flex-direction: column; gap: 24px; width: 384px; padding: 36px;
  background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius-xl);
}
.price-card--highlight { border: 1.5px solid var(--border-accent); }
.price-card__head { display: flex; align-items: center; justify-content: space-between; }
.price-card__tier { font-size: 16px; font-weight: 700; color: var(--text-secondary); }
.price-card--highlight .price-card__tier { color: var(--accent-primary); }
.price-card__badge { padding: 5px 12px; background: var(--accent-primary); border-radius: var(--radius-full); font-size: 12px; font-weight: 600; color: var(--text-on-accent); }
.price-card__price { display: flex; gap: 4px; align-items: baseline; }
.price-card__amount { font-size: 40px; font-weight: 700; line-height: 48px; letter-spacing: -0.4px; color: var(--text-primary); }
.price-card--highlight .price-card__amount { color: var(--accent-primary); }
.price-card__won { font-size: 18px; font-weight: 700; line-height: 26px; letter-spacing: -0.09px; color: var(--text-secondary); }
.price-card__desc { font-size: 14px; line-height: 22px; color: var(--text-secondary); }
.price-card__features { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.price-card__features li { display: flex; gap: 10px; align-items: center; font-size: 14px; line-height: 22px; color: var(--text-secondary); }
.price-card__features li::before { content: "✓"; font-size: 13px; font-weight: 700; color: var(--accent-primary); }

/* ── Reviews (marquee) ─────────────────────────────────────────── */
.reviews { display: flex; flex-direction: column; gap: 48px; align-items: center; padding: 120px 0; background: var(--bg-surface); }
.marquee { position: relative; width: 100%; height: 210px; overflow: hidden; }
.marquee__strip { display: flex; gap: 24px; width: max-content; animation: marquee 60s linear infinite; }
.marquee::before, .marquee::after { content: ""; position: absolute; top: 0; width: 140px; height: 210px; pointer-events: none; z-index: 2; }
.marquee::before { left: 0; background: linear-gradient(90deg, #0a0e1c 0%, rgba(10, 14, 28, 0) 100%); }
.marquee::after { right: 0; background: linear-gradient(270deg, #0a0e1c 0%, rgba(10, 14, 28, 0) 100%); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__strip { animation: none; } }
.review-card {
  display: flex; flex-direction: column; gap: 16px; width: 384px; height: 210px; padding: 32px;
  background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg);
}
.review-card__rating { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.review-card__stars { font-weight: 600; color: var(--accent-primary); }
.review-card__score { font-weight: 500; line-height: 20px; color: var(--text-primary); }
.review-card__quote { flex: 1; margin: 0; font-size: 16px; line-height: 26px; letter-spacing: -0.08px; color: var(--text-secondary); }
.review-card__author { font-size: 13px; font-weight: 500; line-height: 18px; color: var(--text-tertiary); }

/* ── Blog ──────────────────────────────────────────────────────── */
section.blog { display: flex; flex-direction: column; gap: 48px; align-items: center; padding: 120px; }
.blog__row { display: flex; gap: 24px; align-items: stretch; flex-wrap: wrap; justify-content: center; }
.blog-card {
  display: flex; flex-direction: column; width: 384px;
  background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden;
}
.blog-card__thumb {
  display: flex; align-items: center; justify-content: center; height: 200px;
  background: var(--bg-purple); font-size: 40px; font-weight: 700; color: var(--accent-primary);
}
.blog-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.blog-card__body { display: flex; flex-direction: column; gap: 12px; padding: 24px 28px 28px; }
.blog-card__cat { font-size: 13px; font-weight: 500; line-height: 18px; color: var(--accent-primary); }
.blog-card__title { margin: 0; font-size: 18px; font-weight: 700; line-height: 26px; letter-spacing: -0.09px; color: var(--text-primary); }
.blog-card__date { font-size: 13px; font-weight: 500; line-height: 18px; color: var(--text-tertiary); }

/* ── CTA ───────────────────────────────────────────────────────── */
.cta {
  display: flex; flex-direction: column; gap: 28px; align-items: center; text-align: center; padding: 120px;
  background: linear-gradient(180deg, #05060f 0%, #2b1845 100%);
}
.cta__chip { display: flex; gap: 10px; align-items: center; font-size: 14px; font-weight: 600; color: var(--text-soft); }
.cta__chip img { width: 48px; height: 48px; border-radius: 50%; }
.cta__title { margin: 0; font-size: 44px; font-weight: 800; line-height: 58px; letter-spacing: -0.66px; }
.cta__sub { font-size: 18px; line-height: 30px; letter-spacing: -0.09px; color: var(--text-soft); }

/* ── Footer ────────────────────────────────────────────────────── */
.footer { display: flex; flex-direction: column; gap: 32px; padding: 64px var(--pad-x); background: var(--bg-base); border: 1px solid var(--border-default); }
.footer__top { display: flex; flex-wrap: wrap; row-gap: 32px; align-items: flex-start; justify-content: space-between; }
.footer__links { display: flex; flex-wrap: wrap; gap: 32px 64px; font-size: 14px; }
.footer__col { display: flex; flex-direction: column; gap: 14px; }
.footer__col-title { font-weight: 600; line-height: 20px; color: var(--text-primary); }
.footer__col a { line-height: 22px; color: var(--text-secondary); }
.footer__col a:hover { color: var(--text-primary); }
.footer__divider { height: 1px; background: var(--border-default); }
.footer__legal { font-size: 13px; font-weight: 500; line-height: 18px; color: var(--text-tertiary); }

/* ── Archive / single (blog templates) ─────────────────────────── */
.page-hero { padding: 96px var(--pad-x) 64px; background: linear-gradient(180deg, #150b28 0%, #05060f 100%); }
.page-hero__eyebrow { font-size: 14px; font-weight: 600; color: var(--accent-primary); }
.page-hero__title { margin: 14px 0 0; font-size: 44px; font-weight: 800; line-height: 58px; letter-spacing: -0.66px; }
.page-hero__sub { margin-top: 12px; font-size: 18px; line-height: 30px; color: var(--text-secondary); }
.post-grid { display: flex; flex-wrap: wrap; gap: 24px; padding: 64px var(--pad-x) 120px; }
.article { max-width: 760px; margin: 0 auto; padding: 64px 24px 120px; }
.article__title { font-size: 40px; font-weight: 800; line-height: 54px; letter-spacing: -0.6px; }
.article__meta { margin-top: 12px; font-size: 14px; color: var(--text-tertiary); }
.article__body { margin-top: 40px; font-size: 17px; line-height: 32px; color: var(--text-soft); }
.article__body h2 { margin: 48px 0 16px; font-size: 28px; line-height: 40px; color: var(--text-primary); }
.article__body h3 { margin: 32px 0 12px; font-size: 21px; line-height: 32px; color: var(--text-primary); }
.article__body a { color: var(--accent-primary); text-decoration: underline; }
.pagination { display: flex; gap: 12px; justify-content: center; padding-bottom: 96px; }
.pagination .page-numbers { padding: 8px 14px; border: 1px solid var(--border-default); border-radius: var(--radius-full); color: var(--text-secondary); }
.pagination .page-numbers.current { background: var(--accent-primary); border-color: var(--accent-primary); color: var(--text-on-accent); }

/* ── Tablet 834 ────────────────────────────────────────────────── */
@media (max-width: 991px) {
  :root { --pad-x: 48px; }
  .hero { flex-direction: column; gap: 40px; padding: 64px 48px 80px; }
  .hero__copy, .hero__visual { width: 100%; max-width: 640px; }
  .hero__title { font-size: 38px; line-height: 50px; }
  .service { flex-direction: column; gap: 32px; align-items: flex-start; padding: 72px 48px; }
  .service--alt { flex-direction: column; }
  .service__copy, .service__visual { width: 100%; }
  .process, .pricing, section.blog, .cta { padding: 80px 48px; }
  .process__steps { flex-wrap: wrap; justify-content: center; }
  .portfolio { padding: 72px 48px; }
  .portfolio__title { font-size: 36px; line-height: 46px; }
  .pf-featured { width: 100%; }
  .stats { flex-wrap: wrap; gap: 32px; justify-content: space-around; }
  .stat__num { font-size: 56px; line-height: 64px; }
  .section-header__title, .cta__title, .page-hero__title { font-size: 34px; line-height: 46px; }
  .post-grid { padding: 48px 48px 96px; }
}

/* ── Mobile 390 ────────────────────────────────────────────────── */
@media (max-width: 767px) {
  :root { --pad-x: 20px; }
  .gnb { padding: 14px 20px; }
  .gnb__menu { display: none; }
  .hero { padding: 40px 20px 56px; gap: 28px; }
  .hero__title { font-size: 28px; line-height: 38px; letter-spacing: -0.56px; }
  .hero__sub { font-size: 15px; line-height: 24px; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { justify-content: center; }
  .hero__visual { height: 400px; }
  .hero__photo { left: 10px; top: 10px; width: calc(100% - 20px); height: 390px; }
  .chip--rating { left: auto; right: 16px; top: 350px; }
  .chip--team { left: 16px; top: 16px; }
  .service, .process, .pricing, section.blog, .cta, .portfolio { padding: 56px 20px; }
  .service__title { font-size: 26px; line-height: 36px; }
  .service__desc { font-size: 15px; line-height: 25px; }
  .service__visual { height: 200px; font-size: 72px; }
  .stats { padding: 48px 20px; gap: 24px; }
  .stat { width: 45%; }
  .stat__num { font-size: 44px; line-height: 52px; }
  .section-header__title, .cta__title, .page-hero__title, .portfolio__title { font-size: 26px; line-height: 36px; }
  .section-header__sub, .cta__sub { font-size: 15px; line-height: 25px; }
  .portfolio__head { flex-direction: column; align-items: flex-start; }
  .portfolio__count { font-size: 64px; line-height: 64px; }
  .step, .price-card, .blog-card, .pf-card, .review-card { width: 100%; }
  .review-card { height: auto; min-height: 210px; }
  .article { padding: 40px 20px 80px; }
  .article__title { font-size: 28px; line-height: 40px; }
  .post-grid { padding: 32px 20px 72px; }
}

/* ── Blog index (node 47:694) ──────────────────────────────────── */
.page-hero__filters { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 28px; }
.pill--outline { border-color: var(--border-default); color: var(--text-primary); }
.featured-post { display: flex; margin: 48px var(--pad-x) 0; background: var(--bg-card); border: 1px solid var(--border-default); border-radius: 18px; overflow: hidden; }
.featured-post__thumb {
  display: flex; align-items: center; justify-content: center; flex: 0 0 560px; height: 320px;
  background: linear-gradient(137.6deg, #2b1845 7.69%, #0a0e1c 84.6%); font-size: 54px; font-weight: 700; color: var(--accent-primary);
}
.featured-post__thumb img { width: 100%; height: 100%; object-fit: cover; }
.featured-post__body { display: flex; flex-direction: column; gap: 14px; justify-content: center; padding: 40px; }
.featured-post__cat { font-size: 13px; font-weight: 600; color: var(--accent-primary); }
.featured-post__title { margin: 0; font-size: 30px; font-weight: 800; line-height: 40px; letter-spacing: -0.3px; }
.featured-post__excerpt { font-size: 15px; line-height: 24px; color: var(--text-secondary); }
.featured-post__meta { font-size: 13px; font-weight: 500; color: var(--text-tertiary); }
.blog-cta { display: flex; flex-direction: column; gap: 20px; align-items: center; padding: 88px var(--pad-x); background: linear-gradient(180deg, #05060f 0%, #2b1845 100%); text-align: center; }
.blog-cta__title { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -0.51px; }

/* ── Article (node 49:790) ─────────────────────────────────────── */
.article__eyebrow { font-size: 13px; font-weight: 500; color: var(--accent-primary); }
.article__author-row { display: flex; gap: 12px; align-items: center; margin-top: 20px; font-size: 14px; font-weight: 500; color: var(--text-secondary); }
.article__author-row img { width: 36px; height: 36px; border-radius: 50%; }
.article__cover {
  display: flex; align-items: center; justify-content: center; height: 300px; margin-top: 28px; border-radius: var(--radius-lg);
  background: linear-gradient(147.7deg, #2b1845 7.69%, #0a0e1c 84.6%); font-size: 20px; font-weight: 500; color: var(--accent-primary);
}
.article__cover img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-lg); }
.summary-box { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; padding: 24px 28px; background: var(--bg-card); border: 1px solid var(--accent-primary); border-radius: 14px; }
.summary-box__label { font-size: 13px; font-weight: 600; color: var(--accent-primary); }
.summary-box__text { font-size: 16px; line-height: 27px; color: var(--text-soft); }
.article__body table { width: 100%; border-collapse: collapse; background: var(--bg-card); border: 1px solid var(--border-default); border-radius: 14px; overflow: hidden; font-size: 14px; }
.article__body th { padding: 13px 16px; background: var(--border-default); text-align: left; font-weight: 600; color: #fff; }
.article__body td { padding: 13px 16px; border-top: 1px solid var(--border-default); color: var(--text-soft); }
.article__body ul { padding-left: 20px; }
.article__body li { margin: 10px 0; }
.inline-cta {
  display: flex; gap: 18px; align-items: center; justify-content: space-between; margin: 32px 0;
  padding: 22px 24px 22px 28px; background: var(--accent-primary); border-radius: 14px;
  font-size: 17px; font-weight: 700; color: #0a0a0a;
}
.inline-cta__btn { padding: 11px 20px; background: #0a0a0a; border-radius: var(--radius-full); font-size: 14px; font-weight: 600; color: var(--accent-primary); white-space: nowrap; }
.author-card { display: flex; gap: 18px; align-items: center; margin-top: 32px; padding: 20px 24px; background: var(--bg-card); border: 1px solid var(--border-default); border-radius: 14px; }
.author-card img { width: 56px; height: 56px; border-radius: 50%; }
.author-card__name { font-size: 16px; font-weight: 700; }
.author-card__desc { font-size: 14px; line-height: 22px; color: var(--text-secondary); }
.related { display: flex; flex-direction: column; gap: 24px; padding: 72px var(--pad-x) 88px; background: var(--bg-surface); }
.related__title { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -0.24px; }
.related__row { display: flex; flex-wrap: wrap; gap: 24px; }

@media (max-width: 991px) {
  .featured-post { flex-direction: column; margin: 32px 48px 0; }
  .featured-post__thumb { flex: none; width: 100%; }
  .related { padding: 56px 48px 72px; }
}
@media (max-width: 767px) {
  .featured-post { margin: 24px 20px 0; }
  .featured-post__title { font-size: 24px; line-height: 34px; }
  .featured-post__body { padding: 24px; }
  .blog-cta { padding: 56px 20px; }
  .blog-cta__title { font-size: 24px; line-height: 34px; }
  .inline-cta { flex-direction: column; align-items: flex-start; font-size: 15px; }
  .related { padding: 40px 20px 56px; }
  .article__body table { display: block; overflow-x: auto; }
}

/* ── 콘텐츠 폭 고정 ────────────────────────────────────────────
   Figma 1440 기준 좌우 여백 120 → 콘텐츠 폭 1200.
   배경(섹션)은 전폭을 유지하고 안쪽 콘텐츠만 1200 으로 묶어 중앙정렬한다.
   1440 에서는 max() 가 정확히 120px 을 돌려줘 피그마와 동일하고,
   그보다 넓은 화면에서는 여백이 늘어난다. 태블릿·모바일은 --pad-x 가 이긴다. */
:root { --content-max: 1200px; }

:is(.gnb, .hero, .service, .stats, .process, .portfolio, .pricing, section.blog, .cta,
    .footer, .page-hero, .post-grid, .related, .blog-cta) {
  padding-inline: max(var(--pad-x), calc((100% - var(--content-max)) / 2));
}

/* 마퀴는 전폭 유지(피그마 동일), 헤더만 중앙 정렬된 상태 그대로 둔다. */
.reviews .section-header { max-width: var(--content-max); }

.featured-post { max-width: var(--content-max); margin-inline: auto; }

/* ── 포트폴리오 페이지 (node 45:539) ───────────────────────────── */
.pf-featured-wrap { display: flex; gap: 24px; padding: 48px var(--pad-x) 0; }
.pf-featured--boxed { flex: 1 1 0; width: auto; background: var(--bg-card); border: 1px solid var(--border-default); }
.pf-featured--boxed .pf-featured__screen { height: 170px; background: linear-gradient(155.2deg, #2b1845 7.69%, #0a0e1c 84.6%); }
.pf-grid { display: flex; flex-wrap: wrap; gap: 24px; padding: 24px var(--pad-x) 96px; }
.pf-project {
  display: flex; flex-direction: column; width: 384px;
  background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden;
}
.pf-project__thumb {
  display: flex; align-items: center; justify-content: center; height: 200px;
  background: linear-gradient(127.5deg, #2b1845 0%, #0a0e1c 71.4%);
  font-size: 44px; font-weight: 700; color: var(--accent-primary);
}
.pf-project__body { display: flex; flex-direction: column; gap: 10px; padding: 24px 28px 28px; }
.pf-project__cat { font-size: 13px; font-weight: 500; line-height: 18px; color: var(--accent-primary); }
.pf-project__title { margin: 0; font-size: 18px; font-weight: 700; line-height: 26px; letter-spacing: -0.09px; color: var(--text-primary); }
.pf-project__caption { font-size: 13px; font-weight: 500; line-height: 18px; color: var(--text-tertiary); }
.pf-cta {
  display: flex; flex-direction: column; gap: 24px; align-items: center; text-align: center;
  padding: 88px var(--pad-x); background: var(--accent-primary); color: #0a0a0a;
}
.pf-cta__title { margin: 0; font-size: 36px; font-weight: 800; letter-spacing: -0.54px; }
.pf-cta__sub { font-size: 16px; color: rgba(10, 10, 10, 0.75); }
.pf-cta__btn { padding: 15px 30px; background: #0a0a0a; border-radius: var(--radius-full); font-size: 16px; font-weight: 600; color: var(--accent-primary); }

:is(.pf-featured-wrap, .pf-grid, .pf-cta) {
  padding-inline: max(var(--pad-x), calc((100% - var(--content-max)) / 2));
}

@media (max-width: 991px) {
  .pf-featured-wrap { flex-direction: column; }
  .pf-grid { justify-content: center; }
  .pf-cta__title { font-size: 28px; }
}
@media (max-width: 767px) {
  .pf-featured-wrap { padding-top: 32px; }
  .pf-grid { padding-bottom: 64px; }
  .pf-project { width: 100%; }
  .pf-cta { padding-block: 56px; }
  .pf-cta__title { font-size: 24px; line-height: 34px; }
}

/* ── 폭 계산 수정 ──────────────────────────────────────────────
   퍼센트 padding 은 자기 자신의 폭을 참조한다. width:auto 인 블록에 걸면
   shrink-to-fit 이 발동해 GNB 가 745px 로 쪼그라들었다. width:100% 로 못 박는다. */
:is(.gnb, .hero, .service, .stats, .process, .portfolio, .pricing, section.blog, .cta,
    .footer, .page-hero, .post-grid, .related, .blog-cta,
    .pf-featured-wrap, .pf-grid, .pf-cta) {
  width: 100%;
}

/* 3열 카드: 384*3 + gap 48 = 1200 으로 컨테이너와 정확히 같아 반올림으로 줄바꿈됐다.
   폭을 컨테이너에서 역산해 항상 3열이 유지되게 한다. */
:is(.post-grid, .related__row, .blog__row) .blog-card,
.pf-grid .pf-project,
.pricing__row .price-card,
.process__steps .step {
  width: calc((100% - 48px) / 3);
  max-width: 384px;
}
.process__steps .step { width: calc((100% - 72px) / 4); max-width: 282px; }
.pf-featured-wrap .pf-featured--boxed { width: calc((100% - 24px) / 2); max-width: none; }

/* 필터 칩(버튼) — 기본 버튼 스타일 제거 */
.page-hero__filters .pill { background: none; cursor: pointer; font-family: inherit; }
[data-group][hidden], .pf-featured-wrap[hidden] { display: none !important; }

/* 카드 열 수 — 위의 3열 계산식보다 뒤에 와야 이긴다(선언 순서 주의). */
@media (max-width: 991px) {
  :is(.post-grid, .related__row, .blog__row) .blog-card,
  .pf-grid .pf-project,
  .pricing__row .price-card { width: calc((100% - 24px) / 2); max-width: none; }
  .process__steps .step { width: calc((100% - 24px) / 2); max-width: none; }
  .pf-featured-wrap .pf-featured--boxed { width: 100%; }
}
@media (max-width: 767px) {
  :is(.post-grid, .related__row, .blog__row) .blog-card,
  .pf-grid .pf-project,
  .pricing__row .price-card,
  .process__steps .step { width: 100%; max-width: none; }
  .price-card__amount { font-size: 32px; line-height: 40px; }
}

/* 행 자체가 shrink-to-fit(부모가 align-items:center)이라
   자식의 퍼센트 폭이 흔들린다. 행 폭을 100% 로 못 박는다. */
:is(.pricing__row, .blog__row, .process__steps, .related__row) { width: 100%; }

[data-cats][hidden] { display: none !important; }