/* ============ JustCut 공통 껍데기 · 가이드/404 전용 ============
   출처: web/index-v2.html 의 <style> 안에서 "페이지 공통"인 부분만 **복사**해 왔다.
   랜딩 본문은 손대지 않는다 — 랜딩은 지금 화면이 정본이고, 여기를 고쳐도 랜딩은 안 바뀐다.
   (즉 이 파일과 랜딩은 갈라진 사본이다. 토큰 값을 바꿀 일이 생기면 양쪽을 같이 고쳐야 한다.)

   ⚠ 글꼴 경로는 반드시 절대경로(/assets/...)다. 이 파일이 /assets/ 안에 놓이므로
   랜딩처럼 'assets/fonts/…' 로 적으면 /assets/assets/fonts/… 를 찾아 404가 난다. */

@font-face{font-family:'Paperlogy';src:url('/assets/fonts/paperlogy-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Paperlogy';src:url('/assets/fonts/paperlogy-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Paperlogy';src:url('/assets/fonts/paperlogy-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Paperlogy';src:url('/assets/fonts/paperlogy-800.woff2') format('woff2');font-weight:800;font-display:swap}

:root{
  --bg:#070d19; --panel:#0f1828; --panel2:#18243c; --panel3:#212f4b; --panel4:#2b3a5b;
  --line:rgba(219,227,240,.10); --line-strong:rgba(219,227,240,.18);
  --ink:#dbe3f0; --muted:#9fadc4; --ink3:#7d8ba6; --ink-dim:#505d78;
  --acc:#b4e62f; --acc-dim:#8fbf22; --acc-hover:#c6f24d; --acc-text:#0f1500; --acc-ink:#d6ec82;
  --cyan:#5cd6ff; --cyan-ink:#8fdfff; --ok:#2ecc95; --warn:#f6a723; --warn-ink:#ffc24a;
  --hov:#243252; --hov-line:#3d5080;
  --tint06:rgba(180,230,47,.06); --tint10:rgba(180,230,47,.10); --tint14:rgba(180,230,47,.14);
  --focus-ring:0 0 0 2px var(--bg),0 0 0 4px rgba(180,230,47,.55);
  --shadow-card:0 2px 4px #00000033,0 4px 12px #00000040;
  --shadow-pop:0 4px 6px #00000040,0 12px 24px #0000004D;
  --maxw:1120px; --narrow:760px; --gutter:24px;
  --r-lg:12px; --r:8px; --r-sm:4px;
  --ease:cubic-bezier(.24,1,.4,1);
  --dur-1:130ms; --dur-2:175ms; --dur-3:230ms;
  --font-body:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic','Segoe UI',system-ui,sans-serif;
  --font-display:'Paperlogy',var(--font-body);
  --font-mono:'JetBrains Mono','Pretendard Variable',ui-monospace,'SFMono-Regular','Consolas',monospace;
  --ls-d2:-.028em; --ls-d3:-.022em; --ls-t1:-.010em;
  /* 가이드 본문 폭 · 영상 표시 폭. 영상 520px 은 그냥 예쁜 숫자가 아니라 납품 규격의 근거다
     (520 CSS × DSF2 = 1040 device px → 1280×720 납품이면 업스케일 0.94, 즉 늘리지 않는다). */
  --read:720px; --vidw:520px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{background:var(--bg);color:var(--muted);font-family:var(--font-body);font-size:16px;line-height:1.65;
  letter-spacing:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-synthesis:none;
  text-rendering:optimizeLegibility;margin:0;overflow-x:hidden}
::selection{background:rgba(180,230,47,.25);color:var(--ink)}
h1,h2,h3,h4{color:var(--ink);font-weight:600;margin:0;text-wrap:balance}
h1,h2,h3,h4,p,li,dt,dd{word-break:keep-all;overflow-wrap:break-word}
p{margin:0;text-wrap:pretty}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
img{max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.num{font-variant-numeric:tabular-nums;font-family:var(--font-mono)}
.textlink{text-decoration:underline;text-decoration-color:rgba(159,173,196,.35);text-decoration-thickness:1px;
  text-underline-offset:3.5px;transition:text-decoration-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease)}
.textlink:hover{color:var(--ink);text-decoration-color:currentColor}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- 헤더 ---- */
header.site{position:sticky;top:0;z-index:50;height:64px;display:flex;align-items:center;
  background:rgba(7,13,25,.72);backdrop-filter:blur(12px) saturate(1.5);-webkit-backdrop-filter:blur(12px) saturate(1.5);
  border-bottom:1px solid transparent;
  transition:background var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),box-shadow var(--dur-3) var(--ease)}
header.site.scrolled{background:rgba(7,13,25,.88);border-bottom-color:var(--line);box-shadow:0 8px 24px rgba(0,0,0,.32)}
.navrow{display:flex;align-items:center;justify-content:space-between;width:100%}
.brand{display:flex;align-items:center;gap:10px}
.brand .bicon{width:22px;height:22px;display:block;border-radius:5px;box-shadow:0 0 0 1px rgba(255,255,255,.07)}
.brand .bword{height:15px;width:auto;display:block;transform:translateY(.5px)}
nav.main{display:flex;gap:30px}
nav.main a{position:relative;font-size:14.5px;color:var(--muted);padding:6px 2px;transition:color var(--dur-2) var(--ease)}
nav.main a:hover{color:var(--ink)}
nav.main a.on{color:var(--ink)}
nav.main a::after{content:"";position:absolute;left:2px;right:2px;bottom:2px;height:1px;
  background:var(--line-strong);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
nav.main a:hover::after,nav.main a.on::after{transform:scaleX(1)}
.navcta{display:flex;align-items:center;gap:10px}

/* ---- 버튼 ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--r);
  font-size:15.5px;font-weight:600;line-height:1;padding:0 26px;height:52px;cursor:pointer;
  border:1px solid transparent;white-space:nowrap;
  transition:transform var(--dur-1) var(--ease),background var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.btn svg{flex:0 0 auto}
.btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.btn-acc{background:var(--acc);color:var(--acc-text)}
.btn-acc:hover{background:var(--acc-hover);transform:translateY(-1px);box-shadow:0 6px 20px rgba(180,230,47,.18)}
.btn-acc:active{background:var(--acc-dim);transform:translateY(0) scale(.985);transition-duration:80ms}
.btn-ghost{background:transparent;border-color:var(--line-strong);color:var(--ink)}
.btn-ghost:hover{background:var(--hov);border-color:var(--hov-line);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.btn-sm{height:40px;padding:0 18px;font-size:14px;font-weight:500}

/* ---- 모바일 내비 ---- */
.navtoggle{display:none;background:none;border:none;color:var(--ink);cursor:pointer;padding:8px}
.sheet{display:none}

/* ---- 푸터 ---- */
footer.site{background:var(--panel);border-top:1px solid var(--line);padding:64px 0 36px;margin-top:96px;
  box-shadow:0 -1px 0 rgba(255,255,255,.03) inset}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
.foot-brand .brand .bicon{width:18px;height:18px}
.foot-brand .brand .bword{height:13px}
.foot-brand p{margin-top:14px;font-size:13.5px;color:var(--ink3);line-height:1.7;max-width:300px}
.foot-col b{display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:14px}
.foot-col a{display:block;font-size:13px;color:var(--ink3);padding:5px 0;transition:color var(--dur-2) var(--ease)}
.foot-col a:hover{color:var(--muted)}
.foot-col a[aria-disabled="true"]{color:var(--ink-dim);cursor:default;pointer-events:none}
.foot-legal{margin-top:52px;padding-top:24px;border-top:1px solid var(--line);
  font-size:12px;color:var(--ink3);line-height:1.8;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}

/* ═══════════ 여기부터 가이드 코너 전용 ═══════════ */

/* ---- 목록 머리 ---- */
.ghead{padding:64px 0 40px}
.ghead h1{font-family:var(--font-display);font-weight:700;font-size:clamp(30px,4.6vw,46px);
  line-height:1.22;letter-spacing:var(--ls-d2)}
.ghead p{margin-top:14px;font-size:16px;color:var(--muted);max-width:600px}
.gcats{display:flex;gap:8px;flex-wrap:wrap;margin-top:28px}
.gcat{display:inline-flex;align-items:center;height:34px;padding:0 15px;border-radius:999px;
  border:1px solid var(--line-strong);font-size:13.5px;color:var(--muted);
  transition:background var(--dur-2) var(--ease),color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease)}
.gcat:hover{color:var(--ink);border-color:var(--hov-line);background:var(--hov)}
.gcat.on{background:var(--tint14);border-color:rgba(180,230,47,.45);color:var(--acc-ink)}
.gcat[aria-disabled="true"]{color:var(--ink-dim);border-color:var(--line);pointer-events:none}

/* ---- 카드 격자 (3열 → 2열 → 1열) ---- */
.gcards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;padding-bottom:24px}
.gcard{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;
  transition:transform var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.gcard:hover{transform:translateY(-2px);border-color:var(--line-strong);box-shadow:var(--shadow-pop)}
.gcard:focus-visible{outline:none;box-shadow:var(--focus-ring)}
/* 표지: 사진이 없어도 성립하게 만든 조판 표지. 회색 자리표시자를 두지 않기 위한 선택이다. */
.gcover{position:relative;aspect-ratio:16/9;background:
    radial-gradient(120% 90% at 12% 0%,rgba(180,230,47,.10),transparent 58%),
    linear-gradient(160deg,var(--panel2),var(--panel));
  border-bottom:1px solid var(--line);padding:18px 20px;display:flex;flex-direction:column;overflow:hidden}
.gcover::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(159,173,196,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(159,173,196,.05) 1px,transparent 1px);
  background-size:36px 36px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 80% 100%,#000 10%,transparent 72%);
  mask-image:radial-gradient(ellipse 80% 70% at 80% 100%,#000 10%,transparent 72%)}
.gcover img.gshot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.gcover .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,13,25,.55),rgba(7,13,25,.9))}
.gcover>*{position:relative;z-index:1}
.gcover .ctop{display:flex;align-items:center;justify-content:space-between;gap:10px}
.gcover .cbrand{height:12px;width:auto;opacity:.72}
.gcover .cseq{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-dim);letter-spacing:.04em}
.gcover .cseq b{color:var(--acc-ink);font-weight:600;font-size:13px}
.gcover .cbadge{margin-top:11px;align-self:flex-start;font-size:10.5px;letter-spacing:.1em;
  color:var(--acc-ink);border:1px solid rgba(180,230,47,.32);
  background:var(--tint06);border-radius:999px;padding:4px 10px;font-family:var(--font-mono)}
.gcover .chead{margin-top:auto;font-family:var(--font-display);font-weight:700;color:var(--ink);
  font-size:20px;line-height:1.34;letter-spacing:var(--ls-d3);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.gbody{padding:16px 20px 18px;display:flex;flex-direction:column;flex:1}
.gchip{align-self:flex-start;font-size:11.5px;color:var(--muted);border:1px solid var(--line-strong);
  border-radius:var(--r-sm);padding:3px 8px;line-height:1.3}
.gcard .gsum{margin-top:11px;font-size:13.5px;color:var(--ink3);line-height:1.62;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gcard .gmeta{margin-top:auto}
.gmeta{margin-top:16px;padding-top:13px;border-top:1px solid var(--line);
  font-size:12px;color:var(--ink-dim);display:flex;gap:8px;align-items:center}
.gempty{grid-column:1/-1;border:1px dashed var(--line-strong);border-radius:var(--r-lg);
  padding:40px 24px;text-align:center;color:var(--ink3);font-size:14px}

/* ---- 글 상세 ---- */
.art{padding:52px 0 0}
.artwrap{max-width:var(--read);margin:0 auto;padding:0 var(--gutter)}
.crumb{font-size:12.5px;color:var(--ink3);margin-bottom:22px}
.crumb a:hover{color:var(--ink)}
.art h1{font-family:var(--font-display);font-weight:700;font-size:clamp(27px,4.2vw,40px);
  line-height:1.26;letter-spacing:var(--ls-d2)}
.artmeta{margin-top:16px;font-size:13px;color:var(--ink3);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.artmeta .dot{color:var(--ink-dim)}
.arthero{margin:32px 0 0;border-radius:var(--r-lg);border:1px solid var(--line);overflow:hidden;display:block}
.arthero img{display:block;width:100%;height:auto}
.artlead{margin-top:30px;font-size:17px;line-height:1.78;color:var(--ink)}
.artlead p+p{margin-top:12px}

/* 시리즈 목차 — 오늘 편에 👈 */
.stoc{margin:36px 0 8px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px}
.stoc b{display:block;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--acc-ink);font-family:var(--font-mono);margin-bottom:12px}
.stoc ol{margin:0;padding-left:20px}
.stoc li{font-size:14.5px;line-height:1.85;color:var(--muted)}
.stoc li a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.stoc li.now{color:var(--ink);font-weight:600}
.stoc li.now::after{content:" 👈";font-weight:400}
.stoc li.soon{color:var(--ink-dim)}

/* 본문 조판 */
.artbody{padding:8px 0 40px}
.artbody h2{font-family:var(--font-display);font-weight:700;font-size:26px;line-height:1.36;
  letter-spacing:var(--ls-d3);margin:56px 0 6px;padding-top:26px;border-top:1px solid var(--line)}
.artbody h3{font-size:19.5px;line-height:1.45;letter-spacing:var(--ls-t1);margin:38px 0 4px;font-weight:600;
  display:flex;gap:9px;align-items:baseline}
.artbody h3 .hnum{color:var(--acc-ink);font-family:var(--font-mono);font-size:17px;flex:0 0 auto}
.artbody h4{font-size:16.5px;line-height:1.5;margin:26px 0 2px;font-weight:600;color:var(--ink)}
.artbody p{margin:14px 0;font-size:15.5px;line-height:1.85}
.artbody ul,.artbody ol{margin:14px 0;padding-left:22px}
.artbody li{font-size:15.5px;line-height:1.85;margin:5px 0}
.artbody strong{color:var(--ink);font-weight:600}
.artbody code{font-family:var(--font-mono);font-size:.88em;background:var(--panel2);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:1.5px 5px;color:var(--acc-ink)}
.artbody pre{margin:18px 0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 16px;overflow-x:auto}
.artbody pre code{background:none;border:none;padding:0;color:var(--muted);font-size:13px;line-height:1.7}
.artbody a{color:var(--acc-ink);text-decoration:underline;text-decoration-color:rgba(180,230,47,.35);
  text-underline-offset:3px}
.artbody a:hover{text-decoration-color:currentColor}
.artbody hr{border:none;border-top:1px solid var(--line);margin:44px 0}
.artbody blockquote{margin:20px 0;background:var(--panel);border:1px solid var(--line);
  border-left:2px solid rgba(180,230,47,.45);border-radius:0 var(--r) var(--r) 0;padding:14px 18px}
.artbody blockquote p{margin:6px 0;font-size:14.5px;color:var(--muted)}
.artbody blockquote p:first-child{margin-top:0}
.artbody blockquote p:last-child{margin-bottom:0}
.tablewrap{margin:20px 0;overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
.artbody table{width:100%;border-collapse:collapse;font-size:14px;min-width:420px}
.artbody th,.artbody td{padding:10px 13px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.artbody th{background:var(--panel);color:var(--ink);font-weight:600;white-space:nowrap}
.artbody tr:last-child td{border-bottom:none}

/* 영상 블록 — 본문 표시 폭 520px 고정. 캡션은 화면에 안 쓰고 aria-label 로만 남긴다. */
.vblock{margin:24px auto;max-width:var(--vidw)}
.vblock video{display:block;width:100%;height:auto;border-radius:var(--r);border:1px solid var(--line);
  background:#000;box-shadow:var(--shadow-card)}
/* 자리표시자 비율은 16:9 다 — 가이드 클립 납품 규격이 1280×720(표시 520 CSS px)이기 때문이다.
   여기를 9:16 으로 두면 영상이 들어오는 순간 본문이 통째로 위아래로 튄다. */
.vhold{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;
  aspect-ratio:16/9;border:1px dashed var(--line-strong);border-radius:var(--r);
  background:linear-gradient(160deg,var(--panel2),var(--panel));padding:24px;text-align:center}
.vhold .vh1{font-size:12px;letter-spacing:.1em;font-family:var(--font-mono);color:var(--warn-ink)}
.vhold .vh2{font-size:13.5px;color:var(--muted);line-height:1.6;max-width:280px}
.vhold .vh3{font-size:11.5px;color:var(--ink-dim);font-family:var(--font-mono);word-break:break-all}

/* 글 끝 이어보기 */
.artnext{border-top:1px solid var(--line);margin-top:12px;padding-top:32px;
  display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.artnext .lab{font-size:13px;color:var(--ink3);margin-right:4px}

/* ---- 404 ---- */
.nf{min-height:58vh;display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:80px 0}
.nf .code{font-family:var(--font-mono);font-size:13px;letter-spacing:.22em;color:var(--acc-ink)}
.nf h1{margin-top:16px;font-family:var(--font-display);font-weight:700;
  font-size:clamp(28px,5vw,42px);line-height:1.25;letter-spacing:var(--ls-d2)}
.nf p{margin-top:14px;font-size:15.5px;color:var(--muted);max-width:430px}
.nf .row{margin-top:32px;display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

/* ---- 반응형 ---- */
@media (max-width:1023px){
  nav.main{display:none}
  .navtoggle{display:block}
  .sheet{display:flex;position:fixed;inset:64px 0 0 0;z-index:49;flex-direction:column;
    padding:28px var(--gutter) 32px;gap:4px;background:rgba(15,24,40,.94);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    opacity:0;transform:translateY(-8px);pointer-events:none;visibility:hidden;
    transition:opacity var(--dur-3) var(--ease),transform var(--dur-3) var(--ease),visibility 0s linear var(--dur-3)}
  .sheet.openned{opacity:1;transform:none;pointer-events:auto;visibility:visible;
    transition:opacity var(--dur-3) var(--ease),transform var(--dur-3) var(--ease),visibility 0s}
  .sheet{overflow-y:auto}   /* 항목이 늘어나 화면을 넘기면 시트 안에서 스크롤 — 뒤 본문은 잠겨 있다 */
  .sheet a{font-size:19px;color:var(--ink);padding:14px 4px;border-bottom:1px solid var(--line);
    opacity:0;transform:translateY(-6px);transition:opacity var(--dur-3) var(--ease),transform var(--dur-3) var(--ease)}
  .sheet.openned a{opacity:1;transform:none}
  .sheet .sheet-cta{margin-top:auto;width:100%;opacity:0;transition:opacity var(--dur-3) var(--ease) .16s}
  .sheet.openned .sheet-cta{opacity:1}
  /* 3열 → 2열 */
  .gcards{grid-template-columns:repeat(2,1fr);gap:22px}
}
@media (max-width:767px){
  :root{--gutter:20px}
  .brand .bword{height:13px}
  .ghead{padding:44px 0 30px}
  /* 2열 → 1열 */
  .gcards{grid-template-columns:1fr;gap:20px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
  .artbody h2{font-size:22px;margin-top:44px}
  .artbody h3{font-size:18px}
}
@media (max-width:480px){
  .navcta .btn-ghost{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}