/* CODE: 직접 만든 사이트 소개. 3열 반듯한 칸(브라우저 창 모양 틀 안에 화면 캡처 16:10) + 아래에 상태·이름·한 줄 소개. 공통 모양은 /lib/site.css */
.site-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px var(--gap);
  padding: 36px 0 80px;
}
.site { display: block; margin: 0; color: inherit; text-decoration: none; animation: site-in .6s ease both; animation-delay: calc(var(--i, 0) * 40ms); }
/* 브라우저 창 모양 틀(사용자 지시 2026-10-07): 얇은 회색 띠에 점 세 개 + 주소 칸, 그 아래 캡처 */
.browser {
  display: block; overflow: hidden; border-radius: 8px; background: #fff;
  border: 1px solid rgba(60, 90, 140, .16); box-shadow: 0 16px 34px -22px rgba(30, 34, 40, .35);
}
.browser-bar { display: flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; background: #e3e9f2; border-bottom: 1px solid rgba(60, 90, 140, .1); } /* 일반 브라우저 같은 옅은 푸른 회색(2026-10-07 사용자 요청) */
.browser-bar i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #c4cddb; }
.browser-url {
  flex: 1; min-width: 0; margin: 0 6px 0 8px; height: 14px; border-radius: 7px; background: #fff;
  font: 400 9px/14px var(--sans); color: var(--faint); text-align: center; letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.site-shot { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--c, #e6e8ea); }
.site-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transition: opacity .5s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.site-shot img.loaded { opacity: 1; }
/* 캡처가 없는 사이트(맥북 전용·만드는 중): 옅은 칸에 흐린 심볼만 */
.site-shot.empty { display: grid; place-items: center; background: rgba(255, 255, 255, .35); }
.site-shot.empty .mark { width: 14%; height: auto; opacity: .12; filter: grayscale(1); }
/* 주소 툴팁(2026-10-08 사용자 요청): 미리보기에 커서를 올리면 캡처 왼쪽 아래에 주소가 작게. 공개 사이트만(code.js), 마우스 기기만 */
.browser { position: relative; }
.shot-tip {
  position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px); padding: 4px 9px; border-radius: 4px;
  background: rgba(24, 26, 30, .82); color: #fff; font: 400 11px/1.4 var(--sans); letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
  opacity: 0; transform: translateY(3px); transition: opacity .2s ease, transform .2s ease;
}
@media (hover: hover) { .browser:hover .shot-tip { opacity: 1; transform: none; } }
@media (hover: none) { .shot-tip { display: none; } }
.site-info { padding: 14px 4px 0; text-align: center; font-family: var(--serif); line-height: 1.5; }
.site-state { display: block; margin-top: 7px; font: 500 10.5px var(--sans); letter-spacing: .14em; color: var(--faint); }
.site-name { display: block; font-size: 17px; font-weight: 700; color: var(--ink); word-break: keep-all; }
.site-sum { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); word-break: keep-all; text-wrap: pretty; }
a.site .site-name::after { content: ' ↗'; font-family: var(--sans); font-weight: 400; font-size: 12px; color: var(--faint); }
@media (hover: hover) {
  a.site:hover .site-shot img { transform: scale(1.02); }
  a.site:hover .site-name { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
}
@keyframes site-in { from { opacity: 0; } } /* 위로 떠오르던 움직임 뺌: 처음 열 때 까딱 움직여 보였음(2026-10-08) */

@media (min-width: 2000px) { .site-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .site-grid { gap: 24px var(--gap); padding-top: 18px; }
  .browser { box-shadow: none; border-radius: 5px; }
  .browser-bar { height: 14px; gap: 3px; padding: 0 5px; }
  .browser-bar i { width: 4px; height: 4px; }
  .browser-url { display: none; }
  .site-info { padding-top: 8px; }
  .site-state { font-size: 9px; letter-spacing: .08em; margin-top: 3px; }
  .site-name { font-size: 13px; }
  a.site .site-name::after { content: none; }
  .site-sum { display: none; } /* 휴대폰은 칸이 좁아 이름만 */
}
@media (prefers-reduced-motion: reduce) {
  .site, .site-shot img { animation: none; transition: none; }
}
.site-cell { min-width: 0; } /* 사이트 칸을 감싸는 상자(관리자 아이콘이 이 위에 붙음) */

/* 상태 이름을 한국어 설명으로 바꾸며(2026-10-08) 글자 사이 넓힘을 없애고 더 진하게(사용자 지시) */
.site-state { margin-top: 8px; font: 500 12px var(--sans); letter-spacing: 0; color: var(--muted); word-break: keep-all; }
@media (max-width: 640px) { .site-state { font-size: 10.5px; letter-spacing: 0; } }

/* 기획·구상 중: 맨 뒤 작은 칸(2026-10-08 사용자 지시). 큰 칸 3열 → 작은 칸 5열(넓은 화면 8열, 휴대폰 4열) */
.site-small { grid-column: 1 / -1; margin-top: 20px; padding-top: 28px; border-top: 1px solid var(--line); }
.site-small-head { margin: 0 0 18px; font: 500 12px var(--sans); color: var(--muted); text-align: center; }
.site-small-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px var(--gap); }
.site-small .site-name { font-size: 14px; }
.site-small .site-sum { font-size: 12px; }
.site-small .site-state { display: none; } /* 위 제목에 이미 '기획·구상 중' */
.site-small .browser-url { display: none; }
@media (min-width: 2000px) { .site-small-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .site-small-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 8px; }
  .site-small .site-name { font-size: 11px; }
}
.site-state { text-wrap: balance; } /* 휴대폰에서 '툴' 한 글자만 넘어가지 않게 */
/* 링크 있는 사이트 이름 옆 ↗: 새 창으로 열린다는 걸 알 수 있게 로고 눈 빨강(#e83828)으로 눈에 띄게(사용자 지시 2026-10-08) */
a.site .site-name::after { color: #e83828; font-weight: 700; font-size: 13px; }
/* 정식·베타 상태는 바탕색 띠로 눈에 띄게(사용자 지시 2026-10-08). 정식 = 빨강 채움, 베타 = 빨강 테두리. 비공개·기획 중은 글자만 */
.site-state.st-live, .site-state.st-beta {
  display: inline-block; margin-top: 10px; padding: 3px 10px 4px; border-radius: 999px;
  font-weight: 600; color: #fff; background: #e83828; border: 1px solid #e83828;
}
.site-state.st-beta { color: #e83828; background: transparent; }
@media (max-width: 640px) { .site-state.st-live, .site-state.st-beta { padding: 2px 7px 3px; margin-top: 6px; } }
.site-state.st-live, .site-state.st-beta { display: block; width: fit-content; margin-inline: auto; white-space: nowrap; } /* 칸 정렬과 상관없이 띠는 가운데 */
/* 번쩍임 없애기(2026-10-08): 열 때 칸·캡처가 서서히 나타나던 효과를 뺀다 */
.site { animation: none; }
.site-shot img { opacity: 1; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
/* 주홍이 너무 튄다(사용자 2026-10-08) → 채도를 조금 낮춘 빨강. ↗ 화살표와 상태 띠를 같은 색으로 맞춤 */
a.site .site-name::after { color: #c6463b; }
.site-state.st-live { background: #c6463b; border-color: #c6463b; }
.site-state.st-beta { color: #c6463b; border-color: #c6463b; }
/* 아직 너무 진하다(사용자 2026-10-08) → 더 옅고 부드러운 빨강. 비공개 툴도 테두리 띠, 색은 진회색(사용자 지시) */
a.site .site-name::after { color: #cc6e66; }
.site-state.st-live { background: #cc6e66; border-color: #cc6e66; }
.site-state.st-beta { color: #cc6e66; border-color: #cc6e66; }
.site-state.st-private {
  display: block; width: fit-content; margin: 10px auto 0; padding: 3px 10px 4px; border-radius: 999px; white-space: nowrap;
  font-weight: 600; color: #6b6660; border: 1px solid #8a857e; background: transparent;
}
@media (max-width: 640px) { .site-state.st-private { padding: 2px 7px 3px; margin-top: 6px; white-space: normal; text-align: center; border-radius: 10px; } } /* 두 줄이 되면 알약 대신 둥근 네모 */