:root{
  --bg:#F7F7FA;
  --card:#FFFFFF;
  --text:#111216;
  --muted:#6B6F7B;
  --line:rgba(17,18,22,.08);

  --p:#6A3EB5;        /* primary purple */
  --p2:#EDE7F6;       /* soft purple */
  --shadow: 0 12px 34px rgba(17,18,22,.08);

  --r16:16px;
  --r18:18px;
  --r14:14px;
  --pad:16px;
  --gap:12px;

  --top: 56px;
  --tabs1: 44px;
  --tabs2: 42px;
  --bottom: 68px;  /* safe area 포함 체감 */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
  color:var(--text);
  background:var(--bg);
}

a{color:inherit;text-decoration:none}
button{font:inherit}

.app{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}

/* buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:40px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  font-weight:700;
  letter-spacing:-.2px;
}

.btn--primary{
  background:var(--p);
  border-color:transparent;
  color:#fff;
}

.btn--ghost{
  background:transparent;
}

.iconbtn{
  width:44px;height:44px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  display:grid;place-items:center;
  padding:0;
}
.iconbtn svg{width:22px;height:22px;fill:currentColor}

.iconbtn--sm{
  width:36px;height:36px;border-radius:10px;
}

/* pills */
.pill{
  height:34px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  font-weight:700;
  color:var(--text);
}


/* ===== 카카오 준비중 모달 : 인덱스 위 + 화면 중앙 ===== */

.modal[hidden]{
  display:none !important;
}

.modal{
  position: fixed;          /* ✅ 뷰포트 기준 */
  inset: 0;
  z-index: 2147483647;      /* ✅ 카드/헤더/탭 전부 위 */
  pointer-events: auto;
}

/* 어두운 배경 */
.modal__backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
}

/* ✅ 화면 정확한 중앙 */
.modal__panel{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  width: min(360px, calc(100% - 32px));
  max-width: 92vw;

  background: #fff;
  border-radius: 18px;
  box-shadow: 0 24px 48px rgba(0,0,0,.35);
  overflow: hidden;

  /* 모바일 터치 안정성 */
  touch-action: manipulation;
}

/* 상단 */
.modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid #eee;
}

.modal__x{
  border:0;
  background:transparent;
  font-size:22px;
  line-height:1;
  cursor:pointer;
}

/* 본문 */
.modal__body{
  padding:18px 16px;
  text-align:center;
  font-size:14px;
  color:#333;
  line-height:1.6;
}

/* 하단 버튼 */
.modal__foot{
  padding:14px 16px 18px;
  display:flex;
  justify-content:center;
}

.modal__btn{
  min-width:120px;
  padding:10px 18px;
  border-radius:999px;
  border:0;
  background:#111;
  color:#fff;
  font-size:14px;
  cursor:pointer;
}