/* h57studio 공용 스타일.

   방향: 큰 글자, 넓은 여백, 선으로 나누기. 둥근 카드·그림자·배지·알약 버튼은 쓰지 않는다.
   설명은 상세 페이지에만 두고, 목록은 번호 · 이름 · 짧은 갈래만 보여 준다.

   두 군데에서 읽는다.
   - 첫 화면(index.html) — 자기 스타일이 안에 따로 있고, 여기서는 작업 목록과 바닥글만 빌려 쓴다.
   - build.py 가 만드는 페이지(프로젝트 · 로그 · 소개 · 처리방침) — 전부 여기 규칙으로 그린다.
   그래서 h1·p 같은 맨 태그 규칙은 반드시 body.sub 아래에 둔다. 밖에 두면 첫 화면까지 바뀐다. */

:root {
  --bg: #ffffff;
  --fg: #111111;
  --muted: #8a8a8e;
  --line: #e4e4e6;
  --accent: #7a3fb8;   /* 로고의 점. 강조는 이 색 하나만 */
  --logo-size: clamp(30px, 5vw, 50px);   /* 로고와 바닥글 메뉴가 같이 쓴다 */
}
/* 스크롤바가 생기는 페이지와 안 생기는 페이지에서 로고가 옆으로 몇 px 밀리지 않게 */
html { scrollbar-gutter: stable; }

/* 작은 대문자 이름표 — 섹션 이름, 번호, 갈래, 메뉴가 전부 이 모양이다 */
.label {
  font-size: 11px; font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--muted);
}
.label a { color: inherit; text-decoration: none; }
.label a:hover { color: var(--fg); }

/* ── 줄 목록 — /devlog/ 가 쓴다 ─────────────── */
.works { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--fg); }
.works > li { border-bottom: 1px solid var(--line); }
.work {
  display: grid;
  grid-template-columns: 3em 1fr auto;
  align-items: baseline;
  gap: 0 20px;
  padding: 16px 0 14px;
  color: var(--fg);
  text-decoration: none;
}
.work .n { font-size: 12px; letter-spacing: .06em; color: var(--muted); font-variant-numeric: tabular-nums; }
.work .name {
  font-size: clamp(30px, 5.6vw, 68px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: .95;
  word-break: keep-all;
  transition: color .15s;
}
.work .kind { font-size: 11px; font-weight: 700; letter-spacing: -0.01em; color: var(--muted); text-align: right; white-space: nowrap; }
.work:hover .name, .work:focus-visible .name { color: var(--accent); }
.work:focus-visible { outline: none; }
/* 로그 목록 — 같은 목록인데 이름 위에 연재 이름, 아래에 한국어 제목이 붙는다 */
/* 첫 줄: 왼쪽 번호·날짜, 오른쪽 카테고리(연재 이름). 그 아래 제목, 한글 제목 */
/* 카테고리 칸 이름은 lcat — .cat 은 Projects 갈래 제목(.sub .cat, 위 여백 36px)과 겹친다 */
.works.log .work { grid-template-columns: 1fr auto; align-items: start; padding: 14px 0 13px; }
.works.log .n { margin-bottom: 5px; }
.works.log .lcat { font-size: 12px; font-weight: 700; letter-spacing: -0.01em; color: var(--accent); text-align: right; white-space: nowrap; }
.works.log .name { grid-column: 1 / -1; font-size: clamp(19px, 2.2vw, 26px); line-height: 1.25; }
.works.log .sub { grid-column: 1 / -1; margin-top: 4px; color: var(--muted); font-size: 13px; }

/* ── 바닥글 — 모든 페이지 공통. 메뉴는 로고와 같은 글꼴·크기 ─────── */
.site-foot {
  margin-top: 0;
  padding: 16px 0 36px;
  border-top: 1px solid var(--fg);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.8;
}
.site-foot .menu { display: flex; flex-wrap: wrap; gap: 4px 0.6em; margin: 0 0 20px; }
.site-foot .menu a {
  color: var(--fg); text-decoration: none;
  font-size: var(--logo-size); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1;
}
/* 지금 보고 있는 페이지 */
.site-foot .menu a:hover, .site-foot .menu a[aria-current] { color: var(--accent); }
.site-foot p { margin: 0; }
/* 주소처럼 긴 칸이 있어서 줄바꿈을 막지 않는다. 막으면 폰에서 바닥글이 옆으로 삐져나간다 */
.site-foot a { color: inherit; }
.site-foot .copy { margin-top: 12px; }

/* ══ 여기부터는 build.py 가 만드는 페이지 전용 ═══════════════════ */

body.sub {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.75 "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI",
        "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  -webkit-font-smoothing: antialiased;
}
body.sub * { box-sizing: border-box; }
/* 틀은 첫 화면(index.html 의 .page)과 같다 — 폭·여백·로고 크기가 같아야 로고가 제자리에 있다.
   위 · 가운데 · 아래 세 칸이라 내용이 짧아도 바닥글이 화면 바닥에 붙는다. */
.sub .wrap {
  min-height: 100dvh;
  display: grid; grid-template-rows: auto 1fr auto; gap: 28px;
  max-width: 1180px; margin: 0 auto; padding: 40px 28px 32px;
}
.sub .top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
/* Log 카테고리 드롭다운 — 로고 줄 오른쪽 끝. 브라우저 기본 select 를 줄 하나짜리 모양으로 */
.sub .cats { margin-top: 4px; }
.sub .cats select {
  appearance: none; -webkit-appearance: none;
  padding: 6px 28px 6px 12px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 700; letter-spacing: -0.01em; color: var(--fg);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237a3fb8' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 11px center;
}
.sub .cats select:hover, .sub .cats select:focus { border-color: var(--accent); outline: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.works > li[hidden] { display: none; }
.sub .top .logo { color: var(--fg); text-decoration: none; font-size: var(--logo-size); font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.sub .top .logo span { color: var(--accent); }

.sub main { padding: 60px 0 72px; min-width: 0; }
/* 페이지 이름·설명 줄을 걷어내서 맨 앞에 오는 것이 바뀐다. 무엇이 오든 위 여백은 main 이 맡는다 */
.sub main > :first-child { margin-top: 0; }
.sub a { color: inherit; }

/* 큰 제목 — 페이지마다 하나 */
.sub .title {
  margin: 0;
  font-size: var(--logo-size);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  word-break: keep-all;
}
/* 프로젝트 이름 줄 — 왼쪽 이름, 오른쪽 끝에 실행 버튼 */
.sub .head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
/* 폰에서 이름이 길면 버튼을 밑으로 내리지 않고 이름이 두 줄이 된다 */
.sub .head .title { min-width: 0; }
.sub .crumb { margin: 0 0 22px; }
.sub .ko { margin: 14px 0 0; color: var(--muted); font-size: 14px; }
.sub .tagline { margin: 22px 0 0; max-width: 32em; font-size: clamp(18px, 2.1vw, 24px); line-height: 1.45; letter-spacing: -0.01em; }
.sub .statement { margin: 30px 0 0; max-width: 20em; font-size: clamp(26px, 4vw, 48px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.12; }


/* 사실 한 줄 — Kind / Platform / Year / Status */
.sub .facts { display: grid; grid-template-columns: repeat(4, 1fr); margin: 32px 0 0; border-top: 1px solid var(--fg); }
.sub .facts div { padding: 12px 16px 14px 0; border-bottom: 1px solid var(--line); }
.sub .facts dt { font-size: 11px; font-weight: 700; letter-spacing: -0.01em; color: var(--muted); }
.sub .facts dd { margin: 4px 0 0; font-size: 14px; }

.sub .open {
  display: inline-block; flex: none;
  color: var(--fg); text-decoration: none;
  font-size: 15px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap;
  border-bottom: 2px solid var(--fg); padding-bottom: 3px;
}
.sub .open:hover { color: var(--accent); border-color: var(--accent); }
.sub .aside-link { display: block; margin-top: 14px; font-size: 12px; color: var(--muted); }

/* 정보 칸 — 왼쪽 이름표, 오른쪽 내용. 스위스 타이포의 두 칸 */
.sub .blocks { margin-top: 72px; border-bottom: 1px solid var(--line); }
.sub .block { display: grid; grid-template-columns: 220px minmax(0, 680px); gap: 0 40px; padding: 26px 0 14px; border-top: 1px solid var(--line); }
.sub .block h2 { margin: 3px 0 12px; font-size: 11px; font-weight: 700; letter-spacing: -0.01em; color: var(--muted); }
.sub .block p { margin: 0 0 12px; word-break: keep-all; }
.sub .block ul { list-style: none; margin: 0 0 12px; padding: 0; }
.sub .block li { margin: 0 0 4px; word-break: keep-all; }
.sub .block ul > li::before { content: "— "; color: var(--muted); }
/* 번호 목록 — 편집기의 '1. 목록' 으로 바꾼 것. 줄표 대신 숫자 */
.sub .block ol { margin: 0 0 12px; padding-left: 1.4em; }
.sub .block .dim { color: var(--muted); font-size: 13px; }

.sub code, .sub kbd { font: 12.5px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; padding: 1px 4px; background: #f4f4f5; }
.sub table { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: 14px; }
.sub th, .sub td { padding: 7px 12px 7px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; word-break: keep-all; }
.sub th { color: var(--muted); font-weight: 600; white-space: nowrap; }
.sub .table-scroll { overflow-x: auto; }
/* 명령어 한 줄은 줄바꿈하면 뜻이 달라져서, 줄은 그대로 두고 그 칸만 옆으로 넘긴다 */
.sub pre { margin: 0 0 16px; padding: 12px 14px; overflow-x: auto; background: #f4f4f5; font-size: 13px; line-height: 1.6; }
.sub pre code { padding: 0; background: none; }

/* 읽는 글 — 로그와 처리방침 */
.sub .read { max-width: 680px; margin-top: 64px; }
.sub .read h2 { margin: 44px 0 12px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 16px; letter-spacing: -0.01em; }
.sub .read h3 { margin: 24px 0 8px; font-size: 15px; }
.sub .read p { margin: 0 0 16px; word-break: keep-all; }
.sub .read ul, .sub .read ol { margin: 0 0 16px; padding-left: 20px; }
.sub .read li { margin-bottom: 6px; word-break: keep-all; }
.sub .read .lede { font-size: 17px; }
.sub .read .note { margin: 24px 0; padding: 14px 0; border-top: 1px solid var(--fg); border-bottom: 1px solid var(--line); color: var(--muted); font-size: 14px; }

/* /projects/ — 아이콘 타일을 갈래별로. auto-fill 이라 칸 수를 화면 폭이 정한다(폰 둘, 넓으면 일곱) */
.sub .cat { margin: 36px 0 14px; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; color: var(--muted); }
.sub .cat:first-child { margin-top: 0; }
.sub .applist { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 16px; }
.sub .app {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 24px 12px 20px;
  min-height: 200px;   /* 설명이 한 줄인 타일도 두 줄인 타일과 키가 같게. 같은 줄은 grid 가 맞춘다 */
  border: 1px solid var(--line); border-radius: 18px; background: #faf9fc;
  color: inherit; text-decoration: none;
  transition: border-color .15s, transform .15s;
}
.sub .app:hover { border-color: var(--accent); transform: translateY(-2px); }
.sub .app .mark { flex: none; width: 64px; height: 64px; border-radius: 16px; object-fit: cover; }
/* 이름은 두 줄까지. keep-all 이 없으면 '앱 개발 스케쥴러' 가 칸을 넘친다 */
.sub .app .name { font-weight: 700; font-size: 13px; line-height: 1.4; text-align: center; word-break: keep-all; }
/* 설명은 두 줄까지. 넘치면 말줄임 — 칸 폭이 화면마다 달라서 글자 수로는 못 맞춘다 */
.sub .app .desc {
  margin-top: -10px;   /* 이름에 붙인다(gap 16 → 6) */
  font-size: 12px; line-height: 1.45; color: var(--muted);
  text-align: center; word-break: keep-all;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}

.sub .next { display: flex; justify-content: space-between; gap: 16px; margin-top: 64px; padding-top: 14px; border-top: 1px solid var(--fg); }
.sub .next a { text-decoration: none; }
.sub .next a:hover { color: var(--accent); }
.sub .next .to { font-size: clamp(22px, 3.4vw, 40px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; }

@media (max-width: 760px) {
  .sub .wrap { padding: 28px 20px 24px; gap: 22px; }
  .sub main { padding: 40px 0 56px; }
  .sub .facts { grid-template-columns: repeat(2, 1fr); }
  .sub .block { grid-template-columns: 1fr; padding-top: 20px; }
  .sub .blocks { margin-top: 48px; }
  .sub .read { margin-top: 44px; }
  .sub .next { flex-direction: column; }
  .sub .open { font-size: 13px; }
}