/* ============================================================
   Shared styles for project case-study pages
   - Matches the main site: bg #fafafa, accent #5D51E8,
     Pretendard body / Satoshi display, lens cursor
   ============================================================ */

:root{
  --bg:#fafafa;
  --ink:#16161a;
  --muted:#6b6b75;
  --line:rgba(20,20,26,.10);
  --accent:#5D51E8;
  --accent-soft:rgba(93,81,232,.10);
  --card:#ffffff;
  --maxw:1180px;
  --font-body:"Pretendard","Pretendard Variable",-apple-system,system-ui,sans-serif;
  --font-disp:"Satoshi","Pretendard",system-ui,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0}
::selection{background:var(--accent);color:#fff}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.disp{font-family:var(--font-disp);font-weight:700;letter-spacing:-.02em;line-height:1.1}

/* NAV */
nav.site{position:fixed;top:0;left:0;right:0;z-index:50;backdrop-filter:saturate(180%) blur(14px);background:rgba(250,250,250,.72);border-bottom:1px solid transparent;transition:border-color .3s, background .3s}
nav.site.scrolled{border-bottom-color:var(--line)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:14px 28px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{font-family:var(--font-disp);font-weight:900;font-size:18px;letter-spacing:-.02em}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{font-size:14.5px;color:var(--muted);font-weight:500;transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.lang{font-size:12.5px;font-weight:600;color:var(--muted);padding:6px 10px;border:1px solid var(--line);border-radius:999px;transition:.2s;cursor:none}
.lang:hover{border-color:var(--accent);color:var(--accent)}
.nav-right{display:flex;align-items:center;gap:10px}
.status{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600;padding:7px 14px;border:1px solid var(--line);border-radius:999px;background:var(--card)}
.gdot{width:8px;height:8px;border-radius:50%;background:#22c55e;position:relative;flex:none}
.gdot::after{content:"";position:absolute;inset:-5px;border-radius:50%;background:#22c55e;opacity:.35;animation:pulse 1.8s infinite}
@keyframes pulse{0%{transform:scale(.6);opacity:.5}70%{transform:scale(1.7);opacity:0}100%{opacity:0}}

/* PROJECT HERO */
.proj-top{padding:100px 0 24px}
.crumbs{font-size:13px;color:var(--muted);display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;transition:color .2s}
.crumbs a:hover{color:var(--accent)}
.crumbs .arr{opacity:.5}
.proj-tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-disp);font-size:12px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);padding:7px 14px;border-radius:999px;margin-bottom:18px}
.proj-title{font-size:clamp(36px,5vw,62px);max-width:18ch;letter-spacing:-.025em}
.proj-sub{margin-top:18px;font-size:clamp(16px,1.6vw,20px);color:var(--muted);max-width:60ch}

.meta-strip{margin-top:36px;display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0}
.meta-cell .lbl{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.meta-cell .val{font-family:var(--font-disp);font-weight:700;font-size:15px;letter-spacing:-.01em}

/* COVER */
.proj-cover{margin:48px 0 0;border-radius:24px;overflow:hidden;border:1px solid var(--line);background:#eee;aspect-ratio:16/9;position:relative}
.proj-cover img{width:100%;height:100%;object-fit:cover;display:block}

/* SECTIONS */
.sec{padding:80px 0;border-top:1px solid var(--line)}
.sec:first-of-type{border-top:none}
.sec-grid{display:grid;grid-template-columns:1fr 2fr;gap:60px;align-items:start}
.sec-kicker{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.sec-title{font-family:var(--font-disp);font-weight:700;font-size:clamp(22px,2.6vw,32px);letter-spacing:-.02em;line-height:1.2}
.sec-body{font-size:16px;color:#3a3a44;line-height:1.7}
.sec-body p+p{margin-top:14px}
.sec-body .lead{font-family:var(--font-disp);font-weight:700;font-size:clamp(19px,2.1vw,24px);color:var(--ink);letter-spacing:-.01em;line-height:1.35;margin-bottom:18px}

/* PROCESS list */
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:8px}
.step{padding:18px;background:var(--card);border:1px solid var(--line);border-radius:14px;transition:transform .25s, border-color .25s, box-shadow .25s}
.step:hover{transform:translateY(-3px);border-color:rgba(93,81,232,.3);box-shadow:0 18px 36px -22px rgba(20,20,26,.22)}
.step .n{font-family:var(--font-disp);font-weight:900;color:var(--accent);font-size:13px;letter-spacing:.06em}
.step h4{font-family:var(--font-disp);font-weight:700;font-size:15px;margin-top:6px;letter-spacing:-.01em}
.step p{font-size:13.5px;color:var(--muted);line-height:1.55;margin-top:6px}

/* IMAGE BLOCKS — unified: every image card shares one aspect-ratio, caption always centered below */
.fig{margin:30px 0;display:block}
.fig > img{
  width:100%;aspect-ratio:16/10;height:auto;display:block;
  object-fit:cover;object-position:center;
  border-radius:18px;border:1px solid var(--line);background:#f1f1f3;
}
.fig-caption{font-size:13px;color:var(--muted);margin-top:12px;text-align:center;line-height:1.5}

.imgs-2{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:30px 0;align-items:start}
.imgs-2 .fig{margin:0}

.imgs-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:30px 0;align-items:start}
.imgs-3 .fig{margin:0}

/* lead figure: same aspect-ratio, just full width */
.fig.lead-fig{margin:30px 0 16px}

/* process strip: research / sketches shown smaller, as supporting context */
.process-note{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:34px 0 14px}
.fig.muted > img{background:#f1f1f3;opacity:.97}
.imgs-3.process-imgs .fig > img{border-color:rgba(20,20,26,.08)}
.imgs-3.process-imgs .fig-caption{margin-top:12px}

/* IMPACT cards */
.impact{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px;margin-top:8px}
.impact .card{padding:24px;background:var(--card);border:1px solid var(--line);border-radius:18px;transition:.25s}
.impact .card:hover{border-color:rgba(93,81,232,.3);transform:translateY(-3px)}
.impact .big{font-family:var(--font-disp);font-weight:900;font-size:34px;color:var(--accent);letter-spacing:-.02em;line-height:1}
.impact .lbl{font-size:13px;color:var(--muted);margin-top:8px;line-height:1.45}

/* CALLOUT */
.callout{padding:32px;border-radius:18px;border:1px solid var(--accent-soft);background:linear-gradient(180deg,var(--accent-soft),transparent);margin-top:24px}
.callout .lead{font-family:var(--font-disp);font-weight:700;font-size:18px;color:var(--ink);letter-spacing:-.01em}

/* NEXT PROJECT */
.nextproj{padding:80px 0;border-top:1px solid var(--line)}
.nextproj a{display:grid;grid-template-columns:120px 1fr auto;align-items:center;gap:24px;padding:28px;border:1px solid var(--line);border-radius:20px;transition:.25s;background:var(--card)}
.nextproj a:hover{border-color:rgba(93,81,232,.3);transform:translateY(-2px);box-shadow:0 18px 38px -22px rgba(20,20,26,.22)}
.nextproj .thumb{aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:#eee}
.nextproj .thumb img{width:100%;height:100%;object-fit:cover}
.nextproj .label{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.nextproj h4{font-family:var(--font-disp);font-weight:700;font-size:clamp(20px,2.2vw,26px);margin-top:4px;letter-spacing:-.015em}
.nextproj .arrow{font-family:var(--font-disp);font-weight:700;font-size:24px;color:var(--accent)}

/* FOOTER */
footer.site{padding:32px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;font-size:13px;color:var(--muted)}
footer.site a:hover{color:var(--accent)}

/* LENS CURSOR (same as main) */
.cur-dot,.cur-ring,.cur-glow{position:fixed;top:0;left:0;pointer-events:none;z-index:9999;border-radius:50%;transform:translate(-50%,-50%);will-change:transform;opacity:0}
.cur-dot{width:4px;height:4px;background:var(--accent);box-shadow:0 0 5px rgba(93,81,232,.7)}
.cur-ring{
  width:32px;height:32px;
  border:1px solid rgba(255,255,255,.65);
  background:
    radial-gradient(circle at 30% 26%, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 30%),
    radial-gradient(circle at 65% 68%, rgba(255,255,255,.15) 0%, rgba(255,255,255,0) 22%);
  box-shadow:0 0 0 1px rgba(93,81,232,.18), 0 0 12px rgba(93,81,232,.10), inset 0 1px 0 rgba(255,255,255,.8);
  animation:hue 8s linear infinite;
  transition:width .28s cubic-bezier(.2,.8,.2,1), height .28s cubic-bezier(.2,.8,.2,1);
}
.cur-ring::after{content:"";position:absolute;top:18%;left:18%;width:7px;height:3.5px;border-radius:50%;background:#fff;filter:blur(1px);transform:rotate(-28deg);animation:breathe 3.5s ease-in-out infinite}
.cur-ring.hover{width:48px;height:48px}
.cur-glow{width:100px;height:100px;background:radial-gradient(circle, rgba(93,81,232,.06) 0%, transparent 70%)}
@keyframes hue{from{filter:hue-rotate(0deg)}to{filter:hue-rotate(360deg)}}
@keyframes breathe{0%,100%{opacity:.55}50%{opacity:1}}

/* RESPONSIVE */
@media (max-width:900px){
  .sec-grid{grid-template-columns:1fr;gap:20px}
  .process{grid-template-columns:1fr 1fr}
  .imgs-2{grid-template-columns:1fr}
  .nextproj a{grid-template-columns:80px 1fr auto;padding:20px}
}
@media (max-width:600px){
  .nav-links{display:none}
  .process{grid-template-columns:1fr}
  .proj-top{padding:80px 0 20px}
}
@media (hover:none),(pointer:coarse){
  .cur-dot,.cur-ring,.cur-glow{display:none}
}
@media (hover:hover) and (pointer:fine){
  body,a,button,.tag,.card,.btn,.step,.lang{cursor:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}