/* ==========================================================================
   noan-ai — 디자인 토큰
   ========================================================================== */

:root{
  /* 다크모드를 쓰지 않는다. 시스템이 다크여도 밝은 화면으로 고정 */
  color-scheme: light;
  /* 브랜드 토큰 */
  --ink:#102A43;
  --ink2:#1E4E79;
  --mint:#2563EB;
  --mint2:#60A5FA;
  --warm:#A84F13;
  --stop:#A23B36;
  --paper:#F7FAFF;
  --card:#FFFFFF;
  --mute:#52657A;
  --line:#D8E2F0;
  --gold:#8A6500;
  --red:#B42318;

  /* 파생 토큰 */
  --font:system-ui, -apple-system, "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  --fs-body:20px;
  --fs-h1:44px;
  --radius:14px;
  --shadow:0 8px 24px rgba(16,42,67,.10);
  --maxw:1280px;
  --text:#102A43;
  --text-dim:var(--mute);
}

/* ==========================================================================
   다크 모드
   ========================================================================== */
/* ==========================================================================
   프로젝터 모드
   ========================================================================== */
html[data-projector]{
  --mute:#3F4F49;
  --line:#B8C8C2;
  --mint2:#2563EB;
  --fs-body:22px;
  --fs-h1:48px;
  --shadow:none;
}
html[data-projector] .card{
  border-width:2px;
}
html[data-projector] .card3d{
  border-width:2px;
}

/* ==========================================================================
   최소 리셋
   ========================================================================== */
*,*::before,*::after{
  box-sizing:border-box;
}
html,body{
  margin:0;
}
body{
  font-family:var(--font);
  font-size:var(--fs-body);
  color:var(--text);
  background:var(--paper);
}
img{
  max-width:100%;
  display:block;
}
h1,h2,h3,h4,h5,h6,p,ul,ol,figure,blockquote{
  margin:0;
}

/* ==========================================================================
   접근성 / 유틸리티
   ========================================================================== */
:focus-visible{
  outline:3px solid var(--warm);
  outline-offset:2px;
}

.ico-badge text{
  font-family:var(--font);
}

.tw{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.skip{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:100;
  background:var(--ink);
  color:#fff;
  padding:12px 20px;
  border-radius:0 0 var(--radius) 0;
  text-decoration:none;
  font-weight:700;
}
.skip:focus{
  left:0;
}

/* ==========================================================================
   모션 축소
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation:none !important;
    transition:none !important;
  }
  .card.tilt,
  .card3d,
  .orb,
  .zoomer{
    transform:none !important;
  }
}

/* 화면에서만 숨기고 보조기기에는 읽히는 텍스트 */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

.todo{
  color:var(--warm);
  font-weight:700;
  white-space:nowrap;
}

.is-gone{
  display:none !important;
}

.emoji{
  font-style:normal;
  line-height:1;
}

/* ==========================================================================
   슬라이드 구간 톤
   ========================================================================== */
:root{
  --tone-cream:rgba(168,79,19,.05);
  --tone-mint:rgba(37,99,235,.05);
  --brand-fg:var(--ink);
}
html[data-projector]{
  --brand-fg:var(--ink);
}