.public-page { background: #f8fafc; color: #111b2b; }.public-header { align-items: center; background: #fff; border-bottom: 1px solid #e6ebf0; display: flex; justify-content: space-between; padding: 14px max(24px, calc((100vw - 1200px) / 2)); }.public-brand { align-items: center; color: #172134; display: flex; font-size: .95rem; font-weight: 760; gap: 9px; letter-spacing: -.02em; text-decoration: none; }.brand-mark { align-items: center; background: linear-gradient(135deg, #42a1e8, #243fc4); border-radius: 5px; color: #fff; display: inline-flex; font-size: .75rem; height: 23px; justify-content: center; width: 23px; }.public-header nav { display: flex; gap: 25px; }.public-header nav a { color: #526176; font-size: .82rem; font-weight: 620; text-decoration: none; }.public-hero { background: #030c1d; box-sizing: border-box; height: min(40vw, 500px); min-height: 340px; overflow: hidden; position: relative; }.hero-grid { background-image: radial-gradient(#85bff166 1px, transparent 1px); background-size: 22px 22px; inset: 0; mask-image: linear-gradient(90deg, transparent, #000 28%, #000 72%, transparent); opacity: .5; position: absolute; }.hero-orbit { border: 2px solid #42a1e8; border-radius: 50%; box-shadow: 0 0 36px #1789ff; position: absolute; }.orbit-one { height: 115%; left: 8%; top: -54%; width: 84%; }.orbit-two { border-color: #2169c0; height: 84%; left: 31%; top: 38%; width: 56%; }.hero-copy { color: #f9fcff; left: 50%; position: absolute; text-align: center; top: 50%; transform: translate(-50%, -44%); width: min(90%, 850px); z-index: 1; }.hero-copy p { color: #79c7ff; font-family: ui-monospace, monospace; font-size: .7rem; font-weight: 700; letter-spacing: .18em; margin: 0 0 18px; }.hero-copy h1 { font-family: "Pretendard Variable", Pretendard, sans-serif; font-size: clamp(2.6rem, 6.3vw, 5.8rem); font-weight: 350; letter-spacing: -.075em; line-height: .98; margin: 0; }.hero-copy h1 strong { font-weight: 760; }.hero-copy span { color: #b7cce4; display: block; font-size: .95rem; margin-top: 23px; }.blog-layout { display: grid; gap: 52px; grid-template-columns: 190px minmax(0, 1fr); margin: 0 auto; max-width: 1200px; padding: 66px 26px 100px; }.category-sidebar { align-self: start; border-right: 1px solid #e1e7ee; display: grid; gap: 4px; padding-right: 25px; position: sticky; top: 24px; }.sidebar-label, .section-kicker { color: #6e8eaf; font-family: ui-monospace, monospace; font-size: .65rem; font-weight: 700; letter-spacing: .13em; margin: 0 0 10px; }.category-link { border-radius: 6px; color: #6a7789; font-size: .86rem; font-weight: 590; padding: 8px 9px; text-decoration: none; }.category-link.root { color: #26374e; margin-top: 8px; }.category-link.child { font-size: .8rem; padding-left: 21px; }.category-link:hover, .category-link.active { background: #e9f3fd; color: #2375ba; }.category-link span { color: #97a5b4; float: right; font-size: .75rem; }.post-area-heading { align-items: end; display: flex; justify-content: space-between; margin-bottom: 23px; }.post-area-heading h2 { font-family: "Pretendard Variable", Pretendard, sans-serif; font-size: 1.85rem; letter-spacing: -.05em; margin: 0; }.post-area-heading > span { color: #8491a1; font-family: ui-monospace, monospace; font-size: .72rem; }.public-card-grid { display: grid; gap: 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }.public-post-card { background: #fff; border: 1px solid #e3e8ef; border-radius: 12px; overflow: hidden; transition: box-shadow .2s, transform .2s; }.public-post-card:hover { box-shadow: 0 16px 34px #17243c17; transform: translateY(-4px); }.public-thumbnail { background: #0a2850; display: block; height: 205px; overflow: hidden; }.public-thumbnail img { height: 100%; object-fit: cover; transition: transform .3s ease; width: 100%; }.public-post-card:hover .public-thumbnail img { transform: scale(1.04); }.public-thumbnail.fallback { align-items: center; background: linear-gradient(135deg, #061a35, #17569b); color: #bfe6ff; display: flex; font-family: ui-monospace, monospace; font-size: .76rem; font-weight: 700; justify-content: center; letter-spacing: .13em; padding: 0 22px; text-align: center; }.public-card-body { padding: 22px 23px 24px; }.public-meta { color: #4785bd; display: flex; font-family: ui-monospace, monospace; font-size: .68rem; font-weight: 700; justify-content: space-between; letter-spacing: .04em; margin: 0 0 13px; }.public-meta time { color: #9aa7b6; }.public-card-body h3 { font-family: "Pretendard Variable", Pretendard, sans-serif; font-size: 1.17rem; letter-spacing: -.035em; line-height: 1.35; margin: 0 0 10px; }.public-summary { color: #697789; font-size: .86rem; line-height: 1.7; margin: 0; }.public-read { color: #246fb4; display: inline-block; font-size: .78rem; font-weight: 700; margin-top: 20px; text-decoration: none; }.public-read span { font-size: 1rem; margin-left: 3px; }.public-empty { border: 1px dashed #cbd6e1; border-radius: 10px; color: #8290a0; padding: 55px 20px; text-align: center; }.public-footer { border-top: 1px solid #e1e7ee; color: #8390a1; display: flex; font-family: ui-monospace, monospace; font-size: .65rem; justify-content: space-between; letter-spacing: .08em; margin-top: 0; padding: 24px max(24px, calc((100vw - 1200px) / 2)); } @media (max-width: 760px) { .public-header { padding: 14px 20px; }.public-hero { height: 360px; }.blog-layout { gap: 32px; grid-template-columns: 1fr; padding: 38px 20px 72px; }.category-sidebar { border-bottom: 1px solid #e1e7ee; border-right: 0; display: flex; flex-wrap: wrap; gap: 3px; padding: 0 0 18px; position: static; }.sidebar-label { flex-basis: 100%; }.category-group { display: contents; }.category-link.root, .category-link.child { margin: 0; padding-left: 9px; }.public-card-grid { grid-template-columns: 1fr; }.public-footer { padding: 22px 20px; }.public-header nav { gap: 14px; } }