@charset "utf-8";
/* ==========================================================================
   가맹사업 목업 — 공통 디자인 토큰 / 리셋 / 타이포
   데자뷰메디스킨 → ping9rental 로 이어진 웜 뉴트럴 토큰 체계를 계승한다.
   업종(피부관리 / 헤드스파 / 학원)별로 바꾸는 것은 --accent 계열뿐이다.
   ========================================================================== */

:root {
  /* ---------- 잉크 / 뉴트럴 (웜) ---------- */
  /* 대비비(흰 배경 기준): ink 15.8:1 / ink-70 7.9:1 / ink-50 5.1:1 / ink-30 3.1:1
     ink-50 까지는 본문급 텍스트에 써도 WCAG AA(4.5:1)를 넘긴다.
     ink-30 은 아이콘·구분선 등 비텍스트 요소 전용이다. */
  --ink:        #221F1D;
  --ink-70:     #504B47;
  --ink-50:     #6E6862;
  --ink-30:     #A39B95;
  --ink-15:     #DCD7D2;
  --cream:      #F5F3EF;
  --sand-soft:  #EBE5DC;
  --sand:       #D9D0C4;
  --paper:      #FFFFFF;
  --line:       rgba(34, 31, 29, .12);
  --line-soft:  rgba(34, 31, 29, .06);

  /* ---------- 액센트 — 업종별로 override ---------- */
  --accent:     #C05B4D;
  --accent-dim: #FAEDEA;
  --accent-ink: #8F3A2E;

  /* ---------- 성과/상승 — "좋아졌다"는 신호. 액센트와 역할을 분리한다 ---------- */
  --save:       #0E7A5F;
  --save-dim:   #E6F4F0;

  /* ---------- 고지/확인 필요 — 경고가 아니라 "읽어야 함" 톤 ---------- */
  --note:       #8A6D1F;
  --note-dim:   #FBF4E2;

  /* ---------- 하락/위험 — 순위 하락, 계약 만료 등 ---------- */
  --risk:       #B3372C;
  --risk-dim:   #FBEAE8;

  /* ---------- 정보/링크 ---------- */
  --info:       #2A5A8A;
  --info-dim:   #E8F0F7;

  /* ---------- 서체 ---------- */
  --sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
          "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  /* 숫자용. 한글이 섞이면 Consolas 에 한글 글리프가 없어 시스템 폰트로 떨어지면서
     자간이 튄다. Pretendard 를 뒤에 붙여 한글은 본문과 같은 서체로 떨어지게 한다. */
  --mono: "SF Mono", "JetBrains Mono", Consolas, "Pretendard Variable", monospace;

  /* ---------- 스페이싱 / 형태 ---------- */
  --pad: 18px;
  --radius: 4px;
  --r-card: 10px;
  --r-pill: 999px;

  --shadow-s: 0 2px 10px rgba(34,31,29,.06);
  --shadow-m: 0 8px 28px rgba(34,31,29,.10);
  --shadow-l: 0 20px 56px rgba(34,31,29,.18);

  --header-h: 54px;
  --dock-h: 62px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- 리셋 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, h5, p, figure, ul, ol, dl, dd, dt, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
table { border-collapse: collapse; width: 100%; }

html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--sand-soft);
  line-height: 1.55;
  letter-spacing: -.02em;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 0;
}

/* ---------- 타이포 유틸 ---------- */
.t-eyebrow {
  font-family: var(--serif);
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-50); font-weight: 500;
}
.t-num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.t-dim { color: var(--ink-50); }
.t-sm  { font-size: 12px; }

/* ---------- 아이콘 (Material Symbols Rounded) ----------
   12~20px UI 아이콘만 아이콘 폰트로 쓴다. 그 이상 크기는 이미지로 간다. */
.ico {
  font-family: "Material Symbols Rounded";
  font-weight: normal; font-style: normal;
  font-size: 20px; line-height: 1;
  letter-spacing: normal; text-transform: none; white-space: nowrap;
  direction: ltr; display: inline-block; vertical-align: middle;
  -webkit-font-feature-settings: "liga"; -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20;
  flex: none;
}
.ico--fill { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 20; }
.ico--14 { font-size: 14px; }
.ico--16 { font-size: 16px; }
.ico--18 { font-size: 18px; }
.ico--22 { font-size: 22px; }

/* ==========================================================================
   이미지 플레이스홀더
   --------------------------------------------------------------------------
   지금은 이미지가 없다. data-img 에 파일명을, data-size 에 권장 해상도를 적어두면
   해당 칸이 무엇을 담는 자리인지 화면에 그대로 표시된다.
   assets/img/ 에 같은 파일명으로 이미지를 넣으면 mockup.js 가 자동으로 붙인다.
   (파일을 넣는 것 외에 HTML을 고칠 필요가 없다.)
   ========================================================================== */
.ph {
  position: relative;
  background-color: var(--sand-soft);
  background-image: var(--src, none);
  background-size: cover;
  background-position: var(--pos, center);
  overflow: hidden;
  display: block;
}
.ph::before {
  content: "";
  position: absolute; inset: 0;
  border: 1px dashed var(--ink-30);
  border-radius: inherit;
  pointer-events: none;
}
.ph::after {
  content: attr(data-img) " · " attr(data-size);
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--mono); font-size: 9.5px; line-height: 1.5;
  color: var(--ink-50); background: rgba(255,255,255,.72);
  padding: 4px 7px; border-radius: 3px;
  white-space: nowrap; max-width: 92%; overflow: hidden; text-overflow: ellipsis;
  text-align: center;
}
.ph.is-set::before,
.ph.is-set::after { display: none; }

/* 어두운 배경 위 플레이스홀더 */
.ph--dark { background-color: #37312D; }
.ph--dark::before { border-color: rgba(255,255,255,.28); }
.ph--dark::after { color: #EFE9E3; background: rgba(0,0,0,.42); }

/* 원형 (프로필/아바타 자리) */
.ph--round { border-radius: 50%; }
.ph--round::after { font-size: 0; content: ""; }

/* 비율 프리셋 */
.ph--1x1  { aspect-ratio: 1 / 1; }
.ph--4x3  { aspect-ratio: 4 / 3; }
.ph--3x4  { aspect-ratio: 3 / 4; }
.ph--16x9 { aspect-ratio: 16 / 9; }
.ph--9x16 { aspect-ratio: 9 / 16; }

/* ---------- 스크롤바 (목업 프레임 안쪽) ---------- */
.scroll-thin { scrollbar-width: thin; scrollbar-color: var(--ink-30) transparent; }
.scroll-thin::-webkit-scrollbar { width: 6px; height: 6px; }
.scroll-thin::-webkit-scrollbar-thumb { background: var(--ink-30); border-radius: 3px; }
.scroll-thin::-webkit-scrollbar-track { background: transparent; }

/* ---------- 접근성 ---------- */
.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;
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }