/* afrog.dev — 홈랩 하우스 제도(製圖) 시스템. 잉크는 마스코트 아프록의 올리브.
   골격은 apex-landing(soosin.com 공개 랜딩)과 동일 토큰. */
*,*::before,*::after{box-sizing:border-box}
:root{
  --bg:#131311; --panel:#1C1C19; --panel-2:#232320; --border:#35342E;
  --text:#E7E4DB; --muted:#A29D91; --faint:#8C8779;
  --ink:#ADC19F;        /* hsl(95 22% 69%) — 마스코트 올리브의 파스텔. panel 대비 9.0:1 */
  --ink-fig:#718F5B;    /* 마스코트 원색. 면·보더 전용(텍스트로 쓰면 AA 미달 3.5:1) */
  --on-ink:#12130F;
  --label-size:10.5px; --label-track:.16em;
  --gut:24px;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#E6E5DF; --panel:#FBFAF6; --panel-2:#F2F1EA; --border:#D0CEC4;
         --text:#1E1D19; --muted:#55524A; --faint:#6B675C;
         --ink:#5E744E;   /* 같은 색상각·S20, 명도만 내림. panel 대비 4.9:1 */
         --on-ink:#FBFAF6; }
}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:"IBM Plex Sans KR",system-ui,-apple-system,sans-serif;
  font-size:15px;line-height:1.7;
  word-break:keep-all;overflow-wrap:break-word;text-wrap:pretty;
  /* 콘텐츠가 짧아도 바닥 title block 이 화면 하단에 붙게. 랜딩은 한 화면이라
     이게 없으면 큰 모니터에서 푸터가 중간에 떠 버린다. */
  min-height:100vh;display:flex;flex-direction:column}
@supports (min-height:100dvh){ body{min-height:100dvh} }
main{flex:1 0 auto}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}
.mono{font-family:"IBM Plex Mono","IBM Plex Sans KR",monospace}
.wrap{max-width:1080px;margin:0 auto;
  padding-left:max(var(--gut),env(safe-area-inset-left));
  padding-right:max(var(--gut),env(safe-area-inset-right))}

/* 상단 = 도면 title block */
.tb{border-bottom:1px solid var(--border);background:var(--panel)}
.tb-in{display:flex;align-items:center;gap:12px;padding:16px 0}
.tb-mark{width:30px;height:30px;flex:0 0 30px;display:block;border-radius:50%}
.wordmark{font-weight:600;font-size:17px;letter-spacing:-.01em;white-space:nowrap}
.tb-tag{font-size:var(--label-size);letter-spacing:var(--label-track);
  text-transform:uppercase;color:var(--faint);margin-left:auto;white-space:nowrap}

/* 바닥 */
.ft{border-top:1px solid var(--border);background:var(--panel);
  padding:18px 0 max(18px,env(safe-area-inset-bottom));font-size:12px;color:var(--faint)}
.ft-in{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center}
.ft a{color:var(--muted);border-bottom:1px solid var(--border)}
.ft a:hover{color:var(--ink)}
.ft .r{margin-left:auto}

::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--border);
  border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--faint);background-clip:padding-box}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

@media (max-width:720px){
  :root{ --gut:16px }
  .tb-tag{display:none}
  .ft .r{margin-left:0}
}