:root { --ink: #111318; --muted: #747987; --line: #e7e9ef; --accent: #6574ff; --dark: #0b0d12; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--ink); background: #fff; font-family: Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.site-header { position: fixed; inset: 0 0 auto; z-index: 20; display: flex; height: 70px; align-items: center; justify-content: space-between; border-bottom: 1px solid rgb(17 19 24 / .1); background: rgb(255 255 255 / .92); padding: 0 max(24px, calc((100% - 1280px) / 2)); backdrop-filter: blur(16px); }
.brand { display: inline-flex; height: 46px; align-items: center; }
.brand-logo { width: auto; height: 46px; }
.brand-logo--light { display: none; }
.header-meta { display: flex; align-items: center; gap: 28px; color: rgb(17 19 24 / .78); font-size: 13px; font-weight: 750; }
.header-meta a:not(.header-cta):hover, .header-meta a:not(.header-cta):focus-visible { color: var(--accent); }
.header-cta, .contact-cta-button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; border: 1px solid currentColor; border-radius: 999px; padding: 0 22px; font-weight: 800; }
.column-page { padding-top: 70px; }
.column-index { padding-bottom: clamp(90px, 10vw, 150px); }
.column-index__header { width: min(1280px, calc(100% - 48px)); margin: 0 auto; padding: clamp(86px, 10vw, 150px) 0 clamp(54px, 7vw, 92px); }
.column-eyebrow { margin: 0 0 16px; color: var(--accent); font-size: 11px; font-weight: 850; letter-spacing: .17em; text-transform: uppercase; }
.column-index__header h1 { max-width: 830px; margin: 0; font-size: clamp(54px, 8vw, 108px); line-height: .98; letter-spacing: -.065em; }
.column-index__header > p:last-child { max-width: 560px; margin: 30px 0 0; color: var(--muted); font-size: 17px; line-height: 1.75; word-break: keep-all; }
.column-list { width: min(1280px, calc(100% - 48px)); margin: 0 auto; }
.column-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.column-filter button { border: 1px solid var(--line); border-radius: 999px; background: #fff; padding: 9px 15px; color: var(--muted); font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; }
.column-filter button.is-active { border-color: var(--accent); background: var(--accent); color: #fff; }
.column-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.column-card, .related-column-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: #fff; transition: transform 300ms cubic-bezier(.22,1,.36,1), box-shadow 300ms ease, border-color 300ms ease; }
.column-card[hidden] { display: none; }
.column-card:hover, .column-card:focus-within, .related-column-card:hover, .related-column-card:focus-within { transform: translateY(-5px); border-color: rgb(101 116 255 / .46); box-shadow: 0 24px 65px rgb(45 53 112 / .12); }
.column-card > a, .related-column-card > a { display: block; height: 100%; }
.column-card__media { overflow: hidden; aspect-ratio: 16 / 10; background: #f1f3ff; }
.column-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms cubic-bezier(.22,1,.36,1); }
.column-card:hover .column-card__media img, .column-card:focus-within .column-card__media img { transform: scale(1.025); }
.column-card__content { padding: 24px 24px 28px; }
.column-card__category { margin: 0 0 14px; color: var(--accent); font-size: 10px; font-weight: 850; letter-spacing: .08em; }
.column-card h2, .related-column-card h2 { margin: 0; font-size: clamp(22px, 2vw, 30px); line-height: 1.25; letter-spacing: -.04em; word-break: keep-all; }
.column-card__summary { min-height: 3.4em; margin: 15px 0 24px; color: var(--muted); font-size: 14px; line-height: 1.7; word-break: keep-all; }
.column-card time { color: #9ca0ab; font-size: 11px; }
.column-empty { grid-column: 1 / -1; border: 1px solid var(--line); border-radius: 22px; padding: 64px 24px; text-align: center; }
.column-empty strong { font-size: 22px; }
.column-empty p { margin: 10px 0 0; color: var(--muted); }
.column-detail-page { padding-bottom: 0; }
.column-detail { padding-top: clamp(82px, 9vw, 140px); }
.column-detail__header { width: min(920px, calc(100% - 48px)); margin: 0 auto; text-align: center; }
.column-detail__header h1 { margin: 0; font-size: clamp(46px, 7vw, 88px); line-height: 1.05; letter-spacing: -.06em; word-break: keep-all; }
.column-detail__summary { max-width: 700px; margin: 28px auto 0; color: var(--muted); font-size: clamp(17px, 2vw, 21px); line-height: 1.75; word-break: keep-all; }
.column-detail__meta { display: flex; justify-content: center; gap: 20px; margin-top: 24px; color: #9297a4; font-size: 12px; }
.column-detail__cover { overflow: hidden; width: min(1280px, calc(100% - 48px)); aspect-ratio: 16 / 9; margin: clamp(54px, 7vw, 92px) auto 0; border-radius: 28px; background: #f1f3ff; }
.column-detail__cover img { width: 100%; height: 100%; object-fit: cover; }
.column-body { width: min(720px, calc(100% - 48px)); margin: 0 auto; padding: clamp(70px, 8vw, 120px) 0; color: #2d3038; font-size: 18px; line-height: 1.9; word-break: keep-all; }
.column-body h2, .column-body h3 { color: var(--ink); line-height: 1.25; letter-spacing: -.04em; }
.column-body h2 { margin: 2.3em 0 .65em; font-size: 34px; }
.column-body h3 { margin: 2em 0 .55em; font-size: 25px; }
.column-body p { margin: 0 0 1.35em; }
.column-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.column-body blockquote { margin: 2em 0; border-left: 4px solid var(--accent); background: #f5f6ff; padding: 22px 26px; }
.column-body figure { margin: 2.3em 0; }
.column-body figure img { width: 100%; border-radius: 18px; }
.column-body hr { margin: 3.5em 0; border: 0; border-top: 1px solid var(--line); }
.related-columns { width: min(1280px, calc(100% - 48px)); margin: 0 auto; border-top: 1px solid var(--line); padding: clamp(66px, 8vw, 110px) 0; }
.related-columns__heading h2 { margin: 0 0 36px; font-size: clamp(34px, 4vw, 54px); letter-spacing: -.05em; }
.related-columns__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.related-column-card .column-card__content { padding: 20px; }
.related-column-card h2 { font-size: 22px; }
.contact-cta-section { position: relative; overflow: hidden; min-height: 570px; display: grid; place-items: center; background: var(--dark); color: #f5f7ff; padding: 90px 24px; text-align: center; }
.contact-cta-stars { position: absolute; inset: 0; opacity: .55; pointer-events: none; }
.contact-cta-stars span { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; box-shadow: 0 0 9px rgb(255 255 255 / .8); }
.contact-cta-shell { position: relative; z-index: 1; }
.contact-cta-heading { margin: 0; font-size: clamp(43px, 6vw, 78px); line-height: 1.07; letter-spacing: -.06em; }
.contact-cta-heading span { color: var(--accent); }
.contact-cta-copy { margin: 26px 0 0; color: #aab4ca; line-height: 1.7; }
.contact-cta-actions { display: flex; justify-content: center; gap: 10px; margin-top: 34px; }
.contact-cta-button { min-width: 166px; color: #fff; }
.contact-cta-button--primary:hover { border-color: var(--accent); background: var(--accent); }
.site-footer { background: var(--dark); color: #eef1fb; padding: 0 24px 28px; }
.site-footer__inner, .site-footer__bottom { width: min(1280px, 100%); margin: 0 auto; }
.site-footer__inner { display: flex; align-items: end; justify-content: space-between; gap: 32px; padding: 38px 0 32px; }
.site-footer__main { display: flex; align-items: center; gap: 22px; }
.site-footer__logo { width: auto; height: 56px; }
.site-footer__details p { display: flex; gap: 12px; margin: 0; color: #9ea7bc; font-size: 12px; }
.site-footer__details p + p { margin-top: 8px; }
.site-footer__details strong { color: #fff; }
.site-footer__nav { display: flex; gap: 28px; font-size: 12px; font-weight: 750; }
.site-footer__bottom { border-top: 1px solid rgb(255 255 255 / .14); padding-top: 20px; text-align: right; }
.site-footer__bottom p { margin: 0; color: #737d92; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 960px) { .header-meta { gap: 16px; } .column-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .related-columns__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .site-header { height: 60px; padding-inline: 16px; } .brand, .brand-logo { height: 40px; } .header-meta a:not(.header-cta) { display: none; } .column-page { padding-top: 60px; } .column-index__header, .column-list, .column-detail__header, .column-detail__cover, .column-body, .related-columns { width: min(100% - 32px, 1280px); } .column-index__header { padding-top: 70px; } .column-detail__cover { border-radius: 18px; } .column-body { font-size: 16px; } .related-columns__grid { grid-template-columns: 1fr; } .contact-cta-actions, .site-footer__inner, .site-footer__main { align-items: center; flex-direction: column; } .site-footer__nav { flex-wrap: wrap; justify-content: center; } .site-footer__bottom { text-align: center; } }
@media (max-width: 620px) { .column-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .column-card, .related-column-card, .column-card__media img { transition: none; } .column-card:hover, .column-card:focus-within, .related-column-card:hover, .related-column-card:focus-within, .column-card:hover .column-card__media img, .column-card:focus-within .column-card__media img { transform: none; } }