/* ─────────────────────────────────────────────────────────────
 *  코인북 — iOS Human Interface Guidelines 기반 스타일
 *  Reference: developer.apple.com/design/human-interface-guidelines
 *  - System font (SF Pro) 우선, Pretendard fallback
 *  - 8pt 그리드 / 44pt 최소 터치 타깃
 *  - iOS System Gray / System Background 팔레트
 *  - Safe Area (notch + home indicator) 풀 대응
 * ───────────────────────────────────────────────────────────── */

[x-cloak] { display: none !important; }

:root {
  /* iOS 8.0+ System Colors — Light Mode */
  --ios-bg:         #F2F2F7;   /* systemGroupedBackground */
  --ios-bg-2:      #FFFFFF;   /* secondarySystemGroupedBackground (card) */
  --ios-fill-1:    rgba(120,120,128,0.12); /* systemFill */
  --ios-fill-2:    rgba(120,120,128,0.08); /* secondarySystemFill */
  --ios-fill-3:    rgba(118,118,128,0.06); /* tertiarySystemFill */
  --ios-separator: rgba(60,60,67,0.18);    /* opaqueSeparator (hairline) */
  --ios-separator-soft: rgba(60,60,67,0.10);

  --ios-label-1:   #000000;                /* primary label */
  --ios-label-2:   rgba(60,60,67,0.85);    /* secondary */
  --ios-label-3:   rgba(60,60,67,0.60);    /* tertiary */
  --ios-label-4:   rgba(60,60,67,0.35);    /* quaternary / placeholder */

  /* Brand & semantic — 2026 트렌드 (세련된 자주색 / Plum & Wine) */
  --brand:         #7E4A6E;   /* 자주 — 차분한 플럼 (primary) */
  --brand-hi:      #9A6088;   /* 밝은 자주 (highlight / hover) */
  --brand-deep:    #5C3253;   /* 깊은 와인 (deep accent) */
  --brand-soft:    #EFE2EA;   /* 라벤더 핑크 (soft background) */
  --accent-sage:   #8AA17C;   /* 보조 세이지 그린 (유지) */
  --accent-terra:  #C97B5E;   /* 보조 소프트 테라코타 (유지) */
  --ios-red:       #B85C7B;   /* 부정/증가 — dusty rose */
  --ios-green:     #8AA17C;   /* 긍정/감소 — sage */
  --ios-blue:      #7A95A8;   /* 정보 — dusty blue */

  /* Radius scale (iOS continuous corners) */
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-2xl: 22px;
  --r-3xl: 28px;
}

html, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01', 'cv11'; /* tabular-ish */
}

/* iOS system font 우선, 한글은 Pretendard로 */
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
               "Pretendard Variable", Pretendard, "Apple SD Gothic Neo",
               system-ui, sans-serif;
  background: var(--ios-bg);
  color: var(--ios-label-1);
  letter-spacing: -0.01em;
}

/* iOS 표준: 모든 터치 가능 요소의 회색 하이라이트 제거 */
button, a, [role="button"], input, select, textarea, label {
  -webkit-tap-highlight-color: transparent;
}

/* 컨테이너 */
@media (max-width: 767px) {
  .device {
    /* 모바일에서는 디바이스 컨테이너가 화면 전체를 정확히 차지하도록 고정 높이 */
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    padding-top: env(safe-area-inset-top);
  }
}
@media (min-width: 768px) {
  /* 데스크탑 프리뷰 — iPhone 14 Pro Max 비율 */
  .device {
    box-shadow:
      0 30px 60px -20px rgba(0,0,0,0.20),
      0 12px 30px -12px rgba(0,0,0,0.12);
  }
}

/* Safe area utilities */
.pb-safe   { padding-bottom: max(0.5rem, env(safe-area-inset-bottom)); }
.pt-safe   { padding-top:    env(safe-area-inset-top); }

/* iOS Hairline border (Retina 0.5px) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .hairline-b { border-bottom-width: 0.5px !important; }
  .hairline-t { border-top-width:    0.5px !important; }
}

/* ─────────────────────────────────────────────────────────────
 *  Form input — iOS rounded-rect / filled style
 * ───────────────────────────────────────────────────────────── */
.input {
  width: 100%;
  background: #FFFFFF;
  border: 1px solid var(--ios-separator);
  color: var(--ios-label-1);
  border-radius: var(--r-md);
  padding: 0 14px;
  height: 44px;             /* iOS minimum touch target */
  font-size: 17px;          /* iOS body (Dynamic Type) */
  line-height: 1.3;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none;
  appearance: none;
}
textarea.input {
  padding: 12px 14px;
  height: auto;
  min-height: 88px;
  line-height: 1.45;
}
/* placeholder — 입력값(17px)보다 한 단계 작게(13px) 두어
   "아직 입력되지 않은 안내문"이라는 시각적 위계를 명확히 한다.
   입력이 시작되면 실제 input font-size(17px)로 돌아간다. */
.input::placeholder {
  color: var(--ios-label-4);
  font-size: 13px;
  letter-spacing: -0.01em;
  opacity: 1; /* Firefox 기본 0.54 보정 */
}
.input::-webkit-input-placeholder { color: var(--ios-label-4); font-size: 13px; letter-spacing: -0.01em; }
.input::-moz-placeholder          { color: var(--ios-label-4); font-size: 13px; letter-spacing: -0.01em; opacity: 1; }
.input:-ms-input-placeholder      { color: var(--ios-label-4); font-size: 13px; letter-spacing: -0.01em; }
.input:hover  { border-color: rgba(60,60,67,0.28); }
.input:focus  {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(126,74,110,0.18);
}
.input[type="date"] {
  font-family: inherit;
}

/* ─────────────────────────────────────────────────────────────
 *  Buttons — iOS Filled / Tinted / Plain
 * ───────────────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  /* 2026 — 자주색 그라데이션 (밝은 플럼 → 깊은 와인) */
  background: linear-gradient(135deg, #9A6088 0%, #7E4A6E 55%, #5C3253 100%);
  color: #FFFFFF;
  font-weight: 600;
  letter-spacing: -0.01em;
  border-radius: var(--r-lg);
  padding: 0 16px;
  height: 50px;             /* iOS large action button — 터치 영역 유지 */
  /* 폰트 크기만 한 단계 축소 (17→15) — 사용자 요청: 하단 액션 버튼 글자 작게 */
  font-size: 15px;
  transition: transform .08s ease, box-shadow .15s ease, opacity .15s ease, filter .15s ease;
  user-select: none;
}
.btn-primary:hover         { box-shadow: 0 8px 22px rgba(92,50,83,0.32); filter: brightness(1.05); }
.btn-primary:active        { transform: scale(0.98); filter: brightness(0.96); }
.btn-primary:focus-visible { outline: 2px solid var(--brand-hi); outline-offset: 2px; }
.btn-primary:disabled,
.btn-primary[disabled]     { transform: none; box-shadow: none; filter: none; cursor: not-allowed; }

/* ─────────────────────────────────────────────────────────────
 *  iOS list / card pressable feedback
 *  버튼/링크에 적용하면 탭 시 살짝 dimming
 * ───────────────────────────────────────────────────────────── */
.tap, .tx-item button, nav button {
  transition: background-color .12s ease, opacity .12s ease, transform .08s ease;
}
.tap:active { opacity: 0.55; }

/* ─────────────────────────────────────────────────────────────
 *  거래 아이템 / 차트 등장 애니메이션
 * ───────────────────────────────────────────────────────────── */
.tx-item {
  animation: txIn .22s ease-out both;
}
@keyframes txIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────────────────────────
 *  도넛 차트 — CSS conic-gradient 기반
 *  SVG + Alpine x-for 의 네임스페이스 이슈를 회피하기 위해 순수 CSS 로 렌더.
 *  - .donut-disc : conic-gradient 로 채운 원판 (실제 색상 표시)
 *  - .donut-hole : 가운데 흰 원 (도넛 hole + 총합 텍스트)
 *  - .donut-label : 각 조각 위에 띄우는 카테고리명·비율 라벨
 * ───────────────────────────────────────────────────────────── */
.donut-disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #F2F2F7;
  transition: background 0.6s cubic-bezier(.65,0,.35,1);
  box-shadow:
    0 2px 6px rgba(16, 24, 40, 0.06),
    0 8px 20px rgba(16, 24, 40, 0.08);
}
.donut-hole {
  position: absolute;
  /* 도넛 두께 ~14% (안쪽 원 지름 72%) */
  inset: 14%;
  border-radius: 50%;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  pointer-events: none;
  box-shadow: inset 0 0 0 0.5px rgba(60,60,67,0.08);
}
/* 조각 위 라벨 — 절대 위치 (left/top은 inline style 로 % 단위) */
.donut-label {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.05;
  pointer-events: none;
  text-align: center;
  /* 라벨이 너무 넓어지지 않도록 */
  max-width: 60px;
}
.donut-label-name {
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.02em;
  /* 어두운 외곽선으로 어떤 색 위에서도 가독성 확보 */
  text-shadow:
    0 0 2px rgba(0,0,0,0.55),
    0 1px 2px rgba(0,0,0,0.45),
    0 0 1px rgba(0,0,0,0.65);
  white-space: nowrap;
}
.donut-label-pct {
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-shadow:
    0 0 2px rgba(0,0,0,0.55),
    0 1px 2px rgba(0,0,0,0.45);
  margin-top: 1px;
}

.bar-fill  { animation: barIn .7s cubic-bezier(.65,0,.35,1) both; }
@keyframes barIn { from { width: 0; } }

/* ─────────────────────────────────────────────────────────────
 *  Scrollbar — iOS에선 보통 보이지 않음
 * ───────────────────────────────────────────────────────────── */
.device ::-webkit-scrollbar { width: 0; height: 0; }
.device { scrollbar-width: none; }

/* iOS 모멘텀 스크롤 */
.device, .device * { -webkit-overflow-scrolling: touch; }

/* ─────────────────────────────────────────────────────────────
 *  Focus
 * ───────────────────────────────────────────────────────────── */
button:focus-visible, a:focus-visible {
  outline: 2px solid var(--brand-hi);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ─────────────────────────────────────────────────────────────
 *  Frosted glass nav (iOS Tab Bar)
 *  - 모바일: viewport 하단에 fixed로 고정 (스크롤과 무관하게 항상 보임)
 *  - 데스크탑 미리보기(md+): 디바이스 프레임 안쪽 하단에 absolute로 배치
 * ───────────────────────────────────────────────────────────── */
.ios-tabbar {
  background: rgba(249,249,251,0.82);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-top: 0.5px solid var(--ios-separator);
  z-index: 30;
}

/* 모바일: 화면 최하단 고정. 디바이스 프레임이 풀스크린이므로 fixed가 자연스럽다 */
@media (max-width: 767px) {
  .ios-tabbar {
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: 0;
  }
}

/* iOS Sheet (modal) — 손잡이바 */
.ios-grabber {
  width: 36px;
  height: 5px;
  border-radius: 3px;
  background: rgba(60,60,67,0.22);
  margin: 6px auto 14px;
}

/* iOS Segmented control (카테고리 그리드 등) */
.seg-selected {
  background: linear-gradient(135deg, #FAF3F7 0%, #EFE2EA 100%) !important;
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 1px rgba(126,74,110,0.45) inset, 0 1px 2px rgba(0,0,0,0.04);
}

/* 카드 (iOS Grouped list)
 * 2026 — 부드럽고 입체감 있는 다층 그림자
 * - 가까운 그림자(선명한 가장자리) + 멀리 퍼지는 앰비언트 그림자 조합
 * - hover/active 시 그림자가 살짝 깊어져 인터랙티브 카드의 피드백 강화
 */
.ios-card {
  background: var(--ios-bg-2);
  border-radius: var(--r-lg);
  border: 0.5px solid var(--ios-separator-soft);
  box-shadow:
    0 1px 2px rgba(16, 24, 40, 0.04),
    0 4px 12px -2px rgba(16, 24, 40, 0.06),
    0 12px 28px -8px rgba(16, 24, 40, 0.08);
  transition: box-shadow .2s ease, transform .2s ease;
}

/* 인터랙티브 카드(버튼/링크 역할) 위에 마우스 올렸을 때만 살짝 떠오르게 */
button.ios-card:hover,
a.ios-card:hover,
.ios-card.is-interactive:hover {
  box-shadow:
    0 2px 4px rgba(16, 24, 40, 0.05),
    0 8px 18px -2px rgba(16, 24, 40, 0.08),
    0 20px 36px -10px rgba(16, 24, 40, 0.12);
  transform: translateY(-1px);
}
button.ios-card:active,
a.ios-card:active,
.ios-card.is-interactive:active {
  transform: translateY(0);
  box-shadow:
    0 1px 2px rgba(16, 24, 40, 0.04),
    0 4px 12px -2px rgba(16, 24, 40, 0.06);
}

/* 중첩된 카드(카드 안의 카드)는 그림자 빼고 fill 만 — 그림자 중첩 방지 */
.ios-card .ios-card {
  box-shadow: none;
  border: 0.5px solid var(--ios-separator-soft);
  background: var(--ios-fill-3);
}

/* 모션 줄이기 환경에서는 hover transform 비활성 */
@media (prefers-reduced-motion: reduce) {
  .ios-card,
  button.ios-card:hover,
  a.ios-card:hover,
  .ios-card.is-interactive:hover {
    transition: none !important;
    transform: none !important;
  }
}

/* 동적 타입 대응: 작은 화면에서 너무 큰 헤딩 줄임 */
@media (max-width: 374px) {
  .ios-hero-title { font-size: 26px !important; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tx-item, .donut-seg, .bar-fill { animation: none !important; transition: none !important; }
  .btn-primary, .tap { transition: none !important; }
}

/* ─────────────────────────────────────────────────────────────
 *  모바일 당겨서 새로고침(pull-to-refresh) / 오버스크롤 바운스 차단
 *  - html/body: 전체 페이지 늘어남 방지 (iOS Safari, Android Chrome)
 *  - .device 내부 스크롤 컨테이너는 자체 스크롤만 허용
 * ───────────────────────────────────────────────────────────── */
html, body {
  background: var(--ios-bg);
  overscroll-behavior: none;
  overscroll-behavior-y: none;
}
@media (max-width: 767px) {
  html, body {
    /* 모바일에서 화면 전체가 위/아래로 늘어나는 현상 차단 */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: auto;
  }
  /* 내부 스크롤 컨테이너는 자체에서만 바운스 차단 */
  .device, .device main, .device section, .device .overflow-y-auto {
    overscroll-behavior: contain;
  }
}

/* iOS 14+ Dynamic Island / Notch 영역의 status bar 텍스트가 contents에 묻히지 않게 */
@supports (padding: max(0px)) {
  .pt-safe-2 { padding-top: max(12px, env(safe-area-inset-top)); }
}