:root{
  --ink:#16150F; --paper:#F5F3EE; --dark:#3A382F; --grey:#78736A;
  --faint:#A9A498; --rule:#DDD8CD; --accent:#C0402A; --accent-d:#8E2F1F;
  --kr:'IBM Plex Sans KR',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --disp:'Archivo','IBM Plex Sans KR',sans-serif;
  --pad:clamp(1.25rem,5vw,4.5rem);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;color:var(--ink);font-family:var(--kr);font-weight:300;line-height:1.75;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  background:
    radial-gradient(70rem 45rem at 12% -8%, #FBF4EC 0%, rgba(251,244,236,0) 60%),
    radial-gradient(55rem 40rem at 92% 8%, #F0EFEA 0%, rgba(240,239,234,0) 58%),
    var(--paper);
}
p{margin:0} a{color:inherit;text-decoration:none}
.wrap{max-width:82rem;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.eyebrow{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;color:var(--accent)}
.eyebrow .kr{font-family:var(--kr);font-size:.8125rem;font-weight:400;letter-spacing:0}
.num{font-family:var(--mono);font-size:.6875rem;letter-spacing:.16em;color:var(--faint)}

/* ── nav */
nav{position:sticky;top:0;z-index:20;backdrop-filter:saturate(140%) blur(10px);
    background:rgba(245,243,238,.82);border-bottom:1px solid var(--rule)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:3.5rem}
.brand{font-family:var(--disp);font-weight:600;font-size:.9375rem;letter-spacing:.14em}
nav ul{display:flex;gap:1.4rem;list-style:none;margin:0;padding:0;
       font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;color:var(--grey)}
nav a:hover{color:var(--accent)}
@media(max-width:45.99rem){nav ul{gap:0}nav li:not(:last-child){display:none}}

/* ── hero */
.hero{padding:clamp(3.5rem,11vw,7.5rem) 0 clamp(2.5rem,7vw,4rem)}
.hero h1{
  margin:1.1rem 0 0;font-family:var(--disp);font-weight:700;
  font-size:clamp(2.9rem,10.5vw,7.5rem);line-height:1.02;letter-spacing:-.035em;
}
.hero h1 .b{display:block;color:var(--accent)}
.lede{margin-top:clamp(1.6rem,4vw,2.4rem);max-width:40rem;
      font-size:clamp(.9375rem,1.4vw,1.0625rem);line-height:1.9;color:var(--dark)}
.lede b{font-weight:600;color:var(--ink)}
/* ── logo strip (가로 스크롤) */
.band{border-block:1px solid var(--rule);background:none;
      padding:clamp(2.1rem,4.2vw,3rem) 0}
.band .bandlabel{display:flex;align-items:center;gap:.85rem;padding-bottom:1.35rem}
.band .bandlabel p{font-family:var(--mono);font-size:.6875rem;letter-spacing:.16em;color:var(--faint)}
.band .bandlabel::after{content:"";flex:1;height:1px;background:var(--rule)}
.strip{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
       -webkit-overflow-scrolling:touch;
       -webkit-mask-image:linear-gradient(90deg,transparent,#000 2.5rem,#000 calc(100% - 2.5rem),transparent);
       mask-image:linear-gradient(90deg,transparent,#000 2.5rem,#000 calc(100% - 2.5rem),transparent)}
.strip::-webkit-scrollbar{display:none}
.strip ul{display:flex;align-items:center;gap:clamp(1.75rem,3.4vw,2.75rem);
          list-style:none;margin:0;padding:0 var(--pad);width:max-content}
.strip li{flex:none;display:flex;align-items:center;gap:.55rem;
          opacity:.62;transition:opacity .2s}
.strip li:hover{opacity:1}
.strip img{width:1.375rem;height:1.375rem;display:block;flex:none}
.strip b{font-family:var(--disp),var(--kr);font-weight:500;font-size:.9375rem;
         letter-spacing:-.005em;color:var(--dark);white-space:nowrap}
.strip .glabel{font-family:var(--kr);font-size:.75rem;font-weight:400;letter-spacing:.02em;
  color:var(--faint);opacity:1;white-space:nowrap;align-self:center}
.strip .sep{width:1px;height:1.6rem;background:var(--rule);opacity:1}

/* ── sections */
section{padding:clamp(3.5rem,9vw,6.5rem) 0}
.head{display:flex;align-items:baseline;gap:1rem;padding-bottom:1.6rem;border-bottom:1px solid var(--ink)}
.head h2{margin:0;font-size:clamp(1.15rem,2vw,1.45rem);font-weight:600;letter-spacing:-.02em}

/* works */
.works{display:grid;gap:1px;background:var(--rule);margin-top:1px}
@media(min-width:52rem){.works{grid-template-columns:1fr 1fr}}
.work{background:var(--paper);padding:clamp(1.75rem,3.5vw,2.75rem) 0;display:flex;flex-direction:column;gap:.85rem}
@media(min-width:52rem){.work{padding:clamp(2rem,3.5vw,3rem) clamp(1.5rem,3vw,2.5rem)}
  .work:first-child{padding-left:0}.work:last-child{padding-right:0}}
.work h3{margin:0;font-family:var(--disp);font-weight:500;
         font-size:clamp(1.75rem,4vw,2.6rem);letter-spacing:-.03em;line-height:1}
.work .tag{font-family:var(--kr);font-size:.8125rem;font-weight:400;letter-spacing:.01em;color:var(--accent)}
.work p{font-size:.9375rem;line-height:1.85;color:var(--dark);max-width:28rem}
.work .meta{margin-top:.4rem;font-family:var(--kr);font-size:.8125rem;font-weight:300;color:var(--faint)}

/* 공개 전 가림 */
.veil{position:relative}
.veil .works{filter:blur(7px);opacity:.5;user-select:none;pointer-events:none}
/* 실제 글자를 두지 않는다 — 소스에도 남지 않게 도형으로만 채운다 */
.skel .work{gap:0;padding-top:clamp(1.9rem,3.5vw,2.9rem)}
@media(min-width:52rem){.skel .work:last-child{padding-top:clamp(2.7rem,4.6vw,4rem)}}
.skel .bar{display:block;height:.72rem;border-radius:2px;background:var(--rule);margin-bottom:.62rem}
.skel .bar.tag{height:.6rem;background:rgba(192,64,42,.35);margin-bottom:1.15rem}
.skel .bar.ttl{height:2rem;background:#CFC9BC;margin-bottom:1.15rem}
.skel .bar.sm{height:.55rem;margin-top:.5rem;background:#E3DFD5}
.veil-note{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.5rem;text-align:center;padding:1rem}
.veil-note .t{font-family:var(--kr);font-size:1.0625rem;font-weight:600;
  letter-spacing:-.015em;color:var(--ink)}
.veil-note .s{font-family:var(--kr);font-size:.875rem;font-weight:300;color:var(--grey)}

/* about */
.about{display:grid;gap:clamp(2rem,4vw,3.5rem);margin-top:2.2rem}
@media(min-width:52rem){.about{grid-template-columns:1.15fr .85fr;gap:5rem}}
.about p+p{margin-top:1.3rem}
.about p{font-size:.9375rem;line-height:1.95;color:var(--dark)}
.about b{font-weight:600;color:var(--ink)}
.gr{font-family:'Noto Sans',var(--kr);font-weight:500}
.card{border:1px solid var(--rule);padding:1.6rem;background:rgba(255,255,255,.45);
      display:flex;flex-direction:column;gap:.45rem;align-self:start}
.card .nm{font-size:1.3rem;font-weight:600;letter-spacing:-.01em}
.card .en{font-family:var(--mono);font-size:.75rem;letter-spacing:.14em;color:var(--dark)}
.card .ro{font-family:var(--mono);font-size:.6875rem;letter-spacing:.11em;color:var(--grey);margin-top:.3rem}

/* contact */
.cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3.25rem;
     padding:0 1.7rem;background:var(--ink);color:var(--paper);border-radius:2px;
     font-size:.9375rem;font-weight:400;transition:background .15s}
.btn:hover{background:var(--accent)}
.btn2{display:inline-flex;align-items:center;min-height:3.25rem;padding:0 1.5rem;
      border:1px solid var(--ink);border-radius:2px;font-family:var(--mono);font-size:.8125rem;
      letter-spacing:.03em;transition:border-color .15s,color .15s}
.btn2:hover{border-color:var(--accent);color:var(--accent)}

/* capability */
.cap{display:grid;gap:1px;background:var(--rule);margin-top:1px}
@media(min-width:46rem){.cap{grid-template-columns:repeat(3,1fr)}}
.cap article{background:var(--paper);padding:clamp(1.6rem,3vw,2.2rem) 0;display:flex;flex-direction:column;gap:.7rem}
@media(min-width:46rem){.cap article{padding:clamp(1.8rem,3vw,2.4rem) clamp(1.4rem,2.4vw,2rem)}
  .cap article:first-child{padding-left:0}.cap article:last-child{padding-right:0}}
.cap h3{margin:0;font-size:1.0625rem;font-weight:600;letter-spacing:-.015em}
.cap p{font-size:.875rem;line-height:1.85;color:var(--dark)}
.cap .k{font-family:var(--mono);font-size:.6875rem;letter-spacing:.13em;color:var(--accent)}

/* approach */
.ap{margin-top:2.2rem;display:grid;gap:0}
.ap li{list-style:none;display:grid;gap:.5rem 1.6rem;padding:1.5rem 0;border-bottom:1px solid var(--rule)}
@media(min-width:46rem){.ap li{grid-template-columns:2.5rem 15rem 1fr;align-items:baseline}}
.ap li:first-child{border-top:1px solid var(--rule)}
.ap .t{font-size:1rem;font-weight:600;letter-spacing:-.015em}
.ap .d{font-size:.9375rem;line-height:1.85;color:var(--dark)}

/* form */
.contact{display:grid;gap:clamp(2.5rem,5vw,4rem);align-items:start}
@media(min-width:56rem){.contact{grid-template-columns:.9fr 1.1fr;gap:clamp(3rem,7vw,7rem)}}
.contact h1{margin:.9rem 0 0;font-family:var(--disp),var(--kr);font-weight:700;
  font-size:clamp(1.9rem,4vw,2.6rem);line-height:1.12;letter-spacing:-.03em}
.contact .why{margin-top:1.1rem;font-size:.9375rem;line-height:1.9;color:var(--dark);max-width:24rem}
.contact .why b{font-weight:600;color:var(--ink)}
.note{margin-top:1.3rem;font-size:.9375rem;line-height:1.9;color:var(--dark);max-width:24rem}

/* 밑줄형 입력 */
.form{display:grid;gap:1.9rem}
.row2{display:grid;gap:1.9rem}
@media(min-width:34rem){.row2{grid-template-columns:1fr 1fr}}
.f{position:relative;display:flex;flex-direction:column;gap:.3rem}
.f > span{font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;color:var(--grey)}
.f input,.f textarea{
  font-family:var(--kr);font-size:1rem;font-weight:300;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--rule);border-radius:0;
  padding:.5rem 0;width:100%;transition:border-color .2s}
.f textarea{min-height:7.5rem;resize:none;line-height:1.8;padding-top:.6rem}
.f input::placeholder,.f textarea::placeholder{color:#BEB9AE}
.f input:focus,.f textarea:focus{outline:none;border-bottom-color:var(--ink)}
.f input:focus::placeholder,.f textarea:focus::placeholder{color:#D2CDC2}
.f::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--accent);transition:width .28s cubic-bezier(.4,0,.2,1)}
.f:focus-within::after{width:100%}

.actions{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;margin-top:.2rem}
.form .send{border:0;cursor:pointer;font-family:var(--kr);min-height:2.9rem;padding:0 1.6rem}
.form .send[disabled]{opacity:.45;cursor:default}
.hint{font-family:var(--kr);font-size:.8125rem;color:var(--grey);line-height:1.8}
.hint a{border-bottom:1px solid var(--rule)}
.hint a:hover{color:var(--accent);border-color:var(--accent)}
.msg{font-size:.875rem;line-height:1.8;padding:.9rem 1rem;border-radius:3px;display:none}
.msg.on{display:block}
.msg.ok{background:rgba(22,21,15,.04);border:1px solid var(--rule);color:var(--ink)}
.msg.err{background:rgba(192,64,42,.06);border:1px solid rgba(192,64,42,.3);color:var(--accent-d)}

footer{border-top:1px solid var(--rule);padding:2rem 0 3rem}
footer .wrap{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap;
             font-family:var(--mono);font-size:.75rem;color:var(--grey)}
footer .bd{font-weight:500;letter-spacing:.16em;color:var(--ink)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}