/* flow:er 공통 스타일 (B+A 조합 리디자인)
 * 각 페이지의 인라인 <style> 뒤에 불러와 토큰을 덮어쓴다.
 * 아이콘: /assets/icons/flower-icons.svg 스프라이트 → <svg class="fi"><use href="/assets/icons/flower-icons.svg?v=1#id"/></svg>
 */

:root {
  --primary: #c4177a;          /* 흰 글자 대비 5.6:1 — 버튼·강조 */
  --primary-dark: #a3125f;     /* 작은 글자·태그 글자 */
  --primary-deep: #8a0f50;
  --primary-light: #fde8f2;    /* 칩·옅은 배경 */
  --primary-soft: #fff0f6;
  --bg: #fff6f9;
  --surface: #ffffff;
  --surface-low: #fbf3f6;
  --surface-container: #f6eef2;
  --on-surface: #2a2226;
  --on-surface-variant: #6b5f65;
  --text-body: #4d4247;
  --outline: #8d7a83;
  --outline-variant: #ead8e0;
  --divider: #f5eaf0;
  --shadow-card: 0 8px 24px rgba(196, 23, 122, 0.08);

  --fitness: #2a54a8;   --fitness-bg: #e8efff;   --fitness-ink: #1f3f80;
  --beauty: #c4177a;    --beauty-bg: #fde8f2;    --beauty-ink: #8a0f50;
  --nutrition: #1f7a46; --nutrition-bg: #e4f5ea; --nutrition-ink: #17603a;
  --mental: #5b2fc0;    --mental-bg: #efe8fd;    --mental-ink: #4a25a0;

  --font: 'IBM Plex Sans KR', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --radius-card: 24px;
  --radius-tile: 20px;
  --fnav-h: 72px;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--on-surface);
  word-break: keep-all;
}
button, input, select, textarea { font-family: inherit; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ── 아이콘 */
svg.fi { width: 24px; height: 24px; fill: currentColor; flex-shrink: 0; display: inline-block; vertical-align: middle; }
svg.fi-b { stroke: currentColor; stroke-width: 0.6px; stroke-linejoin: round; } /* 작은 크기에서 라인 아이콘 굵기 보정 */
.fi-16 { width: 16px !important; height: 16px !important; }
.fi-20 { width: 20px !important; height: 20px !important; }
.fi-28 { width: 28px !important; height: 28px !important; }
.fi-32 { width: 32px !important; height: 32px !important; }
.fi-36 { width: 36px !important; height: 36px !important; }
.fi-48 { width: 48px !important; height: 48px !important; }

/* ── 헤더 */
.fh {
  position: sticky; top: 0; z-index: 100;
  height: 56px; padding: 0 12px 0 16px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(255, 246, 249, 0.92);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.fh-logo { display: flex; align-items: center; }
.fh-logo img { height: 28px; width: auto; display: block; }
.fh-title { font-size: 17px; font-weight: 700; margin: 0; }
.fh-actions { display: flex; gap: 4px; align-items: center; }
.fh-btn {
  width: 44px; height: 44px; border: 0; border-radius: 22px;
  background: var(--surface); color: var(--on-surface);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; text-decoration: none;
}
.fh-btn .material-symbols-outlined { font-size: 22px; }

/* ── 카드·타일 */
.fcard { background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.fsec { padding: 28px 16px 0; }
.fsec-title { margin: 0 0 12px; font-size: 19px; font-weight: 700; color: var(--on-surface); }
.fsec-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.fsec-head .fsec-title { margin: 0; }
.fmore { font-size: 14px; color: var(--on-surface-variant); padding: 10px 0; text-decoration: none; }

/* ── 버튼 */
.fbtn {
  height: 50px; padding: 0 22px; border: 0; border-radius: 25px;
  background: var(--primary); color: #fff;
  font-size: 16px; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  text-decoration: none;
}
.fbtn:active { background: var(--primary-dark); }
.fbtn--ghost { background: var(--surface); color: var(--primary-dark); box-shadow: inset 0 0 0 1.5px var(--outline-variant); }
.fbtn--soft { background: var(--primary-light); color: var(--primary-dark); }
.fbtn--block { width: 100%; }
.fbtn:disabled { opacity: .5; cursor: default; }

/* ── 칩·태그 */
.fchip {
  height: 42px; padding: 0 16px; border-radius: 21px; border: 0;
  background: var(--surface); color: var(--text-body);
  font-size: 15px; font-weight: 500; white-space: nowrap; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
}
.fchip.active, .fchip[aria-pressed="true"] { background: var(--primary); color: #fff; font-weight: 600; }
.ftag {
  display: inline-flex; align-items: center; align-self: flex-start;
  padding: 4px 10px; border-radius: 12px;
  font-size: 13px; font-weight: 600;
  background: var(--primary-light); color: var(--primary-dark);
}
.ftag--fitness { background: var(--fitness-bg); color: var(--fitness-ink); }
.ftag--beauty { background: var(--beauty-bg); color: var(--beauty-ink); }
.ftag--nutrition { background: var(--nutrition-bg); color: var(--nutrition-ink); }
.ftag--mental { background: var(--mental-bg); color: var(--mental-ink); }
.fcat-text--fitness { color: var(--fitness); }
.fcat-text--beauty { color: var(--primary-dark); }
.fcat-text--nutrition { color: var(--nutrition); }
.fcat-text--mental { color: var(--mental); }

/* ── 입력 */
.finput {
  height: 50px; box-sizing: border-box; padding: 0 18px; width: 100%;
  border: 0; border-radius: 25px; background: var(--surface);
  font-size: 16px; color: var(--on-surface);
  box-shadow: inset 0 0 0 1.5px var(--outline-variant);
}
.finput:focus { outline: none; box-shadow: inset 0 0 0 2px var(--primary); }

/* ── 하단 내비: 선택된 탭만 솔리드 아이콘 */
.fnav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
  height: calc(var(--fnav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  background: var(--surface);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -6px 20px rgba(196, 23, 122, 0.06);
}
@media (min-width: 768px) { .fnav { max-width: 480px; margin: 0 auto; } }
.fnav-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 12px; color: var(--on-surface-variant); text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.fnav-item .fi-on { display: none; }
.fnav-item.active { color: var(--primary); font-weight: 700; }
.fnav-item.active .fi-off { display: none; }
.fnav-item.active .fi-on { display: inline-block; }

/* ── 푸터 */
.ffoot { padding: 20px 16px 16px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.ffoot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; font-size: 13px; }
.ffoot-links a, .ffoot small { color: var(--on-surface-variant); text-decoration: none; font-size: 12px; }
.ffoot-links a { font-size: 13px; }

/* ── 아바타(이니셜) */
.favatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--primary-light); color: var(--primary-dark);
  font-size: 13px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}