/* 디자인 토큰 — 색·간격·글꼴은 전부 여기서만 정의한다. */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

/* 밝은 화면 값. 어두운 값은 아래 두 블록에 같은 내용으로 한 벌씩 더 있다.
   🔴 `color-scheme` 을 지우지 말 것 — 없으면 브라우저가 페이지를 제멋대로 뒤집는다.
   ⚠️ 색은 다른 파일에 직접 적지 말고 여기 토큰을 늘려 두 벌 다 채운다. */
:root {
  color-scheme: light;

  /* 색 — 밝고 넓은 톤. 파랑은 '지금 누를 것' 에만 쓴다. */
  --bg: #ffffff;
  --surface: #f7f8fa;
  --surface-strong: #f1f3f5;
  --text: #191f28;
  --text-sub: #6b7684;
  --text-weak: #8b95a1;
  --border: #e8ebed;
  --blue: #3182f6;
  --blue-hover: #1b64da;
  --blue-weak: #ebf3fe;
  --green: #12b886;
  --red: #f04452;
  --amber: #f59f00;

  /* 파란 바탕 위에 얹는 글자. 파랑이 어두운 화면에서 밝아지므로 따로 둔다. */
  --on-blue: #ffffff;

  /* 머리 뒤에 까는 반투명 바탕(흐림 효과와 함께). `--bg` 와 같은 색의 반투명이라야
     스크롤할 때 머리만 다른 색으로 안 뜬다.
     🔴 둘로 갈라 둔 것은 값이 달라서다(앱 0.86 · 소개 0.88) — 합치면 화면이 바뀐다. */
  --bg-blur: rgba(255, 255, 255, 0.86);
  --bg-blur-nav: rgba(255, 255, 255, 0.88);
  /* 입력창 위쪽 페이드의 시작점. `--bg` 와 같은 색인데 투명한 것이다 —
     `transparent` 로 적으면 브라우저에 따라 회색을 거쳐 페이드된다. */
  --bg-fade: rgba(255, 255, 255, 0);

  /* 아이콘 단추의 검은 말풍선. 어두운 화면에서는 반대로 밝아진다. */
  --tip-bg: #202632;
  --tip-text: #ffffff;

  /* 위험(빨강) — `--red` 하나로는 바탕·테두리·글자가 안 갈린다. */
  --danger-text: #c9303c;
  --danger-border: #f3c4c8;
  --danger-bg: #fef2f3;
  --danger-sub: #a8434c;

  /* 주의(노랑) 셋(앱·소개·미정표시). 🔴 값이 조금씩 다른 것은 그대로 둔다 —
     합치면 밝은 화면의 색이 바뀐다. 어두운 화면에서는 셋을 같은 값으로 준다. */
  --warn-bg: #fff8ec;
  --warn-border: #f0d9ae;
  --warn-text: #8a5a12;
  --warn-sub: #9c7433;
  --notice-bg: #fffaf0;
  --notice-border: #ffe8b3;
  --todo-bg: #fff4e6;
  --todo-text: #b26a00;

  /* 고른 것 강조(옅은 초록). 테두리는 `--green` 을 그대로 쓴다 — 여기는 바탕만. */
  --pick-bg: #e8f8f1;

  /* 🔴 네이버 로그인 버튼 BI 가 정한 N 로고 색이다 — 마음대로 바꾸면 안 된다.
     ⚠️ 널리 도는 `#03C75A` 는 폐기된 값이니 그것으로 되돌리지 말 것. */
  --naver-green: #03A94D;

  /* 간격 — 4의 배수만 쓴다. */
  --gap-xs: 4px;
  --gap-sm: 8px;
  --gap-md: 16px;
  --gap-lg: 24px;
  --gap-xl: 40px;
  --gap-2xl: 64px;

  /* 모양 */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-full: 999px;
  --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-lift: 0 4px 20px rgba(0, 0, 0, 0.08);

  /* 글자 */
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    system-ui, "Malgun Gothic", sans-serif;
  --fs-hero: 30px;
  --fs-title: 20px;
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-xs: 13px;

  --content-width: 720px;
}

/* 어두운 화면 — 기기 설정을 따르는 쪽.
   🔴 아래 `[data-theme="dark"]` 블록과 내용이 글자까지 같아야 한다. 한 곳만 고치면
      기기가 어두운 사람과 손으로 고른 사람이 서로 다른 화면을 본다. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: #16181d;
    --surface: #1e2126;
    --surface-strong: #272b31;
    --text: #e6e8ec;
    --text-sub: #a3aab5;
    --text-weak: #79818d;
    --border: #2f343b;
    --blue: #4c8ff8;
    --blue-hover: #6ba4fa;
    --blue-weak: #1b2a42;
    --green: #2ecfa0;
    --red: #ff6b78;
    --amber: #f0ad2e;

    --on-blue: #ffffff;
    --bg-blur: rgba(22, 24, 29, 0.86);
    --bg-blur-nav: rgba(22, 24, 29, 0.88);
    --bg-fade: rgba(22, 24, 29, 0);

    --tip-bg: #3a4049;
    --tip-text: #f2f4f7;

    --danger-text: #ff8891;
    --danger-border: #5a2a30;
    --danger-bg: #2b1a1d;
    --danger-sub: #e8949c;

    --warn-bg: #2a2317;
    --warn-border: #4a3d22;
    --warn-text: #f0c674;
    --warn-sub: #d4b06a;
    --notice-bg: #2a2317;
    --notice-border: #4a3d22;
    --todo-bg: #2a2317;
    --todo-text: #f0c674;

    --pick-bg: #16302a;

    /* 네이버가 어두운 화면용으로 따로 정한 값(밝은 쪽 #03A94D 보다 살짝 밝다). */
    --naver-green: #05AC4F;

    --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-lift: 0 4px 20px rgba(0, 0, 0, 0.45);
  }
}

/* 설정에서 **손으로 고른** 쪽. 기기 설정을 이긴다. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #16181d;
  --surface: #1e2126;
  --surface-strong: #272b31;
  --text: #e6e8ec;
  --text-sub: #a3aab5;
  --text-weak: #79818d;
  --border: #2f343b;
  --blue: #4c8ff8;
  --blue-hover: #6ba4fa;
  --blue-weak: #1b2a42;
  --green: #2ecfa0;
  --red: #ff6b78;
  --amber: #f0ad2e;

  --on-blue: #ffffff;
  --bg-blur: rgba(22, 24, 29, 0.86);
  --bg-blur-nav: rgba(22, 24, 29, 0.88);
  --bg-fade: rgba(22, 24, 29, 0);

  --tip-bg: #3a4049;
  --tip-text: #f2f4f7;

  --danger-text: #ff8891;
  --danger-border: #5a2a30;
  --danger-bg: #2b1a1d;
  --danger-sub: #e8949c;

  --warn-bg: #2a2317;
  --warn-border: #4a3d22;
  --warn-text: #f0c674;
  --warn-sub: #d4b06a;
  --notice-bg: #2a2317;
  --notice-border: #4a3d22;
  --todo-bg: #2a2317;
  --todo-text: #f0c674;

  --pick-bg: #16302a;

  /* 네이버가 어두운 화면용으로 따로 정한 값(밝은 쪽 #03A94D 보다 살짝 밝다). */
  --naver-green: #05AC4F;

  --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-lift: 0 4px 20px rgba(0, 0, 0, 0.45);
}

* {
  box-sizing: border-box;
}

/* hidden 을 붙이면 무조건 숨는다. 클래스에 밀려 안 숨는 일을 막는다. */
[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
}

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.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;
}

/* 🔴 손님에게 가격 링크와 소개의 요금 절을 감춘다 — 사용자 확정.
   운영자 표식(`<html data-staff>`)은 `js/site.js` 가 붙인다. */
html:not([data-staff]) a[href="/pricing"],
html:not([data-staff]) [data-price-hidden] {
  display: none !important;
}