:root {
  --paper: #faf9f6;
  --ink: #282927;
  --muted: #6b6d68;
  --accent: #59694e;
  --line: #dedfd7;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'Noto Sans KR', sans-serif; -webkit-font-smoothing: antialiased; }
::selection { background: #dce4d4; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.skip-link { position: absolute; top: -60px; left: 20px; padding: 12px; background: var(--ink); color: white; }
.skip-link:focus { top: 12px; }
.page { width: min(880px, calc(100% - 96px)); margin: 0 auto; }
.intro { padding: 112px 0 88px; }
.signature { margin: 0 0 42px; font-family: Georgia, serif; font-size: 23px; font-style: italic; letter-spacing: -.035em; color: var(--accent); }
h1 { margin: 0; font-size: clamp(30px, 4.2vw, 48px); font-weight: 500; line-height: 1.6; letter-spacing: -.055em; word-break: keep-all; }
h1 span { color: var(--accent); }
.intro-copy { margin: 30px 0 0; color: var(--muted); font-size: 16px; line-height: 1.95; letter-spacing: -.025em; word-break: keep-all; }
.value { display: grid; grid-template-columns: 1fr 1.3fr; gap: 40px; padding: 38px 0 42px; border-top: 1px solid var(--line); }
.value-name { display: flex; align-items: baseline; gap: 23px; }
.number { font-family: 'DM Sans', sans-serif; font-size: 11px; color: var(--muted); }
h2 { margin: 0; font-family: Georgia, serif; font-size: 35px; font-weight: 400; letter-spacing: -.045em; }
h2 span { color: var(--accent); }
h3 { margin: 0 0 12px; font-size: 17px; line-height: 1.65; font-weight: 500; letter-spacing: -.035em; }
.value-copy p { margin: 0; font-size: 14px; line-height: 1.95; color: var(--muted); letter-spacing: -.02em; word-break: keep-all; }
.footer { border-top: 1px solid var(--line); padding: 28px 0 48px; display: flex; justify-content: space-between; gap: 20px; align-items: center; color: var(--muted); }
.footer p { font-size: 12px; margin: 0; }
.footer > span { font-family: 'DM Sans', sans-serif; font-size: 11px; }
@media (max-width: 600px) {
  .page { width: calc(100% - 48px); }
  .intro { padding: 76px 0 58px; }
  .signature { font-size: 20px; margin-bottom: 32px; }
  h1 { font-size: clamp(25px, 5.7vw, 34px); line-height: 1.7; }
  .intro-copy { font-size: 14px; margin-top: 24px; }
  .value { grid-template-columns: 1fr; gap: 22px; padding: 30px 0 34px; }
  .value-name { gap: 16px; }
  h2 { font-size: 31px; }
  .value-copy { padding-left: 30px; }
  h3 { font-size: 16px; }
  .value-copy p { font-size: 13px; }
  .value-copy br { display: none; }
  .footer { align-items: start; padding-bottom: 32px; }
}
.experience,.projects { padding: 76px 0; border-top: 1px solid var(--line); }
.section-label { color: var(--accent); font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .12em; margin-bottom: 18px; }
.experience h2,.projects h2 { font-family: 'Noto Sans KR', sans-serif; font-size: 27px; font-weight: 500; letter-spacing: -.055em; }
.experience-list { list-style: none; margin: 34px 0 0; padding: 0; }
.experience-list li { display: grid; grid-template-columns: 135px 1fr; gap: 20px; padding: 14px 0; font-size: 14px; line-height: 1.7; letter-spacing: -.025em; }
.experience-date { font-family: 'DM Sans', sans-serif; font-size: 11px; color: var(--muted); letter-spacing: .03em; padding-top: 3px; }
.projects-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 30px; }
.projects-heading > span { font-family: 'DM Sans', sans-serif; font-size: 11px; color: var(--muted); }
.project-slider { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
.project-card { display: block; flex: 0 0 min(100%, 440px); color: inherit; text-decoration: none; scroll-snap-align: start; }
.project-art { height: 250px; background: #e1e8dc; color: #465d40; padding: 25px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; }
.project-art-label { font: 700 10px 'DM Sans', sans-serif; letter-spacing: .12em; position: relative; z-index: 1; }
.project-art-title { font: italic 42px Georgia, serif; letter-spacing: -.05em; position: relative; z-index: 1; }
.project-art-title span { color: #8ca77b; }
.project-art-mark { position: absolute; right: 12px; bottom: -75px; font: italic 300px Georgia, serif; line-height: 1; color: #cbd9c5; }
.project-info { display: flex; justify-content: space-between; align-items: center; padding: 19px 0; }
.project-info h3 { margin: 0 0 4px; }
.project-info p { margin: 0; color: var(--muted); font-size: 12px; }
.project-arrow { font-size: 22px; transition: transform .2s; }
.project-card:hover .project-arrow { transform: translate(3px,-3px); }
@media(max-width:600px) { .experience,.projects { padding: 55px 0; } .experience-list li { grid-template-columns: 1fr; gap: 2px; padding: 12px 0; } .project-art { height: 220px; } }
@media(prefers-reduced-motion:reduce) { .project-arrow { transition: none; } }
.slider-controls { display:flex; gap:8px; }
.slider-controls button { width:40px; height:40px; border:1px solid var(--line); background:transparent; color:var(--ink); font-size:18px; cursor:pointer; }
.slider-controls button:hover { background:#e9ece5; }
.slider-controls button:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.quiz-art { padding:0; justify-content:flex-end; background:#d9ecf8; }
.quiz-art img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.quiz-art span { position:relative; align-self:flex-start; margin:20px; padding:8px 12px; background:rgba(250,249,246,.92); font:600 19px 'DM Sans',sans-serif; color:#324e63; }
.board-art { background:#ebe9df; color:#4c594a; }
.board-kicker,.greenity-label { font:700 10px 'DM Sans',sans-serif; letter-spacing:.12em; z-index:1; }
.board-notes { display:flex; gap:10px; align-items:center; justify-content:center; }
.board-notes span { width:110px; min-height:118px; padding:16px 12px; background:#faf8f1; font-size:13px; line-height:1.5; box-shadow:0 4px 14px #4c594a15; transform:rotate(-5deg); }
.board-notes span:nth-child(2) { background:#dce7d6; transform:rotate(4deg); font-weight:600; }
.board-notes span:nth-child(3) { background:#f2ddd0; transform:rotate(-3deg); }
.board-notes b { display:block; margin-top:12px; font-size:19px; }
.greenity-art { background:#dce8d6; color:#405a3c; }
.greenity-art img { position:absolute; height:105%; width:auto; right:0; bottom:-8%; object-fit:contain; }
.greenity-title { font:italic 38px Georgia,serif; letter-spacing:-.05em; position:relative; z-index:1; }
.greenity-title span { color:#8ca77b; }