/* ═══════════════════════════════════════════════════════════
   Project TwoOne — 사이트 공통

   이곳은 액자다. 그림이 아니다.
   색은 Ink 와 Paper 둘뿐이고, 나머지 색은 프로젝트의 화면이 들고 온다.
   올리브(#6E7A5F)는 gobooki 마스코트 팔레트의 색이라 쓰지 않는다.
   뼈대는 두 단이다. 왼쪽은 붙어 있고 오른쪽만 흐른다.
   ═══════════════════════════════════════════════════════════ */
:root{
  --bg:#F7F5F2;        /* Paper */
  --text:#111111;      /* Ink */
  --card:#FDFCFA; --sub:#8A867E; --border:#E5E1DA; --track:#EAE6DF;
  --line:#111111;      /* 링크 밑줄 — 예전엔 올리브였다 */
  --shadow:0 1px 2px rgba(17,17,17,.06);

  /* 이름과 메뉴는 고정폭으로. 적어 두는 자리라는 뜻이다. */
  --font-wm:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --font-serif:'Gowun Batang',serif;
  --font-sans:-apple-system,BlinkMacSystemFont,'Segoe UI','Apple SD Gothic Neo','Noto Sans KR',sans-serif;

  --r:3px; --page:1180px; --sidew:300px; --gap:76px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#151413; --card:#1D1C1A; --text:#EDEAE2; --sub:#98948C;
    --border:#2D2B28; --track:#312F2B; --line:#EDEAE2;
    --shadow:0 1px 2px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --bg:#151413; --card:#1D1C1A; --text:#EDEAE2; --sub:#98948C;
  --border:#2D2B28; --track:#312F2B; --line:#EDEAE2;
  --shadow:0 1px 2px rgba(0,0,0,.4);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-serif); font-size:16px; line-height:1.8;
  word-break:keep-all; overflow-wrap:break-word; -webkit-font-smoothing:antialiased;
}
a:focus-visible{outline:2px solid var(--text); outline-offset:3px}

/* ── 두 단 뼈대 ──────────────────────────────────────────── */
.wrap{
  max-width:var(--page); margin:0 auto; padding:0 36px;
  display:grid; grid-template-columns:var(--sidew) 1fr; gap:var(--gap);
  align-items:start;
}

/* 왼쪽 — 스크롤해도 남는다 */
.side{
  position:sticky; top:0; min-height:100vh; padding:66px 0 48px;
  display:grid; grid-template-rows:auto auto auto 1fr;
  grid-template-areas:"wm" "h1" "nav" "cr";
}
.side .wm{
  grid-area:wm; font-family:var(--font-wm); font-size:15px; font-weight:500;
  color:var(--text); text-decoration:none; letter-spacing:-.01em; width:max-content;
}
.side .h1{grid-area:h1; margin-top:26px}
.side nav{
  grid-area:nav; margin-top:34px; display:flex; flex-direction:column; gap:10px;
  font-family:var(--font-wm); font-size:12.5px;
}
.side nav a{
  color:var(--sub); text-decoration:none; width:max-content;
  border-bottom:1px solid transparent; padding-bottom:2px;
}
.side nav a:hover{color:var(--text)}
.side nav a[aria-current]{color:var(--text); border-bottom-color:var(--text)}
.side .cr{
  grid-area:cr; align-self:end;
  font-family:var(--font-wm); font-size:11px; color:var(--sub);
}

/* 오른쪽 — min-width:0 이 없으면 긴 낱말이 단을 밀어낸다 */
.feed{padding:66px 0 96px; min-width:0}

/* ── 글자 ────────────────────────────────────────────────── */
.h1{
  font-family:var(--font-serif); font-weight:700;
  font-size:24px; line-height:1.6; margin:0; white-space:pre-line;
}
.feed .h1{font-size:clamp(24px,2.6vw,32px); line-height:1.5}
.eyebrow{
  font-family:var(--font-sans); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--sub); margin:0;
}
.lead{margin:20px 0 0; font-size:15.5px; line-height:1.85; color:var(--text); opacity:.74; max-width:52ch}

/* ── 프로젝트 묶음 ───────────────────────────────────────── */
.grp{margin-bottom:54px}
.grp:last-child{margin-bottom:0}
.grp > .eyebrow{padding-bottom:13px; border-bottom:1px solid var(--text); display:block}
.grp ul{margin:0; padding:0; list-style:none}
.grp li{border-bottom:1px solid var(--border)}
.grp a,.grp .row{display:block; padding:24px 2px; text-decoration:none; color:inherit}
.grp a:hover{background:var(--card)}
.grp a:focus-visible{outline:2px solid var(--text); outline-offset:-2px}

.grp .top{display:flex; align-items:baseline; justify-content:space-between; gap:20px}
.grp .nm{font-family:var(--font-serif); font-size:20px; font-weight:700; line-height:1.4}
.grp .st{font-family:var(--font-sans); font-size:11.5px; color:var(--sub); white-space:nowrap}
.grp .ds{margin:9px 0 0; font-family:var(--font-sans); font-size:13.5px; color:var(--sub); line-height:1.7}
.grp .go{
  display:inline-block; margin-top:13px; font-family:var(--font-sans); font-size:12px;
  color:var(--text); border-bottom:1px solid var(--line); padding-bottom:1px;
}
.grp a:hover .go{border-bottom-width:2px}

/* 화면이 있는 줄만 커진다. 없으면 글자 줄로 남는다. */
.grp .shot{margin-top:16px; border:1px solid var(--border); overflow:hidden; background:var(--track)}
.grp .shot img{
  display:block; width:100%; height:auto;   /* height 속성을 덮지 않으면 aspect-ratio 가 죽는다 */
  aspect-ratio:16/7; object-fit:cover; object-position:top;
}
.grp a:hover .shot{border-color:var(--text)}

/* 목록 다음에 붙는 한 줄 */
.after{margin-top:26px; font-family:var(--font-sans); font-size:12.5px}
.after a{color:var(--text); text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:1px}
.after a:hover{border-bottom-width:2px}

/* ── 문서 (개인정보 처리방침 등) ─────────────────────────── */
.doc{max-width:62ch}
.doc .kicker{font-family:var(--font-sans); font-size:12.5px; color:var(--sub); margin:0 0 10px}
.doc h2{font-family:var(--font-serif); font-size:18px; font-weight:700; line-height:1.5;
  margin:44px 0 0; padding-top:18px; border-top:1px solid var(--border)}
.doc h2:first-of-type{margin-top:34px}
.doc p{margin:12px 0 0; font-size:15px; line-height:1.85}
.doc ul{margin:12px 0 0; padding-left:19px}
.doc li{margin:7px 0; font-size:15px; line-height:1.8}
.doc .small{font-family:var(--font-sans); font-size:13px; color:var(--sub); line-height:1.75}
.doc dl{margin:14px 0 0}
.doc dt{font-family:var(--font-sans); font-size:12.5px; color:var(--sub); margin-top:14px}
.doc dd{margin:4px 0 0; font-size:15px; line-height:1.8}
.doc .stamp{margin-top:46px; padding-top:18px; border-top:1px solid var(--text);
  font-family:var(--font-sans); font-size:12.5px; color:var(--sub)}

/* ── 설명 표 (Contact) ───────────────────────────────────── */
.defs{margin:0; padding:0}
.defs > div{
  display:grid; grid-template-columns:150px 1fr; gap:24px;
  padding:20px 2px; border-bottom:1px solid var(--border);
}
.defs > div:first-child{border-top:1px solid var(--border)}
.defs dt{font-family:var(--font-sans); font-size:12.5px; color:var(--sub); letter-spacing:.03em}
.defs dd{margin:0; font-size:15px; line-height:1.8}

.grp > .lead{margin-top:26px}
.mailrow{margin:20px 0 0}
/* 문장 끝에 붙는 링크는 줄을 혼자 차지하지 않게 */
.defs dd .inline{display:inline-block; margin-top:6px}
.mail{
  display:inline-block; font-family:var(--font-sans); font-size:19px;
  color:var(--text); text-decoration:none;
  border-bottom:1px solid var(--line); padding-bottom:2px;
}
.mail:hover{border-bottom-width:2px}

.inline{color:var(--text); text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:1px}
.inline:hover{border-bottom-width:2px}

/* ── 좁은 화면용 바닥 — 넓은 화면에서는 왼쪽 단이 대신한다 ── */
footer.site{display:none; border-top:1px solid var(--border)}
footer.site .in{
  padding:24px 20px 40px; font-family:var(--font-wm); font-size:11px; color:var(--sub);
}

/* ═══ 좁은 화면 ═══════════════════════════════════════════
   두 단이 한 단이 된다. 왼쪽 단은 머리띠가 되고,
   저작권만 페이지 맨 아래로 내려간다.
   ═══════════════════════════════════════════════════════ */
@media (max-width:900px){
  .wrap{grid-template-columns:1fr; gap:0; padding:0 20px}

  .side{
    position:static; min-height:0; padding:20px 0 24px;
    grid-template-rows:auto auto; grid-template-columns:1fr auto;
    grid-template-areas:"wm nav" "h1 h1";
    align-items:center; border-bottom:1px solid var(--border);
  }
  .side .wm{font-size:14px}
  .side .h1{margin-top:22px; font-size:21px; line-height:1.62}
  .side nav{
    margin-top:0; flex-direction:row; gap:16px; justify-self:end;
    font-size:12.5px;
  }
  /* 손가락이 닿을 만큼 */
  .side nav a{padding:10px 0}
  .side .cr{display:none}

  .feed{padding:30px 0 64px}
  footer.site{display:block}

  .grp{margin-bottom:44px}
  .grp a,.grp .row{padding:20px 0}
  /* 이름과 분류가 한 줄에서 서로 밀지 않게 */
  .grp .top{display:block}
  .grp .nm{font-size:19px; display:block}
  .grp .st{display:block; margin-top:5px; white-space:normal}
  .grp .ds{margin-top:7px}
  /* 좁은 화면에서 16:7 은 너무 납작하다 */
  .grp .shot img{aspect-ratio:16/10}

  .defs > div{grid-template-columns:1fr; gap:5px; padding:16px 0}
  .grp > .lead{margin-top:26px}
.mailrow{margin:20px 0 0}
/* 문장 끝에 붙는 링크는 줄을 혼자 차지하지 않게 */
.defs dd .inline{display:inline-block; margin-top:6px}
.mail{font-size:17px}
}

@media (max-width:370px){
  .side{grid-template-columns:1fr; grid-template-areas:"wm" "nav" "h1"}
  .side nav{justify-self:start; margin-top:6px; gap:14px}
  .side .h1{margin-top:18px; font-size:20px}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}