/* ═══════════════════════════════════════════════════════════
   아이노미 (I KNOW ME) — 라이트 테마 모바일앱 디자인 시스템
   포크레터 앱 UI 를 기준으로 잡았다. 다크 테마 잔재를 남기지 말 것.
   ═══════════════════════════════════════════════════════════ */

/* 인스타그램 브랜드 그라데이션을 색 기준으로 삼는다.
   인스타에 최적화된 도구라는 포지셔닝을 색으로 먼저 전달한다.
   단, 인스타 로고 형태(둥근 사각 카메라 글리프)는 따라 쓰지 않는다 — 상표 문제. */
:root {
  --bg:        #F6F5F8;
  --bg-tint:   #F9EEF6;          /* 상단 은은한 핑크 틴트 */
  --card:      #FFFFFF;
  --card-2:    #F8F6FA;
  --text:      #16141A;
  --text-2:    #5E5866;
  --muted:     #918B99;
  --faint:     #B7B1BE;
  --line:      rgba(22,20,26,.07);
  --line-2:    rgba(22,20,26,.13);

  /* 인스타 그라데이션 스톱 */
  --ig-1: #FEDA75;  --ig-2: #FA7E1E;  --ig-3: #D62976;
  --ig-4: #962FBF;  --ig-5: #4F5BD5;
  --ig-grad: linear-gradient(135deg, var(--ig-1), var(--ig-2) 25%, var(--ig-3) 50%, var(--ig-4) 75%, var(--ig-5));

  /* 본문 대비를 위해 그라데이션 중앙값(마젠타)을 단색 액센트로 쓴다.
     흰 배경 대비 약 5:1 로 작은 글씨에도 통과한다. */
  --accent:    #D62976;
  --accent-2:  #962FBF;
  --accent-bg: #FCE7F1;
  --ok:        #12B886;
  --ok-bg:     #DFF5EC;
  --warn:      #F59F0A;
  --warn-bg:   #FFF3DA;
  --bad:       #E0244F;
  --bad-bg:    #FFE6EC;

  --r-card:   22px;
  --r-btn:    14px;
  --r-input:  12px;
  --sh:       0 2px 12px rgba(20,20,26,.05);
  --sh-lg:    0 8px 28px rgba(20,20,26,.10);
  --sh-fab:   0 8px 22px rgba(214,41,118,.34);

  --tabbar-h: 92px;
  --maxw:     560px;
}

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

/* 인라인 SVG 는 width 속성이 없다. 기본값을 안 주면 flex 안에서 무한정 늘어난다. */
svg { width: 20px; height: 20px; flex: 0 0 auto; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
               "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
}
body { background: linear-gradient(180deg, var(--bg-tint) 0, var(--bg) 340px); min-height: 100vh; }

button, input, select, textarea { font-family: inherit; }
a { color: inherit; }

/* ── 브랜드 워드마크 ─────────────────────────────────────
   영문 `I KNOW ME` · 한글 `아이노미` 두 버전.
   마크는 인스타 그라데이션 원 + 흰 링 + 중앙 점 (렌즈/초점 형태). */
.brand {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 900; font-size: 19px; letter-spacing: -.045em;
  color: #16141A; white-space: nowrap;
}
.brand .bmark { width: 24px; height: 24px; flex: 0 0 auto; }
.brand.ko { letter-spacing: -.06em; }
.brand.lg { font-size: 27px; gap: 10px; }
.brand.lg .bmark { width: 34px; height: 34px; }
.brand.xl { font-size: 38px; gap: 13px; }
.brand.xl .bmark { width: 46px; height: 46px; }
/* 어두운 배경 위 */
.brand.inv { color: #fff; }

/* ═══════════ 앱 셸 ═══════════ */
.app {
  max-width: var(--maxw); margin: 0 auto;
  padding: 0 16px calc(var(--tabbar-h) + 24px);
  position: relative;
}

/* 상단바 */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; height: 58px; margin: 8px 0 14px;
  padding: 0 14px; border-radius: 18px;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  box-shadow: var(--sh);
}
.topbar .ic {
  width: 38px; height: 38px; border-radius: 12px; border: 0; background: transparent;
  display: grid; place-items: center; cursor: pointer; color: var(--text);
}
.topbar .ic:active { background: var(--card-2); }
.topbar .ttl { font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.topbar .act {
  border: 0; background: transparent; color: var(--accent);
  font-size: 14px; font-weight: 700; cursor: pointer; padding: 8px 4px;
}
.topbar .dot {
  position: absolute; top: 12px; right: 20px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--bad);
}

/* 하단 탭바 */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 14px; z-index: 50;
  max-width: var(--maxw); margin: 0 auto; padding: 0 16px;
  display: flex; align-items: center; gap: 10px; pointer-events: none;
}
.tabbar .inner {
  flex: 1; display: grid; grid-template-columns: repeat(3, 1fr);
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-radius: 26px; box-shadow: var(--sh-lg); padding: 8px 6px;
  pointer-events: auto;
}
.tabbar a {
  text-decoration: none; color: var(--muted);
  display: grid; justify-items: center; gap: 2px;
  font-size: 11px; font-weight: 700; padding: 6px 0; border-radius: 18px;
}
.tabbar a.on { color: var(--accent); }
.tabbar a svg { width: 22px; height: 22px; }
.fab-ai {
  pointer-events: auto; flex: 0 0 auto;
  width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--ig-grad);
  box-shadow: var(--sh-fab); display: grid; place-items: center; color: #fff;
}
.fab-ai svg { width: 24px; height: 24px; }

/* 화면 안 FAB */
.fab {
  position: fixed; right: max(20px, calc(50% - var(--maxw)/2 + 20px));
  bottom: calc(var(--tabbar-h) + 18px); z-index: 45;
  width: 54px; height: 54px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--card); color: var(--accent);
  box-shadow: var(--sh-lg); display: grid; place-items: center;
}
.fab svg { width: 24px; height: 24px; }

/* ═══════════ 공통 파츠 ═══════════ */
.card {
  background: var(--card); border-radius: var(--r-card);
  box-shadow: var(--sh); padding: 20px; margin-bottom: 14px;
}
.card.pad0 { padding: 0; overflow: hidden; }
.eyebrow {
  font-size: 11.5px; font-weight: 800; color: var(--accent);
  letter-spacing: .10em; text-transform: uppercase;
}
.h1 { font-size: 24px; font-weight: 800; letter-spacing: -.03em; margin: 4px 0 6px; }
.h2 { font-size: 18px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 4px; }
.sub { font-size: 13.5px; color: var(--muted); margin: 0; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; margin: 22px 2px 10px; }
.sec-head .t { font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.sec-head a { font-size: 13px; color: var(--muted); text-decoration: none; font-weight: 600; }

.btn {
  display: block; width: 100%; padding: 15px; border: 0; border-radius: var(--r-btn);
  background: var(--accent); color: #fff; font-size: 15px; font-weight: 800;
  cursor: pointer; text-align: center; text-decoration: none; letter-spacing: -.01em;
}
.btn:active { opacity: .88; }
.btn.ghost { background: var(--card); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn.soft  { background: var(--accent-bg); color: var(--accent); }
.btn.sm { padding: 11px 16px; width: auto; display: inline-block; font-size: 13.5px; }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2);
  background: var(--card); color: var(--text-2);
  font-size: 13px; font-weight: 700; cursor: pointer;
}
.chip.on { background: var(--accent); border-color: transparent; color: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .02em;
}
.badge.new  { background: var(--accent); color: #fff; }
.badge.hot  { background: var(--bad); color: #fff; }
.badge.gray { background: var(--card-2); color: var(--muted); }
.badge.ok   { background: var(--ok-bg); color: var(--ok); }
.badge.warn { background: var(--warn-bg); color: #B87A00; }

/* 세그먼트 탭 */
.seg {
  display: flex; background: rgba(255,255,255,.9); border-radius: 999px;
  padding: 5px; box-shadow: var(--sh); margin: 0 auto 16px; width: fit-content;
}
.seg button {
  border: 0; background: transparent; cursor: pointer;
  padding: 9px 26px; border-radius: 999px;
  font-size: 14px; font-weight: 700; color: var(--muted);
}
.seg button.on { background: var(--card); color: var(--accent); box-shadow: var(--sh); }

/* 리스트 행 */
.row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.row:last-child { border-bottom: 0; }
.row .g { flex: 1; min-width: 0; }
.row .t { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; }
.row .d { font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.row .v { font-size: 16px; font-weight: 800; white-space: nowrap; }
.row .arw { color: var(--faint); }

/* 파스텔 아이콘 */
.pico {
  width: 40px; height: 40px; border-radius: 13px; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 19px;
}
.pico svg { width: 21px; height: 21px; }
.pi-blue   { background: #E4EDFF; color: #3B6FE0; }
.pi-purple { background: #EFE7FF; color: #7B4DE0; }
.pi-green  { background: #DDF5E7; color: #12925F; }
.pi-yellow { background: #FFF2D5; color: #C98500; }
.pi-pink   { background: #FFE4EA; color: #E0446A; }
.pi-mint   { background: #D8F5F2; color: #0E9E96; }
.pi-orange { background: #FFE9DA; color: #DD6B20; }
.pi-gray   { background: #ECEDF1; color: #64646E; }

/* 기능 타일 그리드 */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile {
  position: relative; display: flex; align-items: center; gap: 11px;
  background: var(--card); border-radius: 18px; box-shadow: var(--sh);
  padding: 14px 12px; text-decoration: none; color: inherit;
}
.tile:active { transform: scale(.985); }
.tile .nm { font-size: 14px; font-weight: 700; letter-spacing: -.02em; }
.tile .badge { position: absolute; top: -6px; right: 8px; }

/* 통계 3칸 */
.stat3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 14px; }
.stat3 > div {
  background: var(--card); border-radius: 16px; box-shadow: var(--sh);
  padding: 14px 8px; text-align: center;
}
.stat3 .k { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.stat3 .v { font-size: 19px; font-weight: 800; margin-top: 3px; letter-spacing: -.02em; }

/* 입력 */
label.f { display: block; margin-bottom: 13px; }
label.f .l { display: block; font-size: 12.5px; font-weight: 700; color: var(--text-2); margin-bottom: 6px; }
label.f .l i { font-style: normal; font-weight: 400; color: var(--faint); }
input[type=text], input[type=url], input[type=number], input[type=email], select, textarea {
  width: 100%; padding: 13px 14px; font-size: 15.5px;
  color: var(--text); background: var(--card-2);
  border: 1px solid var(--line); border-radius: var(--r-input);
  appearance: none;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; background: #fff; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%238E8E99' stroke-width='1.7' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px;
}
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.err { color: var(--bad); font-size: 13px; margin: 8px 0 0; display: none; }
.err.on { display: block; }

/* 바텀시트 */
.sheet-bg {
  position: fixed; inset: 0; z-index: 90; background: rgba(16,16,22,.42);
  opacity: 0; pointer-events: none; transition: opacity .22s;
}
.sheet-bg.on { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 91;
  max-width: var(--maxw); margin: 0 auto;
  background: var(--card); border-radius: 26px 26px 0 0;
  box-shadow: 0 -8px 40px rgba(0,0,0,.16);
  padding: 10px 20px calc(24px + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform .28s cubic-bezier(.2,.8,.3,1);
  max-height: 86vh; overflow-y: auto;
}
.sheet.on { transform: none; }
.sheet .grab { width: 40px; height: 4px; border-radius: 99px; background: var(--line-2); margin: 4px auto 14px; }
.sheet .st { font-size: 17px; font-weight: 800; text-align: center; letter-spacing: -.02em; }
.sheet .ss { font-size: 13px; color: var(--muted); text-align: center; margin: 2px 0 16px; }

/* 토스트 */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + 20px); z-index: 95;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: #17171E; color: #fff; font-size: 13.5px; font-weight: 600;
  padding: 12px 20px; border-radius: 999px; transition: .25s;
  box-shadow: var(--sh-lg); white-space: nowrap;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* 빈 상태 */
.empty { text-align: center; padding: 34px 12px; color: var(--muted); font-size: 13.5px; }
.empty .plus {
  width: 46px; height: 46px; border-radius: 50%; margin: 0 auto 12px;
  background: var(--card-2); color: var(--muted);
  display: grid; place-items: center; font-size: 24px; font-weight: 300;
}

/* 알림/점검 배너 */
.note {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 13px 14px; border-radius: 14px; font-size: 13px; line-height: 1.5;
}
.note svg { width: 17px; height: 17px; margin-top: 1px; }
.note.warn { background: var(--warn-bg); color: #8A5B00; }
.note.info { background: var(--accent-bg); color: #2A4FA8; }
.note.ok   { background: var(--ok-bg); color: #0B7051; }
.note b { font-weight: 800; }

.hidden { display: none !important; }
.disclaimer { font-size: 12px; color: var(--faint); line-height: 1.7; margin-top: 14px; }
.disclaimer b { color: var(--text-2); }