/* ==========================================================================
   Jarami — brand system
   단일 진실 공급원. 페이지는 이 토큰만 소비한다.
   2026-08-01 · 서체 방향 A (Fraunces + Instrument Sans)
   ========================================================================== */

:root{
  /* ---- 바탕과 잉크 : 따뜻한 종이 하나의 세계 ---- */
  --jr-paper:#FBF7F1;
  --jr-surface:#FFFFFF;
  --jr-sunk:#F5F1E9;
  --jr-ink:#2E2A26;
  --jr-text:#6B6158;
  --jr-slate:#7A7066;
  --jr-dim:#9A9087;
  --jr-line:rgba(20,50,42,.10);
  --jr-line2:rgba(20,50,42,.06);

  /* ---- 강조 : 하나의 축 ---- */
  --jr-teal:#159E84;
  --jr-mint:#1EC5AD;
  --jr-green:#33BA6C;
  --jr-grad:linear-gradient(135deg,#1EC5AD,#33BA6C);

  /* ---- 신호색 ---- */
  --jr-clay:#B5673C;              /* 주의·오답. 빨강을 대체한다 */
  --jr-clay-bg:rgba(181,103,60,.09);
  --jr-gold:#CF9526;              /* 획득한 보상에만 */
  --jr-right:#2C8F5C;
  --jr-right-bg:rgba(51,186,108,.10);

  /* ---- 서체 ---- */
  --jr-disp:'Fraunces',Georgia,'Gowun Batang',serif;
  --jr-body:'Instrument Sans','Pretendard',-apple-system,system-ui,sans-serif;
  --jr-kr:'Pretendard',-apple-system,system-ui,sans-serif;
  --jr-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  /* 한글 제목 서체는 보류 중. 확정되면 --jr-disp-kr 만 바꾸면 된다. */
  --jr-disp-kr:'Pretendard',-apple-system,system-ui,sans-serif;

  /* ---- 크기 눈금 (1.25 단3도) ---- */
  --jr-fs-display:clamp(34px,5.2vw,58px);
  --jr-fs-h1:clamp(28px,4.2vw,38px);
  --jr-fs-h2:clamp(22px,3vw,27px);
  --jr-fs-h3:21px;
  --jr-fs-lede:17px;
  --jr-fs-body:15.5px;
  --jr-fs-small:13.5px;
  --jr-fs-micro:11.5px;

  /* ---- 굵기 법칙 ---- */
  --jr-w-body:400;      /* 본문·캡션 */
  --jr-w-ui:500;        /* 라벨·버튼·링크·강조 */
  --jr-w-disp:400;      /* 제목. 크기로 존재감을 내지 굵기로 내지 않는다 */
  --jr-w-sub:500;       /* 소제목 */
  --jr-w-strong:600;    /* 한 화면에 최대 한 번 */
  --jr-w-mark:600;      /* 로고타입 — 700 이상이 허용되는 유일한 자리 */

  /* ---- 형태 ---- */
  --jr-r-sm:9px; --jr-r-md:14px; --jr-r-lg:20px; --jr-r-xl:24px;
  --jr-sh:0 10px 30px rgba(20,50,42,.06);
  --jr-sh-lift:0 16px 38px rgba(20,50,42,.10);
}

@media (prefers-color-scheme: dark){
  :root{
    --jr-paper:#191512; --jr-surface:#211C18; --jr-sunk:#1E1915;
    --jr-ink:#F1EAE1; --jr-text:#B9AEA2; --jr-slate:#A2978B; --jr-dim:#8A7F74;
    --jr-line:rgba(241,234,225,.13); --jr-line2:rgba(241,234,225,.07);
    --jr-teal:#5AD3C0; --jr-mint:#5AD3C0; --jr-green:#6FD79A;
    --jr-clay:#E09468; --jr-clay-bg:rgba(224,148,104,.12);
    --jr-gold:#E5B25A; --jr-right:#6FD79A; --jr-right-bg:rgba(111,215,154,.12);
    --jr-sh:0 10px 30px rgba(0,0,0,.35);
    --jr-sh-lift:0 16px 38px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --jr-paper:#191512; --jr-surface:#211C18; --jr-sunk:#1E1915;
  --jr-ink:#F1EAE1; --jr-text:#B9AEA2; --jr-slate:#A2978B; --jr-dim:#8A7F74;
  --jr-line:rgba(241,234,225,.13); --jr-line2:rgba(241,234,225,.07);
  --jr-teal:#5AD3C0; --jr-mint:#5AD3C0; --jr-green:#6FD79A;
  --jr-clay:#E09468; --jr-clay-bg:rgba(224,148,104,.12);
  --jr-gold:#E5B25A; --jr-right:#6FD79A; --jr-right-bg:rgba(111,215,154,.12);
}
:root[data-theme="light"]{
  --jr-paper:#FBF7F1; --jr-surface:#FFFFFF; --jr-sunk:#F5F1E9;
  --jr-ink:#2E2A26; --jr-text:#6B6158; --jr-slate:#7A7066; --jr-dim:#9A9087;
  --jr-line:rgba(20,50,42,.10); --jr-line2:rgba(20,50,42,.06);
  --jr-teal:#159E84; --jr-mint:#1EC5AD; --jr-green:#33BA6C;
  --jr-clay:#B5673C; --jr-clay-bg:rgba(181,103,60,.09);
  --jr-gold:#CF9526; --jr-right:#2C8F5C; --jr-right-bg:rgba(51,186,108,.10);
}

/* ==========================================================================
   Fraunces 축 — 그냥 두면 밋밋하다. 자라미 값으로 고정한다.
   SOFT 40 = 획 끝을 살짝 둥글게 (아이 브랜드인데 딱딱하지 않게)
   WONK  1 = 기울어진 다리. 큰 글씨에서만 매력, 작으면 지저분하다.
   ========================================================================== */
.jr-display,
h1{font-variation-settings:'SOFT' 40,'WONK' 1;font-optical-sizing:auto}
h2,h3,h4{font-variation-settings:'SOFT' 40,'WONK' 0;font-optical-sizing:auto}

/* ---- 로고타입 : 700 이상이 허용되는 유일한 자리 ---- */
.jr-mark{font-family:var(--jr-body);font-weight:var(--jr-w-mark);letter-spacing:-.015em}

/* ---- 눈썹 라벨 : 800에서 500으로. 소리치지 않는다 ---- */
.jr-eyebrow{
  font-family:var(--jr-body);font-size:var(--jr-fs-micro);font-weight:var(--jr-w-ui);
  letter-spacing:.16em;text-transform:uppercase;color:var(--jr-teal);
}

/* ---- 리드 문장 ---- */
.jr-lede{font-size:var(--jr-fs-lede);font-weight:var(--jr-w-body);line-height:1.68;color:var(--jr-slate);max-width:34ch}

/* ---- 숫자 : 자릿수를 맞춘다 ---- */
.jr-num{font-family:var(--jr-disp);font-weight:var(--jr-w-disp);font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* ---- 계산식에만 등폭을 쓴다. 라벨·캡션에는 쓰지 않는다 ---- */
.jr-calc{font-family:var(--jr-mono);font-variant-numeric:tabular-nums}

/* ---- 주요 행동 ---- */
.jr-cta{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--jr-body);font-weight:var(--jr-w-ui);font-size:15px;
  padding:12px 24px;border-radius:13px;background:var(--jr-grad);color:#14302A;
  box-shadow:0 12px 28px rgba(45,200,150,.30);text-decoration:none;
}

/* ---- 접근성 : 초점은 언제나 보여야 한다 ---- */
:where(a,button,summary,[tabindex]):focus-visible{
  outline:2px solid var(--jr-teal);outline-offset:2px;border-radius:4px;
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ==========================================================================
   움직임 — 살아 있는 느낌은 효과를 뿌려서 나오지 않는다.
   규칙 하나로 전 페이지가 같은 호흡을 갖게 한다.
   ① 들어올 때 한 번 떠오른다  ② 손이 닿으면 반응한다  ③ 사진은 아주 천천히 숨쉰다
   ========================================================================== */

:root{
  --jr-ease:cubic-bezier(.22,.68,.16,1);   /* 빠르게 시작해 길게 안착 */
  --jr-quick:cubic-bezier(.3,.7,.3,1);
}

/* ---- ① 스크롤 진입 ----
   ⭐숨기는 일은 CSS 가 아니라 JS 가 한다(.jr-armed).
   JS 가 죽어도 본문은 그냥 보인다. 애니메이션이 없는 것보다 안 보이는 게 훨씬 나쁘다. */
.jr-reveal{transition:opacity .68s var(--jr-ease), transform .68s var(--jr-ease);
           transition-delay:var(--jr-d,0ms)}
.jr-armed{opacity:0;transform:translateY(18px);will-change:opacity,transform}
.jr-armed.is-in{opacity:1;transform:none}

/* ---- ② 카드 : 손이 닿으면 살짝 뜬다 ---- */
.jr-lift{transition:transform .28s var(--jr-quick), box-shadow .28s var(--jr-quick)}
.jr-lift:hover{transform:translateY(-4px);box-shadow:var(--jr-sh-lift)}

/* ---- 사진 : 아주 느리게 다가온다. 빠르면 광고가 된다 ---- */
.jr-zoom{overflow:hidden}
.jr-zoom img{transition:transform 1.4s var(--jr-ease);will-change:transform}
.jr-zoom:hover img{transform:scale(1.045)}

/* ---- 링크 : 밑줄이 왼쪽에서 그려진다 ---- */
.jr-ul{position:relative}
.jr-ul::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1.5px;
              background:currentColor;transform:scaleX(0);transform-origin:left;
              transition:transform .32s var(--jr-quick);opacity:.5}
.jr-ul:hover::after,.jr-ul:focus-visible::after{transform:scaleX(1)}

/* ---- 버튼 : 눌리고, 화살표가 앞으로 나간다 ---- */
.jr-press{transition:transform .2s var(--jr-quick), box-shadow .2s var(--jr-quick)}
.jr-press:hover{transform:translateY(-2px)}
.jr-press:active{transform:translateY(0)}
.jr-press svg,.jr-press .arw{transition:transform .26s var(--jr-quick)}
.jr-press:hover svg,.jr-press:hover .arw{transform:translateX(4px)}

/* ---- ③ 스크롤하면 네비가 조여든다 ---- */
nav{transition:padding .3s var(--jr-quick), background .3s var(--jr-quick),
                box-shadow .3s var(--jr-quick)}
nav.is-stuck{box-shadow:0 1px 0 var(--jr-line), 0 10px 30px -22px rgba(20,50,42,.5)}
nav.is-stuck .nav-in,nav.is-stuck .navin{padding-top:10px;padding-bottom:10px}
.nav-in,.navin{transition:padding .3s var(--jr-quick)}

/* ---- 움직임을 원치 않는 사람에겐 아무것도 움직이지 않는다 ---- */
@media (prefers-reduced-motion: reduce){
  .jr-armed,.jr-armed.is-in{opacity:1!important;transform:none!important;transition:none!important}
  .jr-lift,.jr-zoom img,.jr-press,.jr-ul::after,nav,.nav-in,.navin{transition:none!important}
  .jr-lift:hover,.jr-press:hover{transform:none}
  .jr-zoom:hover img{transform:none}
}