/* ───────────────────────────────────────────────────────────────
   (indiff) — 검정 하나.

   한때 검은 히어로에서 흰 본문으로 넘기는 구성을 썼다. 되돌렸다 — 한 창 안에서 바탕이
   뒤집히면 두 페이지를 이어 붙인 것처럼 읽히고, 경계마다 눈이 한 번씩 멈춘다.
   **바탕은 검정 하나**로 두고, 면을 나누는 일은 카드(--card)와 규칙선(--line)이 맡는다.

   참고한 결(Lyra AI)에서 가져온 것은 색이 아니라 **구성**이다 — 가운데 모은 히어로,
   알약 배지, 카드 격자, 따라오는 상단 바, 스크롤에 맞춰 떠오르는 블록.

   색은 흰색과 회색의 단계로만 말한다. 앱의 강조색(#D97757)은 쓰지 않는다.
   ─────────────────────────────────────────────────────────────── */
:root{
  --bg:#000;
  --fg:#fff;
  --dim:#bdbdc3;        /* 보조 글 — 검정 위 10:1. a3a3a8 은 가는 글자(300)와 겹쳐 흐렸다 */
  --dim2:#9d9da4;       /* 메타 — 검정 위 7.3:1. 87878e 도 작은 글에선 흐렸다 */
  --line:#1f1f22;
  --line2:#2e2e33;
  --card:#0c0c0e;       /* 카드 — 검정에서 한 칸만 뜬다 */
  --shadow:none;
  --col:1180px;
  --gut:28px;
  --r:8px;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --serif:'Iowan Old Style','Palatino Linotype',Palatino,'Times New Roman',Georgia,serif;
}
/* .dark 는 이제 바탕과 같다 — 표식은 남겨 둔다(상단 바가 그 이름을 쓴다) */
.dark{color:var(--fg); background:var(--bg)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; background:var(--bg); scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Pretendard Variable',Pretendard,'Apple SD Gothic Neo','Noto Sans KR',
    -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:16px; line-height:1.78; font-weight:360;
  color:var(--fg); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
@font-face{
  font-family:'Pretendard Variable';
  src:url('pretendard-subset.woff2?v=26623b94') format('woff2-variations');
  font-weight:300 800; font-style:normal; font-display:swap;
}
.wrap{width:min(100%,var(--col)); margin-inline:auto; padding-inline:var(--gut)}
section{padding-block:8rem; background:var(--bg); color:var(--fg)}
section + section{border-top:1px solid var(--line)}

/* 본문은 **흰색 하나**다. 회색은 메타(라벨·모노·밑줄)와 전후 비교의 '버려지는 쪽'에만 남긴다 —
   본문 안에서 색이 갈리면 어떤 문장은 중요하고 어떤 문장은 덜한 것처럼 보인다. */

/* ── 글자 ──
   **굵기를 하나로 쓴다.** 제목도 본문도 가늘게(300), 강조는 면과 크기로 만든다. */
h1,h2,h3{margin:0; font-weight:340; letter-spacing:-.033em; line-height:1.1}
h1{font-size:clamp(2.6rem,7vw,5rem)}
h2{font-size:clamp(2rem,4.4vw,3.2rem)}
h3{font-size:1.12rem; font-weight:400; letter-spacing:-.012em; line-height:1.45}
p{margin:0 0 1.1rem; max-width:38rem}
/* 산문에서는 굵기를 섞지 않는다 — 한 문장 안에 300 과 400 이 같이 있으면 글이 얼룩진다.
   <b> 도 같은 굵기로 둔다 — 강조는 색으로만. */
b{font-weight:400; color:var(--fg)}
a{color:inherit}
/* 화면에 있는 키는 「빗금」이 아니라 / 다. 글로 풀어 쓰지 않고 그 모양 그대로 보인다 */
kbd{font-family:var(--mono); font-size:.84em; line-height:1; padding:.22em .5em .28em;
    border:1px solid var(--line2); border-radius:7px; color:var(--fg); white-space:nowrap}

.logo{display:inline-block; font-family:var(--serif); font-size:1.26em; line-height:1;
      letter-spacing:.005em; color:var(--fg); text-decoration:none}
.label{font-family:var(--serif); font-size:16px; font-style:italic; letter-spacing:.01em; text-transform:lowercase;
       line-height:1.3; color:var(--dim); margin:0 0 1.4rem}
/* 이름표는 로고와 같은 말투 — 소문자 괄호. 대문자 모노 눈썹은 어느 랜딩에나 있는 옷이었다 */
.label::before{content:"("} .label::after{content:")"}
.mono{font-family:var(--mono); font-size:12px; letter-spacing:.02em; color:var(--dim2)}
.dim{color:var(--dim)}
.note{font-family:var(--mono); font-size:12px; color:var(--dim2); margin-top:2rem; letter-spacing:.04em; max-width:46rem}

/* 섹션 머리 — 문서의 여백 난처럼. 왼쪽 좁은 칸(3)에 이름표, 오른쪽 넓은 칸(9)에 제목과 설명.
   예전엔 모든 머리를 가운데로 모았다 — 여덟 번 같은 모양이 되풀이되어 찍어 낸 랜딩으로 읽혔다.
   아래 세 줄(.trio)과 기능 줄(.item)도 같은 세로선(--spine)에 맞춘다 */
:root{--spine:calc(25% + 1.5rem)}
.sec-head{display:grid; grid-template-columns:minmax(0,3fr) minmax(0,9fr); column-gap:2rem;
  text-align:left; margin:0 0 4.5rem}
.sec-head > *{grid-column:2}
.sec-head .label{grid-column:1; grid-row:1 / span 2; margin:0; padding-top:.7rem}
.sec-head .lead{font-size:1.06rem; margin-top:1.6rem}
h2{text-wrap:balance}

/* ── 알약 배지 ── */
.badge{
  display:inline-flex; align-items:center; gap:.6em; margin:0 0 2.4rem;
  padding:.45em 1.05em; border:1px solid var(--line2); border-radius:999px;
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--dim);
}
.badge::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--fg); opacity:.75}
:focus-visible{outline:2px solid currentColor; outline-offset:3px}

/* ── 상단 바: 따라오고, 본문에 들어서면 밝아진다 ── */
/* 히어로 위에 얹는다(아래 칸을 72px 끌어올린다) — 따로 서면 오로라 위에 검은 띠가 남는다 */
header.top{position:sticky; top:0; z-index:50; margin-bottom:-72px; transition:background .25s, border-color .25s}
header.top.dark{background:transparent}
.top .wrap{display:flex; align-items:center; gap:1rem; height:72px}
.top .logo{font-size:15px}
.top .sp{flex:1}
header.top.solid{
  background:rgba(0,0,0,.72); border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:saturate(150%) blur(14px); backdrop-filter:saturate(150%) blur(14px);
}

/* ── 히어로 ── */
.hero{position:relative; padding:calc(5rem + 72px) 0 0; overflow:hidden}
#field{position:absolute; top:0; left:0; right:0; height:100%;
       width:100%; display:block; z-index:0; pointer-events:none;
       /* 히어로 끝까지 — 그림 둘레와 그 아래로 결이 이어진다. 끝자락만 녹여 다음 섹션에 이음매가 안 남게 */
       -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 78%,transparent 100%);
       mask-image:linear-gradient(to bottom,#000 0%,#000 78%,transparent 100%)}
/* 모니터 덮개 — 3px 마다 주사선 한 줄 · 가장자리 어둡게(앱의 .pane-crt). 정지 그림이라 매 프레임 비용이 없다 */
.field-crt{position:absolute; inset:0; z-index:0; pointer-events:none;
       background:repeating-linear-gradient(to bottom,rgba(0,0,0,.22) 0,rgba(0,0,0,.22) 1px,transparent 1px,transparent 3px),
                  radial-gradient(ellipse at 50% 40%,transparent 55%,rgba(0,0,0,.4) 100%)}
.hero .wrap{position:relative; z-index:1}
/* 오로라 — 마크 뒤에 옅은 빛 두 덩이. 아주 느리게 자리를 바꾼다 */
/* 빛은 캔버스가 다 그린다 — 덧칠하던 오로라는 걷었다 */
.hero::before{content:none}
@keyframes aurora{to{transform:translate3d(3%,4%,0) scale(1.08)}}
/* 배경이 화려해진 만큼 글자 뒤에 그늘을 깐다 — 글은 늘 무늬 위에 떠야 한다 */
.hero-mid h1, .hero-mid .ko, .hero-mid .lockup, .hero-mid .word, .intro, .install-how, .install-meta{text-shadow:0 0 28px #000, 0 0 10px rgba(0,0,0,.85)}
.hero-mid{text-align:center; margin-inline:auto}
.hero-mid p{margin-inline:auto}
/* 괄호가 제 앞뒤로 여백을 들고 있다 */
/* 히어로만 활자가 주인공이다 — 본문의 「굵기 하나(300)」 규칙에서 빠진다.
   로고와 영어 제목이 같은 크기·굵기로 한 덩이가 된다 */
.lockup, .hero h1, .word{margin:0; max-width:none; font-weight:500; font-size:clamp(2.7rem,8.4vw,7.6rem);
        line-height:.84; letter-spacing:-.06em}
/* 한국어는 그 밑에 작게 — 활자 덩이의 자막 */
.hero .ko{margin:2.2rem auto 0; font-size:clamp(1.15rem,2.2vw,1.7rem); font-weight:400; letter-spacing:-.03em; line-height:1.4}
/* 머리 한 줄 — 왼쪽 이름과 오른쪽 판을 점선이 잇는다 */
.intro{display:flex; align-items:center; gap:.8rem; width:min(100%,34rem); margin:0 auto 2.6rem;
       font-size:13px; font-weight:400; color:rgba(255,255,255,.78); letter-spacing:-.01em; line-height:1}
.intro em{font-style:italic; opacity:.7}
.intro i{flex:1; height:3px; opacity:.7;
         background:radial-gradient(circle,currentColor 1px,transparent 1.3px) 0 0/6px 3px repeat-x}
/* 왼쪽 가장자리에 세로로 흐르는 확장자 — 읽는 글이 아니라 결이다 */
.side{position:absolute; z-index:1; left:clamp(12px,3vw,48px); top:50svh; margin:0; max-width:none;
      transform:translateY(-50%) rotate(180deg); writing-mode:vertical-rl; white-space:nowrap;
      font-family:var(--mono); font-size:11px; letter-spacing:.12em; line-height:1; color:var(--dim2);
      height:70svh; overflow:hidden}
.hero-mid .install{margin-top:3rem}
/* 터미널로 설치 — 흰 바탕 단추 한 줄. 어디를 눌러도 복사되고, 복사되면 검은 바탕에 흰 선만 남아
   「눌렸다」가 보인다. 줄이 넘치면 그 칸 안에서만 가로로 민다 */
.install{display:flex; align-items:center; gap:.9rem; max-width:47rem; margin:0 auto 1.4rem;
  padding:.5rem .5rem .5rem 1.3rem; border:1px solid #fff; border-radius:999px; background:#fff; color:#0a0a0b;
  text-align:left; cursor:pointer; user-select:none;
  transition:background .18s, color .18s, box-shadow .18s, transform .12s}
.install:hover{box-shadow:0 0 0 5px rgba(255,255,255,.14)}
.install:active{transform:scale(.99)}
/* 이름표는 흰 단추 위에서도 읽혀야 한다 — 옅은 회색(#6e6e76·11px)은 안 보였다. 명령과는 세로줄로 가른다 */
.install-k{font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.04em; color:#2a2a30; white-space:nowrap;
  padding-right:.9rem; border-right:1px solid #d6d6db; transition:color .18s, border-color .18s}
/* 단추 밑 한 줄 — 터미널을 안 써 본 사람에게 다음 동작 하나만 알려 준다 */
.install-how{margin:1.2rem auto 0; font-size:.95rem; color:#c4c4c9; line-height:1.7; max-width:40rem}
.install-how kbd{font-size:.8em}
.install-meta{margin:.5rem auto 0; font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:rgba(255,255,255,.62)}
.install code{flex:1; min-width:0; overflow-x:auto; white-space:nowrap; scrollbar-width:none;
  font-family:var(--mono); font-size:13px; color:inherit}
.install code::-webkit-scrollbar{display:none}
.install-copy{flex:0 0 auto; font:inherit; font-size:12px; padding:.5em 1.1em; border-radius:999px; cursor:pointer;
  border:1px solid var(--line2); background:transparent; color:var(--fg); transition:background .18s, color .18s, border-color .18s}
.install-copy:hover, .install-copy.on{background:var(--fg); color:var(--bg); border-color:var(--fg)}
.install .install-copy{background:#0a0a0b; color:#fff; border-color:#0a0a0b}
.install.copied{background:#0a0a0b; color:#fff; box-shadow:none}
.install.copied .install-k{color:var(--dim2); border-color:var(--line2)}
.install.copied .install-copy{background:#fff; color:#0a0a0b; border-color:#fff}

/* ── 그림 ── */
figure{margin:0}
figure:empty{display:none}
figure img, figure video{display:block; width:100%; height:auto; border:1px solid var(--line2);
           border-radius:var(--r); background:var(--card)}
.shot-wide{margin-top:4.5rem; position:relative; z-index:1}
.hero .shot-wide{margin-bottom:5rem}
/* 두 장을 나란히 — 글 카드 사이에 그림이 끼면 카드 하나가 반 줄에 혼자 남는다 */
.shot-pair{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:4.5rem; align-items:start}      /* 다음 섹션 위로 걸치게 — 랜딩의 흔한 손짓 */
.item figure{margin-top:1.8rem}

/* ── 핵심 기능(indi · 브라우저) — 세 줄을 가로로, 위에 선 하나씩 ── */
.trio{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem; margin-top:3.4rem; margin-left:var(--spine)}
.trio > div{border-top:1px solid var(--line2); padding-top:1.3rem}
.trio .k{margin:0 0 .5rem; font-size:1.06rem; color:var(--fg); max-width:none}
.trio p:not(.k){margin:0; color:var(--dim); font-size:1rem; line-height:1.7; max-width:none}
#indi .shot-wide, #browser .shot-wide{margin-top:3.6rem}

/* ── 기능 줄 ──
   둥근 상자 + 01~07 번호였다. 번호는 순서가 없는 목록에 붙은 장식이라 걷고, 상자 대신 위에 선 하나.
   그림이 붙은 줄은 글이 여백 난(3), 그림이 본문 난(9) — 섹션 머리와 같은 세로선이다 */
.items{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:2rem}
.item{border-top:1px solid var(--line2); padding:2.6rem 0 3rem}
.item h3{font-size:clamp(1.5rem,2.2vw,1.9rem); font-weight:400; letter-spacing:-.035em; line-height:1.2}
.item p{margin:1rem 0 1.3rem; max-width:none; font-size:1.04rem; line-height:1.75}
/* 덧붙임 한 줄 — 모노로 두면 한글이 시스템 글꼴로 떨어져 글자가 띄엄띄엄 선다. 본문 글꼴로, 선 하나 위에 */
.item .why{font-size:.94rem; color:var(--dim); margin:0; padding-top:1rem; border-top:1px solid var(--line); line-height:1.5}
/* 그림이 붙은 카드는 두 칸을 다 쓴다 — 창 하나를 반 칸에 욱여넣으면 안쪽 글자가 안 읽힌다 */
.item:has(figure:not(:empty)){grid-column:1 / -1}
.item:has(figure:not(:empty)){display:grid; grid-template-columns:minmax(0,3fr) minmax(0,9fr);
  column-gap:2rem; align-items:start}
.item:has(figure:not(:empty)) figure{margin-top:0}
/* 여백 난은 좁다 — 넓은 카드에 맞춰 넣은 <br> 이 「…입니 / 다.」처럼 글자 하나를 떨군다. 난 안에서는 흘려 쓴다 */
.item:has(figure:not(:empty)) p br{display:none}

/* ── 나란히 — 왼쪽 제목, 오른쪽 그림 ── */
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:4.5rem; align-items:center}
.split-head .lead{font-size:1.06rem; margin-top:1.6rem}
.split-head .mono{margin-top:2.2rem}

/* ── 원본 그대로 — 문서 792건을 칸 792개로. 수치가 넓이로 읽힌다 ── */
/* 원본 — 한 줄만 바뀐 문서. 바뀐 줄만 밝고, 나머지는 「그대로」가 붙어 가라앉는다 */
.split-head .lead + .lead{margin-top:1rem}
.keep-line{margin-top:2.2rem; padding-top:1.4rem; border-top:1px solid var(--line); color:var(--dim)}
.keep{display:grid; gap:14px}
.keep-card{border:1px solid var(--line); border-radius:var(--r); background:var(--card); padding:1.4rem 1.8rem 1.5rem}
.keep-top, .keep-foot{font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--dim2)}
.keep-top{display:flex; justify-content:space-between; gap:1rem; padding-bottom:1.1rem; border-bottom:1px solid var(--line)}
.keep-state{letter-spacing:.14em}
.keep-doc{padding:1.4rem 0 .6rem}
.kd-h{font-size:1.2rem; margin:0 0 1rem; max-width:none}
.kd-row{display:grid; grid-template-columns:5.5rem minmax(0,1fr) auto; gap:1rem; align-items:baseline;
  padding:.72rem .9rem; margin-inline:-.9rem; border-radius:8px; color:var(--dim)}
.kd-row + .kd-row{border-top:1px solid var(--line)}
.kd-row i{font-style:normal; font-family:var(--mono); font-size:12px; color:var(--dim2); transition:opacity .5s}
.kd-row s{color:var(--dim2); margin-right:.7rem; text-decoration-color:var(--dim2); transition:color .4s, text-decoration-color .4s}
.kd-row b{transition:opacity .5s .25s}
.kd-row.hit{background:#141417; color:var(--fg); box-shadow:inset 2px 0 0 var(--fg); transition:background .5s, box-shadow .5s}
.kd-row.hit i{color:var(--fg)}
.keep.wait .kd-row i{opacity:0}
.keep.wait .kd-row s{color:var(--dim); text-decoration-color:transparent}
.keep.wait .kd-row b{opacity:0}
.keep.wait .kd-row.hit{background:transparent; box-shadow:inset 2px 0 0 transparent; color:var(--dim)}
.keep-foot{margin:0; padding-top:1.1rem; border-top:1px solid var(--line); letter-spacing:.14em}
.keep-proof{display:flex; align-items:center; gap:1.6rem; padding:.4rem .2rem}
.keep-proof .num{font-variant-numeric:tabular-nums; margin:0; font-size:clamp(2rem,4vw,2.8rem); font-weight:300; letter-spacing:-.04em; line-height:1}
.keep-proof .k{margin:0 0 .35rem}
.keep-proof .mono{margin:0}

/* ── 설치 — 스크립트가 실제로 찍는 줄을 그대로 보인다 ── */
/* 설치 — 세 걸음. 번호는 원 안에, 걸음 이름은 본문보다 한 단 밝게 */
.steps{list-style:none; margin:2.4rem 0 0; padding:0; display:grid; gap:1.3rem}
.steps li{display:grid; grid-template-columns:2rem minmax(0,1fr); gap:1rem; align-items:start}
.steps .n{display:inline-flex; align-items:center; justify-content:center; width:2rem; height:2rem; border-radius:50%;
  border:1px solid var(--line2); font-family:var(--mono); font-size:12px; color:var(--fg)}
.steps p{margin:0; color:var(--dim); font-size:.95rem; line-height:1.65}
.steps .st{color:var(--fg); font-size:1.02rem; margin-bottom:.15rem}
/* 이 명령이 하는 일 — 세 걸음 밑에 넓게. 범위 표(.spec)와 같은 격자를 쓴다 */
.does{margin-top:5.5rem}
.does .spec .k{font-family:inherit; text-transform:none; letter-spacing:-.01em; font-size:1.02rem; color:var(--fg); margin-bottom:.55rem}
.does .spec p:not(.k){color:var(--dim); font-size:.95rem; line-height:1.7}
.does-note{margin:1.8rem 0 0; color:var(--dim); font-size:.95rem; max-width:none}
.does-note a{color:var(--fg); text-underline-offset:3px}
.term{border:1px solid var(--line2); border-radius:var(--r); background:#08080a; overflow:hidden;
  box-shadow:0 40px 90px -40px rgba(255,255,255,.10)}
.term-bar{display:flex; align-items:center; gap:7px; padding:.65rem .7rem .65rem 1rem; border-bottom:1px solid var(--line)}
.term-bar i{width:10px; height:10px; border-radius:50%; background:var(--line2)}
.term-bar span{flex:1; text-align:center; font-family:var(--mono); font-size:11px; color:var(--dim2)}
.term-body{padding:1.3rem 1.5rem 1.6rem; font-family:var(--mono); font-size:13px; line-height:1.95; min-height:17.5rem}
.term-body p{margin:0; max-width:none}
.t-cmd{font-size:12.5px; letter-spacing:-.01em}
.t-cmd code{font-family:inherit; color:var(--fg)}
.t-ps{color:var(--dim2)}
.t-out{color:var(--dim); padding-left:1.1rem}
.t-out b{font-weight:400; color:var(--fg)}
.t-hd{color:var(--fg)}
.t-caret{display:inline-block; width:.55em; height:1.05em; vertical-align:-.18em; background:var(--fg); animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.term.wait .term-body p{visibility:hidden}
.term.wait .term-body p.shown{visibility:visible}

/* ── 포맷 — 확장자만 카드로 ── */
/* 확장자 — 칸끼리 선을 나눠 쓰는 표. 둥근 타일 열 개는 단추처럼 보였다 */
.exts{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line)}
.ext{aspect-ratio:3/2; display:flex; align-items:center; justify-content:center;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:clamp(1.05rem,2vw,1.5rem); letter-spacing:.02em; color:var(--fg)}
.ext.img{font-size:12px; line-height:1.9; letter-spacing:.06em; color:var(--dim); text-align:center}


/* ── 범위 — 머리표 넷, 칸 사이는 선 하나 ── */
.spec{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid var(--line)}
.spec > div{padding:2.2rem 2.6rem 2.4rem 0; border-bottom:1px solid var(--line)}
.spec > div:nth-child(even){padding:2.2rem 0 2.4rem 2.6rem; border-left:1px solid var(--line)}
.spec .k{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim2); margin:0 0 1.1rem}
.spec p{max-width:none; margin-bottom:0}

/* ── 마무리 · 푸터 ── */
.end{text-align:center; padding-block:9rem 0; overflow:hidden}
/* 맨 끝에 화면 폭만 한 로고 — 아래가 잘리게 걸쳐 둔다. 읽는 글이 아니라 무늬라 옅게 */
.wordmark{margin:7rem 0 -.2em; max-width:none; font-family:var(--serif); font-weight:300; line-height:.8;
  font-size:min(25vw,24rem); letter-spacing:-.05em; white-space:nowrap; text-align:center;
  background:linear-gradient(180deg,#2a2a2f 0%,rgba(42,42,47,0) 92%); -webkit-background-clip:text; background-clip:text; color:transparent}
.end h2{max-width:none}
.end .lead{font-size:1.06rem; margin-top:1.6rem; color:var(--dim)}
.end .install{margin-top:3.2rem}
.end .end-meta{margin-top:1.4rem}
.end p{margin-inline:auto}
footer{padding-block:3.4rem; background:var(--bg); color:var(--fg)}
footer .wrap{display:flex; gap:1.2rem 2.6rem; flex-wrap:wrap; align-items:center}
footer .logo{font-size:13px; color:var(--dim2)}
footer p{font-family:var(--mono); font-size:12px; color:var(--dim2); margin:0; letter-spacing:.04em; max-width:none}

/* ── 스크롤에 맞춰 떠오르기 ──
   JS 가 html.anim 을 달아야 숨는다. 스크립트가 못 돌면 글은 그냥 보인다. */
.anim .rise{opacity:0; transform:translateY(16px)}
.anim .rise.in{opacity:1; transform:none; transition:opacity .55s ease, transform .55s ease}

/* ── 좁은 화면 ── */
@media (max-width:900px){
  .items{grid-template-columns:1fr; gap:1.2rem}
  .trio{grid-template-columns:1fr; gap:1.4rem; margin-left:0}
  .sec-head{grid-template-columns:1fr}
  .sec-head > *, .sec-head .label{grid-column:1; grid-row:auto}
  .sec-head .label{margin-bottom:1.2rem; padding-top:0}
  .item:has(figure:not(:empty)){grid-template-columns:1fr; gap:1.8rem}
  .split{grid-template-columns:1fr; gap:3rem}
  .exts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .shot-pair{grid-template-columns:1fr}
  section{padding-block:5.5rem}
  .hero .shot-wide{margin-bottom:3rem}
}
@media (max-width:620px){
  .side{display:none}
  .intro{font-size:12px; margin-bottom:2rem}
  :root{--gut:20px}
  .install-k{display:none}
  .spec{grid-template-columns:1fr}
  .spec > div, .spec > div:nth-child(even){padding:1.8rem 0; border-left:0}
  .keep-card{padding:1.2rem 1.2rem 1.3rem}
  .kd-row{grid-template-columns:4.2rem minmax(0,1fr) auto; gap:.6rem}
  .term-body{font-size:12px; padding:1.1rem 1.1rem 1.3rem}
  .exts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .end{padding-block:6rem}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation:none!important; transition:none!important}
  .hero::before{animation:none}
  .anim .rise{opacity:1; transform:none}
}