/* ==========================================================================
   이소 — 공통 디자인 토큰 & 기본 스타일
   모든 페이지(홈 / 도구 / 약관)가 이 파일을 함께 씁니다.
   ========================================================================== */

:root{
  /* 배경 */
  --navy:#12131c;
  --navy-2:#1a1c29;
  --navy-3:#20222f;

  /* 글자 */
  --cream:#f6f2e8;
  --cream-dim:#c9c6c0;
  --cream-faint:#8a8a95;

  /* 강조 */
  --gold:#e8a33d;
  --gold-dim:#a97a35;
  --sage:#8fa07f;
  --soil:#6b4f36;

  /* 도구 그래픽용 보조색 (두 사람 / 두 계열을 나눠 그릴 때) */
  --hue-a:#9cc0ea;
  --hue-b:#e8a33d;

  --line:rgba(246,242,232,0.12);
  --line-strong:rgba(246,242,232,0.24);

  --serif:'Noto Serif KR', serif;
  --sans:'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;

  /* 세로형(인스타그램 유입) 페이지의 본문 폭 */
  --col:520px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  background:var(--navy);
  color:var(--cream);
  font-family:var(--sans);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  word-break:keep-all;
  overflow-wrap:break-word;
}

::selection{background:var(--gold);color:var(--navy);}
a{color:inherit;text-decoration:none;}
img,svg,canvas{display:block;max-width:100%;}

a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}

.wrap{
  max-width:640px;
  margin:0 auto;
  padding:0 28px;
}

code,kbd{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:0.88em;
  background:rgba(246,242,232,0.07);
  border:1px solid var(--line);
  border-radius:5px;
  padding:1px 5px;
  color:var(--cream);
  white-space:nowrap;
}

/* 스크린리더 전용 */
.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;
}

/* ---------- 공통 조판 ---------- */
.eyebrow{
  font-size:11px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--gold-dim);
  font-weight:600;
}

/* ---------- 등장 애니메이션 ---------- */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity 0.9s ease, transform 0.9s ease;
}
.reveal.in{opacity:1;transform:translateY(0);}

/* ---------- 버튼 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 26px;
  border:1px solid var(--line-strong);
  border-radius:999px;
  background:transparent;
  color:var(--cream);
  font-family:var(--sans);
  font-size:14px;
  letter-spacing:0.04em;
  cursor:pointer;
  transition:border-color .25s ease, color .25s ease, background .25s ease;
}
.btn:hover,.btn:focus-visible{border-color:var(--gold);color:var(--gold);}
.btn-primary{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--navy);
  font-weight:600;
}
.btn-primary:hover,.btn-primary:focus-visible{
  background:#f0b358;border-color:#f0b358;color:var(--navy);
}
.btn[disabled]{opacity:.45;cursor:default;}

/* ---------- 공통 푸터 ---------- */
.site-foot{
  padding:64px 0 44px;
  text-align:center;
  border-top:1px solid var(--line);
}
.site-foot .foot-mark{
  font-family:var(--serif);
  font-size:20px;
  font-weight:700;
  color:var(--cream);
  margin-bottom:8px;
}
.site-foot .foot-tag{
  font-size:12px;
  color:var(--gold-dim);
  letter-spacing:0.08em;
  margin-bottom:26px;
}
.foot-links{
  display:flex;
  justify-content:center;
  gap:18px;
  margin-bottom:26px;
  flex-wrap:wrap;
}
.foot-links a{
  font-size:13px;
  color:var(--cream-dim);
  border-bottom:1px solid transparent;
  padding-bottom:2px;
  transition:color .2s, border-color .2s;
}
.foot-links a:hover,.foot-links a:focus-visible{color:var(--gold);border-color:var(--gold);}
.foot-copy{
  font-size:12px;
  color:#7d8090;
  letter-spacing:0.02em;
  line-height:1.8;
}

/* ---------- 광고 슬롯 ----------
   실제 광고는 assets/js/ads.js 에 게시자 ID를 넣어야 나타납니다.
   승인 전에는 아무것도 그려지지 않고 자리도 차지하지 않습니다. */
.ad-slot{
  margin:48px auto 0;
  max-width:var(--col);
  min-height:0;
}
.ad-slot:empty{display:none;}
.ad-slot .ad-label{
  font-size:10px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:#4a4c58;
  text-align:center;
  margin-bottom:8px;
}

@media (prefers-reduced-motion: reduce){
  *{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
  html{scroll-behavior:auto;}
}