/* =================================================================
   chocolab.co.kr 첫 화면 (2026-10-28 새로) — home.css(로그인 창 등) 위에 덮어쓴다.
   venture.chocolab.co.kr 과 같은 느낌: 큰 글씨, 장식 적게, 흰·연회색 바탕, Pretendard.
   세 공간 색: 대시보드 = 연보라 / 학습 = 하늘 / 소상공인 = 살구
   ================================================================= */
:root {
  --bg: #F6F7FB;
  --line: #E3E0EC;
  --ink: #2B2730;
  --ink-2: #4F4A5A;
  --ink-3: #7A7588;
  --lav: #E7E1FF;    --lav-ink: #5B47B8;   --lav-ring: rgba(140, 115, 250, .26);
  --sky: #DDEBFF;    --sky-ink: #2F61B5;   --sky-ring: rgba(80, 145, 250, .24);
  --peach: #FFE6D3;  --peach-ink: #A65A1E; --peach-ring: rgba(255, 145, 70, .26);
  --mint: #D6F3E8;   --mint-ink: #1F7A5F;
  --radius: 22px;
  --shadow: 0 1px 2px rgba(43, 39, 48, .05), 0 8px 24px -14px rgba(43, 39, 48, .18);
  --f-title: 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif;
  --f-body: 'Pretendard Variable', Pretendard, 'Noto Sans KR', system-ui, sans-serif;
}
body { background: var(--bg); background-image: none; font-family: var(--f-body); font-size: 17px; color: var(--ink); }
h1, h2, h3 { font-family: var(--f-title); letter-spacing: -.025em; margin: 0; }

/* ---------- 머리 ---------- */
.top { background: rgba(246, 247, 251, .94); border-bottom: 1px solid var(--line); }
.top .wrap { height: 70px; justify-content: flex-start; }
.brand img { width: 42px; height: 42px; object-fit: contain; }
.brand b { font-family: var(--f-title); font-weight: 800; font-size: 24px; letter-spacing: -.02em; }
.jump { display: flex; gap: 2px; margin-left: 14px; }
.jump a { padding: 10px 14px; border-radius: 12px; text-decoration: none; font-size: 17px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.jump a:hover { background: #fff; color: var(--ink); }
.spacer { flex: 1; }
.who .name { font-size: 16px; }
.pill { font-size: 16px; padding: 11px 18px; font-family: var(--f-body); }
.tag { font-size: 14px; font-weight: 700; padding: 4px 11px; border-radius: 999px; }
.tag.on { background: var(--mint); color: var(--mint-ink); }
.tag.soon { background: #F1F0F6; color: var(--ink-3); }
.tag.open::before, .tag.on::before { content: none; }

/* ---------- 제목 ---------- */
.hero { padding: 48px 0 0; text-align: center; }
.hero h1 { font-family: var(--f-title); font-weight: 900; font-size: clamp(44px, 7vw, 80px); line-height: 1.1; margin: 0; }
.hero .lead { margin: 14px 0 0; font-size: clamp(19px, 2.3vw, 24px); color: var(--ink-2); line-height: 1.5; }
.br-m { display: none; }

/* ---------- 겹치는 세 원 ---------- */
.venn-wrap { padding-top: 28px; }
.venn { position: relative; width: min(720px, 100%); aspect-ratio: 1 / .92; margin: 0 auto; }
.ring {
  cursor: pointer;
  position: absolute; width: 58%; aspect-ratio: 1; border-radius: 50%;
  text-decoration: none; color: var(--ink);
  background: var(--ring); border: 3px solid color-mix(in srgb, var(--ci) 28%, transparent);
  transition: transform .2s ease, border-color .2s ease;
}
.ring:hover, .ring:focus-visible { transform: scale(1.025); border-color: var(--ci); outline: none; z-index: 1; }
.r-dash  { left: 21%; top: 0; }
.r-learn { left: 3%;  top: 36.96%; }
.r-biz   { left: 39%; top: 36.96%; }
.c-lav   { --ring: var(--lav-ring);   --ci: var(--lav-ink);   --c: var(--lav); }
.c-sky   { --ring: var(--sky-ring);   --ci: var(--sky-ink);   --c: var(--sky); }
.c-peach { --ring: var(--peach-ring); --ci: var(--peach-ink); --c: var(--peach); }

/* 글자는 각 원에서 다른 원과 겹치지 않는 쪽에 */
.lab { position: absolute; display: flex; flex-direction: column; align-items: center; text-align: center; width: 54%; transform: translate(-50%, -50%); }
.r-dash .lab  { left: 50%; top: 30%; }
.r-learn .lab { left: 33%; top: 61%; }
.r-biz .lab   { left: 67%; top: 61%; }
.lab img { width: 44%; height: auto; margin-bottom: 4px; }
.lab b { font-family: var(--f-title); font-weight: 900; font-size: clamp(20px, 3.6vw, 34px); line-height: 1.15; color: var(--ink); white-space: nowrap; }
.lab i { font-style: normal; font-weight: 600; font-size: clamp(13px, 1.9vw, 18px); color: var(--ci); margin-top: 4px; white-space: nowrap; }


/* ---------- 세 공간 자세히 ---------- */
.doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding-top: 44px; }
.door {
  display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-top: 6px solid var(--c);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.door:hover { border-color: #CFC9DD; border-top-color: var(--ci); box-shadow: 0 2px 4px rgba(43, 39, 48, .06), 0 14px 30px -14px rgba(43, 39, 48, .28); }
.d-head { display: flex; align-items: center; gap: 12px; }
.d-head img { width: 60px; height: 60px; object-fit: contain; flex: none; background: var(--c); border-radius: 18px; padding: 4px; }
.d-head > span { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.d-head b { font-family: var(--f-title); font-weight: 800; font-size: 24px; }
.d-desc { font-size: 17px; line-height: 1.6; color: var(--ink-2); flex: 1; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips span { font-size: 15px; font-weight: 600; padding: 5px 11px; border-radius: 999px; background: var(--c); color: var(--ci); }
.door .go { font-size: 16px; font-weight: 800; color: var(--ci); }

/* ---------- 내 크레딧 ---------- */
.wallet { padding-top: 16px; }
.wallet-in { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 22px; }
.wallet-in:hover { border-color: #CFC9DD; }
.w-ico { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 15px; background: var(--mint); font-size: 24px; flex: none; }
.wallet-in b { font-size: 20px; display: block; }
.w-sub { font-size: 16px; color: var(--ink-3); }
.wallet-in .go { margin-left: auto; font-weight: 800; color: var(--mint-ink); }

/* ---------- 바닥 ---------- */
.foot { border-top: 1px solid var(--line); margin-top: 48px; padding: 24px 0 32px; font-size: 15px; color: var(--ink-3); }

/* ---------- 화면 크기별 ---------- */
@media (max-width: 1000px) {
  .doors { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .wrap { padding: 0 16px; }
  .top .wrap { height: 62px; }
  .jump { display: none; }
  .hero { padding-top: 30px; }
  .br-m { display: inline; }
  .venn-wrap { padding: 18px 8px 0; }
  .lab { width: 70%; }
  .lab img { width: 50%; }
  .doors { padding-top: 30px; }
}
@media (max-width: 420px) {
  .lab i { display: none; }
  .lab b { font-size: 17px; }
  .r-biz .lab { left: 64%; }
}
@media (prefers-reduced-motion: reduce) {
  .ring, .door { transition: none; }
}
.top .who { margin-left: auto; }