/* =========================================================================
   base.css — 토큰 / 리셋 / 타이포그래피 / 테마
   에디토리얼(Light)을 기본으로 두고, Dark를 개발 환경 레이어로 붙인다.
   ========================================================================= */

/* --- 1. Paperlogy: 한글 제목/숫자 --------------------------------------- */
@font-face{font-family:'Paperlogy';src:url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-3Light.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Paperlogy';src:url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Paperlogy';src:url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Paperlogy';src:url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Paperlogy';src:url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Paperlogy';src:url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2');font-weight:800;font-display:swap}

/* --- 2. 라이트: VS Code Light+ ---------------------------------------------
   중성 회색 workbench(#F3F3F3) 위에 흰 editor가 떠 있는 구조를 그대로 쓴다.
   RGB 편차가 없어 색이 누렇게 돌지 않는다.                              */
:root{
  --paper:      #F3F3F3;   /* workbench — 페이지 바닥 */
  --paper-deep: #E8E8E8;
  --panel:      #FFFFFF;   /* editor — 카드 · 표 · 스텝 */
  --panel-2:    #ECECEC;   /* tab strip — 코드 head · 표 헤더 */
  --code-bg:    #FFFFFF;   /* editor */
  --line:       #D4D4D4;
  --line-soft:  #E7E7E7;

  --ink:        #1F1F1F;
  --ink-2:      #3B3B3B;
  --ink-dim:    #5F5F5F;
  --ink-faint:  #6B6B6B;

  --accent:     #3F4A2E;   /* muted olive — 프로젝트 고유색. 숫자·링크·핵심 값에만 */
  --accent-soft:#E9EBE1;

  /* 문법 강조 — Light+ 기본값 */
  --sx-key:     #0451A5;   /* property / key */
  --sx-str:     #A31515;   /* string */
  --sx-cmt:     #008000;   /* comment */
  --sx-ok:      #098658;   /* number */
  --sx-warn:    #795E26;   /* function */
  --sx-err:     #CD3131;   /* error */
  --sx-mint:    #267F99;   /* type */

  /* 의미색 — 상태 배지 / 미검증 주의 */
  --on-accent:  #FFFFFF;
  --ok-fg:      #0B7A4F;
  --ok-bg:      #E6F3EC;
  --ok-line:    #B4DBC6;
  --ok-ring:    rgba(11,122,79,.35);
  --warn-bg:    #FAF4E4;
  --warn-line:  #E4D5AA;

  --bar-bg:     rgba(243,243,243,.88);
  --tint:       rgba(63,74,46,.035);  /* 상단 radial 물듦 — 아주 옅게만 */
  --grain-op:   .22;

  /* 떠 있는 면의 깊이. 안쪽 1px 하이라이트가 가장자리를 또렷하게 만든다. */
  --shadow:     0 1px 2px rgba(0,0,0,.05),
                0 10px 26px -14px rgba(0,0,0,.18),
                0 0 0 1px rgba(255,255,255,.9) inset;
  --shadow-lift:0 2px 5px rgba(0,0,0,.08),
                0 20px 40px -18px rgba(0,0,0,.24),
                0 0 0 1px rgba(255,255,255,1) inset;

  --mono: 'JetBrains Mono', 'D2Coding', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'Paperlogy', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  --wrap: 1320px;      /* 전체 콘텐츠 최대 폭 */
  --read: 700px;       /* 본문 읽기 폭 */
  --gutter: 40px;

  --dur: 200ms;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* --- 3. 다크: VS Code Dark+ -----------------------------------------------
   Light+와 짝이 맞도록 Dark+ 값을 쓴다. 여기서도 색조는 중성이다.       */
:root[data-theme="dark"]{
  --paper:      #151515;
  --paper-deep: #101010;
  --panel:      #1F1F1F;
  --panel-2:    #2D2D2D;
  --code-bg:    #1E1E1E;
  --line:       #3C3C3C;
  --line-soft:  #2B2B2B;

  --ink:        #D4D4D4;
  --ink-2:      #BBBBBB;
  --ink-dim:    #9D9D9D;
  --ink-faint:  #979797;

  --accent:     #A9CC6E;
  --accent-soft:#242A1C;

  --sx-key:     #569CD6;
  --sx-str:     #CE9178;
  --sx-cmt:     #6A9955;
  --sx-ok:      #B5CEA8;
  --sx-warn:    #DCDCAA;
  --sx-err:     #F48771;
  --sx-mint:    #4EC9B0;

  --on-accent:  #16210C;
  --ok-fg:      #89D185;
  --ok-bg:      #14251A;
  --ok-line:    #2A4231;
  --ok-ring:    rgba(137,209,133,.32);
  --warn-bg:    #2A2418;
  --warn-line:  #4A3F24;

  --bar-bg:     rgba(21,21,21,.88);
  --tint:       rgba(169,204,110,.05);
  --grain-op:   .34;

  --shadow:     0 2px 4px rgba(0,0,0,.5),
                0 22px 48px -26px rgba(0,0,0,.9),
                0 0 0 1px rgba(255,255,255,.05) inset;
  --shadow-lift:0 4px 8px rgba(0,0,0,.55),
                0 34px 64px -28px rgba(0,0,0,.95),
                0 0 0 1px rgba(255,255,255,.08) inset;
}

/* 시스템 설정 존중 — JS가 없을 때의 대비책.
   theme.js가 동작하면 항상 data-theme을 명시하므로 이 블록은 쓰이지 않는다.
   위 [data-theme="dark"] 블록과 값을 함께 고쳐야 한다. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    --paper:#151515; --paper-deep:#101010; --panel:#1F1F1F; --panel-2:#2D2D2D;
    --code-bg:#1E1E1E; --line:#3C3C3C; --line-soft:#2B2B2B;
    --ink:#D4D4D4; --ink-2:#BBBBBB; --ink-dim:#9D9D9D; --ink-faint:#979797;
    --accent:#A9CC6E; --accent-soft:#242A1C;
    --sx-key:#569CD6; --sx-str:#CE9178; --sx-cmt:#6A9955; --sx-ok:#B5CEA8;
    --sx-warn:#DCDCAA; --sx-err:#F48771; --sx-mint:#4EC9B0;
    --on-accent:#16210C; --ok-fg:#89D185; --ok-bg:#14251A; --ok-line:#2A4231;
    --ok-ring:rgba(137,209,133,.32); --warn-bg:#2A2418; --warn-line:#4A3F24;
    --bar-bg:rgba(21,21,21,.88); --tint:rgba(169,204,110,.05); --grain-op:.34;
    --shadow:0 2px 4px rgba(0,0,0,.5),0 22px 48px -26px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.05) inset;
    --shadow-lift:0 4px 8px rgba(0,0,0,.55),0 34px 64px -28px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.08) inset;
  }
}

/* --- 4. 리셋 ------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px;-webkit-text-size-adjust:100%}
body{
  position:relative;
  margin:0;
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:17px;
  line-height:1.85;
  word-break:keep-all;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;

  /* 상단에서 아래로 옅게 물드는 accent. 페이지 머리에 무게를 준다. */
  background-color:var(--paper);
  background-image:radial-gradient(115% 100% at 50% 0%, var(--tint) 0%, transparent 68%);
  background-repeat:no-repeat;
  background-size:100% 820px;
}

/* 필름 grain — 넓은 단색 면이 디지털로 죽어 보이지 않게 한다.
   화면 전체에 고정되며 클릭을 가로채지 않는다. */
body::after{
  content:"";
  position:fixed;inset:0;z-index:9999;
  pointer-events:none;
  opacity:var(--grain-op);
  mix-blend-mode:soft-light;
  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='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.02em;line-height:1.42}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img{max-width:100%;display:block}
hr{border:0;border-top:1px solid var(--line);margin:0}
::selection{background:var(--accent-soft);color:var(--ink)}

a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line);
  transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease)}
a:hover{color:var(--accent);border-bottom-color:var(--accent)}

button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

/* --- 5. 타이포 유틸 ------------------------------------------------------ */
.mono{font-family:var(--mono);font-weight:400;font-size:.88em;letter-spacing:-.01em}
.label{
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);
}
.lead{max-width:var(--read);font-size:17px;font-weight:300;line-height:1.9;color:var(--ink-2)}
.dim{color:var(--ink-dim)}
.faint{color:var(--ink-faint)}
strong{font-weight:600;color:var(--ink)}
em{font-style:normal;color:var(--accent);font-weight:500}

/* 본문 안의 짧은 기술 문자열 — 장식이 아니라 식별자일 때만 */
code{
  font-family:var(--mono);font-size:.86em;font-weight:400;
  padding:.1em .38em;border-radius:3px;
  background:var(--accent-soft);color:var(--accent);
  white-space:nowrap;
}

/* 큰 숫자 — 사이트 전체에서 가장 강한 위계 */
.figure-xl{
  font-family:var(--sans);font-weight:800;letter-spacing:-.045em;line-height:.92;
  font-size:clamp(44px,6.4vw,88px);color:var(--ink);font-variant-numeric:tabular-nums;
}

/* 테마 전환 순간에만 모든 transition을 끈다.
   var() 기반 색을 transition 대상으로 두면 Chrome에서 계산값이 갱신되지 않고
   이전 색에 멈춰 버린다. 전환 자체도 즉시 바뀌는 편이 더 또렷하다. */
:root.theme-switching,
:root.theme-switching *,
:root.theme-switching *::before,
:root.theme-switching *::after{
  transition:none!important;
}

/* --- 6. 모션 절제 --------------------------------------------------------
   등장 효과는 JS가 살아 있을 때만 건다. JS가 죽으면 .js가 붙지 않으므로
   본문이 opacity:0에 갇히지 않는다.                                       */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .js .rv{opacity:1!important;transform:none!important}
}