/* ============================================================
   CINCIN 앱 시안 — 디자인 토큰과 공통 부품

   토큰은 UI/UX Pro Max 스킬이 "beauty spa wellness clinic booking
   marketplace" 질의로 내놓은 값입니다. 두 가지는 일부러 바꿨고,
   README.md에 까닭을 적었습니다.
     1) 글꼴 — Lora/Raleway는 한글·태국어 글자가 없습니다
     2) 페이지 얼개 — 랜딩(Hero+Testimonials)이 아니라 앱 얼개
   ============================================================ */

/* 한글·라틴을 함께 담는 글꼴. 태국어·베트남어가 붙으면
   Noto Sans Thai를 같은 자리에 더하면 됩니다. */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;900&family=Archivo:wght@600;700;800&display=swap');

:root {
  /* --- 색 (스킬 팔레트: Soft pink + lavender luxury) --- */
  /* 브랜드 분홍. 흰 글자를 이면 3.53:1로 AA(4.5:1)에 못 미칩니다 —
     그래서 이 값은 **글자를 이지 않는 곳**에만 씁니다: 테두리, 옅은 바탕,
     장식 아이콘, 24px 이상 큰 숫자(큰 글자는 3:1). */
  --color-primary: #EC4899;
  /* 글자를 이는 분홍. 같은 색조를 87%로 낮춘 값이고 흰 글자·흰 바탕 양쪽에서
     4.98:1입니다. 채운 단추·흰 글자 배지·작은 분홍 글자는 전부 이것입니다. */
  --color-primary-ink: #C23B7D;
  --color-on-primary: #FFFFFF;
  --color-secondary: #F9A8D4;
  --color-accent: #8B5CF6;
  --color-on-accent: #FFFFFF;

  --color-background: #FDF2F8;
  --color-foreground: #831843;
  --color-card: #FFFFFF;
  --color-card-foreground: #831843;

  --color-muted: #F1EEF5;
  --color-muted-foreground: #475569;
  --color-border: #FBCFE8;
  --color-destructive: #DC2626;
  --color-ring: #EC4899;

  /* 언니 앱처럼 본문은 거의 무채색으로 둡니다. 분홍은 강조에만 —
     화면 전체가 분홍이면 값·평점 같은 정보가 묻힙니다. */
  --ink: #17171B;
  --ink-2: #4B4B55;
  /* 보조 정보. 흰 바탕 4.83:1 · surface-2 위 4.51:1 — 12px 글자도 AA를 넘습니다.
     처음 쓰던 #8A8A96은 3.41:1로 미달이었습니다. */
  --ink-3: #71717B;
  --line: #EEEEF2;
  --surface: #FFFFFF;
  --surface-2: #F7F7FA;

  /* --- 간격 (4/8 배수) --- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;

  /* --- 모서리 --- */
  --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --radius-xl: 20px;
  --radius-pill: 999px;

  /* --- 그림자 (Soft UI Evolution: 뉴모피즘보다 또렷하게) --- */
  --shadow-sm: 0 1px 2px rgba(23, 23, 27, .06);
  --shadow: 0 2px 8px rgba(23, 23, 27, .07);
  --shadow-lg: 0 8px 24px rgba(23, 23, 27, .10);

  /* --- 움직임 --- */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur-fast: 150ms;
  --dur: 220ms;

  --z-bar: 40;
  --z-sheet: 100;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  font-family: 'Noto Sans KR', system-ui, -apple-system, sans-serif;
  font-size: 16px;              /* 모바일 본문 16px 미만 금지 */
  line-height: 1.5;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

/* 라틴 표시용(브랜드·수치). 한글에는 쓰지 않습니다. */
.latin { font-family: 'Archivo', system-ui, sans-serif; letter-spacing: .02em; }

img { max-width: 100%; display: block; }

/* `hidden` 은 숨으라는 뜻입니다.
   브라우저의 기본값(`display:none`)은 **클래스 하나에도 집니다** — `.err { display:block }`
   같은 것을 얹으면 `hidden` 을 걸어도 그대로 보입니다. 빈 칸이나 빈 띠로 남아
   「왜 여기 아무것도 없는 자리가 있지」가 됩니다. 여기서 못을 박습니다. */
[hidden] { display: none !important; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* 눈에 보이는 초점 테. 지우지 않습니다. */
:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

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

/* ============================================================
   화면 뼈대
   ============================================================ */
.screen {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
}

.appbar {
  position: sticky; top: 0; z-index: var(--z-bar);
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  /* 스크롤 내용과 겹칠 때 경계가 보여야 합니다. */
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease);
}
.appbar.is-stuck { border-bottom-color: var(--line); }
.appbar__title { font-size: 20px; font-weight: 700; margin: 0; }
.appbar__spacer { flex: 1; }

.content { flex: 1; padding-bottom: var(--space-6); }

/* 하단 막대가 내용 위를 덮지 않도록 자리를 비웁니다. */
.content--has-tabbar { padding-bottom: calc(64px + env(safe-area-inset-bottom) + var(--space-4)); }
.content--has-cta    { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }

.section { padding: var(--space-6) var(--space-4) 0; }
.section__head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: var(--space-4);
}
.section__title { font-size: 19px; font-weight: 700; margin: 0; }
/* 「전체 보기」도 눌러야 하는 것입니다 — 글자 높이만큼만 두면 닿지 않습니다.
   보이는 크기는 그대로 두고 닿는 넓이만 늘립니다. */
.section__more {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-2);
  margin: -11px calc(-1 * var(--space-2));
  font-size: 14px; color: var(--ink-3); text-decoration: underline;
}
.section__sub { font-size: 14px; color: var(--ink-3); margin: calc(-1 * var(--space-2)) 0 var(--space-4); }

/* ============================================================
   하단 탭 — 다섯 칸까지, 아이콘과 글자를 함께
   ============================================================ */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bar);
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar__item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 0 7px;
  min-height: 56px;                 /* 손가락이 닿는 크기 */
  color: var(--ink-3);
  font-size: 11px; font-weight: 500;
  transition: color var(--dur-fast) var(--ease);
}
.tabbar__item[aria-current='page'] { color: var(--ink); font-weight: 700; }
.tabbar__item[aria-current='page'] svg { stroke-width: 2.2; }
.tabbar__item svg { width: 24px; height: 24px; }

/* ============================================================
   카드·목록
   ============================================================ */
.card {
  background: var(--color-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.card--outline { box-shadow: none; border: 1px solid var(--line); }

.tile {
  display: flex; align-items: center; gap: var(--space-4);
  width: 100%;
  padding: var(--space-4) var(--space-4);
  min-height: 56px;
  text-align: left;
  transition: background var(--dur-fast) var(--ease);
}
.tile:active { background: var(--surface-2); }
.tile__label { flex: 1; font-size: 16px; }
.tile__icon { width: 24px; height: 24px; color: var(--ink); flex: none; }
.tile__chev { width: 20px; height: 20px; color: var(--ink-3); flex: none; }

/* 썸네일 자리. 사진이 없어도 자리를 잡아 화면이 흔들리지 않게 합니다. */
.thumb {
  border-radius: var(--radius);
  background:
    radial-gradient(120% 90% at 70% 10%, #FBD9E6 0%, #F3E4F5 55%, #EDE7F6 100%);
  flex: none;
  aspect-ratio: 1 / 1;
}
.thumb--wide { aspect-ratio: 16 / 10; width: 100%; }

/* ============================================================
   조각들
   ============================================================ */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: 13.5px; font-weight: 500; white-space: nowrap;
}
.chip--on { border-color: var(--ink); font-weight: 700; }

.badge {
  display: inline-flex; align-items: center;
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 11.5px; font-weight: 700;
}
.badge--sale { background: #FFF1F4; color: #CA365B; }  /* 옅은 분홍 위 4.57:1 */
/* accent(#8B5CF6)를 옅은 바탕에 얹으면 3.69:1입니다 — 배지 글자는 작아
   4.5:1이 필요해 같은 보라를 어둡게 씁니다(5.35:1). */
.badge--free { background: var(--color-muted); color: #6D3EE0; }

.price { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
/* 할인율. 17px는 「큰 글자」(18.66px 굵게 / 24px)에 못 미쳐 4.5:1이 필요합니다 —
   처음 쓰던 #FF5A5F는 3.05:1이었습니다. */
.price__off { font-size: 17px; font-weight: 800; color: #CC484C; }
.price__now { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
/* 값·평점은 자릿수가 흔들리지 않게 고정폭 숫자로 */
.price__now, .price__was, .rating { font-variant-numeric: tabular-nums; }
.price__was { font-size: 13px; color: var(--ink-3); text-decoration: line-through; }
.price__unit { font-size: 12.5px; color: var(--ink-3); }

.rating { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 600; }
.rating__count { color: var(--ink-3); font-weight: 400; }

.meta { font-size: 12.5px; color: var(--ink-3); }

/* --- 단추 --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  min-height: 52px;
  padding: 0 var(--space-5);
  border-radius: var(--radius);
  font-size: 15px; font-weight: 700;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.btn:active { transform: scale(.985); }   /* 눌린 것이 보이되 자리는 안 밀리게 */
.btn--primary { background: var(--color-primary-ink); color: var(--color-on-primary); }
.btn--dark { background: var(--ink); color: #fff; }
.btn--ghost { background: var(--surface-2); color: var(--ink); }
.btn--outline { border: 1px solid var(--ink); }

/* 화면 위 아이콘 단추. 화면마다 베껴 두던 것을 한 곳으로 옮깁니다. */
.iconbtn {
  position: relative; width: 44px; height: 44px; flex: none;
  display: grid; place-items: center; border-radius: 50%; color: var(--ink);
}
.iconbtn:active { background: var(--surface-2); }
/* 읽지 않은 수는 점 하나로 두지 않고 숫자를 적습니다 —
   몇 건인지 모르면 지금 들어갈지 나중에 볼지 정할 수 없습니다. */
.iconbtn__dot {
  position: absolute; top: 4px; right: 3px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: var(--radius-pill); background: var(--color-primary-ink); color: #fff;
  font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center;
  font-variant-numeric: tabular-nums; border: 2px solid var(--surface);
}
.btn[disabled] { background: #E4E4EA; color: #9A9AA4; cursor: not-allowed; transform: none; }

/* 화면 아래 고정 행동 막대 */
.ctabar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bar);
  display: flex; gap: var(--space-3);
  padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--line);
}

/* --- 옆으로 넘기는 줄 --- */
.hscroll {
  display: flex; gap: var(--space-3);
  overflow-x: auto;
  padding: 0 var(--space-4) var(--space-2);
  margin: 0 calc(-1 * var(--space-4));
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.hscroll::-webkit-scrollbar { display: none; }
.hscroll > * { scroll-snap-align: start; }

/* 옆으로 흐르는 줄에 「더 있다」를 알리는 자리.
   막대를 감춰 두면(모바일은 늘 감춰집니다) 오른쪽에 더 있는지 알 길이
   없어, 끝에 옅은 그림자를 둡니다. 있을 때만 켜지므로 끝까지 밀면
   사라집니다 — 늘 켜 두면 그것도 거짓말입니다. */
.xrow { position: relative; }
.xrow::before, .xrow::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 28px;
  pointer-events: none; opacity: 0; z-index: 1;
  transition: opacity var(--dur-fast) var(--ease);
}
.xrow::before { left: 0;  background: linear-gradient(to right, var(--surface), transparent); }
.xrow::after  { right: 0; background: linear-gradient(to left,  var(--surface), transparent); }
.xrow.has-left::before  { opacity: 1; }
.xrow.has-right::after  { opacity: 1; }

/* 현지시간 병기. 한국시간이 본값이고 현지는 곁말이라 옅게 둡니다 —
   같은 굵기로 두면 어느 쪽으로 잡은 것인지 되묻게 됩니다. */
.tz { color: var(--ink-3); font-weight: 400; font-size: .86em; }

/* --- 예약 진행 다섯 걸음 --- */
.steps5 { list-style: none; margin: 0; padding: 0; }
.s5 { display: flex; gap: var(--space-3); position: relative; }
.s5:not(:last-child) { padding-bottom: var(--space-4); }
/* 걸음을 잇는 선. 마지막 걸음 뒤에는 그리지 않습니다 — 더 갈 곳이 없습니다. */
.s5:not(:last-child)::before {
  content: ''; position: absolute; left: 11px; top: 26px; bottom: 4px;
  width: 2px; background: var(--line);
}
.s5--done:not(:last-child)::before { background: var(--ink); }
.s5__n {
  position: relative; z-index: 1;
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums;
  background: var(--surface-2); color: var(--ink-3);
}
.s5--done .s5__n { background: var(--ink); color: #fff; }
.s5--now  .s5__n { background: var(--color-primary-ink); color: #fff; }
.s5__b { flex: 1; min-width: 0; padding-top: 2px; }
.s5__t { display: block; font-size: 14.5px; color: var(--ink-3); }
.s5--done .s5__t { color: var(--ink-2); }
.s5--now  .s5__t { color: var(--ink); font-weight: 700; }
.s5__d { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 3px; line-height: 1.5; }
/* 좁은 자리(마이페이지 카드)에서는 간격만 줄입니다 — 걸음을 빼지 않습니다. */
.steps5--compact .s5:not(:last-child) { padding-bottom: var(--space-3); }
.steps5--compact .s5__t { font-size: 14px; }

/* --- 빈 자리 --- */
.empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  padding: var(--space-10) var(--space-4);
  background: var(--surface-2);
  border-radius: var(--radius-lg);
  text-align: center;
}
.empty__icon {
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: #EDEDF2; color: var(--ink-3);
  margin-bottom: var(--space-2);
}
.empty__title { font-size: 15px; font-weight: 700; margin: 0; }
.empty__body { font-size: 13.5px; color: var(--ink-3); margin: 0; }

/* --- 검색칸 --- */
.search {
  display: flex; align-items: center; gap: var(--space-3);
  height: 48px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: 14.5px;
}

/* --- 탭 (화면 안) ---
   칸을 줄여 글자를 접지 않습니다. 「이벤트」가 「이벤/트」가 되면 탭 줄이
   세 줄로 부풀고, 무엇을 고르는 자리인지도 흐려집니다. 넘치면 **옆으로
   흐르게** 두고(.xrow가 끝에 「더 있다」를 켭니다) 접지 않습니다. */
.tabs {
  display: flex; gap: var(--space-5);
  border-bottom: 1px solid var(--line);
  padding: 0 var(--space-4);
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-padding-inline: var(--space-4);
}
.tabs::-webkit-scrollbar { display: none; }
.tabs__item {
  flex: none;
  min-width: 44px;
  padding: var(--space-3) var(--space-2);
  font-size: 15px; color: var(--ink-3);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tabs__item[aria-selected='true'] { color: var(--ink); font-weight: 700; border-bottom-color: var(--ink); }

/* 화면 읽기용으로만 남기는 글 */
.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;
}