:root { --ink:#18213b; --blue:#315efb; --muted:#647087; --line:#dfe5f0; --soft:#f2f5fc; --sans:'DM Sans','Noto Sans KR',sans-serif; --mono:'IBM Plex Mono',monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:95px; background:#e9edf4; }
body { margin:0; color:var(--ink); font:13px/1.75 var(--sans); -webkit-font-smoothing:antialiased; word-break:keep-all; }
a { color:inherit; text-decoration:none; }
a:focus-visible, button:focus-visible { outline:2px solid var(--blue); outline-offset:5px; }
button { font:inherit; cursor:pointer; }
.document-toolbar { height:70px; padding:0 36px; background:#18213bf5; color:white; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:5; backdrop-filter:blur(16px); }
.document-brand { display:flex; align-items:center; gap:12px; font-size:12px; letter-spacing:1px; font-weight:600; }
.document-brand > span { font-size:29px; letter-spacing:-2px; line-height:1; color:#9db2ff; margin-right:3px; }
.document-brand small { font:9px var(--mono); color:#9da9c4; }
.document-toolbar > div { display:flex; align-items:center; gap:22px; font-size:11px; }
.back-to-play { color:#c1cce1; }
.download-pdf { background:var(--blue); padding:9px 15px; border-radius:4px; color:white; }
.download-pdf:hover { background:#5078ff; }
.document-toolbar button { background:none; color:#c1cce1; border:0; padding:8px 0; font-size:11px; }
.page-navigation { position:fixed; top:130px; left:calc(50% - 540px); display:grid; gap:17px; font:10px var(--mono); color:#7e8a9e; }
.page-navigation a:hover { color:var(--blue); }
.document { padding:44px 20px 64px; }
.sheet { position:relative; width:210mm; min-height:297mm; margin:0 auto 30px; padding:16mm 17mm 20mm; background:#fff; box-shadow:0 8px 32px #1a31540c; border:1px solid #dfe5ef; }
.page-kicker { display:flex; align-items:center; gap:9px; font:8px var(--mono); letter-spacing:1.6px; color:#66738d; border-top:3px solid var(--blue); padding-top:17px; }
.page-kicker > span:last-child { margin-left:auto; color:#8996af; letter-spacing:1px; }
.blue-square { width:6px; height:6px; background:var(--blue); }
.cover-title { margin-top:30px; display:flex; align-items:center; justify-content:space-between; }
.role-label { font:9px var(--mono); letter-spacing:1.3px; color:var(--blue); }
.cover-title h1 { font-size:48px; line-height:1.15; letter-spacing:-2px; margin:15px 0 0; font-weight:800; }
.cover-title h1 > span { display:block; font:11px var(--mono); color:#7d8aa3; letter-spacing:4px; margin-top:15px; }
.cover-monogram { width:115px; height:115px; border:1px solid #dbe3ff; display:flex; align-items:center; justify-content:center; position:relative; background:linear-gradient(90deg,transparent 49.5%,#dce5ff 50%,transparent 50.5%),linear-gradient(transparent 49.5%,#dce5ff 50%,transparent 50.5%),#f6f8ff; }
.cover-monogram > span { font-size:82px; font-weight:700; line-height:1; letter-spacing:-10px; margin-left:-7px; color:var(--blue); transform:translateY(-4px); }
.cover-monogram > i { font-size:20px; font-style:normal; color:var(--blue); position:absolute; right:-10px; top:-15px; background:white; padding:2px 5px; }
.cover-statement { font-size:27px; line-height:1.5; letter-spacing:-1px; margin:27px 0 13px; font-weight:600; }
.cover-statement > span { color:var(--blue); }
.cover-intro { max-width:555px; font-size:12px; line-height:1.95; margin:0; color:#67758b; }
.cover-contact { display:flex; flex-wrap:wrap; gap:18px; font:10px var(--mono); padding:17px 0 20px; margin-top:4px; border-bottom:1px solid var(--line); }
.cover-contact a:first-child { color:var(--blue); }
.section-label { display:flex; align-items:center; gap:12px; color:var(--ink); font-size:11px; font-weight:700; margin:0 0 16px; }
.section-label > span { font:9px var(--mono); color:var(--blue); }
.strengths { margin-top:24px; }
.strengths > div { display:grid; grid-template-columns:repeat(3,1fr); gap:21px; }
.strengths article { display:flex; gap:9px; }
.small-number { font:9px var(--mono); color:#a0acc0; padding-top:1px; }
.strengths h3 { font-size:11px; line-height:1.4; margin:0 0 9px; font-weight:700; }
.strengths p { font-size:11px; line-height:1.8; color:#58677f; margin:0 0 7px; }
.strengths small { font:8px var(--sans); color:var(--blue); }
.skills { margin-top:24px; }
.skills dl { margin:0; padding:14px 18px; background:var(--soft); border-left:2px solid #c0cdff; }
.skills dl > div { display:grid; grid-template-columns:145px 1fr; gap:12px; padding:5px 0; }
.skills dt { font:8px/1.6 var(--mono); color:#79859b; }
.skills dd { font-size:11px; margin:0; color:#3f4d67; line-height:1.6; }
.selected-work { margin-top:23px; }
.selected-work .section-label { margin-bottom:7px; }
.selected-work nav > a { display:flex; align-items:center; gap:14px; padding:10px 0; border-bottom:1px solid var(--line); }
.selected-work a > span { font:9px var(--mono); color:#a5aec1; }
.selected-work b { font-size:11px; min-width:100px; }
.selected-work small { font-size:11px; color:#68758b; }
.selected-work em { margin-left:auto; font-size:14px; font-style:normal; color:var(--blue); }
.selected-work a:hover b { color:var(--blue); }
.page-footer { position:absolute; bottom:11mm; left:17mm; right:17mm; padding-top:14px; border-top:1px solid var(--line); display:flex; justify-content:space-between; color:#8b98ae; font:7px var(--mono); letter-spacing:.6px; }
.page-footer i { font-style:normal; color:#c0c9d9; padding:0 9px; }
.case-heading { margin-top:24px; }
.case-category { font:8px var(--mono); letter-spacing:1.2px; color:var(--blue); }
.case-heading h2 { font-size:42px; line-height:1.2; letter-spacing:-1.5px; font-weight:700; margin:9px 0 12px; }
.case-heading > p { font-size:12px; line-height:1.8; color:#58677f; margin:0; }
.case-meta { display:grid; grid-template-columns:1fr 1.25fr; gap:22px; margin:16px 0 18px; padding:12px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.case-meta dt { font-size:8px; color:#8c97aa; margin-bottom:5px; }
.case-meta dd { font-size:11px; line-height:1.6; color:#37465f; margin:0; }
.case-meta dd > span { color:#c6cddb; padding:0 6px; }
.problem .section-label { margin-bottom:8px; }
.problem p { font-size:12px; line-height:1.8; color:#58667d; margin:0; }
.architecture { margin:17px 0 19px; background:#f5f7fc; border:1px solid #e7ebf5; padding:11px 17px 10px; }
.architecture figcaption { font-size:8px; color:#8290a8; margin-bottom:8px; }
.architecture ol { list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:25px; padding:0; margin:0; }
.architecture li { border:1px solid #dce3f4; background:white; padding:9px 6px; text-align:center; position:relative; }
.architecture li:not(:last-child)::after { content:'→'; position:absolute; right:-20px; top:50%; transform:translateY(-50%); font-size:15px; color:#8a9ac2; }
.architecture b { font-size:11px; font-weight:600; display:block; }
.architecture li > span { font-size:8px; color:#8390a8; display:block; margin-top:3px; }
.architecture p { font-size:8px; color:#73829e; margin:9px 0 0; text-align:center; }
.decisions > .section-label { margin-bottom:4px; }
.decision { display:flex; gap:16px; padding:13px 0; border-bottom:1px solid #e9edf5; }
.decision > span { font:10px var(--mono); color:var(--blue); padding-top:2px; }
.decision h3 { font-size:13px; line-height:1.45; margin:0 0 5px; font-weight:600; }
.decision p { font-size:12px; line-height:1.8; color:#58677f; margin:0; }
.decision small { display:block; font-size:9px; margin-top:4px; color:#4e6dba; }
.outcome { display:grid; grid-template-columns:65px 1fr; gap:14px; padding:14px 16px; background:#edf2ff; margin-top:17px; border-left:3px solid var(--blue); }
.outcome h3 { margin:0; font-size:10px; color:var(--blue); }
.outcome p { margin:0; font-size:12px; line-height:1.8; color:#394e77; }
.evidence { margin-top:14px; }
.evidence h3 { font-size:10px; margin:0 0 6px; }
.evidence p { font-size:11px; line-height:1.8; color:#68758b; margin:0; }
.evidence .scope-note { margin-top:6px; font-size:10px; color:#748198; }
.scope-note b { font-weight:500; color:#65738c; margin-right:6px; }
.case-stack { display:flex; flex-wrap:wrap; gap:5px; margin-top:13px; }
.case-stack span { border:1px solid #e1e7f1; color:#61718d; border-radius:3px; padding:3px 7px; font:8px/1.4 var(--mono); }
.case-links { display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:12px; }
.case-links a { color:var(--blue); font:9px/1.6 var(--mono); overflow-wrap:anywhere; word-break:break-all; }
.case-links a > span { margin-left:4px; }
.other-heading { margin-top:35px; margin-bottom:27px; }
.other-heading h2 { font-size:34px; letter-spacing:-1.5px; margin:0 0 12px; line-height:1.25; }
.other-heading p { font-size:11px; line-height:1.9; color:#7b869b; margin:0; }
.support-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 26px; }
.support-project { min-width:0; padding:22px 0; border-top:1px solid var(--line); scroll-margin-top:100px; }
.support-top { display:flex; flex-direction:column; gap:2px; }
.support-top > span { color:var(--blue); font-size:8px; }
.support-top > small { font-size:8px; color:#919bad; }
.support-project h3 { font-size:19px; font-weight:600; letter-spacing:-.5px; margin:10px 0 8px; line-height:1.2; }
.support-project p { font-size:12px; line-height:1.8; margin:0; color:#58677f; min-height:64px; }
.support-stack { font:8px/1.7 var(--mono); margin-top:10px; color:#7e8ba1; }
.support-links { display:flex; gap:13px; margin-top:10px; font-size:9px; color:var(--blue); }
.local-artifact { font-size:8px; color:#8590a2; }
.contact-signoff { margin-top:13px; padding:21px 22px; background:#19243f; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.contact-signoff > span { font:8px var(--mono); letter-spacing:.8px; color:#95a8d5; }
.contact-signoff > a { color:white; font-size:10px; }
@media (max-width:1150px) { .page-navigation { display:none; } }
@media (max-width:850px) {
  .document { padding:22px 14px; }
  .sheet { width:100%; min-height:0; padding:35px 30px 80px; margin-bottom:20px; }
  .page-footer { bottom:25px; left:30px; right:30px; }
  .document-toolbar { padding:0 24px; }
  .document-toolbar > div { gap:15px; }
  .back-to-play { display:none; }
}
@media (max-width:550px) {
  .document-toolbar { height:62px; padding:0 17px; }
  .document-brand { font-size:10px; gap:8px; letter-spacing:.5px; }
  .document-brand small, .document-toolbar button { display:none; }
  .download-pdf { font-size:10px; padding:8px 10px; }
  .document { padding:12px 9px 30px; }
  .sheet { padding:25px 22px 73px; border-radius:2px; }
  .page-kicker { font-size:7px; letter-spacing:1px; padding-top:14px; gap:7px; }
  .page-kicker > span:last-child { font-size:6px; }
  .cover-title { margin-top:27px; }
  .cover-title h1 { font-size:39px; }
  .cover-title h1 > span { font-size:8px; letter-spacing:3px; margin-top:13px; }
  .role-label { font-size:7px; letter-spacing:.5px; }
  .cover-monogram { width:74px; height:85px; }
  .cover-monogram > span { font-size:61px; }
  .cover-statement { font-size:24px; margin-top:31px; }
  .cover-intro { font-size:11px; line-height:1.95; }
  .cover-contact { gap:10px 16px; font-size:9px; line-height:1.6; }
  .strengths > div { grid-template-columns:1fr; gap:18px; }
  .strengths h3 { font-size:12px; margin-bottom:5px; }
  .strengths p { font-size:11px; margin-bottom:3px; }
  .strengths small { font-size:9px; }
  .skills dl { padding:12px 14px; }
  .skills dl > div { grid-template-columns:1fr; gap:4px; padding:8px 0; }
  .skills dd { font-size:11px; }
  .selected-work nav > a { gap:11px; flex-wrap:wrap; }
  .selected-work small { flex-basis:100%; padding-left:26px; order:2; margin-top:-6px; }
  .selected-work b { font-size:12px; }
  .case-heading { margin-top:25px; }
  .case-heading h2 { font-size:35px; }
  .case-heading > p { font-size:11px; }
  .case-meta { grid-template-columns:1fr; gap:14px; }
  .case-meta dd { font-size:11px; }
  .problem p { font-size:12px; }
  .architecture { padding:13px 12px; }
  .architecture ol { gap:13px; }
  .architecture li { padding:9px 5px; }
  .architecture li:not(:last-child)::after { right:-12px; font-size:12px; }
  .architecture b { font-size:9px; }
  .architecture li > span { font-size:7px; }
  .architecture p { font-size:8px; }
  .decision { gap:12px; padding:15px 0; }
  .decision h3 { font-size:12px; }
  .decision p { font-size:11px; }
  .decision small { font-size:10px; }
  .outcome { grid-template-columns:1fr; gap:7px; padding:15px; }
  .outcome p, .evidence p { font-size:11px; }
  .evidence .scope-note { font-size:10px; }
  .case-stack span { font-size:8px; }
  .case-links a { font-size:9px; }
  .support-grid { grid-template-columns:1fr; }
  .support-project p { min-height:0; font-size:12px; }
  .support-top > span { font-size:9px; }
  .support-top > small { font-size:9px; }
  .support-stack { font-size:9px; }
  .support-links { font-size:10px; }
  .contact-signoff { flex-direction:column; align-items:flex-start; gap:9px; }
  .page-footer { left:22px; right:22px; font-size:6px; letter-spacing:0; }
  .page-footer i { padding:0 4px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
@page { size:A4; margin:0; }
@media print {
  html, body { background:white; }
  html { scroll-padding-top:0; }
  body { print-color-adjust:exact; -webkit-print-color-adjust:exact; }
  .document-toolbar, .page-navigation { display:none; }
  .document { padding:0; }
  .sheet { width:210mm; height:297mm; min-height:0; margin:0; padding:16mm 17mm 20mm; border:0; border-radius:0; box-shadow:none; break-after:page; page-break-after:always; }
  .sheet:last-child { break-after:auto; page-break-after:auto; }
  .page-footer { bottom:11mm; left:17mm; right:17mm; }
  a { text-decoration:none; }
  .case-meta, .decision, .architecture, .support-project, .outcome { break-inside:avoid; }
}