/* 기본 - 초기화·글자·링크·틀·화면 구간 알약 (#145, docs/11.design-system.md §5)
 * 예전 layout.css(#139)를 흡수했다. 구간은 쪽마다 정하지 않는다 - @media 는 아래 값만:
 *   S ~639 · M 640~1023 · L 1024~1439 · XL 1440~   (max-width 1023·639, XL 여백만 min-width 1440)
 */
@layer base {
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--text);
  font: 400 var(--fs-md)/1.6 var(--font-sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  word-break: keep-all; overflow-wrap: break-word;     /* 한글은 어절 단위로 줄바꿈 */
  display: flex; flex-direction: column;               /* 머리·본문·바닥글을 쌓아 한 화면 쪽(그래프)의 높이가 맞게 */
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: var(--accent-soft); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3, h4 { line-height: 1.3; }
code, kbd, pre { font-family: var(--font-mono); font-size: .92em; }
img, svg { vertical-align: middle; }
[hidden] { display: none !important; }
select { font: inherit; color: var(--text); background-color: var(--surface); border: 1px solid var(--border-strong);
         border-radius: var(--r-md); min-height: var(--ctl-md); padding: 0 8px; }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); width: 16px; height: 16px; flex-shrink: 0; }
select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }

/* 요소 기본값 - 클래스 없이 쓴 단추·입력칸·code 도 새 모양으로(#145 4단계). 예전 .btn 은 ui-btn 으로 옮겼다(#180).
   공용 컴포넌트(.ui-btn·.ui-input)가 components 층이라 이것을 이긴다 */
button {
  background: var(--accent); color: var(--on-accent); border: 1px solid transparent; border-radius: var(--r-md);
  min-height: var(--ctl-md); padding: 0 12px; font: inherit; font-weight: 500; cursor: pointer; font-size: var(--fs-md); line-height: 1.2;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: background var(--dur-1), border-color var(--dur-1);
}
button:hover { background: var(--accent-hover); text-decoration: none; }
button.secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); box-shadow: var(--sh-1); }
button.secondary:hover { background: var(--surface-2); }
button.danger { background: var(--surface); color: var(--danger); border: 1px solid var(--border-strong); }
button.danger:hover { background: var(--danger-soft); border-color: var(--danger); }
input, textarea {
  width: 100%; background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-md); padding: 7px 10px; color: var(--text); font: inherit;
}
/* 체크박스·라디오는 한 줄을 다 차지하지 않는다(위 width:100% 는 글 입력칸만의 것) */
input[type=checkbox], input[type=radio] { width: auto; padding: 0; margin: 0; box-shadow: none; }
input:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }

code { background: var(--surface-2); padding: 2px 6px; border-radius: 4px; font-size: .85em; }

/* 틀 - .wrap 하나. 쪽마다 폭 상자를 두지 않는다 */
.wrap { width: 100%; max-width: calc(var(--page-max) + 2 * var(--gutter)); margin-inline: auto;
        padding-inline: var(--gutter); }

/* 카드 격자 - 폭에 맞춰 칸 수가 바뀐다 */
.grid-auto { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--min, 260px)), 1fr)); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 화면 구간·배포 판(#399) - 상단 막대가 있으면 그 안(오른쪽, --inline), 없으면 오른쪽 위에 떠 있다(랜딩만 왼쪽 아래 --bl).
   평소에는 짧게: 구간 글자(와 상단 막대 안에서는 판 번호). 올리거나 초점이 가면 **아래 줄**(__more)에 화면 폭과 커밋 - 옆으로 늘어나지 않는다 */
.env-badge { position: fixed; right: 8px; top: 8px; z-index: 9000; display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 9px 3px 7px; border-radius: var(--r-full); font: 600 11px/1.2 var(--font-sans);
  color: var(--text-muted); background: color-mix(in srgb, var(--surface) 88%, transparent); border: 1px solid var(--border);
  backdrop-filter: blur(8px); box-shadow: var(--sh-1); opacity: .75; transition: opacity var(--dur-1); cursor: default; }
.env-badge:hover, .env-badge:focus-visible { opacity: 1; outline: none; }
.env-badge .sep, .env-badge .ver { display: none; }
.env-badge svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; flex-shrink: 0; }
.env-badge__col { display: inline-flex; }
.env-badge .bp { display: none; align-items: center; gap: 4px; }
.env-badge .bp b { color: var(--text); }
.env-badge .sep { opacity: .4; }
.env-badge .bp-l { display: inline-flex; }
@media (min-width: 1440px) { .env-badge .bp-l { display: none; } .env-badge .bp-xl { display: inline-flex; } }
@media (max-width: 1023px) { .env-badge .bp-l { display: none; } .env-badge .bp-m { display: inline-flex; } }
@media (max-width: 639px)  { .env-badge .bp-m { display: none; } .env-badge .bp-s { display: inline-flex; } }
/* 아래 줄 - 배지 바로 밑에 뜬다. 왼쪽 끝과 안쪽 여백을 배지와 맞춰, 첫 칸은 구간 글자 밑(화면 폭)·둘째 칸은 판 번호 밑(커밋)에 온다.
   첫 칸의 너비(--env-col)는 _env_badge.html 의 스크립트가 판 번호의 자리로 정한다 */
.env-badge__more { display: none; position: absolute; top: calc(100% + 4px); left: -1px; z-index: 9001; padding: 6px 9px 7px 7px;
  grid-template-columns: var(--env-col, 52px) auto; align-items: start;
  border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--sh-2); white-space: nowrap; }
.env-badge:hover .env-badge__more, .env-badge:focus .env-badge__more, .env-badge:focus-within .env-badge__more { display: grid; }
.env-badge__cell { display: grid; gap: 1px; }
.env-badge__cell small { color: var(--text-subtle); font-size: 10px; font-weight: 500; }
.env-badge__cell b { color: var(--text); font: 600 11px/1.3 var(--font-mono); font-variant-numeric: tabular-nums; }
.env-badge--inline .env-badge__more { padding-left: 8px; padding-right: 10px; }
/* 상단 막대 안의 배지는 올린 쪽 것만 보인다(사장님 2026-10-09) - 구간 글자에 올리면 화면 폭만, 판 번호에 올리면 커밋만.
   둘이 함께 나오면 무엇을 보라는 것인지 흐려진다. 판 번호를 숨기는 좁은 화면과 떠 있는 배지, 키보드 초점은 둘 다 보인다 */
@media (min-width: 1280px) {
  .env-badge--inline:hover .env-badge__more { display: none; }
  .env-badge--inline:has(.env-badge__col:hover) .env-badge__more, .env-badge--inline:has(.ver:hover) .env-badge__more { display: block; }
  .env-badge--inline:has(.env-badge__col:hover) .env-badge__cell:nth-child(2), .env-badge--inline:has(.ver:hover) .env-badge__cell:nth-child(1) { display: none; }
  .env-badge--inline:has(.ver:hover) .env-badge__more { left: calc(var(--env-col, 52px) - 1px); }
  .env-badge--inline .env-badge__col, .env-badge--inline .ver { padding-block: 6px; margin-block: -6px; cursor: default; }
}
/* 화면 오른쪽 끝에 떠 있는 배지는 아래 줄이 화면 밖으로 나가지 않게 오른쪽에 맞춘다 */
.env-badge:not(.env-badge--inline):not(.env-badge--bl) .env-badge__more { left: auto; right: -1px; }
.env-badge--bl { top: auto; right: auto; left: 6px; bottom: 6px; }
.env-badge--bl .env-badge__more { top: auto; bottom: calc(100% + 4px); left: -1px; }
/* 상단 막대 안 - 판 번호는 늘 보인다(짧게) */
.env-badge--inline { position: relative; top: auto; right: auto; opacity: 1; box-shadow: none; backdrop-filter: none; background: var(--surface-2);
  height: 24px; padding: 0 8px; font-weight: 500; }
.env-badge--inline .ver, .env-badge--inline .sep { display: inline; }
.env-badge--inline .ver { font-family: var(--font-mono); color: var(--text-subtle); }
/* 1280px 아래에서는 판 번호를 접는다 - 메뉴 묶음이 다섯이 되면서 1100px 근처에서 마지막 메뉴가 배지에 가렸다. 구간 글자에 올리면 폭과 커밋이 함께 나온다 */
@media (max-width: 1279px) { .env-badge--inline .ver, .env-badge--inline .sep { display: none; } }
@media print { .env-badge { display: none; } }
}