/* ============================================================
   vine-flywheel 디자인 시스템 — 치이카와 × 인스타
   치이카와 색·귀여움(블러시 볼터치) + 인스타 클린 실행(흰 여백·스토리 링·소프트 그림자·외곽선 없음)
   폰트: Gowun Dodum(디스플레이)·Fredoka(숫자)·Pretendard(본문)
   ============================================================ */
:root{
  --ink:#2b2622; --ink2:#76706a; --ink3:#aaa49c; --bg:#fdfbf6; --surface:#ffffff; --line:#f1ece3;
  --blush:#e9a6a9; --blush-deep:#bd5f68; --blush-soft:#fcecec;
  --blue:#7aa0b4; --blue-deep:#3f6276; --blue-soft:#eaf1f4;
  --butter:#f4dd93; --butter-deep:#caa636; --butter-soft:#fdf6dd; --butter-ink:#8a6e1c;
  --font-disp:'Gowun Dodum',sans-serif; --font-num:'Fredoka',sans-serif; --font-body:'Pretendard Variable','Pretendard',sans-serif;
  --r:20px; --r-sm:14px; --r-pill:999px;
  --shadow:0 6px 22px rgba(80,60,50,.08); --shadow-sm:0 2px 12px rgba(80,60,50,.06);
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
.ds-root{font-family:var(--font-body);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
.ds-num{font-family:var(--font-num);font-variant-numeric:tabular-nums}
.ds-disp{font-family:var(--font-disp)}
.ds-kick{font-size:11.5px;font-weight:800;letter-spacing:.08em;color:var(--blush-deep)}

/* 버튼 — 소프트 그림자(외곽선·3D 없음, 인스타 클린) */
.ds-btn{font-family:var(--font-body);font-size:15px;font-weight:800;color:#fff;background:var(--blush);border:none;
  border-radius:13px;padding:13px 22px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:0 5px 14px rgba(233,166,169,.45);transition:transform .12s var(--ease),box-shadow .12s}
.ds-btn:active{transform:translateY(1px);box-shadow:0 2px 8px rgba(233,166,169,.4)}
.ds-btn:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.ds-btn--ghost{background:var(--surface);color:var(--blush-deep);box-shadow:inset 0 0 0 1.5px var(--blush)}
.ds-btn--blue{background:var(--blue);box-shadow:0 5px 14px rgba(122,160,180,.45)}
.ds-btn--full{width:100%}

/* 카드 — 흰 면 + 소프트 그림자(외곽선 없음) */
.ds-card{background:var(--surface);border-radius:var(--r);padding:18px;box-shadow:var(--shadow-sm)}
.ds-station{background:var(--blush-soft);border-radius:var(--r);padding:18px 20px;box-shadow:var(--shadow-sm)}

/* 태그·칩 */
.ds-tag{font-size:12px;font-weight:700;padding:6px 13px;border-radius:var(--r-pill);display:inline-block}
.ds-tag--a{background:var(--blush-soft);color:var(--blush-deep)} .ds-tag--b{background:var(--blue-soft);color:var(--blue-deep)} .ds-tag--c{background:var(--butter-soft);color:var(--butter-ink)}
.ds-chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:800;color:var(--butter-ink);background:var(--butter-soft);padding:6px 13px;border-radius:var(--r-pill)}

/* 이유(왜) — 블러시 점 (텍스트는 진한 톤 = 가독성 AA) */
.ds-why{display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;color:var(--blush-deep)}
.ds-why::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--blush);flex:none}

/* 스토리 링 — 인스타식(파스텔 테두리 + 얇은 흰 갭). inline-block로 원 유지 */
.ds-ring{display:inline-block;width:58px;height:58px;border-radius:50%;padding:2.5px;background:var(--blush)}
.ds-ring--blue{background:var(--blue)} .ds-ring--butter{background:var(--butter)} .ds-ring--off{background:#e2d9cf}
.ds-ring>span{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:var(--surface);font-size:23px;box-shadow:inset 0 0 0 2.5px var(--bg)}

/* 치이카와 얼굴 아바타(볼터치) */
.ds-face{display:inline-block;width:48px;height:42px;border-radius:50%/46%;background:var(--surface);box-shadow:var(--shadow-sm);position:relative;flex:none}
.ds-face .e{position:absolute;width:6px;height:8px;border-radius:50%;background:var(--ink);top:15px}.ds-face .e.l{left:14px}.ds-face .e.r{right:14px}
.ds-face .ch{position:absolute;width:12px;height:7px;border-radius:50%;background:var(--blush);top:23px;opacity:.9}.ds-face .ch.l{left:5px}.ds-face .ch.r{right:5px}

/* 하단 탭바 — 흰 면 + 얇은 상단선, 활성=블러시 */
.ds-tabbar{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:440px;display:flex;justify-content:space-around;
  background:var(--surface);border-top:1px solid var(--line);padding:9px 0 calc(11px + env(safe-area-inset-bottom));z-index:10}
.ds-tab{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;font-weight:800;color:var(--ink3);text-decoration:none;flex:1}
.ds-tab .ic{width:23px;height:23px;border-radius:8px;border:2.2px solid currentColor}
.ds-tab.on{color:var(--blush-deep)} .ds-tab.on .ic{background:var(--blush);border-color:var(--blush)}
.ds-tab:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:8px}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}