/* 유자 홈페이지 공통 토큰 — 모든 페이지(홈·앱 상세·약관)가 이 파일 하나를 쓴다 (#4074 시안) */

:root {
  /* 색 */
  --ink: #1D252C;      /* 제목·본문 강조 */
  --body: #3C4650;     /* 본문 */
  --muted: #6A747E;    /* 보조 설명 */
  --line: #DCE1DD;     /* 구분선·테두리 */
  --paper: #FFFFFF;    /* 바탕 */
  --mist: #F2F5F1;     /* 구역 바탕(번갈아 쓰기) */
  --citron: #F0B90B;   /* 브랜드 — 주 버튼·로고에만 */
  --leaf: #2E5E4E;     /* 링크·포커스 */

  /* 글꼴 */
  --font: 'IBM Plex Sans KR', system-ui, sans-serif;
  --fs-xs: 13px; --fs-sm: 15px; --fs-md: 17px; --fs-lg: 20px;
  --fs-xl: 25px; --fs-2xl: 32px; --fs-3xl: 44px; --fs-4xl: 56px;

  /* 간격 (4px 단위) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  --r-sm: 6px;   /* 버튼·입력칸 */
  --r-md: 14px;  /* 앱 화면 */
  --wrap: 1120px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font); font-size: var(--fs-md); line-height: 1.7;
  color: var(--body); background: var(--paper); word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--leaf); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--leaf); outline-offset: 2px;
}
img { display: block; max-width: 100%; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s5); }

h1, h2, h3 { color: var(--ink); font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-lg); }

/* 버튼 */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 22px; border-radius: var(--r-sm);
  font: 600 var(--fs-sm)/1 var(--font); text-decoration: none; cursor: pointer;
  border: 1.5px solid transparent; white-space: nowrap;
}
.btn-primary { background: var(--citron); color: var(--ink); }
.btn-primary:hover { background: #E2AD06; }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-secondary:hover { background: var(--mist); }
.btn-store { background: var(--ink); color: #fff; }

/* 머리말·꼬리말 */
.site-header { border-bottom: 1px solid var(--line); background: var(--paper); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.logo { display: flex; align-items: center; gap: var(--s2); color: var(--ink); text-decoration: none; font-weight: 700; font-size: var(--fs-lg); }
.logo img { width: 28px; height: 28px; }
.nav { display: flex; align-items: center; gap: var(--s6); }
.nav a { color: var(--body); text-decoration: none; font-size: var(--fs-sm); font-weight: 500; }
.nav a:hover { color: var(--ink); }
.nav .nav-cta { color: var(--ink); font-weight: 700; border-bottom: 2px solid var(--citron); padding-bottom: 2px; }
.menu-btn { display: none; background: none; border: 0; width: 40px; height: 40px; }
.menu-btn span { display: block; height: 2px; background: var(--ink); margin: 6px 8px; }

.site-footer { background: var(--ink); color: #C9D0D6; padding: var(--s8) 0 var(--s7); font-size: var(--fs-sm); }
.site-footer a { color: #fff; }
.foot-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: var(--s7); }
.foot-grid h4 { color: #fff; font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--s3); }
.foot-grid ul { list-style: none; }
.foot-grid li { margin-bottom: var(--s2); }
.foot-info { display: grid; grid-template-columns: auto 1fr; gap: var(--s1) var(--s4); }
.foot-info dt { color: #8E99A3; }
.foot-copy { margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid #36414A; color: #8E99A3; font-size: var(--fs-xs); }

/* 상태 표시 — 예외 상황에만 쓴다(심사 중 등) */
.flag { display: inline-block; font-size: var(--fs-xs); font-weight: 600; color: #7A5A00; background: #FDF1C7; padding: 2px 8px; border-radius: 4px; vertical-align: middle; }

@media (max-width: 760px) {
  :root { --fs-2xl: 26px; --fs-3xl: 32px; --fs-4xl: 34px; }
  .wrap { padding: 0 var(--s4); }
  .nav a:not(.btn):not(.nav-cta) { display: none; }   /* 모바일은 '문의'만 남긴다 */
  .menu-btn { display: block; }
  .foot-grid { grid-template-columns: 1fr; gap: var(--s6); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }