:root { --ink:#161616; --paper:#f8f8f6; --muted:#737373; --line:#d6d6d1; --deep:#242424; }
footer a { color:#dcdcd9;text-decoration:none;border-bottom:1px solid #737373;padding-bottom:3px; } footer a:hover { color:#fff; }
footer a { color:#dcdcd9;text-decoration:none;border-bottom:1px solid #737373;padding-bottom:3px; } footer a:hover { color:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Pretendard,"Noto Sans KR",sans-serif; }
.noise { display:none; }
.site-header { position:sticky; top:0; z-index:100; height:82px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(24px,5.5vw,88px); border-bottom:1px solid var(--line); background:rgba(248,248,246,.94); backdrop-filter:blur(12px); }
.logo { color:var(--ink); text-decoration:none; font:600 19px "Cormorant Garamond",serif; letter-spacing:.08em; }.logo span { color:var(--ink); }
nav { display:flex; gap:30px; margin-left:9%; } nav a,.header-mail,.socials a { color:var(--ink); text-decoration:none; font:500 11px "DM Mono",monospace; letter-spacing:.04em; } nav a:hover,.header-mail:hover { color:var(--muted); }.header-mail span { font-size:15px;margin-left:5px; }
.hero { min-height:calc(100vh - 82px); padding:clamp(65px,11vh,140px) clamp(24px,10.5vw,165px) 57px; position:relative; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; }
.eyebrow,.section-label { font:500 10px "DM Mono",monospace; letter-spacing:.11em; color:var(--muted); }.eyebrow { display:flex; align-items:center; gap:9px; }.eyebrow span { width:5px;height:5px;border-radius:50%;background:var(--ink); }
h1,h2,h3,p { margin:0; } h1 { position:relative; z-index:1; max-width:960px; font:700 clamp(50px,7.5vw,112px)/1.05 Pretendard,"Noto Sans KR",sans-serif; letter-spacing:-.07em; margin:6vh 0; } em { font-style:normal; font-weight:700; }
.hero-bottom { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:end; }.hero-bottom p { font-size:14px;line-height:1.9;letter-spacing:-.02em; }.round-link { width:49px;height:49px;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center;color:var(--ink);text-decoration:none;font-size:21px;transition:.25s; }.round-link:hover { background:var(--ink);color:var(--paper); }
.hero-orbit { position:absolute;border:1px solid var(--line);border-radius:50%; }.orbit-one { width:min(59vw,850px);height:min(59vw,850px);right:-15vw;top:8%; }.orbit-two { width:min(36vw,520px);height:min(36vw,520px);right:1vw;top:22%; }.orbit-two:before { content:"";position:absolute;width:8px;height:8px;background:var(--ink);border-radius:50%;left:7%;top:16%; }
.section { padding:145px clamp(24px,10.5vw,165px); }.about { background:var(--deep);color:var(--paper); }.about .section-label { color:#a4a4a1; }.about-copy { margin-top:72px;display:grid;grid-template-columns:1.25fr .55fr;gap:12%;align-items:end; }.about h2 { font:700 clamp(34px,4.7vw,70px)/1.22 Pretendard,"Noto Sans KR",sans-serif;letter-spacing:-.07em; }.about-copy>div p { font-size:14px;line-height:2;word-break:keep-all;color:#dededb; }.text-link { display:inline-block;color:var(--paper);text-decoration:none;border-bottom:1px solid #a4a4a1;padding:17px 0 9px;margin-top:27px;font-size:13px; }.text-link span { margin-left:18px; }
.work { padding-top:130px; }.section-heading { display:flex;justify-content:space-between;align-items:start; }.work-note { text-align:right;font-size:13px;line-height:1.8;color:var(--muted); }.project-list { margin-top:55px;display:grid;grid-template-columns:repeat(2,1fr);gap:42px 24px; }.project-number { font:500 10px "DM Mono",monospace;color:var(--muted);margin-bottom:12px; }.project-art { height:clamp(245px,29vw,410px);position:relative;overflow:hidden;padding:28px;display:flex;align-items:end;background:#ededeb; }.project-art span { position:relative;z-index:1;font:700 clamp(27px,2.8vw,42px)/1.1 Pretendard,"Noto Sans KR",sans-serif;letter-spacing:-.07em; }.project-art i { position:absolute;border:1px solid #a6a6a2;border-radius:50%;display:block;width:67%;aspect-ratio:1;right:-11%;top:16%; }.project-blue .project-art { background:#dcdcd9; }.project-pink .project-art { background:var(--deep);color:var(--paper); }.project-pink i { border-color:#a2a2a0;width:43%;right:18%;top:22%; }.project-green .project-art { background:#e5e5e2; }.project-green i { width:58%;right:14%;top:14%; }.project-info { border-bottom:1px solid var(--line);padding:17px 0 18px; }.project-info h3 { font:700 18px Pretendard,"Noto Sans KR",sans-serif;letter-spacing:-.05em; }.project-info p { color:var(--muted);font:400 10px "DM Mono",monospace;margin-top:8px; }
.profile { background:#e5e5e1; }.profile-copy { margin-top:70px;display:grid;grid-template-columns:1.2fr .68fr;gap:12%;align-items:end; }.profile-name { font:600 clamp(51px,7.2vw,106px)/.8 "Cormorant Garamond",serif;letter-spacing:-.06em; }.career-list p { display:grid;grid-template-columns:61px 1fr;gap:15px;border-bottom:1px solid #bcbcb7;padding:13px 0;font-size:13px;line-height:1.75;word-break:keep-all; }.career-list strong { font:500 10px "DM Mono",monospace;letter-spacing:.06em;color:var(--muted); }
.contact { background:var(--paper);min-height:650px;display:flex;flex-direction:column;border-top:1px solid var(--line); }.contact-intro { font:700 clamp(38px,5.7vw,82px)/1.18 Pretendard,"Noto Sans KR",sans-serif;letter-spacing:-.07em;margin-top:auto;padding-top:75px; }.contact-mail { color:var(--ink);font:700 clamp(18px,2.1vw,30px) Pretendard,"Noto Sans KR",sans-serif;text-decoration:none;border-bottom:1px solid var(--ink);align-self:start;margin-top:34px;padding-bottom:8px; }.contact-mail span { margin-left:22px; }.contact-school { margin-top:auto;padding-top:95px;font:500 10px "DM Mono",monospace;letter-spacing:.06em;color:var(--muted); }
footer { display:flex;justify-content:space-between;padding:22px clamp(24px,5.5vw,88px);background:var(--ink);color:#dcdcd9;font:400 10px "DM Mono",monospace;letter-spacing:.06em; }
.profile-copy { grid-template-columns:1fr minmax(190px,.78fr) 1fr;gap:7%;align-items:center; }.profile-photo { position:relative;margin:0;overflow:hidden;background:#d2d2ce; }.profile-photo::after { content:"";position:absolute;inset:0;border:1px solid rgba(22,22,22,.18);pointer-events:none; }.profile-photo img { display:block;width:100%;aspect-ratio:3 / 4;object-fit:cover;object-position:center;filter:grayscale(1) contrast(1.08);mix-blend-mode:multiply; }.profile-name { align-self:center;text-align:center; }.career-list { align-self:center; }.career-list p { grid-template-columns:1fr;gap:4px;justify-items:center;align-items:center;text-align:center; }.career-list strong,.career-list span { text-align:center; } @media (max-width:700px) { .profile-copy { grid-template-columns:1fr;gap:34px; }.profile-photo { width:min(82%,350px);margin-inline:auto; }.profile-name { text-align:center; } }
.profile { background:#1e1e1d;color:#f4f4f1; }.profile .section-label { color:#a6a6a1; }.profile-photo { padding:8px;background:#e4e4df; }.profile-photo::after { inset:8px;border-color:rgba(22,22,22,.28); }.profile-photo img { mix-blend-mode:normal;filter:grayscale(1) contrast(1.14) brightness(.96); }.profile .career-list p { border-bottom-color:#585854; }.profile .career-list strong { color:#b4b4af; }
.project { display:block;color:var(--ink);text-decoration:none; }.project:hover .project-art { filter:brightness(.96); }
@media (max-width:700px) { .site-header { height:68px; }.header-mail { display:none; } nav { margin-left:auto;gap:14px; } nav a { font-size:9px; }.hero { min-height:calc(100svh - 68px);padding-top:54px; }.orbit-one { width:108vw;height:108vw;right:-40vw;top:17%; }.orbit-two { width:65vw;height:65vw;right:-4vw;top:29%; } .section { padding-top:95px;padding-bottom:95px; }.about-copy,.profile-copy { grid-template-columns:1fr;gap:40px;margin-top:48px; }.project-list { grid-template-columns:1fr;gap:36px; }.project-art { height:87vw;max-height:420px; }.contact { min-height:560px; }.contact-intro { padding-top:55px; }.contact-school { padding-top:60px; } footer { flex-direction:column;gap:8px; } }