/* ONECLIP SHOP — /sports/golf 네 갈래 전용 CSS. styles.css · cards.css · sportcards.css 다음. 대표님 도안이 쓴 Tailwind 클래스를 진짜 Tailwind v3 로 컴파일한 결과 + 껍데기. 앞의 두 CSS 와 겹치는 선택자 중 «내용이 다른 것은 0건»이었다(실측). ────────────────────────────────────────────────────────────── */ /* Tailwind 의 --tw-* 기본값. preflight 를 통째로 깔면 샵 전체가 어긋나므로 카드 «안쪽에만» 같은 값을 깐다. 이것이 없으면 bg-gradient-* 가 통째로 무효가 된다. */ .gf-stage, .gf-stage *, .gf-stage *::before, .gf-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: ; } .absolute{position:absolute}.relative{position:relative}.-top-1{top:-.25rem}.bottom-3{bottom:.75rem}.bottom-5{bottom:1.25rem}.bottom-6{bottom:1.5rem}.left-2{left:.5rem}.right-0{right:0}.right-2{right:.5rem}.right-4{right:1rem}.top-10{top:2.5rem}.top-3{top:.75rem}.top-4{top:1rem}.z-10{z-index:10}.-mr-1{margin-right:-.25rem}.-mr-2{margin-right:-.5rem}.-mr-3{margin-right:-.75rem}.flex{display:flex}.h-20{height:5rem}.h-24{height:6rem}.h-28{height:7rem}.h-36{height:9rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-full{height:100%}.w-20{width:5rem}.w-24{width:6rem}.w-28{width:7rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-full{width:100%}.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}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.overflow-visible{overflow:visible}.rounded-3xl{border-radius:1.5rem}.border{border-width:1px}.border-2{border-width:2px}.border-white\/80{border-color:hsla(0,0%,100%,.8)}.border-white\/90{border-color:hsla(0,0%,100%,.9)}.bg-white\/55{background-color:hsla(0,0%,100%,.55)}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-\[\#bae6fd\]{--tw-gradient-from:#bae6fd var(--tw-gradient-from-position);--tw-gradient-to:rgba(186,230,253,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-\[\#ccfbf1\]{--tw-gradient-from:#ccfbf1 var(--tw-gradient-from-position);--tw-gradient-to:rgba(204,251,241,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-\[\#fef08a\]{--tw-gradient-from:#fef08a var(--tw-gradient-from-position);--tw-gradient-to:hsla(53,98%,77%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-\[\#ffd3e2\]{--tw-gradient-from:#ffd3e2 var(--tw-gradient-from-position);--tw-gradient-to:rgba(255,211,226,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-\[\#7dd3fc\]{--tw-gradient-to:rgba(125,211,252,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#7dd3fc var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-\[\#a7f3d0\]{--tw-gradient-to:rgba(167,243,208,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#a7f3d0 var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-\[\#fde047\]{--tw-gradient-to:rgba(253,224,71,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#fde047 var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-\[\#ffbed6\]{--tw-gradient-to:rgba(255,190,214,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#ffbed6 var(--tw-gradient-via-position),var(--tw-gradient-to)}.to-\[\#38bdf8\]{--tw-gradient-to:#38bdf8 var(--tw-gradient-to-position)}.to-\[\#6ee7b7\]{--tw-gradient-to:#6ee7b7 var(--tw-gradient-to-position)}.to-\[\#fbbf24\]{--tw-gradient-to:#fbbf24 var(--tw-gradient-to-position)}.to-\[\#ffa4c8\]{--tw-gradient-to:#ffa4c8 var(--tw-gradient-to-position)}.fill-amber-300{fill:#fcd34d}.fill-amber-500{fill:#f59e0b}.fill-yellow-400{fill:#facc15}.fill-yellow-600{fill:#ca8a04}.p-2{padding:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.shadow-pill-blue{--tw-shadow:0 20px 40px -10px rgba(56,189,248,.45),inset 0 3px 6px hsla(0,0%,100%,.9),inset 0 -4px 8px rgba(14,165,233,.35);--tw-shadow-colored:0 20px 40px -10px var(--tw-shadow-color),inset 0 3px 6px var(--tw-shadow-color),inset 0 -4px 8px var(--tw-shadow-color)}.shadow-pill-blue,.shadow-pill-gold{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-pill-gold{--tw-shadow:0 20px 40px -10px rgba(251,191,36,.48),inset 0 3px 6px hsla(0,0%,100%,.9),inset 0 -4px 8px rgba(217,119,6,.35);--tw-shadow-colored:0 20px 40px -10px var(--tw-shadow-color),inset 0 3px 6px var(--tw-shadow-color),inset 0 -4px 8px var(--tw-shadow-color)}.shadow-pill-mint{--tw-shadow:0 20px 40px -10px rgba(52,211,153,.45),inset 0 3px 6px hsla(0,0%,100%,.85),inset 0 -4px 8px rgba(16,185,129,.35);--tw-shadow-colored:0 20px 40px -10px var(--tw-shadow-color),inset 0 3px 6px var(--tw-shadow-color),inset 0 -4px 8px var(--tw-shadow-color)}.shadow-pill-mint,.shadow-pill-pink{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-pill-pink{--tw-shadow:0 20px 40px -10px rgba(244,114,182,.45),inset 0 3px 6px hsla(0,0%,100%,.85),inset 0 -4px 8px rgba(236,72,153,.35);--tw-shadow-colored:0 20px 40px -10px var(--tw-shadow-color),inset 0 3px 6px var(--tw-shadow-color),inset 0 -4px 8px var(--tw-shadow-color)}.shadow-squircle{--tw-shadow:0 10px 20px -3px rgba(0,0,0,.08),inset 0 2px 4px hsla(0,0%,100%,.95),inset 0 -2px 4px rgba(0,0,0,.05);--tw-shadow-colored:0 10px 20px -3px var(--tw-shadow-color),inset 0 2px 4px var(--tw-shadow-color),inset 0 -2px 4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.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-md{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-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-sm{--tw-drop-shadow:drop-shadow(0 1px 1px rgba(0,0,0,.05))}.drop-shadow-sm,.filter{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)}@media (min-width:640px){.sm\:-mr-2{margin-right:-.5rem}.sm\:h-10{height:2.5rem}.sm\:h-24{height:6rem}.sm\:h-28{height:7rem}.sm\:h-36{height:9rem}.sm\:h-44{height:11rem}.sm\:h-7{height:1.75rem}.sm\:w-10{width:2.5rem}.sm\:w-24{width:6rem}.sm\:w-28{width:7rem}.sm\:w-32{width:8rem}.sm\:w-36{width:9rem}.sm\:w-7{width:1.75rem}.sm\:px-8{padding-left:2rem;padding-right:2rem}} /* ─── /sports/golf 네 갈래 가로 띠 ───────────────────────────────────── 이 도안은 «576px 폭» 기준이다(main.max-w-xl + body p-4). 폭이 그보다 좁으면 상징·장식·마스코트가 들어갈 자리가 없어 마스코트가 통째로 잘린다(실측). 그래서 첫 화면·스포츠 화면과 같은 방식으로 «576px 로 그린 뒤 칸 폭만큼 축소»한다. 옛 .gf 규칙(18:5 그림)은 여기서 덮어쓴다. */ .gftiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 12px 16px 0; overflow: hidden; } .gf { position: relative; display: block; aspect-ratio: auto; text-decoration: none; } .gf-box { display: block; position: relative; aspect-ratio: 576 / 144; } .gf-off { cursor: default; } .gf-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; } .gf-fit { display: block; width: 576px; height: 144px; transform: scale(var(--k, .6215)); transform-origin: top left; } /* Tailwind preflight 대신 — 띠 «안쪽에만» 거는 최소 초기화. ⚠ 여기서 «* { padding: 0 }» 을 쓰면 Tailwind 의 px-4 · p-2 가 전부 지워진다 (CHECKPOINT 21 에서 한 번 당한 자리). preflight 가 실제로 지우는 것만 적는다. */ .gf-stage, .gf-stage *, .gf-stage *::before, .gf-stage *::after { box-sizing: border-box; border: 0 solid #e5e7eb; } .gf-stage h1, .gf-stage h2, .gf-stage h3, .gf-stage h4, .gf-stage h5, .gf-stage h6, .gf-stage p, .gf-stage figure, .gf-stage blockquote, .gf-stage dl, .gf-stage dd { margin: 0; } .gf-stage ol, .gf-stage ul, .gf-stage menu { margin: 0; padding: 0; list-style: none; } .gf-stage svg { display: block; vertical-align: middle; } /* 도안 원본