/* /guide/ 글 페이지 공통 조판. 서체와 색은 정본 index.html 의 토큰을 따르되,
   다크 모드의 링크 색 하나만 정본에 없는 값을 쓴다. 정본에서 가장 가까운 --iris(#5e6ad2)를
   다크 배경에 그대로 두면 대비가 4.24:1 이라 본문 기준 4.5:1 에 못 미친다. #95a3f8 은 8.42:1 이다.
   장식은 넣지 않는다. 분리는 여백으로 하고 선이나 외곽선 상자는 쓰지 않는다. */
@font-face{font-family:"Inter";src:url("/assets/vendor/InterVariable.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Pretendard Variable";src:url("/assets/vendor/PretendardVariable.woff2") format("woff2");font-weight:45 920;font-display:swap}
@font-face{font-family:"CHUCK Logotype";src:url("/assets/brand/chuck-logotype.woff2") format("woff2");font-weight:700;font-display:block}

:root{
  --sans:"Inter","Pretendard Variable",Pretendard,-apple-system,system-ui,sans-serif;
  /* 라이트는 정본의 Linear Light(bg #ffffff / fg #08090a), 다크는 기본 팔레트(--void / --bone) */
  --bg:#fff;--fg:#08090a;--muted:#62666d;--link:#4f46e5;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#08090a;--fg:#e5e5e6;--muted:#9298a3;--link:#95a3f8;color-scheme:dark}
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--sans);font-size:17px;line-height:1.7;
  letter-spacing:-.011em;font-feature-settings:"cv01","ss03";
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:664px;margin:0 auto;padding:0 24px}

/* 상단 로고. 홈으로 가는 링크 하나뿐이다. */
.top{padding:40px 0 0}
.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--fg)}
.brand img{width:24px;height:24px;display:block}
.brand span{font-family:"CHUCK Logotype",var(--sans);font-weight:700;font-size:17px;letter-spacing:.02em}
.brand:hover{opacity:.72}

article{padding:56px 0 0;word-break:keep-all;overflow-wrap:anywhere}
h1{
  margin:0 0 20px;font-size:32px;line-height:1.32;font-weight:700;
  letter-spacing:-.022em;text-wrap:balance;
}
.lead{margin:0 0 28px;font-size:19px;line-height:1.62;color:var(--fg)}
p{margin:0 0 20px}
p:last-child{margin-bottom:0}

/* 함께 읽기. 선 없이 여백으로만 본문과 떨어뜨린다. */
.also{padding:52px 0 0;font-size:16px}
.also b{display:block;margin:0 0 10px;font-weight:510;color:var(--muted);font-size:15px}
.also a{display:block;margin:0 0 7px;color:var(--fg);text-decoration:none}
.also a:hover{color:var(--link)}

/* 마지막 줄. 여백으로 본문과 떨어뜨린다. */
.end{padding:36px 0 88px}
.end a{color:var(--link);text-decoration:none;font-weight:510}
.end a:hover{text-decoration:underline}

/* 목록 페이지 */
.list{padding:56px 0 88px}
.list h1{margin-bottom:12px}
.list .intro{margin:0 0 44px;color:var(--muted)}
.item{display:block;text-decoration:none;color:inherit;margin:0 0 34px}
.item h2{margin:0 0 6px;font-size:20px;line-height:1.45;font-weight:600;letter-spacing:-.018em;color:var(--fg)}
.item p{margin:0;color:var(--muted);font-size:16px}
.item:hover h2{color:var(--link)}

@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  .top{padding-top:28px}
  article{padding-top:40px}
  h1{font-size:26px}
  .lead{font-size:18px}
  .also{padding-top:40px}
  .end{padding:28px 0 64px}
}