|
| 1 | + |
| 2 | +*,:after,:before{margin:0;padding:0;font:inherit;color:inherit;box-sizing:border-box;} |
| 3 | +:root{-webkit-tap-highlight-color:transparent;text-size-adjust:100%;-webkit-text-size-adjust:100%;line-height:1.5;overflow-wrap:break-word;word-break:break-word;tab-size:2;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;} |
| 4 | +html,body{height:100%;} |
| 5 | +img,picture,video,canvas{display:block;max-width:100%;} |
| 6 | +img{text-indent:-9999px;} |
| 7 | +button{background:none;border:0;cursor:pointer;} |
| 8 | +a{text-decoration:none;} |
| 9 | +table{border-collapse:collapse;border-spacing:0;} |
| 10 | +ol,ul,menu,dir{list-style:none;} |
| 11 | +*,:after,:before{--w-grow:initial;--w-align:initial;--h-grow:initial;--h-align:initial;} |
| 12 | +*,:after,:before{ |
| 13 | +--a-translate-x:0; |
| 14 | +--a-translate-y:0; |
| 15 | +--a-rotate:0; |
| 16 | +--a-skew-x:0; |
| 17 | +--a-skew-y:0; |
| 18 | +--a-scale-x:1; |
| 19 | +--a-scale-y:1; |
| 20 | +--a-transform:translateX(var(--a-translate-x)) translateY(var(--a-translate-y)) rotate(var(--a-rotate)) skewX(var(--a-skew-x)) skewY(var(--a-skew-y)) scaleX(var(--a-scale-x)) scaleY(var(--a-scale-y)); |
| 21 | +--a-transform3d:translate3d(var(--a-translate-x),var(--a-translate-y),0) rotate(var(--a-rotate)) skewX(var(--a-skew-x)) skewY(var(--a-skew-y)) scaleX(var(--a-scale-x)) scaleY(var(--a-scale-y)); |
| 22 | +} |
| 23 | +.\32 00{font-weight:200;} |
| 24 | +.\37 00{font-weight:700;} |
| 25 | +@media(hover:hover){.\>\>a\:hover\:c\(--primary\) a:hover,.\>\>a\:hover\:c\(--primary\) a.\:hover{color:var(--primary);}} |
| 26 | +.\>\>a\.active\:c\(--primary\) a.active{color:var(--primary);} |
| 27 | +.c\(\#555\){color:#555;} |
| 28 | +.c\(\#ccc\){color:#ccc;} |
| 29 | +.group:hover .group-hover\:c\(--primary\),html .group.\:hover .group-hover\:c\(--primary\){color:var(--primary);} |
| 30 | +.c\(\#666\){color:#666;} |
| 31 | +.c\(\#ff0\){color:#ff0;} |
| 32 | +.c\(\#fff\){color:#fff;} |
| 33 | +.placeholder\:c\(\#ccc\)::placeholder{color:#ccc;} |
| 34 | +.\.selected\:c\(\#fff\).selected,.selected .\.selected\:c\(\#fff\){color:#fff;} |
| 35 | +.\>\>a\:c\(\#4f80ff\) a{color:#4f80ff;} |
| 36 | +@media only screen and (min-width:320px){html .\@w\(320\~\)\:c\(red\){color:red;}} |
| 37 | +.c\(red\){color:red;} |
| 38 | +.c\(blue\)\+font\(19\/42\)\+c\(\#D0D0D0\){color:blue;} |
| 39 | +.c\(blue\)\+font\(19\/42\)\+c\(\#D0D0D0\){color:#D0D0D0;} |
| 40 | +.c\(\#000\){color:#000;} |
| 41 | +@media(hover:hover){.hover\:c\(--primary\):hover,.hover\:c\(--primary\).\:hover{color:var(--primary);}} |
| 42 | +.c\(\#999\){color:#999;} |
| 43 | +.\.selected\:c\(\#000\).selected,.selected .\.selected\:c\(\#000\){color:#000;} |
| 44 | +html .active\:color\(--primary\):active,html .active\:color\(--primary\).\:active{color:var(--primary);} |
| 45 | +.font\(20\/-\/-10\%\){font-size:20px;letter-spacing:-0.1em;} |
| 46 | +.font\(3em\/-\/-1\.5\%\){font-size:3em;letter-spacing:-0.015em;} |
| 47 | +@media(max-width:767.98px){html .\~md\:font\(1\.6em\){font-size:1.6em;}} |
| 48 | +.font\(1\.2em\/-\/-1\.5\%\){font-size:1.2em;letter-spacing:-0.015em;} |
| 49 | +@media(max-width:767.98px){html .\~md\:font\(1\.4em\){font-size:1.4em;}} |
| 50 | +.font\(80\/-\/-15\%\){font-size:80px;letter-spacing:-0.15em;} |
| 51 | +.font\(20\){font-size:20px;} |
| 52 | +.font\(30\){font-size:30px;} |
| 53 | +.font\(10\){font-size:10px;} |
| 54 | +.font\(30\/-\/-1\.5\%\){font-size:30px;letter-spacing:-0.015em;} |
| 55 | +.font\(14\/16\/-1\%\){font-size:14px;line-height:16px;letter-spacing:-0.01em;} |
| 56 | +.font\(24\){font-size:24px;} |
| 57 | +.font\(13\){font-size:13px;} |
| 58 | +.font\(14\/1\.5\/-1\%\){font-size:14px;line-height:1.5;letter-spacing:-0.01em;} |
| 59 | +.font\(100\){font-size:100px;} |
| 60 | +.c\(blue\)\+font\(19\/42\)\+c\(\#D0D0D0\){font-size:19px;line-height:42px;} |
| 61 | +.font\(12\){font-size:12px;} |
| 62 | +.word-spacing\(20\){word-spacing:20px;} |
| 63 | +.AppleSD{font-family:"Apple SD Gothic Neo";} |
| 64 | +.monospace{font-family:monospace;font-family:var(--monospace, monospace);} |
| 65 | +.monospace\(number\){font-variant-numeric:tabular-nums;} |
| 66 | +.bold{font-weight:bold;} |
| 67 | +@media(hover:hover){.hover\:underline:hover,.hover\:underline.\:hover{text-decoration:underline;}} |
| 68 | +.text-center{text-align:center;} |
| 69 | +.text-left{text-align:left;} |
| 70 | +.vertical-top{vertical-align:top;} |
| 71 | +.block{display:block;} |
| 72 | +.w\(\~800\){max-width:800px;} |
| 73 | +.w\(100\~200\){min-width:100px;max-width:200px;} |
| 74 | +.w\(800\){width:800px;} |
| 75 | +.w\(200\){width:200px;} |
| 76 | +.w\(100\%\){width:100%;} |
| 77 | +.h\(60\){height:60px;} |
| 78 | +.h\(100\%\){height:100%;} |
| 79 | +.max-h\(60vh\){max-height:60vh;} |
| 80 | +.m\(20\){margin:20px;} |
| 81 | +.m\(10\/0\){margin:10px 0;} |
| 82 | +.\>h1\:m\(20\)>h1{margin:20px;} |
| 83 | +.m\(auto\){margin:auto;} |
| 84 | +.mt\(40\){margin-top:40px;} |
| 85 | +.p\(10\/20\){padding:10px 20px;} |
| 86 | +.p\(200\/32\){padding:200px 32px;} |
| 87 | +.p\(10\/10\){padding:10px 10px;} |
| 88 | +.p\(20\){padding:20px;} |
| 89 | +.p\(8\/12\){padding:8px 12px;} |
| 90 | +.p\(10\){padding:10px;} |
| 91 | +.p\(6\/8\){padding:6px 8px;} |
| 92 | +.pt\(12\){padding-top:12px;} |
| 93 | +.b\(\#000\.2\){border:solid 1px rgba(0,0,0,.2);} |
| 94 | +html .active\:b\(\#000\.2\):active,html .active\:b\(\#000\.2\).\:active{border:solid 1px rgba(0,0,0,.2);} |
| 95 | +.b\(-\){border:none;} |
| 96 | +.bb\(\#000\.1\){border-bottom:solid 1px rgba(0,0,0,.1);} |
| 97 | +.bb\(\#000\){border-bottom:solid 1px #000;} |
| 98 | +.bb\(4\/transparent\){border-bottom:solid 4px transparent;} |
| 99 | +.\.selected\:bbc\(--primary\).selected,.selected .\.selected\:bbc\(--primary\){border-bottom-color:var(--primary);} |
| 100 | +.outline\(-\){outline:none;} |
| 101 | +.r\(8\){border-radius:8px;} |
| 102 | +.r\(6\){border-radius:6px;} |
| 103 | +.r\(4\){border-radius:4px;} |
| 104 | +.bg\(\#fff\){background:#fff;} |
| 105 | +.odd\:bg\(\#f9f9f9\):nth-child(2n+1){background:#f9f9f9;} |
| 106 | +.bg\(\#f1f1f1\){background:#f1f1f1;} |
| 107 | +.bg\(\#333\){background:#333;} |
| 108 | +@media(hover:hover){.hover\:bg\(\#555\):hover,.hover\:bg\(\#555\).\:hover{background:#555;}} |
| 109 | +html .active\:bg\(\#000\):active,html .active\:bg\(\#000\).\:active{background:#000;} |
| 110 | +.nth-child\(3n\+1\)\:bg\(orange\):nth-child(3n+1){background:orange;} |
| 111 | +.\.selected\:bg\(\#000\).selected,.selected .\.selected\:bg\(\#000\){background:#000;} |
| 112 | +.bg\(\#f9f9f9\){background:#f9f9f9;} |
| 113 | +.\.selected\:bg\(--primary\).selected,.selected .\.selected\:bg\(--primary\){background:var(--primary);} |
| 114 | +.bg\(transparent\){background:transparent;} |
| 115 | +.clip{overflow:hidden;}.clip:has(.nowrap\.\.\.){flex-shrink:1;} |
| 116 | +.scroll-x{overflow-x:auto;overflow-y:hidden;} |
| 117 | +.scroll-y{overflow-x:hidden;overflow-y:auto;} |
| 118 | +.overscroll\(none\){overscroll-behavior:none;} |
| 119 | +.pre{white-space:pre-wrap;} |
| 120 | +.nowrap\.\.\.{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;flex-shrink:1;max-width:100%;} |
| 121 | +.line-clamp\(3\){display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;} |
| 122 | +.hbox{display:flex;flex-flow:row;align-items:center;}:where(.hbox>*){flex-shrink:0;--w-grow:1;--w-shrink:1;--w-align:initial;--h-grow:initial;--h-shrink:0;--h-align:stretch;} |
| 123 | +.hbox\(top\+center\){display:flex;flex-flow:row;align-items:flex-start;justify-content:center;}:where(.hbox\(top\+center\)>*){flex-shrink:0;--w-grow:1;--w-shrink:1;--w-align:initial;--h-grow:initial;--h-shrink:0;--h-align:stretch;} |
| 124 | +.hbox\(bottom\+right\){display:flex;flex-flow:row;align-items:flex-end;justify-content:flex-end;}:where(.hbox\(bottom\+right\)>*){flex-shrink:0;--w-grow:1;--w-shrink:1;--w-align:initial;--h-grow:initial;--h-shrink:0;--h-align:stretch;} |
| 125 | +.hbox\(fill\){display:flex;flex-flow:row;align-items:stretch;}:where(.hbox\(fill\)>*){flex-shrink:0;--w-grow:1;--w-shrink:1;--w-align:initial;--h-grow:initial;--h-shrink:0;--h-align:stretch;} |
| 126 | +.vbox{display:flex;flex-flow:column;align-items:stretch;}:where(.vbox>*){flex-shrink:0;--h-grow:1;--h-shrink:1;--h-align:initial;--w-grow:initial;--w-shrink:0;--w-align:stretch;} |
| 127 | +.vbox\(center\){display:flex;flex-flow:column;align-items:center;}:where(.vbox\(center\)>*){flex-shrink:0;--h-grow:1;--h-shrink:1;--h-align:initial;--w-grow:initial;--w-shrink:0;--w-align:stretch;} |
| 128 | +.pack{display:flex;align-items:center;justify-content:center;}:where(.pack>*){flex-shrink:0;--w-grow:1;--w-shrink:1;--w-align:initial;--h-grow:initial;--h-shrink:0;--h-align:stretch;} |
| 129 | +.gap\(20\){gap:20px;grid-gap:20px;} |
| 130 | +.gap\(40\){gap:40px;grid-gap:40px;} |
| 131 | +.gap\(60\){gap:60px;grid-gap:60px;} |
| 132 | +.gap\(6\){gap:6px;grid-gap:6px;} |
| 133 | +.space-between{justify-content:space-between;align-content:space-between;} |
| 134 | +.flex{flex:1;} |
| 135 | +.flex\(4\){flex:4;} |
| 136 | +.flex\(3\){flex:3;} |
| 137 | +[class*="hbox"]>.space\(2em\){width:2em;}[class*="vbox"]>.space\(2em\){height:2em;} |
| 138 | +.flex-wrap{flex-wrap:wrap;}:where(.flex-wrap>*){max-width:100%;max-height:100%;} |
| 139 | +.layer\(right\){position:absolute;top:0;right:0;bottom:0;} |
| 140 | +.layer{position:absolute;top:0;right:0;bottom:0;left:0;} |
| 141 | +.layer\(bottom\+right\){position:absolute;right:0;bottom:0;} |
| 142 | +.absolute{position:absolute;} |
| 143 | +.relative{position:relative;} |
| 144 | +.sticky-top{position:sticky;top:0;} |
| 145 | +.fixed{position:fixed;} |
| 146 | +.z\(999\){z-index:999;} |
| 147 | +.z\(9999\){z-index:9999;} |
| 148 | +.none{display:none;} |
| 149 | +.opacity\(0\.7\){opacity:0.7;} |
| 150 | +@media(hover:hover){.hover\:opacity\(1\):hover,.hover\:opacity\(1\).\:hover{opacity:1;}} |
| 151 | +.pointer{cursor:pointer;} |
| 152 | +.transition\(\.4s\){transition:all .4s;} |
| 153 | +.transition\(\.2s\){transition:all .2s;} |
| 154 | +.group:hover .group-hover\:rotate\(-10deg\),html .group.\:hover .group-hover\:rotate\(-10deg\){--a-rotate:-10deg;--a-rotate-x:-10deg;--a-rotate-y:-10deg;--a-rotate-z:-10deg;transform:var(--a-transform);} |
| 155 | +html .group:active .group-active\:rotate\(10deg\),html .group.\:active .group-active\:rotate\(10deg\){--a-rotate:10deg;--a-rotate-x:10deg;--a-rotate-y:10deg;--a-rotate-z:10deg;transform:var(--a-transform);} |
| 156 | +.group:hover .group-hover\:rotate\(10deg\),html .group.\:hover .group-hover\:rotate\(10deg\){--a-rotate:10deg;--a-rotate-x:10deg;--a-rotate-y:10deg;--a-rotate-z:10deg;transform:var(--a-transform);} |
| 157 | +html .group:active .group-active\:rotate\(-10deg\),html .group.\:active .group-active\:rotate\(-10deg\){--a-rotate:-10deg;--a-rotate-x:-10deg;--a-rotate-y:-10deg;--a-rotate-z:-10deg;transform:var(--a-transform);} |
| 158 | +html .active\:rotate\(5deg\):active,html .active\:rotate\(5deg\).\:active{--a-rotate:5deg;--a-rotate-x:5deg;--a-rotate-y:5deg;--a-rotate-z:5deg;transform:var(--a-transform);} |
| 159 | +@media(hover:hover){.hover\:scale\(1\.05\):hover,.hover\:scale\(1\.05\).\:hover{--a-scale-x:1.05;--a-scale-y:1.05;--a-scale-z:1.05;transform:var(--a-transform);}} |
| 160 | +.after\:content\(--my-content\)::after{content:var(--my-content);} |
| 161 | +html .active\:bg\(\#000\)\!:active,html .active\:bg\(\#000\)\!.\:active{background:#000!important;} |
| 162 | +.\.selected\:c\(\#fff\)\!.selected,.selected .\.selected\:c\(\#fff\)\!{color:#fff!important;}:root{font-family:Pretendard,system-ui,sans-serif;color:#222;font-size:14px;--primary:#fb3958;--primary-bg:rgba(251, 57, 88, .02)}.markdown{width:768px;max-width:100%;margin:auto;line-height:1.6;font-size:16px;letter-spacing:-.01em;word-wrap:break-all;color:#333}.markdown hr{margin:2em 0;border-top:1px solid rgba(0,0,0,.1)}.markdown a{color:var(--primary)}.markdown a:hover{text-decoration:underline}.markdown h1,.markdown h2,.markdown h3,.markdown h4{font-size:2em;font-weight:700;margin-top:2.4em;margin-bottom:.6em}.markdown h2{font-size:1.4em}.markdown h3{font-size:1.2em}.markdown h4{font-size:1em}.markdown p{margin:1.4em 0}.markdown ul,.markdown ol{list-style:disc;padding:0 1.6em;margin:1em 0}.markdown ol{list-style:number}.markdown li{margin:.2em 0}.markdown pre{background:#f9f9f9;margin:1em 0;padding:1em;border-radius:.6em;white-space:pre-wrap;font-family:monospace;font-size:.9em;text-align:left}.markdown code{background:#f6f8fa;padding:2px .4em;border-radius:.4em;font-family:monospace;font-size:.9em}.markdown pre code{background:none;padding:0}.markdown .attr-value,.markdown .string,.markdown .string-property{color:var(--primary)}.markdown .comment{color:#999}.markdown blockquote{background:var(--primary-bg);margin:1.4em 0;padding:1.4em;border-left:4px solid var(--primary)}.markdown blockquote>:first-child{margin-top:0}.markdown blockquote>:last-child{margin-bottom:0}.markdown strong{font-weight:700}@media (max-width:768px){.markdown{font-size:14px}} |
0 commit comments