/* ONECLIP SHOP - mobile-first commerce web.
   Design tokens mirror the ONECLIP App SHOP theme (src/index.css :root + ShopShared.jsx COLORS). */
:root {
  --theme-bg: #ffffff;
  --theme-surface: #ffffff;
  --theme-card: #f8f9fa;
  --theme-border: #e9ecef;
  --theme-green: #03C75A;
  --theme-green-dark: #02b350;
  --theme-green-glow: rgba(3, 199, 90, 0.25);
  --theme-gold: #fbbf24;
  --theme-text: #1a1b1e;
  --theme-text-muted: #868e96;
  --theme-text-sub: #495057;
  --theme-white: #ffffff;
  --theme-red: #fa5252;
  --theme-orange: #fd7e14;
  --shadow-medium: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-dark: 0 4px 16px rgba(0, 0, 0, 0.15);
  --shop-blue: #3B82F6;                 /* 앱 샵 머리글과 같은 파랑 */
  --home-bg: #FDFCF8;                   /* 첫 화면의 따뜻한 미색 바탕 */
  --hand: 'Nanum Pen Script', 'Gaegu', cursive;   /* 손글씨 쪽지 */
  --nav-height: 78px;   /* 떠 있는 막대(62) + 아래 여백 */
  --cta-height: 56px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--theme-bg);
  color: var(--theme-text);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic",
        "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;                     /* mobile: horizontal overflow = 0 */
  padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px));
}
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }

/* ---------- app bar ---------- */
.appbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 8px;
  height: 52px; padding: 0 12px;
  background: var(--theme-surface);
  border-bottom: 1px solid var(--theme-border);
}
.appbar-title { flex: 1; font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
.iconbtn {
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--theme-text-sub); font-size: 22px;
}

/* ---------- layout ---------- */
.app { padding: 12px 12px 24px; }
.section { margin: 18px 0 8px; display: flex; align-items: baseline; justify-content: space-between; }
.section h2 { margin: 0; font-size: 16px; }
.muted { color: var(--theme-text-muted); font-size: 13px; }
.notice {
  background: var(--theme-card); border: 1px solid var(--theme-border); border-radius: 12px;
  padding: 12px; color: var(--theme-text-sub); font-size: 13px; margin: 12px 0;
}
.notice.warn { border-color: #ffe0b2; background: #fff8e1; color: #8a5300; }
.notice.error { border-color: #ffd5d5; background: #fff1f1; color: #a12626; }
.badge {
  display: inline-block; padding: 3px 8px; border-radius: 999px; font-size: 12px;
  background: var(--theme-card); color: var(--theme-text-sub);
}
.badge.ok { background: #e8f9ef; color: var(--theme-green-dark); }
.badge.wait { background: #fff4e0; color: #a86400; }

/* ---------- category rail ---------- */
.rail { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 8px; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; min-height: 40px; padding: 0 14px;
  display: inline-flex; align-items: center;
  border: 1px solid var(--theme-border); border-radius: 999px;
  background: var(--theme-surface); color: var(--theme-text-sub); text-decoration: none; font-size: 14px;
}
.chip.active { background: var(--theme-green); border-color: var(--theme-green); color: var(--theme-white); font-weight: 600; }

/* ---------- brand carousel ---------- */
.brandrow { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.brandrow::-webkit-scrollbar { display: none; }
.brandcard {
  flex: 0 0 96px; height: 68px; border-radius: 14px; background: var(--theme-card);
  border: 1px solid var(--theme-border);
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 13px; color: var(--theme-text-sub); padding: 6px; text-decoration: none;
}

/* ---------- product grid ---------- */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.card {
  display: block; text-decoration: none; color: inherit;
  background: var(--theme-surface); border: 1px solid var(--theme-border); border-radius: 14px;
  overflow: hidden;
}
.card-thumb { aspect-ratio: 1 / 1; background: var(--theme-card); }
.card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: 8px 10px 12px; }
.card-name { font-size: 14px; line-height: 1.3; margin: 0 0 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-price { font-weight: 700; font-size: 15px; }
.card-seller { color: var(--theme-text-muted); font-size: 12px; margin-top: 2px; }
.soldout { position: relative; }
.soldout .card-name, .soldout .card-price { opacity: 0.45; }

/* ---------- product detail ---------- */
.hero { aspect-ratio: 1 / 1; background: var(--theme-card); border-radius: 16px; overflow: hidden; }
.hero img { width: 100%; height: 100%; object-fit: cover; }
.price-lg { font-size: 22px; font-weight: 800; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--theme-border); font-size: 14px; }
.kv:last-child { border-bottom: 0; }
.kv .k { color: var(--theme-text-muted); }
.optrow { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }

/* ---------- 상품 옵션 선택 (checkpoint 23) ----------
   앱의 「옵션 선택」과 같은 드롭다운. 값이 없는 옵션은 «고르는 시늉을 하지 않는다» —
   흐리게 두고 「옵션 값 준비 중」으로 적고, 구매 버튼을 막는다. */
.optbox { margin: 14px 0 4px; }
.optgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.optfield { display: block; min-width: 0; }
.optname { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 800;
  letter-spacing: .04em; color: var(--theme-text); text-transform: uppercase; }
.optsel {
  width: 100%; min-height: 48px; padding: 0 36px 0 14px; border-radius: 12px;
  border: 1px solid var(--theme-border); background: var(--theme-surface);
  color: var(--theme-text); font-size: 14px; font-weight: 600;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px;
}
.optsel:focus { outline: 2px solid var(--shop-blue); outline-offset: 1px; }
.optfield-off .optname { color: var(--theme-text-sub); }
.optfield-off .optsel { color: var(--theme-text-sub); background-color: var(--theme-card); opacity: .8; }
.opthint { margin: 9px 0 0; font-size: 12.5px; color: var(--theme-text-sub); min-height: 1em; }
.opthint.on { color: #16A34A; font-weight: 700; }

@media (max-width: 359px) { .optgrid { grid-template-columns: 1fr; } }

/* payment method selection (App parity: two option cards) */
.paymethods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 8px 0 4px; }
.paymethod {
  min-height: 64px; padding: 12px; text-align: left;
  border: 1px solid var(--theme-border); border-radius: 14px; background: var(--theme-surface);
  display: flex; flex-direction: column; gap: 4px;
}
.paymethod.active { border-color: var(--theme-green); box-shadow: 0 0 0 2px var(--theme-green-glow) inset; }
.paymethod .pm-name { font-weight: 700; font-size: 15px; }
.paymethod .pm-note { font-size: 12px; color: var(--theme-text-muted); }
.paymethod[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ---------- sticky buy CTA (App parity: 가격 | 바로 구매) ---------- */
.stickycta {
  position: fixed; left: 0; right: 0;
  bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px));
  z-index: 30;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: var(--theme-surface);
  border-top: 1px solid var(--theme-border);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
}
.stickycta .qty { display: flex; align-items: center; gap: 6px; }
.stickycta .qty button {
  width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--theme-border);
  background: var(--theme-surface); font-size: 18px;
}
.stickycta .qty span { min-width: 24px; text-align: center; font-weight: 600; }
.stickycta .price { flex: 1; }
.stickycta .price b { display: block; font-size: 18px; }
.cta {
  min-height: 48px; padding: 0 22px; border: 0; border-radius: 12px;
  background: var(--theme-green); color: var(--theme-white); font-weight: 700; font-size: 15px;
}
.cta:active { background: var(--theme-green-dark); }
.cta[disabled] { background: var(--theme-border); color: var(--theme-text-muted); }
.cta.wide { width: 100%; }
.cta.secondary { background: var(--theme-surface); color: var(--theme-text); border: 1px solid var(--theme-border); }

/* ---------- forms ---------- */
label { display: block; font-size: 13px; color: var(--theme-text-muted); margin: 12px 0 6px; }
input, select, textarea {
  width: 100%; min-height: 48px; padding: 12px; font: inherit;
  border: 1px solid var(--theme-border); border-radius: 12px; background: var(--theme-surface);
}
.fieldrow { display: flex; gap: 8px; }
.fieldrow > * { flex: 1; }

/* ---------- bottom navigation (홈 / 카테고리 / 주문 / MY) ---------- */
/* 떠 있는 흰 막대. 칸마다 아이콘 색이 다르다 (대표님 도안). */
.bottomnav {
  position: fixed; left: 10px; right: 10px; z-index: 40;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  height: 62px; border-radius: 22px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: #fff; box-shadow: 0 6px 20px rgba(30,41,59,.12);
}
.bottomnav a {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 48px; text-decoration: none; color: var(--theme-text-muted); font-size: 11px;
}
.bottomnav a .ic { width: 23px; height: 23px; }
.nv-home .ic { color: #22C55E; }
.nv-grid .ic { color: #A78BFA; }
.nv-list .ic { color: #F87171; }
.nv-face .ic { color: #FBBF24; }
.bottomnav a.active .nv-label { color: var(--theme-green); font-weight: 700; }
.nv-dot { display: none; }
.bottomnav a.active .nv-dot {
  display: block; position: absolute; bottom: 5px; width: 5px; height: 5px; border-radius: 50%;
  background: var(--theme-green);
}

/* ---------- order list / detail ---------- */
.orderrow {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--theme-border); border-radius: 14px; padding: 12px; margin-bottom: 10px;
}
.orderrow .top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.orderrow .id { font-size: 12px; color: var(--theme-text-muted); word-break: break-all; }
.steps { display: flex; gap: 6px; margin: 14px 0; }
.step { flex: 1; text-align: center; font-size: 11px; color: var(--theme-text-muted); }
.step .dot { width: 100%; height: 4px; border-radius: 999px; background: var(--theme-border); margin-bottom: 6px; }
.step.done .dot { background: var(--theme-green); }
.step.done { color: var(--theme-green-dark); font-weight: 600; }

/* ---------- tablet / desktop expansion (never desktop-first) ---------- */
@media (min-width: 768px) {
  .app { max-width: 640px; margin: 0 auto; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stickycta { max-width: 640px; margin: 0 auto; border-radius: 16px 16px 0 0; border: 1px solid var(--theme-border); }
  .bottomnav { max-width: 640px; margin: 0 auto; }
}
@media (min-width: 1440px) {
  .app { max-width: 960px; }
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stickycta { max-width: 960px; }
  .bottomnav { max-width: 960px; }
}

/* ---------- home sections (첫 화면 대분류 · checkpoint 17/18) ----------
   대표님 도안 그대로: 따뜻한 미색 바탕 + 모서리 둥근 파스텔 카드 4장 + 손글씨 쪽지.
   3D 그림(골프공·세탁기·가방)은 그림 파일이 필요해 아직 비어 있고, 그 자리에는
   같은 선 그림을 옅게 깔아 두었다. 파일이 오면 .hs-art 의 배경만 바꾸면 된다. */
body.bare-top { background: var(--home-bg); }
body.bare-top .appbar { display: none; }
body.bare-top::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42% 22% at 8% 6%, rgba(173,206,247,.38), transparent 70%),
    radial-gradient(38% 20% at 96% 12%, rgba(252,205,214,.42), transparent 70%),
    radial-gradient(44% 18% at 92% 86%, rgba(253,224,198,.38), transparent 70%),
    radial-gradient(40% 16% at 6% 82%, rgba(205,232,214,.36), transparent 70%);
}
.hometop { position: relative; padding: 26px 20px 16px; text-align: center; }
.hs-mark {
  position: relative; display: inline-block;
  font-family: 'Outfit', 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 30px; font-weight: 800; letter-spacing: -.01em; color: var(--shop-blue);
}
.hs-spark {
  position: absolute; right: -16px; top: -10px; width: 18px; height: 18px;
  background:
    linear-gradient(#FBBF24, #FBBF24) 11px 0 / 3px 11px no-repeat,
    linear-gradient(#FBBF24, #FBBF24) 2px 3px / 3px 11px no-repeat;
  transform: rotate(22deg); border-radius: 3px;
}
/* 한 줄로 읽히는 선언 문장. 쪽지 두 장을 세 줄로 줄여 이 띠를 비워 두었기 때문에
   좁은 폰(320px)에서도 줄이 꺾이지 않는다 — 필요 폭 232px < 쓸 수 있는 폭 280px. */
.hs-tag { margin: 44px auto 0; font-size: 13.5px; font-weight: 600; line-height: 1.5;
  letter-spacing: .005em; color: #94A0B3; word-break: keep-all; }
.hs-tag b { font-weight: 700; color: #5B6B86; }
.hs-search {
  position: absolute; right: 12px; top: 14px; width: 42px; height: 42px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.75); color: #3f4654; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(30,41,59,.07);
}
.hs-search svg { width: 21px; height: 21px; }
/* 손글씨 쪽지 */
.hs-note {
  position: absolute; width: 72px; font-family: var(--hand); font-size: 13.5px; line-height: 1.26;
  color: #A9B6CB;
}
/* 하트는 줄을 따로 쓰지 않는다 — 쪽지가 세 줄로 끝나야 아래 선언 문장이 한 줄로 들어간다 */
.hs-note i { font-style: normal; color: #FBB6C0; font-size: 14px; margin-left: 3px; }
.hs-note-l { left: 5px; top: 16px; text-align: left; transform: rotate(-7deg); }
.hs-note-r { right: 4px; top: 50px; text-align: right; transform: rotate(6deg); }

.hstiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 6px 16px 0; }
.hs {
  /* 13% = 그림 카드가 실제로 가진 모서리 곡률(실측). 숫자로 두면 폭마다 어긋나
     그림 모서리와 상자 모서리가 «두 겹»으로 보인다. */
  position: relative; aspect-ratio: 1 / 1; border-radius: 13%; overflow: hidden;
  display: block; text-decoration: none; isolation: isolate;
  box-shadow: 0 6px 18px rgba(30,41,59,.10);
}
.hs-off { cursor: default; }
/* 카드 그림 — 도안 그대로. 그림에는 이름과 영문만 있다(설명 줄·숫자는 지웠다). */
.hs-img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 오른쪽 위 칩은 그림이 아니라 «코드»가 얹는다 — 상품이 있으면 「N개」, 없으면 「준비중」 */
.hs-chip {
  position: absolute; top: 5.5%; right: 5%; font-size: 11.5px; font-weight: 700;
  padding: 6px 13px; border-radius: 999px;
  background: rgba(255,255,255,.93); box-shadow: 0 2px 6px rgba(16,24,40,.12);
}
.hs-chip-a { color: #1C9B5A; }
.hs-chip-b { color: #2B7FE0; }
.hs-chip-c { color: #F0734F; }
.hs-chip-d { color: #fff; background: rgba(255,255,255,.17); box-shadow: none;
  border: 1.5px solid rgba(255,255,255,.55); }

.hs-open {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 16px 0; padding: 15px 18px; border-radius: 20px;
  background: #fff; box-shadow: 0 4px 14px rgba(30,41,59,.08);
  text-decoration: none; color: var(--theme-text); font-size: 14px;
}
.hs-open .hs-cart { width: 24px; height: 24px; color: #22C55E; flex: none; }
.hs-open b { font-weight: 700; }
.hs-open span { margin-left: auto; color: #16A34A; font-weight: 700; white-space: nowrap; }
.hs-foot {
  margin: 22px 0 4px; text-align: center;
  font-family: var(--hand); font-size: 19px; color: #9FB0C6;
}

@media (min-width: 621px) {
  .hstiles, .hs-open, .hometop, .hs-foot { max-width: 640px; margin-left: auto; margin-right: auto; }
  .hs-kr { font-size: 22px; }
}

/* ---------- 스포츠 종목 여덟 칸 (/sports · checkpoint 19) ----------
   첫 화면의 「스포츠」를 누르면 오는 자리. 가로 2 · 세로 4.
   카드는 «그림 파일이 아니다» — 색도 아이콘도 코드가 그린다. 종목이 늘어도 올릴 그림이 없고,
   「준비중」과 상품 수는 첫 화면과 같은 규칙으로 그 자리에서 정해진다. */
.sphero { padding: 18px 20px 6px; }
.sphero h1 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.01em; color: var(--theme-text); }
.sphero p { margin: 7px 0 0; font-size: 13px; line-height: 1.5; color: #8A94A6; word-break: keep-all; }
.sphero p b { font-weight: 700; color: #5B6B86; }

/* 칸 = 대표님 도안 그대로. 모서리는 그림이 가지고 있으므로 «자르지 않는다» —
   상자에 border-radius 를 걸면 그림 모서리와 어긋나 테가 한 겹 더 보인다.
   그림자도 그림의 모양(알파)을 그대로 따르는 drop-shadow 로 준다. */
.sptiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px 16px 0; }
.sp { position: relative; display: block; aspect-ratio: 16 / 10; text-decoration: none; }
.sp-img { display: block; width: 100%; height: 100%; object-fit: cover;
  filter: drop-shadow(0 5px 13px rgba(30,41,59,.18)); }
.sp-off { cursor: default; }

/* 「준비중」과 상품 수는 그림이 아니라 코드가 얹는다 — 상품이 생기면 저절로 바뀐다 */
.sp-chip {
  position: absolute; top: 9%; right: 4.5%; font-size: 10.5px; font-weight: 700;
  padding: 5px 11px; border-radius: 999px;
  color: var(--ct, #334155); background: rgba(255,255,255,.93);
  box-shadow: 0 2px 6px rgba(16,24,40,.16);
}

/* 칩 글자색만 종목 색을 따라간다 (카드 색은 그림이 가지고 있다) */
.sp-golf     { --ct: #15803D; }
.sp-hiking   { --ct: #0F766E; }
.sp-parkgolf { --ct: #4D7C0F; }
.sp-cycling  { --ct: #0369A1; }
.sp-fishing  { --ct: #1D4ED8; }
.sp-soccer   { --ct: #6D28D9; }
.sp-travel   { --ct: #C2410C; }
.sp-auto     { --ct: #BE123C; }

/* ---------- 골프 안의 네 갈래 (/sports/golf · checkpoint 20) ----------
   가로 한 칸씩 · 위에서 아래로 네 줄. 칸 = 대표님 도안 그대로(1080×300 · 3.6:1).
   모서리는 그림이 가지고 있으므로 «자르지 않는다». 그림자도 그림의 알파를 따르는 drop-shadow 로 준다. */
.gftiles { display: grid; gap: 12px; padding: 12px 16px 0; }
.gf { position: relative; display: block; aspect-ratio: 18 / 5; text-decoration: none; }
.gf-img { display: block; width: 100%; height: 100%; object-fit: cover;
  filter: drop-shadow(0 4px 11px rgba(30,41,59,.16)); }
.gf-off { cursor: default; }

/* 「준비중」과 상품 수는 그림이 아니라 코드가 얹는다 */
.gf-chip {
  position: absolute; top: 11%; right: 2.6%;
  font-size: 10.5px; font-weight: 700; padding: 5px 11px; border-radius: 999px;
  color: var(--ct, #334155); background: rgba(255,255,255,.94);
  border: 1px solid var(--cb, rgba(16,24,40,.08));
  box-shadow: 0 2px 6px rgba(16,24,40,.14);
}

/* 칩 글자색만 갈래 색을 따라간다 (카드 색은 그림이 가지고 있다) */
.gf-fashion { --ct: #BE185D; --cb: rgba(190,24,93,.22); }
.gf-club    { --ct: #15803D; --cb: rgba(21,128,61,.22); }
.gf-fitting { --ct: #1D4ED8; --cb: rgba(29,78,216,.22); }
.gf-gear    { --ct: #B45309; --cb: rgba(180,83,9,.22); }

/* ---------- 골프피팅 안의 네 갈래 (/sports/golf/fitting · checkpoint 21) ----------
   골프 화면과 같은 가로 띠. 아직 도안이 없어 색과 아이콘을 코드가 그린다
   (도안이 오면 .gf 처럼 그림 한 장으로 바꾸면 된다). */
.fttiles { display: grid; gap: 12px; padding: 12px 16px 0; }
.ft {
  position: relative; display: flex; align-items: center; gap: 14px;
  min-height: 92px; padding: 16px 18px; border-radius: 22px;
  text-decoration: none; overflow: hidden; isolation: isolate;
  background-image: linear-gradient(110deg, var(--c1), var(--c2));
  box-shadow: 0 5px 14px rgba(30,41,59,.14);
}
.ft::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(42% 90% at 92% 10%, rgba(255,255,255,.24), transparent 72%),
    radial-gradient(38% 80% at 4% 100%, rgba(0,0,0,.13), transparent 72%);
}
.ft-off { cursor: default; }

.ft-badge {
  flex: none; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
  border-radius: 16px; color: #fff;
  background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
.ft-ic { width: 28px; height: 28px; }

.ft-text { min-width: 0; color: #fff; }
.ft-text b { display: block; font-size: 18px; font-weight: 800; letter-spacing: -.03em;
  text-shadow: 0 1px 3px rgba(0,0,0,.16); word-break: keep-all; }
.ft-text i { display: block; margin-top: 1px; font-style: normal; font-size: 10.5px;
  font-weight: 700; letter-spacing: .09em; color: rgba(255,255,255,.8); }
.ft-text em { display: block; margin-top: 5px; font-style: normal; font-size: 11.5px;
  color: rgba(255,255,255,.88); word-break: keep-all; }

.ft-chip {
  position: absolute; top: 14px; right: 16px;
  font-size: 10.5px; font-weight: 700; padding: 5px 11px; border-radius: 999px;
  color: var(--ct, #334155); background: rgba(255,255,255,.93);
  box-shadow: 0 2px 6px rgba(16,24,40,.16);
}

.ft-head  { --c1: #60A5FA; --c2: #1D4ED8; --ct: #1D4ED8; }
.ft-shaft { --c1: #38BDF8; --c2: #0369A1; --ct: #0369A1; }
.ft-grip  { --c1: #818CF8; --c2: #4338CA; --ct: #4338CA; }
.ft-etc   { --c1: #94A3B8; --c2: #475569; --ct: #475569; }

/* ---------- 샤프트 브랜드 아코디언 (/sports/golf/fitting/shaft · checkpoint 22) ----------
   브랜드 바는 ONECLIP BIZ 「One Clip Shop 전시」와 같은 이름·순서.
   누르면 바 «바로 아래»가 열린다. 한 번에 하나만 열리고, 같은 것을 다시 누르면 닫힌다. */
.brbar {
  display: flex; gap: 8px; padding: 10px 16px 12px; overflow-x: auto;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.brbar::-webkit-scrollbar { display: none; }
.brtab {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: 999px; border: 1px solid var(--theme-border);
  background: var(--theme-surface); color: var(--theme-text);
  font-size: 13px; font-weight: 700; letter-spacing: .01em; white-space: nowrap;
}
.brtab i { font-style: normal; font-size: 11px; font-weight: 800;
  min-width: 18px; padding: 1px 6px; border-radius: 999px;
  background: var(--theme-card); color: #64748B; }
.brtab.on { background: var(--shop-blue); border-color: var(--shop-blue); color: #fff; }
.brtab.on i { background: rgba(255,255,255,.26); color: #fff; }
.brtab-off { opacity: .45; }

.brwrap { padding: 0 16px; }
.br-panel { padding-top: 2px; }
.br-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.br-kinds span { font-size: 11px; font-weight: 700; letter-spacing: .06em;
  padding: 4px 9px; border-radius: 999px; background: var(--theme-card); color: #64748B; }

@media (min-width: 621px) {
  .brbar, .brwrap { max-width: 640px; margin-left: auto; margin-right: auto; }
}

@media (min-width: 621px) {
  .fttiles { max-width: 640px; margin-left: auto; margin-right: auto; }
}

@media (min-width: 621px) {
  .gftiles { max-width: 640px; margin-left: auto; margin-right: auto; }
}

@media (min-width: 621px) {
  .sptiles, .sphero { max-width: 640px; margin-left: auto; margin-right: auto; }
  .sp-chip { font-size: 12px; padding: 6px 13px; }
}

/* ---------- business footer (seller identity on every route) ----------
   Checkpoint 16: the arrangement is the ONECLIP BIZ footer (`.legal` on biz.oneclip.co.kr),
   reproduced line for line — company name, two " / " separated rows, monospace copyright.
   The slashes are drawn by CSS so the text never contains one; below 621px each item takes
   its own line and the slashes disappear, exactly as the reference does. */
:root {
  --footer-bg: #04060B;                /* reference footer background */
  --footer-line: rgba(255, 255, 255, .07);
  --footer-ink: #EDF1F9;               /* company name */
  --footer-dim: #66718C;               /* body text + copyright */
  --footer-sep: #3E475C;               /* the " / " separator */
  --footer-link: #7CA6FF;              /* TEL / E-mail */
}
.sitefooter {
  margin-top: 28px;
  padding: 26px 16px calc(28px + env(safe-area-inset-bottom, 0px));
  background: var(--footer-bg);
  border-top: 1px solid var(--footer-line);
  color: var(--footer-dim);
  font-size: 12.5px;
  line-height: 1.9;
}
.sitefooter[hidden] { display: none; }
.sitefooter-inner { max-width: 960px; margin: 0 auto; }
.sf-co {
  font-weight: 700;
  color: var(--footer-ink);
  font-size: 13.5px;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
/* narrow screens: one item per line, no separators (reference behaviour below 621px) */
.sf-row { display: flex; flex-direction: column; min-width: 0; }
.sf-row span { word-break: keep-all; overflow-wrap: anywhere; }
.sf-link { color: var(--footer-link); text-decoration: none; word-break: break-all; }
.sf-link:active { color: #9dbcff; }
.sf-copy {
  margin-top: 14px;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: .03em;
  color: var(--footer-dim);
}
/* a sticky buy CTA must never cover the seller identity (section 17) */
body.has-sticky-cta .sitefooter {
  padding-bottom: calc(var(--cta-height) + 28px + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 621px) {
  /* one row per line, items separated by " / " — the reference arrangement */
  .sf-row { flex-direction: row; flex-wrap: wrap; gap: 5px 0; }
  .sf-row span + span::before { content: "/"; margin: 0 10px; color: var(--footer-sep); }
}
@media (min-width: 768px) {
  .sitefooter { padding: 34px 16px calc(34px + env(safe-area-inset-bottom, 0px)); }
}