/* =========================================================
   이도엽 — Portfolio shared styles
   Type system: Gowun Batang (display serif) + Pretendard (body)
   Palette: warm cream paper · ink · single pine accent
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&display=swap');

/* Pretendard (body) — variable woff2 served from jsDelivr CDN */
@font-face{
  font-family:'Pretendard Variable';
  font-weight:45 920;
  font-style:normal;
  font-display:swap;
  src:url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/woff2/PretendardVariable.woff2') format('woff2-variations'),
      url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/woff/PretendardVariable.woff') format('woff-variations');
}

:root{
  --paper:#f3efe6;
  --paper-2:#ece7da;
  --card:#f8f5ee;
  --ink:#211f1b;
  --ink-2:#5a554c;
  --ink-3:#928d80;
  --line:#ddd7c8;
  --line-2:#cfc8b6;
  --accent:#2f5d49;
  --accent-2:#b5532f;
  --accent-soft:rgba(47,93,73,.10);

  --serif:"Gowun Batang",serif; /* @kind font */
  --sans:"Pretendard Variable",Pretendard,-apple-system,system-ui,sans-serif; /* @kind font */
  --maxw:1080px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.7;
  letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* faint paper grain */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:var(--paper)}
img{display:block;max-width:100%}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;position:relative;z-index:2}

/* ---------- type ---------- */
.serif{font-family:var(--serif)}
.label{
  font-size:12.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);
}
.label-acc{color:var(--accent)}
h1,h2,h3{font-family:var(--serif);font-weight:700;letter-spacing:-.02em;line-height:1.12}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .3s}
.nav.scrolled{border-bottom-color:var(--line)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:18px 28px;display:flex;align-items:center;justify-content:space-between}
.nav-name{font-family:var(--serif);font-weight:700;font-size:19px;letter-spacing:-.01em;white-space:nowrap}
.nav-name span{color:var(--accent)}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{font-size:14px;color:var(--ink-2);transition:color .2s;position:relative;white-space:nowrap}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:1.5px;background:var(--accent);transition:width .25s}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{width:100%}
@media(max-width:680px){.nav-links a.hide-sm{display:none}}

/* ---------- buttons / links ---------- */
.tlink{display:inline-flex;align-items:center;gap:7px;color:var(--accent);font-weight:500;font-size:15px;border-bottom:1.5px solid var(--accent-soft);padding-bottom:2px;transition:border-color .25s,gap .25s}
.tlink:hover{border-color:var(--accent);gap:11px}
.tlink .ar{transition:transform .25s}
.tlink:hover .ar{transform:translateX(3px)}

.btn{display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:500;padding:13px 22px;border-radius:2px;transition:.22s;cursor:pointer}
.btn-fill{background:var(--ink);color:var(--paper)}
.btn-fill:hover{background:var(--accent)}
.btn-line{border:1px solid var(--line-2);color:var(--ink)}
.btn-line:hover{border-color:var(--ink);background:var(--card)}

/* ---------- section frame ---------- */
section{position:relative;z-index:2;padding:84px 0}
.sec-top{display:flex;align-items:baseline;gap:16px;margin-bottom:46px;border-bottom:1px solid var(--line);padding-bottom:18px}
.sec-top .no{font-family:var(--serif);font-size:15px;color:var(--accent)}
.sec-top h2{font-size:clamp(26px,4vw,38px)}
.sec-top .aside{margin-left:auto;font-size:13.5px;color:var(--ink-3)}
@media(max-width:680px){.sec-top .aside{display:none}}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);padding:38px 0;position:relative;z-index:2}
.foot-in{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:18px}
.foot-in .big{font-family:var(--serif);font-size:20px}
.foot-in .meta{font-size:13.5px;color:var(--ink-3);line-height:1.7}
.foot-in a{color:var(--ink-2)}
.foot-in a:hover{color:var(--accent)}

/* =========================================================
   PROJECT DETAIL PAGES
   ========================================================= */
.back{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-2);transition:gap .25s,color .2s}
.back:hover{color:var(--accent);gap:12px}
.back .ar{transition:transform .25s}
.back:hover .ar{transform:translateX(-3px)}

.pg-hero{padding:60px 0 56px;border-bottom:1px solid var(--line)}
.pg-hero .kicker{display:block;margin-bottom:20px;margin-top:30px}
.pg-hero h1{font-size:clamp(40px,7vw,82px);line-height:1.04}
.pg-hero .summary{font-size:clamp(17px,2.3vw,21px);color:var(--ink-2);max-width:62ch;margin-top:24px;line-height:1.7}
.pg-hero .summary b{color:var(--ink);font-weight:600}

.meta-row{display:flex;flex-wrap:wrap;gap:0;margin-top:42px;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--card)}
.meta-item{flex:1 1 0;min-width:130px;padding:18px 22px;border-right:1px solid var(--line)}
.meta-item:last-child{border-right:none}
.meta-item .mk{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:7px}
.meta-item .mv{font-family:var(--serif);font-size:17px;color:var(--ink);line-height:1.35}
.meta-item .mv small{font-family:var(--sans);font-size:13px;color:var(--ink-2);display:block;font-weight:400;margin-top:3px}
@media(max-width:680px){.meta-item{flex:1 1 45%;border-bottom:1px solid var(--line)}}

.pg-actions{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}

/* content blocks */
.block{display:grid;grid-template-columns:200px 1fr;gap:40px;padding:60px 0;border-bottom:1px solid var(--line);align-items:start}
@media(max-width:760px){.block{grid-template-columns:1fr;gap:18px;padding:46px 0}}
.block .bh{position:sticky;top:90px}
@media(max-width:760px){.block .bh{position:static}}
.block .bh .no{font-family:var(--serif);font-size:14px;color:var(--accent);display:block;margin-bottom:8px}
.block .bh h2{font-size:24px;letter-spacing:-.01em}
.block .bh .sub{font-size:13px;color:var(--ink-3);margin-top:8px;line-height:1.6}
.block .bd{max-width:64ch}
.block .bd > p{font-size:16.5px;color:var(--ink-2);margin-bottom:18px}
.block .bd > p:last-child{margin-bottom:0}
.block .bd b{color:var(--ink);font-weight:600}

/* feature list */
.fl{list-style:none;display:flex;flex-direction:column;gap:2px}
.fl li{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);align-items:baseline}
.fl li:last-child{border-bottom:none}
.fl li .fn{font-family:var(--serif);font-size:14px;color:var(--accent)}
.fl li .ft{font-size:16px;color:var(--ink)}
.fl li .ft b{font-weight:600}
.fl li .ft span{display:block;color:var(--ink-2);font-size:14.5px;margin-top:3px}

/* stack-why */
.sw{display:flex;flex-direction:column;gap:0}
.sw-row{display:grid;grid-template-columns:170px 1fr;gap:24px;padding:18px 0;border-bottom:1px solid var(--line);align-items:baseline}
.sw-row:last-child{border-bottom:none}
.sw-row .swk{font-family:var(--serif);font-size:16px;color:var(--ink)}
.sw-row .swk small{display:block;font-family:var(--sans);font-size:12.5px;color:var(--ink-3);font-weight:400;margin-top:2px}
.sw-row .swv{font-size:15px;color:var(--ink-2);line-height:1.7}
.sw-row .swv b{color:var(--ink);font-weight:600}
@media(max-width:600px){.sw-row{grid-template-columns:1fr;gap:6px}}

/* troubleshooting cards */
.ts{display:flex;flex-direction:column;gap:22px}
.ts-card{border:1px solid var(--line-2);border-radius:4px;overflow:hidden;background:var(--card)}
.ts-card .tc-head{padding:18px 22px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--accent) 7%,var(--card))}
.ts-card .tc-head .tag{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:600}
.ts-card .tc-head h3{font-family:var(--serif);font-size:19px;margin-top:7px;line-height:1.35}
.ts-card .tc-body{padding:6px 22px 8px}
.ts-step{display:grid;grid-template-columns:84px 1fr;gap:18px;padding:16px 0;border-bottom:1px dashed var(--line);align-items:baseline}
.ts-step:last-child{border-bottom:none}
.ts-step .sk{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;padding-top:2px}
.ts-step.k-problem .sk{color:var(--accent-2)}
.ts-step.k-cause .sk{color:var(--ink-3)}
.ts-step.k-solve .sk{color:var(--accent)}
.ts-step.k-result .sk{color:var(--ink)}
.ts-step .sv{font-size:15.5px;color:var(--ink-2);line-height:1.68}
.ts-step .sv b{color:var(--ink);font-weight:600}
.ts-step.k-result .sv{color:var(--ink)}
.ts-step code{font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;font-size:13.5px;background:var(--paper-2);padding:1px 6px;border-radius:3px;color:var(--accent)}
@media(max-width:600px){.ts-step{grid-template-columns:1fr;gap:5px}}

/* takeaways */
.learn{border-left:2px solid var(--accent);padding:4px 0 4px 24px;display:flex;flex-direction:column;gap:18px}
.learn p{font-size:16.5px;color:var(--ink-2);margin:0}
.learn p b{color:var(--ink);font-weight:600}

/* next project */
.next-proj{padding:54px 0 30px}
.next-proj a{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:30px 8px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);transition:padding .3s,background .3s}
.next-proj a:hover{padding-left:18px;padding-right:18px;background:var(--card)}
.next-proj .npk{font-size:13px;color:var(--ink-3);letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
.next-proj .npt{font-family:var(--serif);font-size:clamp(24px,4vw,34px);transition:color .25s}
.next-proj a:hover .npt{color:var(--accent)}
.next-proj .npa{font-family:var(--serif);font-size:30px;color:var(--accent)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(20px);transition:opacity .8s cubic-bezier(.2,.6,.3,1),transform .8s cubic-bezier(.2,.6,.3,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}