/* ============================================================
   cogniverse.kr — 공용 디자인 토큰 & 컴포넌트
   레트로 CRT 그린 테마. 모든 웹토이가 공유한다.
   ============================================================ */

/* 둥근모(DungGeunMo) 비트맵 폰트 — 레트로 픽셀 감성 */
@font-face{
  font-family:'DungGeunMo';
  src:url('fonts/DungGeunMo.woff2') format('woff2'),
      url('fonts/DungGeunMo.woff') format('woff');
  font-weight:normal;
  font-style:normal;
  font-display:swap;
}

:root{
  /* 배경 (딥그린 CRT) */
  --bg-0:#020a04;
  --bg-1:#041508;
  --bg-2:#06210f;
  /* CRT 그린 계열 */
  --green:#67ff9a;
  --green-dim:rgba(103,255,154,.55);
  --green-line:rgba(103,255,154,.22);
  --green-14:rgba(103,255,154,.14);
  --green-26:rgba(103,255,154,.26);
  /* 민트 강조 (선택/활성) */
  --mint:#8ef0cf;
  --mintdark:#137a5c;
  /* 기타 */
  --ink:#0a1f4d;
  --panel:rgba(0,0,0,.22);
  --shadow-hard:3px 3px 0 rgba(0,0,0,.35);
  --radius:14px;
  --font:'DungGeunMo','Malgun Gothic',monospace;
}

*{ box-sizing:border-box; }

html,body{ margin:0; padding:0; }

body{
  min-height:100vh;
  min-height:100dvh;               /* 모바일 주소창 대응 */
  font-family:var(--font);
  color:var(--green);
  background:var(--bg-0);
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:28px 16px 60px;
  padding-left:max(16px, env(safe-area-inset-left));
  padding-right:max(16px, env(safe-area-inset-right));
  padding-bottom:max(60px, env(safe-area-inset-bottom));
  gap:18px;
  overflow-x:hidden;               /* 가로 스크롤 원천 차단 */
  -webkit-font-smoothing:none;
  text-rendering:geometricPrecision;
  -webkit-tap-highlight-color:transparent;   /* 모바일 탭 파란 플래시 제거 */
}
/* 그라디언트는 고정 레이어로 분리 — background-attachment:fixed 의 모바일 버벅임 회피 */
body::after{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(120% 120% at 50% 0%, var(--bg-2) 0%, var(--bg-1) 70%, var(--bg-0) 100%);
}

/* 미세 스캔라인 (CRT 느낌) */
body::before{
  content:"";
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.06) 2px 3px);
  mix-blend-mode:multiply;
}

/* ---- 헤더 ---- */
h1{
  margin:0;
  font-size:44px;
  line-height:1.1;
  letter-spacing:1px;
  color:var(--green);
  text-shadow:0 0 12px rgba(103,255,154,.35);
  text-align:center;
}
.sub{
  margin:0;
  font-size:16px;
  color:var(--green-dim);
  text-align:center;
}

/* ---- 칩/버튼 (레트로 하드섀도우) ---- */
.chip{
  font-family:var(--font);
  font-size:15px;
  color:var(--green);
  background:var(--green-14);
  border:2px solid var(--green-26);
  border-radius:10px;
  padding:9px 14px;
  cursor:pointer;
  box-shadow:var(--shadow-hard);
  transition:transform .05s, background .12s, border-color .12s;
  user-select:none;
  -webkit-user-select:none;
}
.chip:hover{ transform:translateY(-1px); }
.chip:active{ transform:translate(1px,2px); box-shadow:1px 1px 0 rgba(0,0,0,.35); }
.chip.on,
.chip[aria-pressed="true"]{
  background:var(--mint);
  border-color:var(--mint);
  color:var(--ink);
  box-shadow:3px 3px 0 var(--mintdark);
}

/* ---- 패널 ---- */
.panel{
  position:relative;
  width:100%;
  max-width:660px;
  display:flex;
  flex-direction:column;
  gap:16px;
  align-items:center;
}

/* ---- 크로스-내비 (다른 토이로 이동) ---- */
.toy-nav{
  margin-top:34px;
  width:100%;
  max-width:660px;
  border-top:2px dashed var(--green-line);
  padding-top:18px;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
}
.toy-nav .toy-nav-title{
  font-size:13px;
  color:var(--green-dim);
  letter-spacing:2px;
}
.toy-nav .toy-links{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}
.toy-nav a{
  font-family:var(--font);
  font-size:14px;
  color:var(--green);
  text-decoration:none;
  background:var(--green-14);
  border:2px solid var(--green-26);
  border-radius:10px;
  padding:8px 14px;
  box-shadow:var(--shadow-hard);
  transition:transform .05s, background .12s;
}
.toy-nav a:hover{ transform:translateY(-1px); background:var(--green-26); }
.toy-nav a.current{
  opacity:.5;
  pointer-events:none;
  box-shadow:none;
}

/* ---- 토이 이동 버튼(FAB): 웹 좌상단 / 모바일 상단중앙 고정 ---- */
/* 나머지 두 토이로 바로 가는 버튼 묶음 */
.toy-fabs{
  position:fixed; top:14px; left:14px; z-index:100;
  display:flex; gap:8px; flex-wrap:wrap; max-width:calc(100vw - 28px);
}
.toy-fab{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font);
  font-size:14px; line-height:1; color:#04240f;
  background:linear-gradient(180deg,#a9f7d8 0%,#8ef0cf 100%);
  border:2px solid #eafff4; border-radius:11px;
  padding:8px 12px; text-decoration:none;
  box-shadow:4px 4px 0 #0c5c43, 0 0 12px rgba(103,255,154,.4);
  transition:transform .08s ease, filter .12s ease;
}
.toy-fab:hover{ transform:translate(-1px,-2px); filter:brightness(1.06); }
.toy-fab:active{ transform:translate(2px,2px); }
.toy-fab-ico{ font-size:15px; line-height:1; }
.toy-fab-txt{ letter-spacing:.3px; }
@media (max-width:560px){
  .toy-fabs{ top:10px; left:50%; transform:translateX(-50%); justify-content:center; }
  .toy-fab{ font-size:13px; padding:7px 10px; }
}

/* ---- SEO 푸터 ---- */
footer.seo{
  max-width:660px;
  margin-top:12px;
  color:var(--green-dim);
  font-size:13px;
  line-height:1.7;
}
footer.seo h2{ font-size:16px; color:var(--green); margin:0 0 8px; }
footer.seo strong{ color:var(--mint); }

/* ---- 터치 기기: 탭 하이라이트·터치 타깃 ---- */
.chip, .toy-nav a, .toy-fab, .swatch, input[type=color]{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;   /* 더블탭 확대 지연 제거 */
}
@media (pointer:coarse){
  .chip{ padding:11px 15px; }          /* 손가락 타깃 여유 (~44px) */
  .swatch{ width:36px; height:36px; }
}

/* ---- 접근성: 모션 최소화 ---- */
@media (prefers-reduced-motion:reduce){
  .chip, .toy-nav a{ transition:none; }
  .toy-fab{ animation:none; box-shadow:4px 4px 0 #0c5c43, 0 0 16px rgba(103,255,154,.5); }
  body::before{ display:none; }
}