/* ============================================================
   Bboggl 디자인 시스템 — 토스 · 클린 블루
   레시피에 명시된 값(HEX / radius / 폰트)을 그대로 사용합니다.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap');

:root{
  /* 색 조합: 토스 · 클린 블루 (레시피 지정값 그대로) */
  --primary:#3182F6;
  --primary-dark:#1B64DA;
  --text:#4E5968;
  --sub:#8B95A1;
  --bg:#F2F4F6;
  --surface:#FFFFFF;
  --border:#E5E8EB;

  /* 보조 시맨틱 컬러 (라이크/에러 등 최소한의 확장) */
  --like:#FF4D6A;
  --danger:#F04452;
  --success:#1B64DA;

  /* 타이포 스케일 */
  --fs-xs:12px;
  --fs-sm:13px;
  --fs-base:15px;
  --fs-md:17px;
  --fs-lg:20px;
  --fs-xl:26px;
  --fs-xxl:34px;

  /* 라운드 / 그림자 / 간격 */
  --radius-sm:8px;
  --radius-md:10px;   /* 버튼 radius: 레시피 지정값 */
  --radius-lg:16px;
  --radius-full:999px;
  --shadow-card:0 2px 8px rgba(20,25,32,.06);
  --shadow-float:0 8px 24px rgba(20,25,32,.16);
  --header-h:64px;
  --container-w:1160px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
  font-family:'Noto Sans KR',sans-serif; /* 폰트: 레시피 지정값 */
  background:var(--bg);
  color:var(--text);
  font-size:var(--fs-base);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{font-weight:700;color:#191F28;margin:0}
h4,h5,h6{font-weight:700;color:#191F28;margin:0}
p{margin:0}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
button{font-family:inherit}
img{max-width:100%;display:block}

.container{
  max-width:var(--container-w);
  margin:0 auto;
  padding:0 20px;
}

/* 버튼 모양: 외곽선 (레시피 지정값 그대로) */
.btn{
  border-radius:10px;
  padding:11px 19px;
  font-weight:700;
  font-size:var(--fs-sm);
  background:transparent;
  color:var(--primary);
  border:1.5px solid var(--primary);
  cursor:pointer;
  transition:.15s;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  white-space:nowrap;
}
.btn:hover{background:var(--primary);color:#fff}

/* 채움형 보조 버튼 (CTA 강조용 — 디자인 시스템 확장) */
.btn-solid{
  border-radius:10px;
  padding:11px 19px;
  font-weight:700;
  font-size:var(--fs-sm);
  background:var(--primary);
  color:#fff;
  border:1.5px solid var(--primary);
  cursor:pointer;
  transition:.15s;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.btn-solid:hover{background:var(--primary-dark);border-color:var(--primary-dark)}

.btn-sm{padding:7px 14px;font-size:var(--fs-xs);border-radius:8px}

/* 아이콘: 솔리드(채움) — 레시피 지정값 */
.icon{width:24px;height:24px;fill:currentColor;stroke:none;flex-shrink:0}
.icon-sm{width:18px;height:18px}
.icon-lg{width:32px;height:32px}

/* 접근성 유틸 */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.visually-hidden{display:none}

::selection{background:rgba(49,130,246,.18)}

/* 스크롤바 (선택적 미세 디테일) */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#D1D6DB;border-radius:99px}
::-webkit-scrollbar-track{background:transparent}