/* Render-blocking presentation layer for the public column's server HTML. This stylesheet is loaded in the initial , before any React code runs. */ :root { --column-deep-navy: oklab(0.18 -0.006972 -0.079696 / 0.9); color: #172033; background: #ffffff; font-family: "Noto Sans KR", system-ui, sans-serif; } * { box-sizing: border-box; } body { margin: 0; background: #ffffff; color: #172033; } .column-prerender { min-height: 100vh; color: #172033; background: #ffffff; } .column-prerender > header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 5.125rem; padding: 0 2.5rem; border-bottom: 1px solid #e3e7ee; } .column-prerender > header a { color: var(--column-deep-navy); font-family: "Noto Serif KR", Georgia, serif; font-size: .95rem; font-weight: 700; text-decoration: none; } .column-prerender > header a:first-child { margin-right: auto; font-size: 1.125rem; } .column-prerender > article { width: min(100% - 2rem, 56rem); margin: 0 auto; padding: 6rem 0 7rem; } .column-prerender article > p:first-child { margin: 0 0 1.25rem; color: var(--column-deep-navy); font-size: .8rem; font-weight: 700; letter-spacing: .18em; } .column-prerender h1, .column-prerender h2 { margin: 0; color: var(--column-deep-navy); font-family: "Noto Serif KR", Georgia, serif; font-weight: 700; letter-spacing: -.02em; } .column-prerender h1 { max-width: 48rem; font-size: clamp(2rem, 4.8vw, 3rem); line-height: 1.35; } .column-prerender h1 + p { max-width: 42rem; margin: 1.75rem 0 0; color: rgba(23,32,51,.65); font-size: 1.05rem; line-height: 1.9; } .column-prerender time { display: block; margin-top: 2rem; color: rgba(23,32,51,.45); font-size: .875rem; } .column-prerender .column-event-detail { margin: .5rem 0 0; color: rgba(23,32,51,.45); font-size: .75rem; line-height: 1.6; } .column-prerender figure { margin: 2.5rem 0 4rem; } .column-prerender figure img { display: block; width: 100%; max-height: 35rem; border: 1px solid #e3e7ee; border-radius: 1rem; object-fit: cover; } .column-prerender figcaption { margin-top: .75rem; color: rgba(23,32,51,.65); font-size: .8125rem; line-height: 1.75; text-align: center; } .column-prerender section { margin-top: 4rem; scroll-margin-top: 2rem; } .column-prerender section h2 { margin-bottom: 1.5rem; font-size: clamp(1.45rem, 3.2vw, 1.875rem); line-height: 1.45; } .column-prerender section p { margin: 1.25rem 0 0; color: rgba(23,32,51,.72); font-size: 1.0625rem; line-height: 2; } .column-prerender section p a { color: var(--column-deep-navy); font-weight: 700; text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--column-deep-navy) 35%, transparent); text-underline-offset: .25rem; } .column-prerender section ul { margin: 1.5rem 0 0; padding: 1.25rem 1.5rem; border: 1px solid #e3e7ee; border-radius: .75rem; background: #f7f8fb; } .column-prerender section li { margin: .7rem 0; color: rgba(23,32,51,.72); font-size: 1rem; line-height: 1.7; } .column-prerender section li::marker { color: var(--column-deep-navy); } .column-prerender .academy-comparison { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: stretch; gap: 1rem; margin-bottom: 2rem; } .column-prerender .academy-comparison > div { display: flex; align-items: center; padding: 1.25rem; border: 1px solid #dbe2ec; border-radius: .75rem; background: #f7f8fb; color: rgba(23,32,51,.8); font-size: 1.125rem; font-weight: 600; line-height: 1.75; } .column-prerender .academy-comparison > div:last-child { border-color: color-mix(in oklab, var(--column-deep-navy) 25%, transparent); background: var(--column-deep-navy); color: #fff; font-weight: 700; } .column-prerender .academy-comparison > span { align-self: center; color: var(--column-deep-navy); font-size: 1rem; font-weight: 700; letter-spacing: .12em; } .column-prerender .academy-enrollment-intro { margin-top: 2.5rem; } .column-prerender .academy-enrollment-intro p { margin: 1.25rem 0 0; color: rgba(23,32,51,.72); font-size: 1.0625rem; line-height: 2; } .column-prerender .academy-enrollment-notice { margin-top: 8rem; padding-top: 4rem; border-top: 1px solid #e3e7ee; } .column-prerender .academy-enrollment-notice > p { margin: 1.25rem 0 0; color: rgba(23,32,51,.72); font-size: 1.0625rem; line-height: 2; } .column-prerender .academy-enrollment-notice h2 { margin: 1.5rem 0 0; color: #b92d5d; font-size: clamp(1.45rem, 3.2vw, 1.875rem); line-height: 1.45; } .column-prerender .academy-enrollment-subjects { margin-top: 1.5rem; padding: 1.25rem 1.5rem; border: 1px solid #dbe2ec; border-radius: .75rem; background: #f7f8fb; color: var(--column-deep-navy); font-size: 1.0625rem; line-height: 1.85; } .column-prerender .academy-enrollment-subjects ul { margin: 0; padding: 0; list-style: none; } .column-prerender .academy-enrollment-subjects li + li { margin-top: .25rem; } .column-prerender aside { margin-top: 6rem; padding: 2.5rem; border: 1px solid #cfd8ea; border-radius: 1rem; background: #f2f5fa; } .column-prerender .academy-enrollment-notice + aside { margin-top: 5rem; } .column-prerender aside h2 { font-size: clamp(1.45rem, 3vw, 1.875rem); line-height: 1.45; } .column-prerender aside p { margin: 1rem 0 0; color: rgba(23,32,51,.65); font-size: 1rem; line-height: 1.85; } .column-prerender aside a { display: inline-block; margin-top: 1.5rem; padding: .75rem 1.25rem; border-radius: .375rem; background: var(--column-deep-navy); color: #fff; font-size: .875rem; font-weight: 700; text-decoration: none; } .column-prerender aside p:last-child { font-size: .75rem; } .column-prerender > article.results-prerender { width: min(100% - 2rem, 72rem); padding-top: 6rem; } .results-prerender > p:first-child { color: var(--column-deep-navy); font-size: .75rem; font-weight: 700; letter-spacing: .2em; text-align: center; } .results-prerender > h1 { max-width: 52rem; margin: 1.25rem auto 0; text-align: center; } .results-prerender > h1 + p { max-width: 46rem; margin: 1.5rem auto 0; text-align: center; } .results-prerender > section { margin-top: 7rem; } .results-prerender > section > p { margin: 0; color: rgba(23,32,51,.45); font-size: .75rem; font-weight: 700; letter-spacing: .18em; } .results-prerender > section > h2 { margin: .75rem 0 2.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid #e3e7ee; } .results-admission-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } .results-admission-card { padding: 2rem; border: 2px solid var(--column-deep-navy); border-radius: .75rem; background: linear-gradient(135deg, #eff6ff, #fff); } .results-admission-card img { width: 3.5rem; height: 3.5rem; margin: 0 0 1.75rem; object-fit: contain; } .results-admission-card p { margin: 0; color: rgba(23,32,51,.55); font-size: .875rem; line-height: 1.7; } .results-admission-card p:first-of-type { display: inline-block; padding: .25rem .75rem; border-radius: 999px; background: var(--column-deep-navy); color: #fff; font-size: .75rem; font-weight: 700; } .results-admission-card h3 { margin: 1.75rem 0 .75rem; color: #172033; font-size: 1rem; } .results-admission-card h3 + p { color: var(--column-deep-navy); font-size: 1.75rem; font-weight: 700; line-height: 1.35; } .results-admission-card h3 + p + p { margin-top: .75rem; } .results-academic-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; } .results-academic-card { padding: 1.25rem; border: 1px solid rgba(23,32,51,.1); border-radius: .75rem; background: #fff; } .results-academic-card p { margin: 0; color: rgba(23,32,51,.55); font-size: .75rem; line-height: 1.6; } .results-academic-card p:first-child { color: var(--column-deep-navy); font-size: 1.25rem; line-height: 1; } .results-academic-card h3 { margin: 1rem 0 .25rem; color: #172033; font-size: .75rem; } .results-academic-card h3 + p { color: var(--column-deep-navy); font-weight: 700; } .results-academic-card h3 + p + p { margin-top: .5rem; } .results-contact-link { display: inline-block; margin-top: 5rem; padding: .75rem 1.25rem; border: 1px solid color-mix(in oklab, var(--column-deep-navy) 25%, transparent); border-radius: .375rem; color: var(--column-deep-navy); font-size: .875rem; font-weight: 700; text-decoration: none; } .column-prerender .performance-prerender { margin-top: 4rem; padding: 5rem max(1rem, calc((100vw - 72rem) / 2)); border-top: 1px solid #e3e7ee; background: #ffffff; } .column-prerender .performance-prerender > div { width: min(100%, 72rem); margin: 0 auto; } .column-prerender .performance-prerender > div > p:first-child { margin: 0; color: rgba(23,32,51,.45); font-size: .75rem; font-weight: 700; letter-spacing: .18em; text-align: center; } .column-prerender .performance-prerender h2 { margin: 1rem 0; color: var(--column-deep-navy); font-size: clamp(2rem, 4.5vw, 3rem); text-align: center; } .column-prerender .performance-prerender h2 + p { max-width: 44rem; margin: 0 auto; text-align: center; } .column-prerender .performance-admission-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: 4rem; } .column-prerender .performance-admission-card { padding: 2rem; border: 2px solid var(--column-deep-navy); border-radius: .75rem; background: linear-gradient(135deg, #eff6ff, #fff); } .column-prerender .performance-admission-card img { display: block; width: 3.25rem; height: 3.25rem; margin: 0 0 1.5rem; object-fit: contain; } .column-prerender .performance-admission-card p { margin: 0; color: rgba(23,32,51,.55); font-size: .875rem; line-height: 1.6; } .column-prerender .performance-admission-card p:first-of-type { display: inline-block; padding: .25rem .75rem; border-radius: 999px; background: var(--column-deep-navy); color: #fff; font-size: .75rem; font-weight: 700; } .column-prerender .performance-admission-card h3 { margin: 1.6rem 0 .65rem; color: #172033; font-size: 1rem; } .column-prerender .performance-admission-card h3 + p { color: var(--column-deep-navy); font-size: 1.75rem; font-weight: 700; line-height: 1.3; } .column-prerender .performance-admission-card h3 + p + p { margin-top: .7rem; } .column-prerender .performance-academic-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; margin-top: 3rem; } .column-prerender .performance-academic-card { padding: 1.2rem; border: 1px solid rgba(23,32,51,.1); border-radius: .75rem; background: #fff; } .column-prerender .performance-academic-card p { margin: 0; color: rgba(23,32,51,.55); font-size: .75rem; line-height: 1.6; } .column-prerender .performance-academic-card p:first-child { color: var(--column-deep-navy); font-size: 1.2rem; line-height: 1; } .column-prerender .performance-academic-card h3 { margin: 1rem 0 .25rem; color: #172033; font-size: .75rem; } .column-prerender .performance-academic-card h3 + p { color: var(--column-deep-navy); font-weight: 700; } .column-prerender .performance-academic-card h3 + p + p { margin-top: .5rem; } @media (max-width: 640px) { .column-prerender > header { height: 5rem; padding: 0 1rem; } .column-prerender > header a:first-child { font-size: 1rem; } .column-prerender > article { width: min(100% - 2rem, 56rem); padding: 3.75rem 0 5rem; } .column-prerender figure { margin: 2.25rem 0 3.25rem; } .column-prerender section { margin-top: 3.25rem; } .column-prerender .academy-comparison { grid-template-columns: 1fr; gap: .75rem; } .column-prerender .academy-comparison > span { justify-self: center; } .column-prerender .academy-enrollment-intro { margin-top: 2rem; } .column-prerender .academy-enrollment-notice { margin-top: 6rem; padding-top: 3rem; } .column-prerender .academy-enrollment-subjects { padding: 1.25rem; } .column-prerender .academy-enrollment-notice + aside { margin-top: 3.5rem; } .column-prerender aside { margin-top: 4rem; padding: 1.75rem; } .column-prerender > article.results-prerender { padding-top: 3.75rem; } .results-prerender > section { margin-top: 5rem; } .results-prerender > section > h2 { margin-bottom: 2rem; } .results-admission-grid { grid-template-columns: 1fr; gap: 1rem; } .results-admission-card { padding: 1.5rem; } .results-admission-card h3 + p { font-size: 1.5rem; } .results-academic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .results-contact-link { margin-top: 3.5rem; } .column-prerender .performance-prerender { margin-top: 3rem; padding: 4rem 1rem; } .column-prerender .performance-admission-grid { grid-template-columns: 1fr; gap: 1rem; margin-top: 2.5rem; } .column-prerender .performance-admission-card { padding: 1.5rem; } .column-prerender .performance-admission-card h3 + p { font-size: 1.45rem; } .column-prerender .performance-academic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-top: 2rem; } .column-prerender .performance-academic-card { padding: 1rem; } }