/* ============================================================
   꼬순로그 디자인 토큰
   제네시스 실측 사양서(2026-09-16)의 규칙을 그대로 쓰되 색만 교체.
   ★ 이 파일의 변수만 참조한다. 임의 HEX·px·이징·시간 금지. ★
   근거와 수치 설명은 docs/DESIGN.md
   ============================================================ */

:root{
  /* ── 무채색 스펙트럼 : 화면의 99% ──────────────────
     핵심은 "검정이 검정이 아니다" — 가장 진한 색이 #000이 아니라 #111.
     순수 검정은 화면에서 구멍처럼 보여 싸구려 인쇄물 인상을 준다. */
  --grey-0:   #ffffff;
  --grey-1:   #fafafb;
  --grey-2:   #f5f5f5;
  --grey-10:  #eaeaeb;   /* 구분선 기본값 — 검정 쓰지 말 것 */
  --grey-20:  #ceced0;
  --grey-40:  #929296;
  --grey-60:  #69696e;
  --grey-70:  #535356;
  --grey-90:  #252527;
  --grey-100: #111111;   /* 가장 진한 색 */

  /* ── 브랜드색 : 딥그린 한 줄만 ──────────────────────
     제네시스 구리색(#af6249)은 그 브랜드 연상색이라 쓰지 않는다.
     펫 앱 대부분이 파스텔·노랑·핑크로 귀여움을 노리므로
     무채색 위 진한 색 하나가 그 자체로 차별점이 된다.
     ★ 한 화면에 3곳 이상 쓰지 않는다 ★ */
  --brand-5:   #f4f8f6;
  --brand-10:  #eef3f1;
  --brand-30:  #9cc4b5;
  --brand-50:  #2a5c4c;   /* 기본 */
  --brand-70:  #1d4237;
  --brand-90:  #112822;

  /* ── 역할 이름 (실제로 코드에서 쓰는 것) ────────────
     --green 같은 색 이름 변수를 만들지 않는다. 전부 역할로 부른다.
     덕분에 어두운 섹션은 바깥 상자에 .type-dark 하나만 붙이면 된다. */
  --surface:          var(--grey-0);
  --surface-low:      var(--grey-2);
  --on-surface:       var(--grey-100);
  --on-surface-high:  var(--grey-70);
  --on-surface-mid:   var(--grey-60);
  --on-surface-low:   var(--grey-40);
  --outline-low:      var(--grey-10);
  --outline-mid:      var(--grey-20);
  --primary:          var(--grey-100);
  --on-primary:       var(--grey-0);
  --brand:            var(--brand-50);
  --on-brand:         var(--grey-0);
  --brand-wash:       var(--brand-10);
  --fixed-white:      #ffffff;
  --state-red:        #ef303d;   /* 오류 표시 전용 — 일반 강조로 쓰지 말 것 */

  /* ── 서체 ────────────────────────────────────────
     제목용에는 700이 없다. 굵게 쓰는 선택지 자체를 없앤 것. */
  --font: 'Pretendard Variable', Pretendard, 'Noto Sans KR',
          -apple-system, BlinkMacSystemFont, 'Malgun Gothic', system-ui, sans-serif;
  --w-light: 300;   /* 24px 이상 제목 */
  --w-reg:   400;
  --w-med:   500;
  --w-bold:  700;   /* 본문 강조에만. 제목에 쓰지 말 것 */

  /* ── 움직임 ──────────────────────────────────────
     ease / ease-in-out(브라우저 기본값)을 쓰면 "직접 만든 티"가 난다.
     누른 것은 빠르게(0.2~0.3s), 저절로 나타나는 것은 느리게(0.6~1s). */
  --ease:        cubic-bezier(.45, 0, .31, 1);
  --ease-slide:  cubic-bezier(.3, .8, .3, 1);
  --ease-ui:     cubic-bezier(.5, 0, 0, .75);
  --ease-sheet:  cubic-bezier(.16, 1, .3, 1);
  --t-reveal: .8s;
  --t-ui:     .2s;
  --t-media:  1s;

  /* ── 모양 ────────────────────────────────────────
     8px이면 친근하고 999px이면 캐주얼하다.
     2px은 "각진 것을 의도적으로 아주 조금만 깎았다"는 신호. */
  --r-btn:   2px;
  --r-media: 4px;
  --h-btn:      40px;
  --h-btn-lg:   48px;   /* ★모바일에서도 줄이지 않는다★ */
  --h-btn-sm:   36px;

  /* ── 간격 ────────────────────────────────────────
     좌우 여백은 고정값이 아니라 유동. 고정하면 큰 모니터에서
     글이 끝까지 늘어져 관리자 화면처럼 보인다. */
  --gutter: clamp(20px, -40px + 6.25vw, 80px);
  --sec:        140px;   /* 독립 섹션 */
  --sec-state:  160px;   /* 선언문 한 줄 — 유일하게 더 크다 */
  --sec-pair:    70px;   /* 한 덩어리 안 (이미지+캐러셀 등) */
  --max: 1920px;

  /* ── 등장 이동거리 ───────────────────────────────
     요소가 클수록 멀리서 온다. 전부 20px로 하면 큰 이미지가 안 움직여 보인다. */
  --rise:       20px;
  --rise-media: 50px;
}

/* ── 태블릿 ── 모바일(80px)보다 좁은 것은 오타가 아니다.
   모바일은 한 화면에 한 덩어리만 보이니 여백으로 구분해야 하고,
   태블릿은 가로로 넓어 이미 구분이 된다. */
@media (max-width: 960px){
  :root{ --sec: 64px; --sec-state: 80px; --sec-pair: 32px; }
}

/* ── 모바일은 축소판이 아니다 ── */
@media (max-width: 600px){
  :root{
    --gutter: 20px;
    --sec: 80px; --sec-state: 96px; --sec-pair: 40px;
    --rise: 40px;          /* PC의 두 배. 화면이 작아 20px는 거의 안 보인다 */
    --rise-media: 60px;
    --h-btn: 44px;         /* --h-btn-lg 48px은 그대로 둔다 */
  }
}

/* ── 어두운 섹션 : 바깥 상자에 클래스 하나만 ── */
.type-dark{
  --surface:         var(--grey-100);
  --surface-low:     var(--grey-90);
  --on-surface:      var(--grey-0);
  --on-surface-high: #b0b0b0;
  --on-surface-mid:  #9a9a9e;
  --outline-low:     rgba(255,255,255,.15);
  --outline-mid:     rgba(255,255,255,.28);
  --primary:         var(--grey-0);
  --on-primary:      var(--grey-100);
  --brand:           var(--brand-30);
  --on-brand:        var(--grey-100);
  --brand-wash:      rgba(156,196,181,.14);
}

/* ============================================================
   기본 클래스
   ============================================================ */

html{ -webkit-text-size-adjust: 100%; }
body{
  margin: 0;
  background: var(--surface);
  color: var(--on-surface);
  font-family: var(--font);
  font-weight: var(--w-reg);
  font-size: 16px;
  line-height: 1.6;          /* 한글은 받침 때문에 영문 관행(1.4)보다 높다 */
  -webkit-font-smoothing: antialiased;
}

/* 한글 필수 두 줄 — 없으면 "고급스러운 브랜드 경 / 험"으로 잘린다 */
.title, .desc, p, h1, h2, h3, h4, li{
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* ── 타이포 스케일 ──
   줄높이가 전부 짝수 px로 떨어진다. 소수점 줄높이를 만들지 않는다.
   ★자간 -0.01em은 24px 이상 제목에만. 본문에 걸면 한글 받침이 붙어 읽기 어렵다★ */
.t-display{ font-size:48px; line-height:62px; font-weight:var(--w-light); letter-spacing:-.01em; }
.t-section{ font-size:40px; line-height:54px; font-weight:var(--w-light); letter-spacing:-.01em; }
.t-card   { font-size:22px; line-height:34px; font-weight:var(--w-reg); }
.t-sub    { font-size:20px; line-height:28px; font-weight:var(--w-med); }
.t-eyebrow{ font-size:16px; line-height:24px; font-weight:var(--w-reg); color:var(--on-surface-mid); }
.t-lead   { font-size:18px; line-height:26px; color:var(--on-surface-high); }
.t-body   { font-size:16px; line-height:24px; }
.t-small  { font-size:14px; line-height:22px; color:var(--on-surface-high); }

@media (max-width: 960px){
  .t-display{ font-size:32px; line-height:44px; }
  .t-section{ font-size:28px; line-height:40px; }
  .t-eyebrow{ font-size:14px; line-height:24px; }
  .t-lead   { font-size:14px; line-height:22px; }
}

/* 숫자가 세로로 줄 맞아야 하는 곳 — 없으면 굴러갈 때 좌우로 흔들린다 */
.num{ font-variant-numeric: tabular-nums; }

/* ── 레이아웃 ── */
.wrap{ max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section        { padding-block: var(--sec); }
.section--state { padding-block: var(--sec-state); }
.section--paired{ padding-block: var(--sec) var(--sec-pair); }
.section--tight { padding-block: 0; }

/* ── 버튼 ── */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration: none;     /* <a>로 만든 버튼에 밑줄이 남으면 싸구려로 보인다 */
  height: var(--h-btn-lg);
  padding-inline: 24px;
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  font-family: inherit; font-size: 15px; font-weight: var(--w-med);
  cursor: pointer;
  transition: background var(--t-ui) var(--ease-ui),
              color      var(--t-ui) var(--ease-ui),
              border-color var(--t-ui) var(--ease-ui);
}
.btn--primary{ background: var(--primary); color: var(--on-primary); }
.btn--ghost  { background: transparent; color: var(--on-surface); border-color: var(--outline-mid); }
.btn--brand  { background: var(--brand); color: var(--on-brand); }
.btn--block  { display:flex; width:100%; }

/* ── 이미지 ── */
.media{ border-radius: var(--r-media); overflow: hidden; }
.media img{ display:block; width:100%; height:auto; }

/* ── 등장 ──
   ★한 번만 실행(unobserve). 스크롤을 되돌렸을 때 다시 사라지면 싸구려로 보인다★
   ★첫 화면 요소에는 걸지 않는다. 서버가 is-show를 미리 박아 보낸다★ */
.reveal{
  opacity: 0;
  transform: translateY(var(--rise));
  transition: opacity var(--t-reveal) var(--ease),
              transform var(--t-reveal) var(--ease);
}
.reveal.is-show{ opacity: 1; transform: translateY(0); }
.reveal--media{ transform: translateY(var(--rise-media)); }

/* 시차는 delay가 아니라 시작 거리로.
   delay 방식은 넷째 항목이 아무것도 안 하고 멈춰 있는 시간이 생긴다.
   거리 방식은 전부 동시에 출발해 동시에 도착하고, 항목이 몇 개든 전체가 0.8초로 고정된다. */
.stagger > .reveal:nth-child(1){ transform: translateY(calc(var(--rise) * 1)); }
.stagger > .reveal:nth-child(2){ transform: translateY(calc(var(--rise) * 2)); }
.stagger > .reveal:nth-child(3){ transform: translateY(calc(var(--rise) * 3)); }
.stagger > .reveal:nth-child(4){ transform: translateY(calc(var(--rise) * 4)); }
.stagger > .reveal.is-show{ transform: translateY(0); }

/* ── 접근성 ──
   ★user-scalable=no 로 확대를 막지 않는다. 아이폰 접근성에서 감점이다★ */
:focus-visible{ outline: 2px solid var(--brand); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}