/* 시안 A — 클린 그린 (꾹AI온누리몰 디자인 문법: 흰 바탕 · 그린 포인트 · 원형 카테고리 · 점선 타임특가 박스) */
:root {
  --primary: #4caf3e; --accent: #ff6a13; --sale: #ff4b2b; --onnuri: #ff6a13; --onnuri-soft: #fff1e6;
  --member: #ff6a13; --ink: #1d1f22; --sub: #61666f; --mute: #a0a5ad; --line: #eceef1; --line-strong: #d8dbe0;
  --bg: #ffffff; --bg-soft: #f5f7f4; --header-bg: #fff; --gnb-bg: #fff; --gnb-ink: #1d1f22;
  --strip-bg: #fdf3ec; --strip-ink: #ff6a13; --search-line: #4caf3e; --chip-on: #4caf3e;
  --tag-bg: #eef7ec; --tag-ink: #3c8f30; --coupon-bg: #fff8f2; --coupon-line: #ffe2cc;
  --mem-bg: linear-gradient(120deg, #43a536, #7cc96b); --mem-ink: #fff; --foot-bg: #f6f7f8; --foot-ink: #4a4f57;
  --hero-1: linear-gradient(120deg, #2f6fd6, #5aa2ff); --hero-2: linear-gradient(120deg, #ff7a2f, #ffb15c); --hero-3: linear-gradient(120deg, #3a9b45, #8bd46e);
  --r: 16px; --img-r: 18px; --btn-r: 10px; --logo-r: 12px; --hero-h: 460px; --icon-gray: 0;
}
.slide { color: #fff; }
.gnb-menu a.on { border-bottom-color: var(--primary); color: var(--primary); }

.cat-circles { display: grid; grid-template-columns: repeat(10, 1fr); gap: 12px; text-align: center; }
.cat-circles a { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.circle { width: 96px; height: 96px; max-width: 100%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-size: 42px; border: 1px solid var(--line-strong); background: var(--bg-soft); transition: .2s; }
.cat-circles a:hover .circle { border-color: var(--primary); transform: translateY(-3px); }
.quick-pills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 28px !important; }
.quick-pills a { padding: 9px 16px; border-radius: 99px; border: 1px solid var(--line-strong); font-size: 14px; font-weight: 700; }
.quick-pills a:first-child { border-color: var(--accent); color: var(--accent); }

.time-box { border: 2px dashed #b6e0ab; border-radius: 22px; padding: 36px 40px 40px !important; text-align: center; max-width: 1200px; }
.time-box h2 { font-size: 28px; font-weight: 900; }
.time-box .tb-sub { color: var(--sub); margin: 6px 0 22px; }
.time-box .tb-sub b { color: var(--sale); }
.time-box .pgrid { text-align: left; }
.time-box .slot-tabs { max-width: 560px; margin-left: auto; margin-right: auto; }

@media (max-width: 1024px) { .cat-circles { grid-template-columns: repeat(5, 1fr); row-gap: 20px; } }
@media (max-width: 768px) {
  .cat-circles { display: flex; overflow-x: auto; scrollbar-width: none; gap: 14px; }
  .cat-circles a { flex: 0 0 68px; font-size: 12px; }
  .circle { width: 68px; height: 68px; font-size: 30px; }
  .quick-pills { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
  .quick-pills a { white-space: nowrap; }
  .time-box { padding: 24px 14px !important; margin: 40px 16px 0; width: auto; }
  .time-box h2 { font-size: 21px; }
}