/* ===== Fonts ===== */
@font-face {font-family:'LINESeedSansXBd';src:url('files/fonts/line-en/LINESeedSans_W_XBd.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap;}
@font-face {font-family:'LINESeedSans';src:url('files/fonts/line-en/LINESeedSans_W_Rg.woff2') format('woff2');font-weight:400;font-display:swap;}
@font-face {font-family:'LINESeedSans';src:url('files/fonts/line-en/LINESeedSans_W_Bd.woff2') format('woff2');font-weight:700;font-display:swap;}
@font-face {font-family:'LINESeedKR';src:url('files/fonts/line-kr/LINESeedKR-Th.woff2') format('woff2');font-weight:100;font-display:swap;}
@font-face {font-family:'LINESeedKR';src:url('files/fonts/line-kr/LINESeedKR-Rg.woff2') format('woff2');font-weight:400;font-display:swap;}
@font-face {font-family:'LINESeedKR';src:url('files/fonts/line-kr/LINESeedKR-Bd.woff2') format('woff2');font-weight:700;font-display:swap;}
@font-face {
  font-family: 'Google Sans Flex';
  src: url('files/fonts/GoogleSansFlex-VariableFont_GRAD,ROND,opsz,slnt,wdth,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-stretch: 25% 151%;
  font-style: normal;
  font-display: swap;
}

/* ===== Base ===== */
* { box-sizing:border-box; }
html, body { margin:0; padding:0; background:#ffffff; }
body {
  position:relative;
  min-height:100vh;
  font-family:'LINESeedKR',-apple-system,sans-serif;
  color:#666666;
  background:#ffffff;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection { background:#009DFF; color:#ffffff; }
img { display:block; }

.bg-canvas { position:fixed; inset:0; width:100vw; height:100vh; z-index:0; pointer-events:none; }

/* ===== Nav (GNB) ===== */
.gnb {
  position:fixed; top:0; left:0; width:100%; height:84px; z-index:40;
  display:flex; align-items:stretch; background:#000000;
}
.gnb-logo {
  flex-shrink:0; width:92px; background:#009DFF;
  display:flex; align-items:center; justify-content:center; text-decoration:none;
}
.gnb-logo img { width:46px; height:46px; filter:invert(1); }
.gnb-links {
  flex:1; display:flex; align-items:center; gap:clamp(18px,2.4vw,40px);
  padding:0 clamp(20px,2.6vw,42px); overflow:hidden;
}
.nav-link {
  display:flex; flex-direction:column; align-items:flex-start; gap:8px;
  text-decoration:none; color:#ffffff;
  font-family:'LINESeedSans','LINESeedKR',sans-serif; font-weight:900;
  font-size:clamp(15px,1.05vw,19px); letter-spacing:-0.01em; line-height:1;
}
.nav-link .bar {
  width:6px; height:6px; border-radius:50%; background:#ffffff; flex-shrink:0;
  transition:width .35s cubic-bezier(.16,1,.3,1), height .3s ease, border-radius .3s ease, background .3s ease;
}
.nav-link:hover .bar { width:100%; height:4px; border-radius:2px; background:#009DFF; }

.share-btn {
  margin-left:auto; cursor:pointer; color:#ffffff; background:none; border:none; padding:0;
  font-family:'LINESeedSans','LINESeedKR',sans-serif; font-weight:900;
  font-size:clamp(15px,1.05vw,19px); letter-spacing:0.01em; line-height:1;
  white-space:nowrap; transition:color .25s ease;
}
.share-btn:hover { color:#009DFF; }

/* ===== Toast ===== */
.toast {
  position:fixed; top:84px; left:50%;
  transform:translateX(-50%) translateY(-160%);
  background:#009DFF; color:#ffffff;
  font-family:'LINESeedSans','LINESeedKR',sans-serif; font-weight:900;
  font-size:15px; letter-spacing:0.01em; line-height:1;
  padding:14px 24px; z-index:999;
  pointer-events:none;
  transition:transform .38s cubic-bezier(.16,1,.3,1);
}
.toast.show { transform:translateX(-50%) translateY(16px); }

/* ===== Layout wrap ===== */
.wrap { position:relative; z-index:1; max-width:1200px; margin:0 auto; padding:0 40px; }

/* ===== Hero ===== */
.hero { padding:190px 0 150px; }
.hero-title {
  font-family:'Google Sans Flex','LINESeedSans',sans-serif;
  font-size:clamp(40px,10vw,140px); line-height:0.9; font-weight:450; margin:0; color:#111111;
  letter-spacing:-0.05em; transform-origin:top left; will-change:transform;
  text-shadow: 2px 4px 12px rgba(0,0,0,0.15);
}
.hero-title span {
  display:inline-block;
  transition:font-weight 0.8s cubic-bezier(0.37, 0, 0.63, 1);
}
.hero-meta {
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end;
  gap:40px; margin-top:54px;
}
.role-line {
  font-size:clamp(22px,2.4vw,40px); line-height:1.2; font-weight:800; color:#111111;
  min-height:1.3em; margin-bottom:18px;
}
.name { font-size:14px; color:#666666; }
.badge {
  display:inline-block; background:#009DFF; color:#ffffff; font-size:13px; font-weight:700;
  padding:2px 9px; border-radius:12px; margin-left:9px;
}
.contact {
  display:grid; grid-template-columns:repeat(2,auto); gap:16px 36px; text-align:right;
}
.contact-label { font-size:12px; color:#888888; display:block; margin-bottom:3px; }
.contact-val { font-size:14px; font-weight:700; color:#111111; text-decoration:none; }

/* ===== Works ===== */
.works { padding-bottom:140px; }
.works-head { display:flex; align-items:baseline; gap:16px; margin-bottom:50px; }
.works-kicker {
  font-size:12px; font-weight:700; letter-spacing:0.14em; color:#009DFF; text-transform:uppercase;
}
.works-sub { font-size:13px; color:#888888; }
.works-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:54px 40px;
}
.work-card {
  display:block; text-decoration:none; color:inherit;
  transition:transform .35s ease;
}
.work-card:hover { transform:translateY(-6px); }
.work-thumb {
  position:relative; overflow:hidden; border-radius:12px; border:1px solid rgba(0,0,0,0.08);
  background:#f3f3f3; aspect-ratio:16/10;
}
.work-thumb img { width:100%; height:100%; object-fit:cover; }
.work-title-row {
  display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:18px;
}
.work-title-row h3 { font-size:18px; font-weight:700; color:#111111; margin:0; }
.tag {
  font-size:11px; font-weight:700; letter-spacing:0.05em; color:#009DFF;
  border:1px solid #009DFF; border-radius:20px; padding:3px 11px; white-space:nowrap;
}
.work-desc { font-size:13px; color:#777777; margin:9px 0 0; line-height:1.55; }

/* ===== Footer ===== */
.foot { padding:70px 0 100px; border-top:1px solid rgba(0,0,0,0.1); }
.foot-logo { width:60px; height:60px; margin-bottom:26px; }
.foot-inner {
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:24px; align-items:flex-end;
}
.foot-left { display:flex; flex-direction:column; gap:22px; max-width:540px; }
.foot-text { font-size:13px; color:#777777; line-height:1.7; }
.old-btn {
  display:inline-flex; align-items:center; gap:9px; align-self:flex-start;
  font-family:'LINESeedKR',sans-serif; font-size:13px; font-weight:700; color:#111111;
  text-decoration:none; border:1px solid rgba(0,0,0,0.16); border-radius:24px; padding:9px 18px;
  transition:color .25s ease, border-color .25s ease, background .25s ease;
}
.old-btn .arrow { font-size:14px; line-height:1; }
.old-btn:hover { color:#ffffff; border-color:#009DFF; background:#009DFF; }
.foot-right { display:flex; flex-direction:column; align-items:flex-end; gap:12px; }
.socials { display:flex; gap:20px; font-size:13px; font-weight:700; }
.socials a { color:#111111; text-decoration:none; transition:color .2s ease; }
.socials a:hover { color:#009DFF; }
.copy { font-size:13px; color:#111111; font-weight:700; }

/* ===== Reveal animation ===== */
.reveal { opacity:0; filter:blur(6px); transition:opacity 1s ease, filter 1s ease; }
.reveal.shown { opacity:1; filter:blur(0); }
.work-card.reveal { transition:opacity .9s ease, filter .9s ease, transform .35s ease; }