/* ============================================================
   긁? — Design System v2
   화이트 · Pretendard · 진한 보라 포인트 · 미니멀
   ============================================================ */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css");

:root {
  /* ---- Color ---- */
  --bg:        #ffffff;
  --bg-2:      #fafafa;   /* 옅은 섹션 배경 */
  --surface:   #ffffff;

  --ink:       #18181b;   /* 본문 */
  --ink-2:     #52525b;   /* 보조 */
  --ink-3:     #a1a1aa;   /* 캡션/플레이스홀더 */

  --line:      #ececef;   /* 보더 */
  --line-2:    #e0e0e6;

  --primary:   #000000;   /* 블랙 (메인 포인트 — 흑백 대비) */
  --primary-d: #18181b;   /* hover/active */
  --primary-l: #f4f4f5;   /* 옅은 회색 배경 */
  --primary-l2:#e9e9ec;

  /* 상태 — 완전 흑백. 농도(검정↔회색)로 위험도 표현 */
  --safe:  #71717a;   /* 안전 = 옅은 회색 */
  --warn:  #3f3f46;   /* 주의 = 진회색 */
  --bad:   #000000;   /* 위험 = 검정(가장 강함) */
  --safe-l:#f4f4f5;
  --warn-l:#e4e4e7;
  --bad-l: #18181b;   /* 위험 배경 = 검정, 글자는 흰색 */

  /* ---- Radius (절제) ---- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* ---- Shadow (아주 옅게) ---- */
  --sh-1: 0 1px 2px rgba(24,24,27,0.04);
  --sh-2: 0 4px 16px rgba(24,24,27,0.06);
  --sh-3: 0 12px 32px rgba(24,24,27,0.10);

  --font: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;

  --pad: 20px;
  --gap: 14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; }

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

/* ============ 모바일 프레임 ============ */
.phone {
  width: 390px;
  min-height: 844px;
  margin: 32px auto;
  background: var(--bg);
  border-radius: 40px;
  box-shadow: var(--sh-3), 0 0 0 10px #18181b;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}
/* 다이나믹 아일랜드 (단일) */
.phone::before {
  content: ""; position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 108px; height: 30px; background: #000;
  border-radius: 99px; z-index: 50;
}
.screen {
  flex: 1; display: flex; flex-direction: column;
  padding: 58px var(--pad) 0;
  overflow-y: auto;
}

/* ===== 임베드(미리보기) 모드 — index iframe 전용. 폰을 고정 규격으로 ===== */
html.embed, html.embed body { margin:0; padding:0; background:transparent; }
html.embed .phone {
  /* 베젤(box-shadow 10px)은 요소 바깥에 그려지므로, margin 10px 로 밀어
     사방 베젤이 iframe(410x864) 안에 온전히 들어오게 한다 → 좌상단 잘림 방지 */
  margin: 10px;
  width: 390px;
  height: 844px;          /* 고정 — min-height 가변 제거 */
  min-height: 844px;
  box-shadow: 0 0 0 10px #18181b;   /* 베젤만, 외부 그림자 제거 */
}
html.embed .screen { overflow-y: auto; }

/* 얇고 연한 스크롤바 (폰 내부 세로 스크롤) — 전 화면 공통 */
.screen { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.14) transparent; }
.screen::-webkit-scrollbar { width: 4px; }
.screen::-webkit-scrollbar-track { background: transparent; }
.screen::-webkit-scrollbar-thumb { background: rgba(0,0,0,.14); border-radius: 99px; }
.screen:hover::-webkit-scrollbar-thumb { background: rgba(0,0,0,.24); }

/* ============ 카드 ============ */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  padding: var(--pad);
}
.card-fill { background: var(--bg-2); border-color: transparent; box-shadow: none; }

/* ============ 버튼 ============ */
.btn {
  font-family: var(--font);
  font-weight: 600;
  font-size: 15px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  padding: 14px 20px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .15s ease, border-color .15s ease, opacity .15s ease;
  letter-spacing: -0.01em;
}
.btn:active { opacity: .85; }
.btn-primary { color: #fff; background: var(--primary); }
.btn-primary:hover { background: var(--primary-d); }
.btn-primary:disabled { background: var(--line-2); color: var(--ink-3); cursor: not-allowed; }
.btn-ghost { color: var(--ink); background: var(--bg); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--bg-2); }
.btn-text { color: var(--primary); background: transparent; padding: 12px; }
.btn-block { width: 100%; }
.btn-sm { padding: 9px 14px; font-size: 13px; border-radius: var(--r-sm); }

/* ============ 칩 / 배지 ============ */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 600;
  background: var(--bg-2); color: var(--ink-2); border: 1px solid var(--line);
}
.chip.purple { background: var(--primary-l); color: var(--primary); border-color: transparent; }
.chip.safe   { background: #fff; color: var(--ink-2); border-color: var(--line-2); }
.chip.warn   { background: var(--warn-l); color: var(--ink); border-color: transparent; }
.chip.bad    { background: var(--bad-l);  color: #fff; border-color: transparent; }

/* ============ 헤더 ============ */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  height: 44px; margin-bottom: 16px;
}
.topbar .title { font-size: 17px; font-weight: 700; }
.icon-btn {
  width: 40px; height: 40px; border-radius: var(--r-md); border: none; cursor: pointer;
  background: transparent; color: var(--ink);
  display: grid; place-items: center;
}
.icon-btn:hover { background: var(--bg-2); }
.icon-btn svg { width: 22px; height: 22px; }

/* ============ 로고 ============ */
.logo {
  font-weight: 800; letter-spacing: -0.04em; color: var(--primary);
}

/* ============ 하단 탭바 ============ */
.tabbar {
  position: sticky; bottom: 0; left:0; right:0; margin-top: auto;
  display: flex; justify-content: space-around; align-items: center;
  padding: 10px 8px calc(10px + env(safe-area-inset-bottom));
  background: var(--bg); border-top: 1px solid var(--line);
}
.tab { display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 500; color: var(--ink-3); cursor: pointer; flex:1; }
.tab.active { color: var(--primary); }
.tab svg { width: 22px; height: 22px; }

/* ============ 진행/게이지 막대 ============ */
.bar { height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: 99px; background: var(--primary); }

/* ============ 입력 ============ */
.input {
  width: 100%; font-family: var(--font); font-size: 15px; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--r-md);
  padding: 14px 16px; outline: none; transition: border-color .15s;
}
.input::placeholder { color: var(--ink-3); }
.input:focus { border-color: var(--primary); }

/* ============ 유틸 ============ */
.row { display: flex; gap: var(--gap); }
.col { display: flex; flex-direction: column; gap: var(--gap); }
.between { display: flex; align-items: center; justify-content: space-between; }
.center { display: grid; place-items: center; }
.muted { color: var(--ink-2); }
.caption { color: var(--ink-3); font-size: 12px; }
.divider { height: 1px; background: var(--line); border: none; }
.spacer { flex: 1; }
h1{font-size:24px;font-weight:800;letter-spacing:-0.03em;}
h2{font-size:18px;font-weight:700;letter-spacing:-0.02em;}
h3{font-size:15px;font-weight:700;}
.mt4{margin-top:4px}.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt20{margin-top:20px}.mt24{margin-top:24px}.mt32{margin-top:32px}
.mb4{margin-bottom:4px}.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}.mb16{margin-bottom:16px}.mb24{margin-bottom:24px}

/* 라인 아이콘 기본 (stroke 상속) */
.ico { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.8;
  fill: none; stroke-linecap: round; stroke-linejoin: round; display: inline-block; vertical-align: middle; }

/* ============ 마이크로 인터랙션 (공통 효과) ============ */
.btn { transition: background .15s ease, border-color .15s ease, transform .12s ease, opacity .15s; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(.97); }
.icon-btn { transition: background .15s, transform .12s; }
.icon-btn:active { transform: scale(.9); }
.chip { transition: background .15s, color .15s, border-color .15s; }
.tab { transition: color .15s, transform .12s; }
.tab:active { transform: scale(.92); }
.card { transition: box-shadow .2s ease, transform .2s ease; }

/* 진입 애니메이션 (화면 로드 시 카드 fade-up) */
@keyframes fadeUp { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform:none; } }
.screen > * { animation: fadeUp .4s ease both; }
.screen > *:nth-child(2){ animation-delay:.04s } .screen > *:nth-child(3){ animation-delay:.08s }
.screen > *:nth-child(4){ animation-delay:.12s } .screen > *:nth-child(5){ animation-delay:.16s }
.screen > *:nth-child(6){ animation-delay:.20s } .screen > *:nth-child(7){ animation-delay:.24s }
@media (prefers-reduced-motion: reduce){ .screen > *{ animation:none } }

/* 막대 채워지는 효과 */
.bar > span { transition: width .6s cubic-bezier(.22,1,.36,1); }

/* 누름 가능한 행 */
.pressable { transition: background .15s, transform .1s; cursor:pointer; }
.pressable:hover { background: var(--bg-2); }
.pressable:active { transform: scale(.99); }

/* 토스트 */
.toast { position:absolute; left:50%; bottom:90px; transform:translateX(-50%) translateY(8px);
  background:#000; color:#fff; font-size:13px; font-weight:600; padding:11px 18px; border-radius:99px;
  opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; z-index:80; white-space:nowrap; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }