/* ONECLIP SHOP — /sports 여덟 칸 전용 CSS. styles.css · cards.css 다음에 읽힌다. ① 대표님 도안이 쓴 Tailwind 클래스를 진짜 Tailwind v3 로 컴파일한 결과 (설정이 첫 화면과 다르다 — squircle 28px · shadow-card-golf 등 8색 그림자) ② preflight 는 뺐다. 대신 .sp-stage 안쪽에만 같은 효과를 건다 ③ 첫 화면 CSS 와 겹치는 유틸리티 27개 중 내용이 다른 것은 .rounded-squircle 하나뿐이고, 그것만 .sp-stage 안으로 범위를 좁혔다 (실측으로 확인) ────────────────────────────────────────────────────────────── */ /* Tailwind 의 --tw-* 기본값. preflight 를 통째로 깔면 샵 전체가 어긋나므로 카드 «안쪽에만» 같은 값을 깐다. 이것이 없으면 bg-gradient-* 가 통째로 무효가 된다. */ .sp-stage, .sp-stage *, .sp-stage *::before, .sp-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}.-bottom-2{bottom:-.5rem}.-bottom-3{bottom:-.75rem}.-right-2{right:-.5rem}.-right-3{right:-.75rem}.z-0{z-index:0}.z-10{z-index:10}.flex{display:flex}.aspect-\[1\/0\.98\]{aspect-ratio:1/.98}.h-10{height:2.5rem}.h-32{height:8rem}.h-5{height:1.25rem}.h-full{height:100%}.w-10{width:2.5rem}.w-32{width:8rem}.w-5{width:1.25rem}.w-full{width:100%}.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}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.overflow-hidden{overflow:hidden}.rounded-2xl{border-radius:1rem}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.from-\[\#10e396\]{--tw-gradient-from:#10e396 var(--tw-gradient-from-position);--tw-gradient-to:rgba(16,227,150,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-\[\#1bd8c4\]{--tw-gradient-from:#1bd8c4 var(--tw-gradient-from-position);--tw-gradient-to:rgba(27,216,196,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-\[\#2ad6ff\]{--tw-gradient-from:#2ad6ff var(--tw-gradient-from-position);--tw-gradient-to:rgba(42,214,255,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-\[\#2f88ff\]{--tw-gradient-from:#2f88ff var(--tw-gradient-from-position);--tw-gradient-to:rgba(47,136,255,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-\[\#aa4cf7\]{--tw-gradient-from:#aa4cf7 var(--tw-gradient-from-position);--tw-gradient-to:rgba(170,76,247,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-\[\#c8f537\]{--tw-gradient-from:#c8f537 var(--tw-gradient-from-position);--tw-gradient-to:rgba(200,245,55,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-\[\#ff5778\]{--tw-gradient-from:#ff5778 var(--tw-gradient-from-position);--tw-gradient-to:rgba(255,87,120,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-\[\#ff9b3d\]{--tw-gradient-from:#ff9b3d var(--tw-gradient-from-position);--tw-gradient-to:rgba(255,155,61,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-\[\#029df4\]{--tw-gradient-to:rgba(2,157,244,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#029df4 var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-\[\#05c478\]{--tw-gradient-to:rgba(5,196,120,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#05c478 var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-\[\#0ea5a0\]{--tw-gradient-to:rgba(14,165,160,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#0ea5a0 var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-\[\#1d5ce6\]{--tw-gradient-to:rgba(29,92,230,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#1d5ce6 var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-\[\#8525e6\]{--tw-gradient-to:rgba(133,37,230,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#8525e6 var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-\[\#8edb18\]{--tw-gradient-to:rgba(142,219,24,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#8edb18 var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-\[\#f02b55\]{--tw-gradient-to:rgba(240,43,85,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#f02b55 var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-\[\#f56e18\]{--tw-gradient-to:rgba(245,110,24,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#f56e18 var(--tw-gradient-via-position),var(--tw-gradient-to)}.to-\[\#0362c9\]{--tw-gradient-to:#0362c9 var(--tw-gradient-to-position)}.to-\[\#049457\]{--tw-gradient-to:#049457 var(--tw-gradient-to-position)}.to-\[\#0a7c79\]{--tw-gradient-to:#0a7c79 var(--tw-gradient-to-position)}.to-\[\#0f3ba8\]{--tw-gradient-to:#0f3ba8 var(--tw-gradient-to-position)}.to-\[\#4d9c0a\]{--tw-gradient-to:#4d9c0a var(--tw-gradient-to-position)}.to-\[\#5914a8\]{--tw-gradient-to:#5914a8 var(--tw-gradient-to-position)}.to-\[\#c70d3a\]{--tw-gradient-to:#c70d3a var(--tw-gradient-to-position)}.to-\[\#d44806\]{--tw-gradient-to:#d44806 var(--tw-gradient-to-position)}.p-3\.5{padding:.875rem}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.shadow-card-auto{--tw-shadow:0 18px 36px -10px rgba(244,63,94,.42),0 8px 16px -6px rgba(225,29,72,.25);--tw-shadow-colored:0 18px 36px -10px var(--tw-shadow-color),0 8px 16px -6px var(--tw-shadow-color)}.shadow-card-auto,.shadow-card-cycling{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-card-cycling{--tw-shadow:0 18px 36px -10px rgba(14,165,233,.42),0 8px 16px -6px rgba(2,132,199,.25);--tw-shadow-colored:0 18px 36px -10px var(--tw-shadow-color),0 8px 16px -6px var(--tw-shadow-color)}.shadow-card-fishing{--tw-shadow:0 18px 36px -10px rgba(37,99,235,.42),0 8px 16px -6px rgba(29,78,216,.25);--tw-shadow-colored:0 18px 36px -10px var(--tw-shadow-color),0 8px 16px -6px var(--tw-shadow-color)}.shadow-card-fishing,.shadow-card-golf{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-card-golf{--tw-shadow:0 18px 36px -10px rgba(16,185,129,.42),0 8px 16px -6px rgba(5,150,105,.25);--tw-shadow-colored:0 18px 36px -10px var(--tw-shadow-color),0 8px 16px -6px var(--tw-shadow-color)}.shadow-card-hiking{--tw-shadow:0 18px 36px -10px rgba(13,148,136,.42),0 8px 16px -6px rgba(15,118,110,.25);--tw-shadow-colored:0 18px 36px -10px var(--tw-shadow-color),0 8px 16px -6px var(--tw-shadow-color)}.shadow-card-hiking,.shadow-card-park{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-card-park{--tw-shadow:0 18px 36px -10px rgba(132,204,22,.45),0 8px 16px -6px rgba(101,163,13,.25);--tw-shadow-colored:0 18px 36px -10px var(--tw-shadow-color),0 8px 16px -6px var(--tw-shadow-color)}.shadow-card-soccer{--tw-shadow:0 18px 36px -10px rgba(147,51,234,.42),0 8px 16px -6px rgba(126,34,206,.25);--tw-shadow-colored:0 18px 36px -10px var(--tw-shadow-color),0 8px 16px -6px var(--tw-shadow-color)}.shadow-card-soccer,.shadow-card-travel{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-card-travel{--tw-shadow:0 18px 36px -10px rgba(249,115,22,.42),0 8px 16px -6px rgba(234,88,12,.25);--tw-shadow-colored:0 18px 36px -10px var(--tw-shadow-color),0 8px 16px -6px var(--tw-shadow-color)}.shadow-glass-icon{--tw-shadow:0 8px 20px 0 rgba(0,0,0,.12),inset 0 1.5px 1px 0 hsla(0,0%,100%,.75);--tw-shadow-colored:0 8px 20px 0 var(--tw-shadow-color),inset 0 1.5px 1px 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)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.active\:scale-\[0\.97\]:active{--tw-scale-x:0.97;--tw-scale-y:0.97;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))} /* .rounded-squircle 은 첫 화면(36px)과 값이 달라 «여기 안에서만» 28px 로 둔다. 이것이 유일한 충돌이다 — 나머지 유틸리티 26개는 양쪽이 같은 내용이라 겹쳐도 안전하다. */ .sp-stage .rounded-squircle { border-radius: 28px; } /* ─── /sports 여덟 칸 ────────────────────────────────────────────── 그림이 아니라 «코드»다(sportcards.mjs). 모서리·그림자는 도안이 가지고 있으므로 상자에서 자르지 않는다. 옛 .sp 규칙(16:10 · drop-shadow)은 여기서 덮어쓴다. */ .sptiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 12px 16px 0; overflow: hidden; } .sp { position: relative; display: block; aspect-ratio: auto; text-decoration: none; } .sp-box { display: block; position: relative; aspect-ratio: 1 / 0.98; } .sp-off { cursor: default; } /* 무대 : 187px 로 그린 도안을 칸 폭만큼 줄인다 (--k 는 sportcards.mjs 가 넣는다). 첫 화면 도안은 452px 기준이고 이쪽은 187px 기준이다 — 숫자를 섞지 말 것. */ .sp-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; } .sp-fit { display: block; width: 187px; aspect-ratio: 1 / 0.98; transform: scale(var(--k, .861)); transform-origin: top left; } .sp-fit > article { width: 100%; height: 100%; } /* Tailwind preflight 대신 — 카드 «안쪽에만» 거는 최소 초기화 */ .sp-stage, .sp-stage *, .sp-stage *::before, .sp-stage *::after { box-sizing: border-box; border: 0 solid #e5e7eb; } /* ⚠ 여기서 «* { padding: 0 }» 을 쓰면 안 된다 — 선택자가 더 세서 Tailwind 의 p-3.5 · p-2 같은 안쪽 여백을 전부 지워 버린다(이름이 카드 모서리에 깎였던 원인). Tailwind preflight 가 실제로 여백을 지우는 것은 아래 몇 가지뿐이다. div·span 은 원래 0 이다. */ .sp-stage h1, .sp-stage h2, .sp-stage h3, .sp-stage h4, .sp-stage h5, .sp-stage h6, .sp-stage p, .sp-stage figure, .sp-stage blockquote, .sp-stage dl, .sp-stage dd { margin: 0; } .sp-stage ol, .sp-stage ul, .sp-stage menu { margin: 0; padding: 0; list-style: none; } .sp-stage svg { display: block; vertical-align: middle; } /* 도안 원본