/* common.css — 모든 페이지 공통 보정 + 반응형(모바일/태블릿) 스타일 */
body[data-page="home"] { background: #fff; }
body[data-page="playground"], body[data-page="info"] { background: #000; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, video { max-width: 100%; }
a, button, [data-highlight] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* 터치 영역 확대: 눈에 보이는 크기는 그대로, 눌리는 범위만 넓힘 */
nav a, footer a, [data-highlight] { position: relative; }
nav a::before, footer a::before, [data-highlight]::before {
  content: ""; position: absolute; inset: -12px -8px; }

/* ---------- 태블릿 (810 ~ 1199px) ---------- */
@media (max-width: 1199px) and (min-width: 810px) {
  .ap-150vyou { gap: 28px !important; }
}

/* ---------- 모바일 (~809px) ---------- */
@media (max-width: 809px) {
  [data-bind="clock"] { display: none; }
  .ap-o9k2vl { display: none !important; }              /* 시계 영역 */
  .ap-4nexbk { flex: 0 0 auto !important; width: auto !important; }                       /* 로고 */
  .ap-150vyou { flex: 1 1 auto !important; width: auto !important; justify-content: flex-end !important; gap: 16px !important; }   /* 메뉴 */
  nav { overflow: hidden; }
  nav p { white-space: nowrap; }

  /* 푸터: 세로로 쌓기 */
  footer { height: auto !important; padding: 24px 15px 32px !important; }   /* 하단 여백 = 고정 버튼과 안 겹치게 */
  footer div { width: auto !important; height: auto !important; max-width: 100% !important; flex-wrap: wrap !important; }
  .ap-doobjk, .ap-1yci7y6, .ap-85kv3j, .ap-1ylwpnt { width: 100% !important; }
  .ap-1yci7y6 { flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 14px !important; padding: 0 !important; }
  .ap-1ylwpnt { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
  footer p { white-space: normal; }
}

/* ---------- 작은 폰 (~480px) ---------- */
@media (max-width: 480px) {
  nav p, nav .ap-text { font-size: 13px !important; }
  .ap-150vyou { gap: 12px !important; }
}
@media (max-width: 379px) {
  .ap-1cc23p8 { display: none !important; }          /* 프로젝트 열 전환 아이콘: 좁은 폰에서는 숨김 */
}
@media (max-width: 359px) {
  nav p, nav .ap-text { font-size: 12px !important; }
  .ap-150vyou { gap: 9px !important; }
}

/* 가로 스크롤 방지 (긴 단어/주소) */
body { overflow-x: hidden; }
main p, main h1 { overflow-wrap: anywhere; }

/* 모션 최소화 설정 존중 */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* mobile footer alignment fix */
@media (max-width:809px){
  footer, footer div, footer p{ text-align:left!important; }
  footer div{ justify-content:flex-start!important; align-items:flex-start!important; padding-left:0!important; padding-right:0!important; margin-left:0!important; }
  footer{ padding-left:15px!important; padding-right:15px!important; }
}

/* mobile: always 2-column image grids */
@media (max-width:809px){
  [data-bind="items"], [data-items="playground.items"]{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    column-gap:8px!important;
  }
}

/* 숨긴 프로젝트: 방문자에게는 안 보이고, 편집 모드에서만 흐리게 표시 */
body:not(.ed-on) [data-bind-project][data-hidden="true"]{display:none!important}
body.ed-on [data-bind-project][data-hidden="true"] > *{opacity:.4}
body.ed-on [data-bind-project][data-hidden="true"]::before{content:"숨김 상태 — 방문자에게 보이지 않습니다";display:block;padding:6px 15px;font:12px/1.4 sans-serif;color:#fff;background:#666}