@font-face {
  font-family: 'Noto Sans KR';
  src: url('brand/noto-sans-kr.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  font-family: 'Noto Sans KR', system-ui, sans-serif;
  background: #fcfbfd;
  color: #231d2f;
  --accent: #603ca4;
  --muted: #544b60;
  --line: #e9e1f1;
}

* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 3px solid #7347bf; outline-offset: 4px; }
p, h1, h2, h3 { margin: 0; }
p { color: var(--muted); line-height: 1.85; }
img { max-width: 100%; }
.shell { width: min(1170px, calc(100% - 80px)); margin-inline: auto; }
.skip { position: fixed; top: -100px; left: 12px; background: white; padding: 12px; z-index: 5; }
.skip:focus { top: 12px; }

.header { background: white; border-bottom: 1px solid var(--line); }
.header-inner, .footer-inner { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 820; letter-spacing: .035em; }
.header nav { display: flex; gap: 32px; font-weight: 650; font-size: 14px; }
.header nav a:hover, .footer a:hover { color: var(--accent); }
.button { display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px; border: 1px solid #d9cbe8; border-radius: 100px; font-size: 14px; font-weight: 700; color: var(--accent); }
.button:hover { background: #f0eaf6; }
.button.primary { color: white; background: var(--accent); border-color: var(--accent); }
.button.primary:hover { background: #4c2e85; }
.button.small { padding: 9px 15px; }

.hero { margin-block: 32px 76px; padding: clamp(28px, 6vw, 72px); border-radius: 30px; overflow: hidden; display: grid; grid-template-columns: 1fr minmax(210px, .8fr); align-items: center; gap: 32px; background: #f4eff9; }
.hero h1 { font-size: clamp(44px, 7vw, 90px); letter-spacing: -.075em; line-height: 1.12; font-weight: 800; word-break: keep-all; }
.hero p { max-width: 420px; margin-block: 24px 28px; font-size: 16px; word-break: keep-all; }
.hero-mark { min-height: 330px; display: grid; place-items: center; position: relative; isolation: isolate; }
.hero-mark img { width: min(65%, 230px); height: auto; filter: saturate(.76); }
.mark-grid { position: absolute; inset: 7%; z-index: -1; border: 1px solid #d9cbea; border-radius: 50%; background-image: radial-gradient(#d6c6e9 1px, transparent 1px); background-size: 18px 18px; }

.section { margin-block: 64px; scroll-margin-top: 20px; }
.section h2 { font-size: clamp(28px, 4vw, 40px); letter-spacing: -.06em; line-height: 1.35; }
.about { display: grid; grid-template-columns: minmax(180px, .7fr) 1.3fr; gap: 24px; }
.about p { max-width: 670px; }
.portfolio { margin-top: 22px; background: #fff; border: 1px solid var(--line); border-radius: 24px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; padding: clamp(22px, 4vw, 42px); }
.portfolio .type { color: var(--accent); font-size: 13px; font-weight: 750; }
.portfolio h3 { margin-block: 8px 12px; font-size: clamp(22px, 3vw, 32px); letter-spacing: -.045em; line-height: 1.4; word-break: keep-all; }
.portfolio-description { max-width: 54ch; word-break: keep-all; }
.portfolio-source { display: inline-block; margin-block-start: 12px; color: var(--accent); font-size: 14px; text-decoration: underline; text-underline-offset: .2em; }
.portfolio-mark { background: #f5f0fa; border-radius: 20px; width: 115px; aspect-ratio: 1; display: grid; place-items: center; }
.portfolio-mark img { filter: saturate(.76); }
.footer { background: white; border-top: 1px solid var(--line); }
.footer a:last-child { font-size: 14px; font-weight: 650; }

@media (max-width: 700px) {
  .shell { width: calc(100% - 32px); }
  .header-inner { flex-wrap: wrap; gap: 12px; padding-block: 14px; }
  .header nav { order: 3; width: 100%; gap: 24px; }
  .hero { grid-template-columns: 1fr; margin-block: 18px 42px; gap: 20px; }
  .hero-mark { min-height: 190px; }
  .hero-mark img { width: 118px; }
  .mark-grid { width: 174px; inset: 8px auto; }
  .about { grid-template-columns: 1fr; gap: 12px; }
  .section { margin-block: 42px; }
  .portfolio { gap: 10px; }
  .portfolio-mark { width: 64px; border-radius: 12px; }
  .portfolio-mark img { width: 36px; height: 36px; }
}