/* 무위다라니
   따뜻한 오프화이트 바탕, 가는 큰 글자, 조용한 무채색 UI.
   색은 UI가 아니라 그림에서 나오게 둔다. */

:root{
  --bg:#f5f5f2; --fg:#171717; --muted:#77746c; --line:#e4e2da;
  --card:#fffefc; --accent:#a8853c; --chip:#eeece4;
  --mono:ui-monospace,SFMono-Regular,"SF Mono","IBM Plex Mono",Menlo,monospace;
  --sans:system-ui,-apple-system,"Apple SD Gothic Neo","Pretendard",
         "Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --serif:"Iowan Old Style","Apple Garamond",Georgia,
          "Apple SD Gothic Neo",serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#131310; --fg:#ece9e2; --muted:#8f8c83; --line:#282620;
    --card:#191813; --accent:#d4ab5c; --chip:#221f19;
  }
}

*{box-sizing:border-box}
/* 첫 화면 픽셀 띠가 100vw 로 화면을 가로지른다. 100vw 는 세로 스크롤바 폭까지
   포함하므로 그대로 두면 7px 쯤 가로로 스크롤된다. html·body 양쪽을 막아야
   실제로 걸린다(overflow-x:clip 은 크롬에서 스크롤을 막지 못했다). */
html,body{overflow-x:hidden}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--sans); line-height:1.75;
  font-size:16px; letter-spacing:-0.01em;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{max-width:100%; height:auto}

/* 본문 기둥. 양옆 실선이 화면 전체를 세로로 가른다 — 참고한 그리드 느낌. */
.wrap{
  max-width:760px; margin:0 auto; padding:0 40px;
  border-left:1px solid var(--line); border-right:1px solid var(--line);
  min-height:100vh;
}
@media (max-width:820px){
  .wrap{border:0; padding:0 22px; max-width:none}
}

/* ── 머리말 ─────────────────────────── */
header.site{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; padding:28px 0 0;
}
.brand{text-decoration:none; display:flex; align-items:baseline; gap:11px}
.mark{
  font-family:var(--serif); font-size:17px; letter-spacing:.01em;
  color:var(--fg);
}
.brand-name{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  color:var(--muted); text-transform:uppercase;
}
header.site nav{
  display:flex; gap:2px; font-family:var(--mono);
  font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
}
header.site nav a{
  text-decoration:none; color:var(--muted);
  padding:6px 12px; border-radius:99px; transition:background .15s, color .15s;
}
header.site nav a:hover{color:var(--fg); background:var(--chip)}
/* 지금 보고 있는 자리. 낱글에서도 '기록'이 켜진다. */
header.site nav a.on{color:var(--fg)}

/* ── 첫 화면 ────────────────────────── */
.hero{padding:104px 0 0}
.hero h1{
  font-size:clamp(34px,6.4vw,52px); line-height:1.16; margin:0 0 28px;
  font-weight:400; letter-spacing:-0.035em; max-width:11em;
}
.hero p{
  font-size:16px; color:var(--muted); margin:0 0 13px;
  max-width:32em; line-height:1.8;
}
.hero p:last-child{margin-bottom:0}
.hero a{color:var(--fg); text-decoration:underline;
        text-decoration-color:var(--line); text-underline-offset:4px}
.hero a:hover{text-decoration-color:var(--accent)}

/* 첫 화면 픽셀 띠 — 본문 기둥을 뚫고 화면 끝까지 나간다.
   색은 UI가 아니라 이 그림에서만 나온다. */
.scene{
  width:100vw; margin:76px 0 0 calc(50% - 50vw); line-height:0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.scene img{
  display:block; width:100%; height:auto;
  image-rendering:pixelated; /* 확대해도 픽셀이 뭉개지지 않게 */
}
/* 좁은 화면에서 폭에 맞춰 높이까지 줄이면 띠가 90px 로 납작해져
   문·바위가 무엇인지 안 보인다. 높이를 지키고 좌우를 잘라
   가장 알아보기 쉬운 왼쪽(문)이 남게 한다. */
@media (max-width:820px){
  .scene{margin-top:60px}
  .scene img{height:190px; object-fit:cover; object-position:12% bottom}
}
/* 어두운 화면에서 원본 채도로 두면 이 띠만 혼자 튄다. */
@media (prefers-color-scheme:dark){
  .scene img{filter:brightness(.78) saturate(.85)}
}

.page-head{padding:88px 0 0; margin-bottom:16px}
.page-head h1{
  font-size:clamp(28px,5vw,40px); line-height:1.2; margin:0;
  font-weight:400; letter-spacing:-0.035em; max-width:16em;
}
.page-head time{
  display:block; font-family:var(--mono); font-size:11.5px;
  color:var(--muted); margin-bottom:16px; letter-spacing:.1em;
}
.page-head .lede{font-size:16px; color:var(--muted); margin:18px 0 0; max-width:32em}

/* ── 구획 ───────────────────────────── */
section{padding:88px 0 0}
/* 라벨은 모노 대문자. 다만 자간을 로마자 기준(.16em)으로 두면
   "만든 것" 같은 한글이 낱자로 흩어져 보여 .1em 으로 낮췄다. */
h2{
  font-family:var(--mono); font-size:11.5px; font-weight:400;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  margin:0 0 24px; padding-bottom:14px; border-bottom:1px solid var(--line);
}

/* ── 만든 것 ────────────────────────── */
.work{
  display:block; text-decoration:none; padding:20px 22px;
  border:1px solid var(--line); border-radius:10px; background:var(--card);
  margin-bottom:8px; transition:border-color .15s, transform .15s;
}
a.work:hover{border-color:var(--fg); transform:translateY(-1px)}
.work-top{display:flex; align-items:baseline; gap:11px; flex-wrap:wrap; margin-bottom:8px}
.work h3{font-size:18px; margin:0; font-weight:500; letter-spacing:-0.025em}
.chip{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); background:var(--chip);
  border-radius:99px; padding:4px 10px; white-space:nowrap;
}
.chip.live{color:var(--fg)}
.work p{margin:0; color:var(--muted); font-size:15px; line-height:1.75; max-width:36em}
/* 플랫폼·버전은 첫 줄 오른쪽 끝으로 밀어 붙인다. */
.work .meta{
  font-family:var(--mono); font-size:11px; color:var(--muted);
  letter-spacing:.08em; margin-left:auto; white-space:nowrap;
}
a.work .meta::after{content:" ↗"; letter-spacing:0}

/* ── 기록 목록 ──────────────────────── */
.rows{border-top:1px solid var(--line)}
.row{
  display:flex; gap:22px; align-items:baseline; text-decoration:none;
  padding:20px 6px; border-bottom:1px solid var(--line);
  transition:background .15s, padding-left .15s;
}
.row:hover{background:var(--card); padding-left:12px}
.row time{
  font-family:var(--mono); font-size:11.5px; color:var(--muted);
  white-space:nowrap; flex:none; letter-spacing:.08em;
}
.row-body{display:block}
.row-title{display:block; font-size:16.5px; font-weight:400; letter-spacing:-0.025em}
.row-summary{margin:5px 0 0; font-size:14px; color:var(--muted); line-height:1.7}
.more{margin:26px 0 0; font-family:var(--mono); font-size:11.5px; letter-spacing:.1em}
.more a{color:var(--muted); text-decoration:none}
.more a:hover{color:var(--fg)}

/* ── 글 본문 ────────────────────────── */
.post{padding-top:26px; font-size:16.5px; max-width:34em}
.post h2{
  font-family:var(--sans); font-size:21px; font-weight:500;
  letter-spacing:-0.03em; text-transform:none; color:var(--fg);
  border:0; padding:0; margin:48px 0 14px;
}
.post h3{font-size:17px; font-weight:500; margin:34px 0 10px; letter-spacing:-0.025em}
.post p{margin:0 0 22px; line-height:1.85}
.post ul,.post ol{margin:0 0 22px; padding-left:20px}
.post li{margin-bottom:8px; line-height:1.85}
.post blockquote{
  margin:28px 0; padding:2px 0 2px 20px;
  border-left:1px solid var(--fg); color:var(--muted);
}
.post blockquote p{margin:0}
.post a{color:var(--fg); text-decoration:underline;
        text-decoration-color:var(--line); text-underline-offset:4px}
.post a:hover{text-decoration-color:var(--accent)}
.post hr{border:0; border-top:1px solid var(--line); margin:48px 0}
.post code{
  font-family:var(--mono); font-size:.86em;
  background:var(--chip); border-radius:5px; padding:2px 6px;
}
.post pre{
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:18px; overflow-x:auto; font-size:13px; line-height:1.7;
}
.post pre code{background:none; padding:0; font-size:inherit}
.post figure{margin:32px 0}
.post figure img{border-radius:12px; display:block}
/* 픽셀아트는 흐려지지 않게 원본 그대로 확대한다 */
.post figure img.pixel{image-rendering:pixelated; border-radius:0}

/* ── 꼬리말 ─────────────────────────── */
footer{
  margin-top:112px; padding:36px 0 80px; border-top:1px solid var(--line);
  font-size:12.5px; color:var(--muted); line-height:2.1;
}
/* 사업자 정보는 줄바꿈을 고정하지 않고 폭에 맡긴다.
   항목 자체(사업자등록번호 같은 것)만 중간에서 끊기지 않게 막는다. */
/* 항목을 flex 로 늘어놓아야 사이에 공백 문자가 없어도 줄이 바뀐다.
   구분 막대는 쓰지 않는다. 앞 항목에 붙이면 줄 끝에, 뒤 항목에 붙이면
   줄 앞에 막대만 홀로 남는다. 간격만으로 항목을 나눈다. */
.biz{font-family:var(--mono); font-size:11px; margin:0;
     letter-spacing:.04em; line-height:1.95; opacity:.85;
     display:flex; flex-wrap:wrap; align-items:baseline;
     column-gap:20px; row-gap:0}
.biz span{white-space:nowrap}
.sep{opacity:.35; padding:0 7px}
footer a{color:var(--muted); text-decoration:none}
footer a:hover{color:var(--fg)}
.policy{margin:0 0 16px; font-family:var(--mono); font-size:11px;
        letter-spacing:.1em; text-transform:uppercase}