/* ONECLIP SHOP — /sports/golf/fitting 네 갈래 전용 CSS.
   styles.css · cards.css · sportcards.css · golfcards.css 다음에 읽힌다.
   대표님 도안이 쓴 Tailwind 클래스를 진짜 Tailwind v3 로 컴파일한 결과 + 껍데기.
   도안의 @keyframes 이름(floating · twinkle · spin …)은 흔한 이름이라
   앞으로 다른 화면과 부딪히지 않도록 ft- 를 붙여 바꿔 적었다(동작은 그대로).
   ────────────────────────────────────────────────────────────── */
/* Tailwind 의 --tw-* 기본값. preflight 를 통째로 깔면 샵 전체가 어긋나므로
   카드 «안쪽에만» 같은 값을 깐다. 이것이 없으면 bg-gradient-* 가 통째로 무효가 된다. */
.ft-stage, .ft-stage *, .ft-stage *::before, .ft-stage *::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

.pointer-events-none{pointer-events:none}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.-bottom-8{bottom:-2rem}.-right-10{right:-2.5rem}.-right-8{right:-2rem}.-top-10{top:-2.5rem}.-top-12{top:-3rem}.bottom-0{bottom:0}.bottom-10{bottom:2.5rem}.bottom-14{bottom:3.5rem}.bottom-3{bottom:.75rem}.bottom-4{bottom:1rem}.bottom-5{bottom:1.25rem}.bottom-6{bottom:1.5rem}.bottom-7{bottom:1.75rem}.left-12{left:3rem}.left-16{left:4rem}.left-20{left:5rem}.right-1{right:.25rem}.right-12{right:3rem}.right-2{right:.5rem}.right-24{right:6rem}.right-28{right:7rem}.right-3{right:.75rem}.right-32{right:8rem}.right-36{right:9rem}.right-4{right:1rem}.right-40{right:10rem}.right-44{right:11rem}.right-6{right:1.5rem}.right-8{right:2rem}.top-3{top:.75rem}.top-4{top:1rem}.top-5{top:1.25rem}.top-6{top:1.5rem}.top-8{top:2rem}.z-10{z-index:10}.z-20{z-index:20}.flex{display:flex}.h-10{height:2.5rem}.h-16{height:4rem}.h-24{height:6rem}.h-28{height:7rem}.h-3{height:.75rem}.h-3\.5{height:.875rem}.h-32{height:8rem}.h-4{height:1rem}.h-40{height:10rem}.h-44{height:11rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-full{height:100%}.w-10{width:2.5rem}.w-16{width:4rem}.w-28{width:7rem}.w-3{width:.75rem}.w-3\.5{width:.875rem}.w-32{width:8rem}.w-36{width:9rem}.w-4{width:1rem}.w-40{width:10rem}.w-44{width:11rem}.w-48{width:12rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-full{width:100%}.max-w-sm{max-width:24rem}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.resize{resize:both}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.rounded-2xl{border-radius:1rem}.rounded-\[26px\]{border-radius:26px}.rounded-full{border-radius:9999px}.border{border-width:1px}.border-white\/25{border-color:hsla(0,0%,100%,.25)}.border-white\/30{border-color:hsla(0,0%,100%,.3)}.border-white\/35{border-color:hsla(0,0%,100%,.35)}.bg-amber-400\/20{background-color:rgba(251,191,36,.2)}.bg-blue-300\/25{background-color:rgba(147,197,253,.25)}.bg-blue-400\/30{background-color:rgba(96,165,250,.3)}.bg-cyan-400\/25{background-color:rgba(34,211,238,.25)}.bg-emerald-400\/15{background-color:rgba(52,211,153,.15)}.bg-indigo-300\/30{background-color:rgba(165,180,252,.3)}.bg-pink-400\/25{background-color:rgba(244,114,182,.25)}.bg-teal-200\/30{background-color:rgba(153,246,228,.3)}.bg-white\/15{background-color:hsla(0,0%,100%,.15)}.bg-white\/20{background-color:hsla(0,0%,100%,.2)}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.bg-gradient-to-t{background-image:linear-gradient(to top,var(--tw-gradient-stops))}.from-black\/10{--tw-gradient-from:rgba(0,0,0,.1) var(--tw-gradient-from-position);--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-black\/20{--tw-gradient-from:rgba(0,0,0,.2) var(--tw-gradient-from-position);--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-blue-600{--tw-gradient-from:#2563eb var(--tw-gradient-from-position);--tw-gradient-to:rgba(37,99,235,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-sky-500{--tw-gradient-from:#0ea5e9 var(--tw-gradient-from-position);--tw-gradient-to:rgba(14,165,233,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-slate-700{--tw-gradient-from:#334155 var(--tw-gradient-from-position);--tw-gradient-to:rgba(51,65,85,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-violet-600{--tw-gradient-from:#7c3aed var(--tw-gradient-from-position);--tw-gradient-to:rgba(124,58,237,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-cyan-500{--tw-gradient-to:rgba(6,182,212,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#06b6d4 var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-indigo-600{--tw-gradient-to:rgba(79,70,229,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#4f46e5 var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-purple-600{--tw-gradient-to:rgba(147,51,234,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#9333ea var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-slate-800{--tw-gradient-to:rgba(30,41,59,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#1e293b var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),transparent var(--tw-gradient-via-position),var(--tw-gradient-to)}.to-blue-500{--tw-gradient-to:#3b82f6 var(--tw-gradient-to-position)}.to-fuchsia-500{--tw-gradient-to:#d946ef var(--tw-gradient-to-position)}.to-teal-400{--tw-gradient-to:#2dd4bf var(--tw-gradient-to-position)}.to-white\/15{--tw-gradient-to:hsla(0,0%,100%,.15) var(--tw-gradient-to-position)}.to-white\/20{--tw-gradient-to:hsla(0,0%,100%,.2) var(--tw-gradient-to-position)}.to-white\/25{--tw-gradient-to:hsla(0,0%,100%,.25) var(--tw-gradient-to-position)}.to-zinc-700{--tw-gradient-to:#3f3f46 var(--tw-gradient-to-position)}.p-4{padding:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.pr-1{padding-right:.25rem}.pr-2{padding-right:.5rem}.text-amber-200\/90{color:hsla(48,97%,77%,.9)}.text-amber-300{--tw-text-opacity:1;color:rgb(252 211 77/var(--tw-text-opacity,1))}.text-blue-200\/75{color:rgba(191,219,254,.75)}.text-cyan-100\/90{color:rgba(207,250,254,.9)}.text-cyan-200{--tw-text-opacity:1;color:rgb(165 243 252/var(--tw-text-opacity,1))}.text-cyan-200\/90{color:rgba(165,243,252,.9)}.text-cyan-300\/80{color:rgba(103,232,249,.8)}.text-fuchsia-200\/90{color:rgba(245,208,254,.9)}.text-pink-200\/80{color:rgba(251,207,232,.8)}.text-pink-300{--tw-text-opacity:1;color:rgb(249 168 212/var(--tw-text-opacity,1))}.text-purple-200{--tw-text-opacity:1;color:rgb(233 213 255/var(--tw-text-opacity,1))}.text-purple-200\/80{color:rgba(233,213,255,.8)}.text-red-200{--tw-text-opacity:1;color:rgb(254 202 202/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-white\/30{color:hsla(0,0%,100%,.3)}.text-white\/70{color:hsla(0,0%,100%,.7)}.text-white\/80{color:hsla(0,0%,100%,.8)}.text-white\/90{color:hsla(0,0%,100%,.9)}.opacity-75{opacity:.75}.shadow-inner{--tw-shadow:inset 0 2px 4px 0 rgba(0,0,0,.05);--tw-shadow-colored:inset 0 2px 4px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.blur-2xl{--tw-blur:blur(40px)}.blur-2xl,.blur-xl{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.blur-xl{--tw-blur:blur(24px)}.drop-shadow{--tw-drop-shadow:drop-shadow(0 1px 2px rgba(0,0,0,.1)) drop-shadow(0 1px 1px rgba(0,0,0,.06))}.drop-shadow,.drop-shadow-2xl{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow-2xl{--tw-drop-shadow:drop-shadow(0 25px 25px rgba(0,0,0,.15))}.drop-shadow-md{--tw-drop-shadow:drop-shadow(0 4px 3px rgba(0,0,0,.07)) drop-shadow(0 2px 2px rgba(0,0,0,.06))}.drop-shadow-md,.drop-shadow-sm{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow-sm{--tw-drop-shadow:drop-shadow(0 1px 1px rgba(0,0,0,.05))}.drop-shadow-xl{--tw-drop-shadow:drop-shadow(0 20px 13px rgba(0,0,0,.03)) drop-shadow(0 8px 5px rgba(0,0,0,.08));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-md{--tw-backdrop-blur:blur(12px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.hover\:scale-\[1\.02\]:hover{--tw-scale-x:1.02;--tw-scale-y:1.02}.active\:scale-\[0\.98\]:active,.hover\:scale-\[1\.02\]:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.active\:scale-\[0\.98\]:active{--tw-scale-x:0.98;--tw-scale-y:0.98}

/* ─── /sports/golf/fitting 네 갈래 가로 띠 ──────────────────────────────
   도안은 384px 폭으로 그려졌지만, 이름을 넣을 자리가 없어 470px 로 넓혀 쓴다(아래 .ft-fit).
   앞 화면들과 같이 «원래 크기로 그린 뒤 칸 폭만큼 축소»한다.
   옛 .ft 규칙(코드로 그린 띠)은 여기서 덮어쓴다. */
.fttiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px;
           padding: 12px 16px 0; overflow: hidden; }
.ft { position: relative; display: block; text-decoration: none;
      background: none; border: 0; box-shadow: none; padding: 0; min-height: 0; }
.ft-box { display: block; position: relative; aspect-ratio: 470 / 128; }
.ft-off { cursor: default; }
.ft-stage { display: block; position: absolute; inset: 0; overflow: visible;
  line-height: 1.5; -webkit-tap-highlight-color: transparent;
  font-family: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Pretendard', sans-serif; }
/* 기준 폭을 384 → 470 으로 넓혔다. 이름(약 147px)이 들어가면서 그림이 띠 밖으로
   밀려 잘렸기 때문이다. 필요한 폭 = 48(좌우여백) + 64(상징) + 14 + 147(이름) + 192(그림) = 465.
   도안 자체는 한 글자도 고치지 않았다 — «자리»만 넓혀 준 것이다. */
.ft-fit { display: block; width: 470px; height: 128px;
  transform: scale(var(--k, .7617)); transform-origin: top left; }

/* Tailwind preflight 대신 — 띠 «안쪽에만» 거는 최소 초기화.
   ⚠ «* { padding: 0 }» 은 쓰지 않는다. Tailwind 의 px-6 가 전부 지워진다. */
.ft-stage, .ft-stage *, .ft-stage *::before, .ft-stage *::after {
  box-sizing: border-box; border: 0 solid #e5e7eb;
}
.ft-stage h1, .ft-stage h2, .ft-stage h3, .ft-stage h4, .ft-stage h5, .ft-stage h6,
.ft-stage p, .ft-stage figure, .ft-stage blockquote, .ft-stage dl, .ft-stage dd { margin: 0; }
.ft-stage ol, .ft-stage ul, .ft-stage menu { margin: 0; padding: 0; list-style: none; }
.ft-stage svg { display: block; vertical-align: middle; }

/* 도안 원본 <style data-purpose="custom-decorations"> — 그대로 옮겨 적었다 */
.ft-stage .card-glow-blue { box-shadow: 0 16px 36px -8px rgba(37,99,235,.45), 0 0 0 1px rgba(255,255,255,.22) inset; }
.ft-stage .card-glow-cyan { box-shadow: 0 16px 36px -8px rgba(6,182,212,.45), 0 0 0 1px rgba(255,255,255,.28) inset; }
.ft-stage .card-glow-purple { box-shadow: 0 16px 36px -8px rgba(139,92,246,.45), 0 0 0 1px rgba(255,255,255,.22) inset; }
.ft-stage .card-glow-slate { box-shadow: 0 16px 36px -8px rgba(71,85,105,.4), 0 0 0 1px rgba(255,255,255,.2) inset; }
.ft-stage .sparkle-spin { animation: ftSpin 12s linear infinite; }
.ft-stage .float-slow { animation: ftFloating 4s ease-in-out infinite alternate; }
.ft-stage .float-reverse { animation: ftFloatingReverse 3.5s ease-in-out infinite alternate; }
.ft-stage .twinkle-sparkle { animation: ftTwinkle 2.4s ease-in-out infinite alternate; }
.ft-stage .twinkle-sparkle-delayed { animation: ftTwinkle 2.4s ease-in-out 1.2s infinite alternate; }
.ft-stage .pulse-glow { animation: ftPulseGlow 2.8s ease-in-out infinite alternate; }
.ft-stage .bubble-float-1 { animation: ftBubble 3s ease-in-out infinite alternate; }
.ft-stage .bubble-float-2 { animation: ftBubble 3.8s ease-in-out .8s infinite alternate; }
@keyframes ftFloating { 0% { transform: translateY(-5px) rotate(0deg); } 100% { transform: translateY(2px) rotate(1.5deg); } }
@keyframes ftFloatingReverse { 0% { transform: translateY(4px) rotate(0deg); } 100% { transform: translateY(-3px) rotate(-2deg); } }
@keyframes ftTwinkle { 0% { transform: scale(.75); opacity: .4; } 100% { transform: scale(1.25); opacity: 1; } }
@keyframes ftPulseGlow { 0% { transform: scale(.9); opacity: .45; } 100% { transform: scale(1.15); opacity: .95; } }
@keyframes ftBubble {
  0% { transform: translate(0,0) scale(.9); opacity: .5; }
  50% { transform: translate(-3px,-4px) scale(1.05); opacity: .85; }
  100% { transform: translate(2px,-8px) scale(1.1); opacity: .6; }
}
@keyframes ftSpin { 100% { transform: rotate(360deg); } }

/* 부품 이름 — 앞 화면들과 «같은 글꼴»(Black Han Sans) */
.ft-name { position: relative; z-index: 10; flex-shrink: 0; display: block;
  margin-left: 14px; color: #fff; text-align: left; }
.ft-name b { display: block; font-size: 22px; line-height: 1.15; letter-spacing: -.02em;
  font-family: 'Black Han Sans', 'Pretendard', 'Noto Sans KR', sans-serif; font-weight: 400;
  white-space: nowrap; text-shadow: 0 2px 10px rgba(10,20,35,.38); }
.ft-name em { display: block; margin-top: 3px; font-style: normal;
  font-size: 11px; font-weight: 700; opacity: .92; white-space: nowrap;
  text-shadow: 0 1px 6px rgba(10,20,35,.38); }

@media (prefers-reduced-motion: reduce) {
  .ft-stage .float-slow, .ft-stage .float-reverse, .ft-stage .twinkle-sparkle,
  .ft-stage .twinkle-sparkle-delayed, .ft-stage .pulse-glow, .ft-stage .sparkle-spin,
  .ft-stage .bubble-float-1, .ft-stage .bubble-float-2 { animation: none !important; }
  .ft-stage .transition-all { transition: none; }
}