From 070425dd22448308c08ad6ca89cf38b2dde278b0 Mon Sep 17 00:00:00 2001 From: zenn Date: Fri, 17 Apr 2026 13:39:59 +0900 Subject: [PATCH] =?UTF-8?q?=ED=85=8C=EB=A7=88:=20v0.2.8=20=EB=B0=8F=20?= =?UTF-8?q?=EC=83=81=EB=8B=A8=20=EC=82=AC=EC=9A=A9=EC=9E=90=20=EB=A9=94?= =?UTF-8?q?=EB=89=B4=C2=B7=EA=B2=80=EC=83=89=C2=B7=ED=9E=88=EC=96=B4?= =?UTF-8?q?=EB=A1=9C=C2=B7=EC=82=AC=EC=9D=B4=EB=93=9C=EB=B0=94=20=EB=88=84?= =?UTF-8?q?=EC=A0=81=20=EB=B3=B4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Made-with: Cursor --- assets/built/screen.css | 153 ++++++++++++++-- assets/built/tailwind.css | 2 +- assets/built/theme.js | 316 ++++++++++++++++++++++++++++++-- default.hbs | 2 +- docs/deploy.md | 2 +- docs/map.md | 2 +- docs/spec.md | 14 +- docs/update.md | 26 +++ package.json | 2 +- partials/home/hero.hbs | 56 +----- partials/site/sidebar-left.hbs | 2 +- partials/site/sidebar-right.hbs | 4 +- partials/site/topbar.hbs | 71 ++++--- 13 files changed, 540 insertions(+), 112 deletions(-) diff --git a/assets/built/screen.css b/assets/built/screen.css index fe535f4..ea8d529 100644 --- a/assets/built/screen.css +++ b/assets/built/screen.css @@ -755,8 +755,6 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle:hover .topbar__sidebar width: min(100%, 320px); padding: 10px 14px; background: var(--surface); - border: 1px solid var(--border); - border-radius: 12px; color: var(--text-soft); } @@ -896,6 +894,46 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle:hover .topbar__sidebar padding: 20px 18px 10px; } +.home-hero { + border-bottom: 1px solid var(--border); + background: var(--surface); +} + +.home-hero__cover { + opacity: 0; + transition: opacity 0.45s ease; +} + +.home-hero__skeleton { + background: linear-gradient( + 90deg, + color-mix(in srgb, var(--surface-muted) 88%, var(--surface)), + color-mix(in srgb, var(--surface-muted) 60%, #fff) 45%, + color-mix(in srgb, var(--surface-muted) 88%, var(--surface)) + ); + background-size: 220% 100%; + animation: home-hero-skeleton 1.2s linear infinite; + transition: opacity 0.35s ease; +} + +.home-hero.is-loaded .home-hero__cover { + opacity: 1; +} + +.home-hero.is-loaded .home-hero__skeleton { + opacity: 0; + pointer-events: none; +} + +@keyframes home-hero-skeleton { + 0% { + background-position: 200% 0; + } + 100% { + background-position: -20% 0; + } +} + .hero__title { max-width: 760px; margin: 0; @@ -1734,9 +1772,20 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle:hover .topbar__sidebar .search-modal__panel { position: relative; - width: min(100%, 720px); - margin: 56px auto; - padding: 0 18px; + width: min(95vw, 620px); + margin: 72px auto 0; + background: var(--surface); + border: 1px solid var(--border); + border-radius: 18px; + box-shadow: var(--shadow); + overflow: hidden; +} + +.search-modal__input { + width: 100%; + padding: 14px 18px; + border-bottom: 1px solid var(--border); + background: var(--surface); } .search-modal__input input { @@ -1745,32 +1794,102 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle:hover .topbar__sidebar background: transparent; color: inherit; outline: none; + font-size: 1.05rem; + line-height: 1.2; +} + +.search-modal__input input::-webkit-search-cancel-button, +.search-modal__input input::-webkit-search-decoration { + -webkit-appearance: none; + appearance: none; + display: none; } .search-modal__body { - margin-top: 14px; - padding: 18px; - background: var(--surface); - border: 1px solid var(--border); - border-radius: 18px; - box-shadow: var(--shadow); - max-height: 70vh; + padding: 10px 0; + max-height: min(70vh, 640px); overflow: auto; } .search-modal__hint, .search-empty { color: var(--text-soft); + padding: 14px 20px; } .search-result { - display: block; - padding: 10px 4px; - border-bottom: 1px solid var(--border); + display: flex; + align-items: flex-start; + gap: 10px; + width: 100%; + padding: 10px 20px; + transition: background-color 0.15s ease; } -.search-result:last-child { - border-bottom: 0; +.search-result:hover { + background: var(--surface-muted); +} + +.search-result-group + .search-result-group { + border-top: 1px solid var(--border); +} + +.search-result-group__title { + font-size: 11px; + text-transform: uppercase; + letter-spacing: 0.05em; + color: var(--text-soft); + padding: 12px 20px 6px; +} + +.search-result-group__items { + display: flex; + flex-direction: column; + padding-bottom: 4px; +} + +.search-author__avatar { + width: 28px; + height: 28px; + border-radius: 999px; + object-fit: cover; + flex: 0 0 auto; +} + +.search-author__avatar--fallback { + display: inline-flex; + align-items: center; + justify-content: center; + font-size: 13px; + background: var(--surface-muted); + color: var(--text-soft); +} + +.search-result__prefix { + color: var(--text-soft); + font-weight: 700; + margin-top: 1px; +} + +.search-result__title { + display: block; + line-height: 1.35; + color: var(--text); +} + +.search-result__excerpt { + margin-top: 4px; + font-size: 12px; + line-height: 1.35; + color: var(--text-soft); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.search-result--post { + flex-direction: column; + gap: 0; } @media (max-width: 1023px) { diff --git a/assets/built/tailwind.css b/assets/built/tailwind.css index 13f889e..6b3b025 100644 --- a/assets/built/tailwind.css +++ b/assets/built/tailwind.css @@ -1 +1 @@ -*,:after,:before{--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:rgba(59,130,246,.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: }::backdrop{--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:rgba(59,130,246,.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: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}html{font-family:Pretendard,system-ui,sans-serif}body{color:var(--text);background-color:var(--bg)}.prose{color:var(--tw-prose-body);font-size:1rem;line-height:1.75}.prose-theme{--tw-prose-body:var(--text);--tw-prose-headings:var(--text);--tw-prose-lead:var(--text-soft);--tw-prose-links:var(--text);--tw-prose-bold:var(--text);--tw-prose-counters:var(--text-soft);--tw-prose-bullets:var(--border-strong);--tw-prose-hr:var(--border);--tw-prose-quotes:var(--text);--tw-prose-quote-borders:var(--border);--tw-prose-captions:var(--text-soft);--tw-prose-kbd:var(--text);--tw-prose-kbd-shadows:color-mix(in srgb,var(--text) 10%,transparent);--tw-prose-code:var(--text);--tw-prose-pre-code:#f8f5f0;--tw-prose-pre-bg:#26221f;--tw-prose-th-borders:var(--border-strong);--tw-prose-td-borders:var(--border)}.prose :where(p):not(:where(.not-prose,.not-prose *)){margin-top:1.25em;margin-bottom:1.25em}.prose :where(a):not(:where(.not-prose,.not-prose *)){color:var(--tw-prose-links);font-weight:500;text-decoration:underline;text-underline-offset:.12em}.prose :where(strong):not(:where(.not-prose,.not-prose *)){color:var(--tw-prose-bold);font-weight:600}.prose :where(ol):not(:where(.not-prose,.not-prose *)){margin-top:1.25em;margin-bottom:1.25em;padding-inline-start:1.625em;list-style-type:decimal}.prose :where(ul):not(:where(.not-prose,.not-prose *)){margin-top:1.25em;margin-bottom:1.25em;padding-inline-start:1.625em;list-style-type:disc}.prose :where(ol>li):not(:where(.not-prose,.not-prose *))::marker{color:var(--tw-prose-counters);font-weight:400}.prose :where(ul>li):not(:where(.not-prose,.not-prose *))::marker{color:var(--tw-prose-bullets)}.prose :where(li):not(:where(.not-prose,.not-prose *)){margin-top:.5em;margin-bottom:.5em}.prose :where(ol>li,ul>li):not(:where(.not-prose,.not-prose *)){padding-inline-start:.375em}.prose :where(hr):not(:where(.not-prose,.not-prose *)){border-color:var(--tw-prose-hr);border-top-width:1px;margin-top:3em;margin-bottom:3em}.prose :where(blockquote):not(:where(.not-prose,.not-prose *)){color:var(--tw-prose-quotes);border-inline-start-width:.25rem;border-inline-start-color:var(--tw-prose-quote-borders);margin-top:1.6em;margin-bottom:1.6em;padding-inline-start:1em;font-style:italic;font-weight:500}.prose :where(h1):not(:where(.not-prose,.not-prose *)){color:var(--tw-prose-headings);margin-top:0;margin-bottom:.888889em;font-size:2.25em;font-weight:800;line-height:1.11111}.prose :where(h2):not(:where(.not-prose,.not-prose *)){color:var(--tw-prose-headings);margin-top:2em;margin-bottom:1em;font-size:1.5em;font-weight:700;line-height:1.33333}.prose :where(h3):not(:where(.not-prose,.not-prose *)){color:var(--tw-prose-headings);margin-top:1.6em;margin-bottom:.6em;font-size:1.25em;font-weight:600;line-height:1.6}.prose :where(h4):not(:where(.not-prose,.not-prose *)){color:var(--tw-prose-headings);margin-top:1.5em;margin-bottom:.5em;font-weight:600;line-height:1.5}.prose :where(img,picture,video):not(:where(.not-prose,.not-prose *)){margin-top:2em;margin-bottom:2em}.prose :where(picture):not(:where(.not-prose,.not-prose *)){display:block}.prose :where(picture>img):not(:where(.not-prose,.not-prose *)){margin-top:0;margin-bottom:0}.prose :where(figure):not(:where(.not-prose,.not-prose *)){margin-top:2em;margin-bottom:2em}.prose :where(figure>*):not(:where(.not-prose,.not-prose *)){margin-top:0;margin-bottom:0}.prose :where(figcaption):not(:where(.not-prose,.not-prose *)){color:var(--tw-prose-captions);margin-top:.857143em;font-size:.875em;line-height:1.42857}.prose :where(code):not(:where(.not-prose,.not-prose *)){color:var(--tw-prose-code);font-size:.875em;font-weight:600}.prose :where(code):not(:where(.not-prose,.not-prose *)):after,.prose :where(code):not(:where(.not-prose,.not-prose *)):before{content:"`"}.prose :where(pre):not(:where(.not-prose,.not-prose *)){color:var(--tw-prose-pre-code);background-color:var(--tw-prose-pre-bg);padding:.857143em 1.14286em;border-radius:.375rem;margin-top:1.71429em;margin-bottom:1.71429em;font-size:.875em;font-weight:400;line-height:1.71429;overflow-x:auto}.prose :where(pre code):not(:where(.not-prose,.not-prose *)){font-weight:inherit;color:inherit;font-size:inherit;background-color:transparent;padding:0}.prose :where(pre code):not(:where(.not-prose,.not-prose *)):after,.prose :where(pre code):not(:where(.not-prose,.not-prose *)):before{content:none}.prose :where(table):not(:where(.not-prose,.not-prose *)){table-layout:auto;width:100%;margin-top:2em;margin-bottom:2em;font-size:.875em;line-height:1.71429}.prose :where(thead):not(:where(.not-prose,.not-prose *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-th-borders)}.prose :where(tbody tr):not(:where(.not-prose,.not-prose *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-td-borders)}.prose :where(th,td):not(:where(.not-prose,.not-prose *)){text-align:start;padding:.571429em}.prose :where(.prose>:first-child):not(:where(.not-prose,.not-prose *)){margin-top:0}.prose :where(.prose>:last-child):not(:where(.not-prose,.not-prose *)){margin-bottom:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}.visible{visibility:visible}.invisible{visibility:hidden}.absolute{position:absolute}.relative{position:relative}.inset-y-0{top:0;bottom:0}.-bottom-16{bottom:-4rem}.bottom-0{bottom:0}.bottom-4{bottom:1rem}.left-0{left:0}.left-3\.5{left:.875rem}.right-0{right:0}.right-4{right:1rem}.top-0{top:0}.top-1\/2{top:50%}.top-12{top:3rem}.top-4{top:1rem}.top-9{top:2.25rem}.z-10{z-index:10}.z-50{z-index:50}.mx-auto{margin-left:auto;margin-right:auto}.-mb-1\.5{margin-bottom:-.375rem}.-mr-0\.5{margin-right:-.125rem}.-mt-px{margin-top:-1px}.mb-1{margin-bottom:.25rem}.mb-12{margin-bottom:3rem}.mb-2{margin-bottom:.5rem}.mb-2\.5{margin-bottom:.625rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mb-\[12px\]{margin-bottom:12px}.mb-\[28px\]{margin-bottom:28px}.mb-\[8px\]{margin-bottom:8px}.ml-4{margin-left:1rem}.mr-1{margin-right:.25rem}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-2\.5{margin-top:.625rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-auto{margin-top:auto}.line-clamp-1{-webkit-line-clamp:1}.line-clamp-1,.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical}.line-clamp-2{-webkit-line-clamp:2}.line-clamp-3{-webkit-line-clamp:3}.line-clamp-3,.line-clamp-4{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical}.line-clamp-4{-webkit-line-clamp:4}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.aspect-\[16\/9\]{aspect-ratio:16/9}.aspect-square{aspect-ratio:1/1}.aspect-video{aspect-ratio:16/9}.size-10{width:2.5rem;height:2.5rem}.size-2{width:.5rem;height:.5rem}.size-3\.5{width:.875rem;height:.875rem}.size-4{width:1rem;height:1rem}.size-5{width:1.25rem;height:1.25rem}.size-6{width:1.5rem;height:1.5rem}.size-8{width:2rem;height:2rem}.h-16{height:4rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-\[18px\]{height:18px}.h-full{height:100%}.min-h-0{min-height:0}.min-h-12{min-height:3rem}.min-h-8{min-height:2rem}.min-h-\[128px\]{min-height:128px}.min-h-\[2\.2rem\]{min-height:2.2rem}.w-1{width:.25rem}.w-12{width:3rem}.w-16{width:4rem}.w-4{width:1rem}.w-8{width:2rem}.w-\[18px\]{width:18px}.w-\[3px\]{width:3px}.w-full{width:100%}.min-w-0{min-width:0}.min-w-16{min-width:4rem}.min-w-\[200px\]{min-width:200px}.max-w-\[90\%\]{max-width:90%}.max-w-lg{max-width:32rem}.max-w-md{max-width:28rem}.max-w-xl{max-width:36rem}.max-w-xs{max-width:20rem}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.basis-\[78\%\]{flex-basis:78%}.basis-full{flex-basis:100%}.-translate-x-1{--tw-translate-x:-0.25rem}.-translate-x-1,.-translate-y-1\/2{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))}.-translate-y-1\/2{--tw-translate-y:-50%}.-translate-y-2{--tw-translate-y:-0.5rem}.-translate-y-2,.-translate-y-4{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))}.-translate-y-4{--tw-translate-y:-1rem}.translate-x-0{--tw-translate-x:0px}.translate-x-0,.translate-x-3\.5{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))}.translate-x-3\.5{--tw-translate-x:0.875rem}.translate-y-0{--tw-translate-y:0px}.rotate-180,.translate-y-0{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))}.rotate-180{--tw-rotate:180deg}.scale-100{--tw-scale-x:1;--tw-scale-y:1}.scale-100,.scale-75{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))}.scale-75{--tw-scale-x:.75;--tw-scale-y:.75}.scale-95{--tw-scale-x:.95;--tw-scale-y:.95}.scale-95,.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}.snap-x{scroll-snap-type:x var(--tw-scroll-snap-strictness)}.snap-mandatory{--tw-scroll-snap-strictness:mandatory}.snap-start{scroll-snap-align:start}.scroll-mt-14{scroll-margin-top:3.5rem}.list-none{list-style-type:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-x-1\.5{-moz-column-gap:.375rem;column-gap:.375rem}.gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.gap-x-6{-moz-column-gap:1.5rem;column-gap:1.5rem}.gap-y-0\.5{row-gap:.125rem}.gap-y-3{row-gap:.75rem}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px*var(--tw-divide-y-reverse))}.divide-brd>:not([hidden])~:not([hidden]){border-color:var(--border)}.self-start{align-self:flex-start}.self-stretch{align-self:stretch}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.scroll-smooth{scroll-behavior:smooth}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-balance{text-wrap:balance}.rounded{border-radius:.25rem}.rounded-\[14px\]{border-radius:14px}.rounded-\[8px\]{border-radius:8px}.rounded-\[inherit\]{border-radius:inherit}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-sm{border-radius:.125rem}.rounded-xl{border-radius:.75rem}.rounded-l-\[14px\]{border-top-left-radius:14px;border-bottom-left-radius:14px}.rounded-l-none{border-top-left-radius:0;border-bottom-left-radius:0}.rounded-r-lg{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.border{border-width:1px}.border-2{border-width:2px}.border-y{border-top-width:1px}.border-b,.border-y{border-bottom-width:1px}.border-l-\[3px\]{border-left-width:3px}.border-t{border-top-width:1px}.border-\[var\(--border\)\],.border-brd{border-color:var(--border)}.border-transparent{border-color:transparent}.border-typ{border-color:var(--text)}.border-b-brd{border-bottom-color:var(--border)}.border-l-transparent{border-left-color:transparent}.bg-\[var\(--surface\)\]{background-color:var(--surface)}.bg-\[var\(--tag-accent\2c var\(--accent\)\)\]{background-color:var(--tag-accent,var(--accent))}.bg-accent{background-color:var(--color-accent)}.bg-bgr-tone{background-color:var(--surface-muted)}.bg-brd{background-color:var(--border)}.bg-orange-600{--tw-bg-opacity:1;background-color:rgb(234 88 12/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.fill-bgr-tone{fill:var(--surface-muted)}.fill-current{fill:currentColor}.stroke-0{stroke-width:0}.stroke-1{stroke-width:1}.stroke-2{stroke-width:2}.stroke-\[2\.5\]{stroke-width:2.5}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0\.5{padding:.125rem}.p-1{padding:.25rem}.p-1\.5{padding:.375rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.px-0{padding-left:0;padding-right:0}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-3\.5{padding-left:.875rem;padding-right:.875rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-\[14px\]{padding-top:14px;padding-bottom:14px}.py-px{padding-top:1px;padding-bottom:1px}.pb-2{padding-bottom:.5rem}.pb-3{padding-bottom:.75rem}.pb-4{padding-bottom:1rem}.pl-0{padding-left:0}.pl-0\.5{padding-left:.125rem}.pl-4{padding-left:1rem}.pl-5{padding-left:1.25rem}.pr-2{padding-right:.5rem}.pr-3{padding-right:.75rem}.pt-2{padding-top:.5rem}.pt-3{padding-top:.75rem}.pt-4{padding-top:1rem}.text-left{text-align:left}.text-center{text-align:center}.font-sans{font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.text-2xl{font-size:1.5rem;line-height:2rem}.text-\[0\.7rem\]{font-size:.7rem}.text-\[0\.8rem\]{font-size:.8rem}.text-\[11px\]{font-size:11px}.text-\[13px\]{font-size:13px}.text-\[15px\]{font-size:15px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.leading-5{line-height:1.25rem}.leading-\[1\.125\]{line-height:1.125}.leading-\[1\.15\]{line-height:1.15}.leading-none{line-height:1}.leading-normal{line-height:1.5}.leading-snug{line-height:1.375}.leading-tight{line-height:1.25}.tracking-\[-0\.02em\]{letter-spacing:-.02em}.tracking-tight{letter-spacing:-.025em}.text-\[var\(--text-soft\)\]{color:var(--text-soft)}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.text-brand{--tw-text-opacity:1;color:rgb(255 68 0/var(--tw-text-opacity,1))}.text-emerald-600{--tw-text-opacity:1;color:rgb(5 150 105/var(--tw-text-opacity,1))}.text-orange-600{--tw-text-opacity:1;color:rgb(234 88 12/var(--tw-text-opacity,1))}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.text-typ{color:var(--text)}.text-typ-tone{color:var(--text-soft)}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity,1))}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-70{opacity:.7}.opacity-75{opacity:.75}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.ring-0{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.blur-0{--tw-blur:blur(0)}.blur-0,.brightness-75{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)}.brightness-75{--tw-brightness:brightness(.75)}.contrast-125{--tw-contrast:contrast(1.25)}.contrast-125,.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-filter{-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{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\[height\2c opacity\]{transition-property:height,opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\[opacity\2c visibility\]{transition-property:opacity,visibility;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\[padding\]{transition-property:padding;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\[transform\2c opacity\2c visibility\2c scale\]{transition-property:transform,opacity,visibility,scale;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\[transform\2c opacity\2c visibility\]{transition-property:transform,opacity,visibility;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.ease-\[cubic-bezier\(0\.22\2c 1\2c 0\.36\2c 1\)\]{transition-timing-function:cubic-bezier(.22,1,.36,1)}[x-cloak]{display:none!important}.rounded-theme{border-radius:18px}.border-brd{border-color:var(--border)}.bg-bgr-tone{background-color:var(--surface-muted)}.text-typ{color:var(--text)}.text-typ-tone{color:var(--text-soft)}.bg-accent{background:var(--color-accent)}.bg-accent\/10{background-color:color-mix(in srgb,var(--color-accent) 10%,transparent)}.gap-0\.75{gap:.1875rem}.flex-2{flex:2 1 0%}.flex-3{flex:3 1 0%}.size-3\.5{width:.875rem;height:.875rem}.size-4{width:1rem;height:1rem}.min-w-16{min-width:4rem}.max-w-content{max-width:var(--content-header)}.divide-brd>:not([hidden])~:not([hidden]){border-color:var(--border)}.line-clamp-1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.home-categories__row{border-left:3px solid var(--color-accent)}.before\:absolute:before{content:var(--tw-content);position:absolute}.before\:left-0:before{content:var(--tw-content);left:0}.before\:top-0:before{content:var(--tw-content);top:0}.before\:h-full:before{content:var(--tw-content);height:100%}.before\:bg-accent:before{content:var(--tw-content);background-color:var(--color-accent)}.before\:font-bold:before{content:var(--tw-content);font-weight:700}.before\:content-\[attr\(data-number\)\]:before{--tw-content:attr(data-number);content:var(--tw-content)}.before\:bg-accent:before{content:var(--tw-content);background:var(--color-accent)}.after\:absolute:after{content:var(--tw-content);position:absolute}.after\:-bottom-2:after{content:var(--tw-content);bottom:-.5rem}.after\:left-0:after{content:var(--tw-content);left:0}.after\:h-0\.5:after{content:var(--tw-content);height:.125rem}.after\:w-full:after{content:var(--tw-content);width:100%}.after\:bg-typ:after{content:var(--tw-content);background-color:var(--text)}.hover\:w-5:hover{width:1.25rem}.hover\:bg-\[\#f5f5f5\]:hover{--tw-bg-opacity:1;background-color:rgb(245 245 245/var(--tw-bg-opacity,1))}.hover\:bg-\[color-mix\(in_srgb\2c var\(--color-accent\)_10\%\2c transparent\)\]:hover{background-color:color-mix(in srgb,var(--color-accent) 10%,transparent)}.hover\:bg-\[var\(--surface-muted\)\]:hover,.hover\:bg-bgr-tone:hover{background-color:var(--surface-muted)}.hover\:px-3:hover{padding-left:.75rem;padding-right:.75rem}.hover\:pl-7:hover{padding-left:1.75rem}.hover\:text-accent:hover{color:var(--color-accent)}.hover\:text-typ:hover{color:var(--text)}.hover\:text-typ-tone:hover{color:var(--text-soft)}.hover\:opacity-75:hover{opacity:.75}.hover\:opacity-80:hover{opacity:.8}.hover\:opacity-90:hover{opacity:.9}.hover\:bg-bgr-tone:hover{background-color:var(--surface-muted)}.hover\:text-typ:hover{color:var(--text)}.hover\:text-typ-tone:hover{color:var(--text-soft)}.hover\:text-accent:hover{color:var(--color-accent)}.focus\:ring-0:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.disabled\:opacity-40:disabled{opacity:.4}.group:hover .group-hover\:visible{visibility:visible}.group:hover .group-hover\:invisible{visibility:hidden}.group:hover .group-hover\:size-0{width:0;height:0}.group:hover .group-hover\:size-2{width:.5rem;height:.5rem}.group:hover .group-hover\:h-0{height:0}.group:hover .group-hover\:w-0{width:0}.group:hover .group-hover\:translate-x-0{--tw-translate-x:0px}.group:hover .group-hover\:translate-x-0,.group:hover .group-hover\:translate-y-full{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))}.group:hover .group-hover\:translate-y-full{--tw-translate-y:100%}.group:hover .group-hover\:scale-100{--tw-scale-x:1;--tw-scale-y:1;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))}.group:hover .group-hover\:gap-0{gap:0}.group:hover .group-hover\:rounded-full{border-radius:9999px}.group:hover .group-hover\:opacity-0{opacity:0}.group:hover .group-hover\:opacity-100{opacity:1}.group:hover .group-hover\:brightness-90{--tw-brightness:brightness(.9);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)}.group:focus .group-focus\:outline-none{outline:2px solid transparent;outline-offset:2px}.group:focus .group-focus\:ring-0{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.group.error .group-\[\.error\]\:visible,.group.success .group-\[\.success\]\:visible{visibility:visible}.group.error .group-\[\.error\]\:flex,.group.loading .group-\[\.loading\]\:flex,.group.success .group-\[\.success\]\:flex{display:flex}.group.loading .group-\[\.loading\]\:hidden{display:none}.group.error .group-\[\.error\]\:translate-y-0,.group.success .group-\[\.success\]\:translate-y-0{--tw-translate-y:0px;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))}.group.error .group-\[\.error\]\:opacity-100,.group.success .group-\[\.success\]\:opacity-100{opacity:1}@media (min-width:640px){.sm\:aspect-video{aspect-ratio:16/9}.sm\:size-12{width:3rem;height:3rem}.sm\:h-20{height:5rem}.sm\:w-20{width:5rem}.sm\:max-w-screen-sm{max-width:640px}.sm\:basis-\[58\%\]{flex-basis:58%}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:gap-1\.5{gap:.375rem}.sm\:gap-5{gap:1.25rem}.sm\:p-5{padding:1.25rem}.sm\:px-5{padding-left:1.25rem;padding-right:1.25rem}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:px-8{padding-left:2rem;padding-right:2rem}.sm\:px-\[max\(2vmin\2c 20px\)\]{padding-left:max(2vmin,20px);padding-right:max(2vmin,20px)}.sm\:py-10{padding-top:2.5rem;padding-bottom:2.5rem}.sm\:py-5{padding-top:1.25rem}.sm\:pb-5,.sm\:py-5{padding-bottom:1.25rem}.sm\:pl-5{padding-left:1.25rem}.sm\:pl-6{padding-left:1.5rem}.sm\:pr-3{padding-right:.75rem}.sm\:pt-5{padding-top:1.25rem}.sm\:text-2xl{font-size:1.5rem;line-height:2rem}.sm\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media (min-width:768px){.md\:invisible{visibility:hidden}.md\:bottom-0{bottom:0}.md\:top-auto{top:auto}.md\:mb-0{margin-bottom:0}.md\:mr-4{margin-right:1rem}.md\:flex{display:flex}.md\:hidden{display:none}.md\:size-10{width:2.5rem;height:2.5rem}.md\:size-4{width:1rem;height:1rem}.md\:size-7{width:1.75rem;height:1.75rem}.md\:min-h-10{min-height:2.5rem}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-\[minmax\(0\2c 2fr\)_minmax\(0\2c 3fr\)\]{grid-template-columns:minmax(0,2fr) minmax(0,3fr)}.md\:flex-row{flex-direction:row}.md\:items-start{align-items:flex-start}.md\:gap-y-2{row-gap:.5rem}.md\:border-b-0{border-bottom-width:0}.md\:stroke-\[2\.25\]{stroke-width:2.25}.md\:py-8{padding-top:2rem;padding-bottom:2rem}.md\:pb-0{padding-bottom:0}.md\:text-2xl{font-size:1.5rem;line-height:2rem}.md\:text-base{font-size:1rem;line-height:1.5rem}.md\:text-lg{font-size:1.125rem;line-height:1.75rem}.md\:opacity-0{opacity:0}.md\:flex-4{flex:4 1 0%}.md\:size-4{width:1rem;height:1rem}}@media (min-width:1024px){.lg\:basis-\[38\%\]{flex-basis:38%}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:px-0{padding-left:0;padding-right:0}.lg\:text-3xl{font-size:1.875rem;line-height:2.25rem}}@media (min-width:1280px){.xl\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.xl\:pl-0{padding-left:0}.xl\:pl-1{padding-left:.25rem}.xl\:pr-1{padding-right:.25rem}}.\[\&\>\*\:not\(\:last-child\)\]\:after\:ml-2>:not(:last-child):after{content:var(--tw-content);margin-left:.5rem}.\[\&\>\*\:not\(\:last-child\)\]\:after\:text-brd>:not(:last-child):after{content:var(--tw-content);color:var(--border)}.\[\&\>\*\:not\(\:last-child\)\]\:after\:content-\[\'\/\'\]>:not(:last-child):after{--tw-content:"/";content:var(--tw-content)}@media (min-width:640px){.sm\:\[\&\>\*\:not\(\:last-child\)\]\:after\:ml-1\.5>:not(:last-child):after{content:var(--tw-content);margin-left:.375rem}}@keyframes spin{to{transform:rotate(1turn)}}.\[\&_svg\]\:animate-spin svg{animation:spin 1s linear infinite} \ No newline at end of file +*,:after,:before{--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:rgba(59,130,246,.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: }::backdrop{--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:rgba(59,130,246,.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: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}html{font-family:Pretendard,system-ui,sans-serif}body{color:var(--text);background-color:var(--bg)}.prose{color:var(--tw-prose-body);font-size:1rem;line-height:1.75}.prose-theme{--tw-prose-body:var(--text);--tw-prose-headings:var(--text);--tw-prose-lead:var(--text-soft);--tw-prose-links:var(--text);--tw-prose-bold:var(--text);--tw-prose-counters:var(--text-soft);--tw-prose-bullets:var(--border-strong);--tw-prose-hr:var(--border);--tw-prose-quotes:var(--text);--tw-prose-quote-borders:var(--border);--tw-prose-captions:var(--text-soft);--tw-prose-kbd:var(--text);--tw-prose-kbd-shadows:color-mix(in srgb,var(--text) 10%,transparent);--tw-prose-code:var(--text);--tw-prose-pre-code:#f8f5f0;--tw-prose-pre-bg:#26221f;--tw-prose-th-borders:var(--border-strong);--tw-prose-td-borders:var(--border)}.prose :where(p):not(:where(.not-prose,.not-prose *)){margin-top:1.25em;margin-bottom:1.25em}.prose :where(a):not(:where(.not-prose,.not-prose *)){color:var(--tw-prose-links);font-weight:500;text-decoration:underline;text-underline-offset:.12em}.prose :where(strong):not(:where(.not-prose,.not-prose *)){color:var(--tw-prose-bold);font-weight:600}.prose :where(ol):not(:where(.not-prose,.not-prose *)){margin-top:1.25em;margin-bottom:1.25em;padding-inline-start:1.625em;list-style-type:decimal}.prose :where(ul):not(:where(.not-prose,.not-prose *)){margin-top:1.25em;margin-bottom:1.25em;padding-inline-start:1.625em;list-style-type:disc}.prose :where(ol>li):not(:where(.not-prose,.not-prose *))::marker{color:var(--tw-prose-counters);font-weight:400}.prose :where(ul>li):not(:where(.not-prose,.not-prose *))::marker{color:var(--tw-prose-bullets)}.prose :where(li):not(:where(.not-prose,.not-prose *)){margin-top:.5em;margin-bottom:.5em}.prose :where(ol>li,ul>li):not(:where(.not-prose,.not-prose *)){padding-inline-start:.375em}.prose :where(hr):not(:where(.not-prose,.not-prose *)){border-color:var(--tw-prose-hr);border-top-width:1px;margin-top:3em;margin-bottom:3em}.prose :where(blockquote):not(:where(.not-prose,.not-prose *)){color:var(--tw-prose-quotes);border-inline-start-width:.25rem;border-inline-start-color:var(--tw-prose-quote-borders);margin-top:1.6em;margin-bottom:1.6em;padding-inline-start:1em;font-style:italic;font-weight:500}.prose :where(h1):not(:where(.not-prose,.not-prose *)){color:var(--tw-prose-headings);margin-top:0;margin-bottom:.888889em;font-size:2.25em;font-weight:800;line-height:1.11111}.prose :where(h2):not(:where(.not-prose,.not-prose *)){color:var(--tw-prose-headings);margin-top:2em;margin-bottom:1em;font-size:1.5em;font-weight:700;line-height:1.33333}.prose :where(h3):not(:where(.not-prose,.not-prose *)){color:var(--tw-prose-headings);margin-top:1.6em;margin-bottom:.6em;font-size:1.25em;font-weight:600;line-height:1.6}.prose :where(h4):not(:where(.not-prose,.not-prose *)){color:var(--tw-prose-headings);margin-top:1.5em;margin-bottom:.5em;font-weight:600;line-height:1.5}.prose :where(img,picture,video):not(:where(.not-prose,.not-prose *)){margin-top:2em;margin-bottom:2em}.prose :where(picture):not(:where(.not-prose,.not-prose *)){display:block}.prose :where(picture>img):not(:where(.not-prose,.not-prose *)){margin-top:0;margin-bottom:0}.prose :where(figure):not(:where(.not-prose,.not-prose *)){margin-top:2em;margin-bottom:2em}.prose :where(figure>*):not(:where(.not-prose,.not-prose *)){margin-top:0;margin-bottom:0}.prose :where(figcaption):not(:where(.not-prose,.not-prose *)){color:var(--tw-prose-captions);margin-top:.857143em;font-size:.875em;line-height:1.42857}.prose :where(code):not(:where(.not-prose,.not-prose *)){color:var(--tw-prose-code);font-size:.875em;font-weight:600}.prose :where(code):not(:where(.not-prose,.not-prose *)):after,.prose :where(code):not(:where(.not-prose,.not-prose *)):before{content:"`"}.prose :where(pre):not(:where(.not-prose,.not-prose *)){color:var(--tw-prose-pre-code);background-color:var(--tw-prose-pre-bg);padding:.857143em 1.14286em;border-radius:.375rem;margin-top:1.71429em;margin-bottom:1.71429em;font-size:.875em;font-weight:400;line-height:1.71429;overflow-x:auto}.prose :where(pre code):not(:where(.not-prose,.not-prose *)){font-weight:inherit;color:inherit;font-size:inherit;background-color:transparent;padding:0}.prose :where(pre code):not(:where(.not-prose,.not-prose *)):after,.prose :where(pre code):not(:where(.not-prose,.not-prose *)):before{content:none}.prose :where(table):not(:where(.not-prose,.not-prose *)){table-layout:auto;width:100%;margin-top:2em;margin-bottom:2em;font-size:.875em;line-height:1.71429}.prose :where(thead):not(:where(.not-prose,.not-prose *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-th-borders)}.prose :where(tbody tr):not(:where(.not-prose,.not-prose *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-td-borders)}.prose :where(th,td):not(:where(.not-prose,.not-prose *)){text-align:start;padding:.571429em}.prose :where(.prose>:first-child):not(:where(.not-prose,.not-prose *)){margin-top:0}.prose :where(.prose>:last-child):not(:where(.not-prose,.not-prose *)){margin-bottom:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}.visible{visibility:visible}.invisible{visibility:hidden}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.inset-y-0{top:0;bottom:0}.-bottom-16{bottom:-4rem}.bottom-0{bottom:0}.bottom-4{bottom:1rem}.left-0{left:0}.left-3\.5{left:.875rem}.right-0{right:0}.right-4{right:1rem}.top-0{top:0}.top-1\/2{top:50%}.top-12{top:3rem}.top-4{top:1rem}.top-9{top:2.25rem}.z-10{z-index:10}.z-50{z-index:50}.mx-auto{margin-left:auto;margin-right:auto}.-mb-1\.5{margin-bottom:-.375rem}.-mr-0\.5{margin-right:-.125rem}.-mt-px{margin-top:-1px}.mb-1{margin-bottom:.25rem}.mb-12{margin-bottom:3rem}.mb-2{margin-bottom:.5rem}.mb-2\.5{margin-bottom:.625rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mb-\[12px\]{margin-bottom:12px}.mb-\[28px\]{margin-bottom:28px}.mb-\[8px\]{margin-bottom:8px}.ml-4{margin-left:1rem}.mr-1{margin-right:.25rem}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-2\.5{margin-top:.625rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-auto{margin-top:auto}.line-clamp-1{-webkit-line-clamp:1}.line-clamp-1,.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical}.line-clamp-2{-webkit-line-clamp:2}.line-clamp-3{-webkit-line-clamp:3}.line-clamp-3,.line-clamp-4{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical}.line-clamp-4{-webkit-line-clamp:4}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.aspect-\[16\/9\]{aspect-ratio:16/9}.aspect-square{aspect-ratio:1/1}.aspect-video{aspect-ratio:16/9}.size-10{width:2.5rem;height:2.5rem}.size-2{width:.5rem;height:.5rem}.size-3\.5{width:.875rem;height:.875rem}.size-4{width:1rem;height:1rem}.size-5{width:1.25rem;height:1.25rem}.size-6{width:1.5rem;height:1.5rem}.size-8{width:2rem;height:2rem}.h-16{height:4rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-\[18px\]{height:18px}.h-full{height:100%}.h-8{height:2rem}.max-h-8{max-height:2rem}.min-h-0{min-height:0}.min-h-12{min-height:3rem}.min-h-8{min-height:2rem}.min-h-\[128px\]{min-height:128px}.min-h-\[2\.2rem\]{min-height:2.2rem}.min-h-\[216px\]{min-height:216px}.w-1{width:.25rem}.w-12{width:3rem}.w-16{width:4rem}.w-4{width:1rem}.w-8{width:2rem}.w-\[18px\]{width:18px}.w-\[3px\]{width:3px}.w-full{width:100%}.w-auto{width:auto}.min-w-0{min-width:0}.min-w-16{min-width:4rem}.min-w-\[200px\]{min-width:200px}.max-w-\[90\%\]{max-width:90%}.max-w-lg{max-width:32rem}.max-w-md{max-width:28rem}.max-w-xl{max-width:36rem}.max-w-xs{max-width:20rem}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.basis-\[78\%\]{flex-basis:78%}.basis-full{flex-basis:100%}.-translate-x-1{--tw-translate-x:-0.25rem}.-translate-x-1,.-translate-y-1\/2{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))}.-translate-y-1\/2{--tw-translate-y:-50%}.-translate-y-2{--tw-translate-y:-0.5rem}.-translate-y-2,.-translate-y-4{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))}.-translate-y-4{--tw-translate-y:-1rem}.translate-x-0{--tw-translate-x:0px}.translate-x-0,.translate-x-3\.5{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))}.translate-x-3\.5{--tw-translate-x:0.875rem}.translate-y-0{--tw-translate-y:0px}.rotate-180,.translate-y-0{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))}.rotate-180{--tw-rotate:180deg}.scale-100{--tw-scale-x:1;--tw-scale-y:1}.scale-100,.scale-75{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))}.scale-75{--tw-scale-x:.75;--tw-scale-y:.75}.scale-95{--tw-scale-x:.95;--tw-scale-y:.95}.scale-95,.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}.snap-x{scroll-snap-type:x var(--tw-scroll-snap-strictness)}.snap-mandatory{--tw-scroll-snap-strictness:mandatory}.snap-start{scroll-snap-align:start}.scroll-mt-14{scroll-margin-top:3.5rem}.list-none{list-style-type:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-x-1\.5{-moz-column-gap:.375rem;column-gap:.375rem}.gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.gap-x-6{-moz-column-gap:1.5rem;column-gap:1.5rem}.gap-y-0\.5{row-gap:.125rem}.gap-y-3{row-gap:.75rem}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px*var(--tw-divide-y-reverse))}.divide-brd>:not([hidden])~:not([hidden]){border-color:var(--border)}.self-start{align-self:flex-start}.self-stretch{align-self:stretch}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.scroll-smooth{scroll-behavior:smooth}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-balance{text-wrap:balance}.rounded{border-radius:.25rem}.rounded-\[14px\]{border-radius:14px}.rounded-\[8px\]{border-radius:8px}.rounded-\[inherit\]{border-radius:inherit}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-sm{border-radius:.125rem}.rounded-xl{border-radius:.75rem}.rounded-l-\[14px\]{border-top-left-radius:14px;border-bottom-left-radius:14px}.rounded-l-none{border-top-left-radius:0;border-bottom-left-radius:0}.rounded-r-lg{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.border{border-width:1px}.border-2{border-width:2px}.border-y{border-top-width:1px}.border-b,.border-y{border-bottom-width:1px}.border-l-\[3px\]{border-left-width:3px}.border-t{border-top-width:1px}.border-\[var\(--border\)\],.border-brd{border-color:var(--border)}.border-transparent{border-color:transparent}.border-typ{border-color:var(--text)}.border-b-brd{border-bottom-color:var(--border)}.border-l-transparent{border-left-color:transparent}.bg-\[var\(--surface\)\]{background-color:var(--surface)}.bg-\[var\(--tag-accent\2c var\(--accent\)\)\]{background-color:var(--tag-accent,var(--accent))}.bg-accent{background-color:var(--color-accent)}.bg-bgr-tone{background-color:var(--surface-muted)}.bg-brd{background-color:var(--border)}.bg-orange-600{--tw-bg-opacity:1;background-color:rgb(234 88 12/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.fill-bgr-tone{fill:var(--surface-muted)}.fill-current{fill:currentColor}.stroke-0{stroke-width:0}.stroke-1{stroke-width:1}.stroke-2{stroke-width:2}.stroke-\[2\.5\]{stroke-width:2.5}.stroke-\[1\.75\]{stroke-width:1.75}.object-contain{-o-object-fit:contain;object-fit:contain}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0\.5{padding:.125rem}.p-1{padding:.25rem}.p-1\.5{padding:.375rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.px-0{padding-left:0;padding-right:0}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-3\.5{padding-left:.875rem;padding-right:.875rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-\[14px\]{padding-top:14px;padding-bottom:14px}.py-px{padding-top:1px;padding-bottom:1px}.pb-2{padding-bottom:.5rem}.pb-3{padding-bottom:.75rem}.pb-4{padding-bottom:1rem}.pl-0{padding-left:0}.pl-0\.5{padding-left:.125rem}.pl-4{padding-left:1rem}.pl-5{padding-left:1.25rem}.pr-2{padding-right:.5rem}.pr-3{padding-right:.75rem}.pt-2{padding-top:.5rem}.pt-3{padding-top:.75rem}.pt-4{padding-top:1rem}.text-left{text-align:left}.text-center{text-align:center}.font-sans{font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.text-2xl{font-size:1.5rem;line-height:2rem}.text-\[0\.7rem\]{font-size:.7rem}.text-\[0\.8rem\]{font-size:.8rem}.text-\[11px\]{font-size:11px}.text-\[13px\]{font-size:13px}.text-\[15px\]{font-size:15px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.leading-5{line-height:1.25rem}.leading-\[1\.125\]{line-height:1.125}.leading-\[1\.15\]{line-height:1.15}.leading-none{line-height:1}.leading-normal{line-height:1.5}.leading-snug{line-height:1.375}.leading-tight{line-height:1.25}.tracking-\[-0\.02em\]{letter-spacing:-.02em}.tracking-tight{letter-spacing:-.025em}.text-\[var\(--text-soft\)\]{color:var(--text-soft)}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.text-brand{--tw-text-opacity:1;color:rgb(255 68 0/var(--tw-text-opacity,1))}.text-emerald-600{--tw-text-opacity:1;color:rgb(5 150 105/var(--tw-text-opacity,1))}.text-orange-600{--tw-text-opacity:1;color:rgb(234 88 12/var(--tw-text-opacity,1))}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.text-typ{color:var(--text)}.text-typ-tone{color:var(--text-soft)}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity,1))}.text-white\/85{color:hsla(0,0%,100%,.85)}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-70{opacity:.7}.opacity-75{opacity:.75}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.ring-0{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.blur-0{--tw-blur:blur(0)}.blur-0,.brightness-75{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)}.brightness-75{--tw-brightness:brightness(.75)}.contrast-125{--tw-contrast:contrast(1.25)}.contrast-125,.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-filter{-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{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\[height\2c opacity\]{transition-property:height,opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\[opacity\2c visibility\]{transition-property:opacity,visibility;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\[padding\]{transition-property:padding;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\[transform\2c opacity\2c visibility\2c scale\]{transition-property:transform,opacity,visibility,scale;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\[transform\2c opacity\2c visibility\]{transition-property:transform,opacity,visibility;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.ease-\[cubic-bezier\(0\.22\2c 1\2c 0\.36\2c 1\)\]{transition-timing-function:cubic-bezier(.22,1,.36,1)}[x-cloak]{display:none!important}.rounded-theme{border-radius:18px}.border-brd{border-color:var(--border)}.bg-bgr-tone{background-color:var(--surface-muted)}.text-typ{color:var(--text)}.text-typ-tone{color:var(--text-soft)}.bg-accent{background:var(--color-accent)}.bg-accent\/10{background-color:color-mix(in srgb,var(--color-accent) 10%,transparent)}.gap-0\.75{gap:.1875rem}.flex-2{flex:2 1 0%}.flex-3{flex:3 1 0%}.size-3\.5{width:.875rem;height:.875rem}.size-4{width:1rem;height:1rem}.min-w-16{min-width:4rem}.max-w-content{max-width:var(--content-header)}.divide-brd>:not([hidden])~:not([hidden]){border-color:var(--border)}.line-clamp-1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.home-categories__row{border-left:3px solid var(--color-accent)}.before\:absolute:before{content:var(--tw-content);position:absolute}.before\:left-0:before{content:var(--tw-content);left:0}.before\:top-0:before{content:var(--tw-content);top:0}.before\:h-full:before{content:var(--tw-content);height:100%}.before\:bg-accent:before{content:var(--tw-content);background-color:var(--color-accent)}.before\:font-bold:before{content:var(--tw-content);font-weight:700}.before\:content-\[attr\(data-number\)\]:before{--tw-content:attr(data-number);content:var(--tw-content)}.before\:bg-accent:before{content:var(--tw-content);background:var(--color-accent)}.after\:absolute:after{content:var(--tw-content);position:absolute}.after\:-bottom-2:after{content:var(--tw-content);bottom:-.5rem}.after\:left-0:after{content:var(--tw-content);left:0}.after\:h-0\.5:after{content:var(--tw-content);height:.125rem}.after\:w-full:after{content:var(--tw-content);width:100%}.after\:bg-typ:after{content:var(--tw-content);background-color:var(--text)}.hover\:w-5:hover{width:1.25rem}.hover\:bg-\[\#f5f5f5\]:hover{--tw-bg-opacity:1;background-color:rgb(245 245 245/var(--tw-bg-opacity,1))}.hover\:bg-\[color-mix\(in_srgb\2c var\(--color-accent\)_10\%\2c transparent\)\]:hover{background-color:color-mix(in srgb,var(--color-accent) 10%,transparent)}.hover\:bg-\[var\(--surface-muted\)\]:hover,.hover\:bg-bgr-tone:hover{background-color:var(--surface-muted)}.hover\:px-3:hover{padding-left:.75rem;padding-right:.75rem}.hover\:pl-7:hover{padding-left:1.75rem}.hover\:text-accent:hover{color:var(--color-accent)}.hover\:text-typ:hover{color:var(--text)}.hover\:text-typ-tone:hover{color:var(--text-soft)}.hover\:opacity-75:hover{opacity:.75}.hover\:opacity-80:hover{opacity:.8}.hover\:opacity-90:hover{opacity:.9}.hover\:bg-bgr-tone:hover{background-color:var(--surface-muted)}.hover\:text-typ:hover{color:var(--text)}.hover\:text-typ-tone:hover{color:var(--text-soft)}.hover\:text-accent:hover{color:var(--color-accent)}.focus\:ring-0:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.disabled\:opacity-40:disabled{opacity:.4}.group:hover .group-hover\:visible{visibility:visible}.group:hover .group-hover\:invisible{visibility:hidden}.group:hover .group-hover\:size-0{width:0;height:0}.group:hover .group-hover\:size-2{width:.5rem;height:.5rem}.group:hover .group-hover\:h-0{height:0}.group:hover .group-hover\:w-0{width:0}.group:hover .group-hover\:translate-x-0{--tw-translate-x:0px}.group:hover .group-hover\:translate-x-0,.group:hover .group-hover\:translate-y-full{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))}.group:hover .group-hover\:translate-y-full{--tw-translate-y:100%}.group:hover .group-hover\:scale-100{--tw-scale-x:1;--tw-scale-y:1;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))}.group:hover .group-hover\:gap-0{gap:0}.group:hover .group-hover\:rounded-full{border-radius:9999px}.group:hover .group-hover\:opacity-0{opacity:0}.group:hover .group-hover\:opacity-100{opacity:1}.group:hover .group-hover\:brightness-90{--tw-brightness:brightness(.9);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)}.group:focus .group-focus\:outline-none{outline:2px solid transparent;outline-offset:2px}.group:focus .group-focus\:ring-0{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.group.error .group-\[\.error\]\:visible,.group.success .group-\[\.success\]\:visible{visibility:visible}.group.error .group-\[\.error\]\:flex,.group.loading .group-\[\.loading\]\:flex,.group.success .group-\[\.success\]\:flex{display:flex}.group.loading .group-\[\.loading\]\:hidden{display:none}.group.error .group-\[\.error\]\:translate-y-0,.group.success .group-\[\.success\]\:translate-y-0{--tw-translate-y:0px;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))}.group.error .group-\[\.error\]\:opacity-100,.group.success .group-\[\.success\]\:opacity-100{opacity:1}@media (min-width:640px){.sm\:aspect-video{aspect-ratio:16/9}.sm\:size-12{width:3rem;height:3rem}.sm\:h-20{height:5rem}.sm\:w-20{width:5rem}.sm\:max-w-screen-sm{max-width:640px}.sm\:basis-\[58\%\]{flex-basis:58%}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:gap-1\.5{gap:.375rem}.sm\:gap-5{gap:1.25rem}.sm\:p-5{padding:1.25rem}.sm\:px-5{padding-left:1.25rem;padding-right:1.25rem}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:px-8{padding-left:2rem;padding-right:2rem}.sm\:px-\[max\(2vmin\2c 20px\)\]{padding-left:max(2vmin,20px);padding-right:max(2vmin,20px)}.sm\:py-10{padding-top:2.5rem;padding-bottom:2.5rem}.sm\:py-5{padding-top:1.25rem}.sm\:pb-5,.sm\:py-5{padding-bottom:1.25rem}.sm\:pl-5{padding-left:1.25rem}.sm\:pl-6{padding-left:1.5rem}.sm\:pr-3{padding-right:.75rem}.sm\:pt-5{padding-top:1.25rem}.sm\:text-2xl{font-size:1.5rem;line-height:2rem}.sm\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media (min-width:768px){.md\:invisible{visibility:hidden}.md\:bottom-0{bottom:0}.md\:top-auto{top:auto}.md\:mb-0{margin-bottom:0}.md\:mr-4{margin-right:1rem}.md\:flex{display:flex}.md\:hidden{display:none}.md\:size-10{width:2.5rem;height:2.5rem}.md\:size-4{width:1rem;height:1rem}.md\:size-7{width:1.75rem;height:1.75rem}.md\:size-9{width:2.25rem;height:2.25rem}.md\:h-10{height:2.5rem}.md\:min-h-10{min-height:2.5rem}.md\:w-10{width:2.5rem}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-\[minmax\(0\2c 2fr\)_minmax\(0\2c 3fr\)\]{grid-template-columns:minmax(0,2fr) minmax(0,3fr)}.md\:flex-row{flex-direction:row}.md\:items-start{align-items:flex-start}.md\:gap-y-2{row-gap:.5rem}.md\:border-b-0{border-bottom-width:0}.md\:stroke-\[2\.25\]{stroke-width:2.25}.md\:stroke-\[1\.5\]{stroke-width:1.5}.md\:py-8{padding-top:2rem;padding-bottom:2rem}.md\:pb-0{padding-bottom:0}.md\:text-2xl{font-size:1.5rem;line-height:2rem}.md\:text-base{font-size:1rem;line-height:1.5rem}.md\:text-lg{font-size:1.125rem;line-height:1.75rem}.md\:opacity-0{opacity:0}.md\:flex-4{flex:4 1 0%}.md\:size-4{width:1rem;height:1rem}}@media (min-width:1024px){.lg\:basis-\[38\%\]{flex-basis:38%}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:px-0{padding-left:0;padding-right:0}.lg\:text-3xl{font-size:1.875rem;line-height:2.25rem}}@media (min-width:1280px){.xl\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.xl\:pl-0{padding-left:0}.xl\:pl-1{padding-left:.25rem}.xl\:pr-1{padding-right:.25rem}}.\[\&\>\*\:not\(\:last-child\)\]\:after\:ml-2>:not(:last-child):after{content:var(--tw-content);margin-left:.5rem}.\[\&\>\*\:not\(\:last-child\)\]\:after\:text-brd>:not(:last-child):after{content:var(--tw-content);color:var(--border)}.\[\&\>\*\:not\(\:last-child\)\]\:after\:content-\[\'\/\'\]>:not(:last-child):after{--tw-content:"/";content:var(--tw-content)}@media (min-width:640px){.sm\:\[\&\>\*\:not\(\:last-child\)\]\:after\:ml-1\.5>:not(:last-child):after{content:var(--tw-content);margin-left:.375rem}}@keyframes spin{to{transform:rotate(1turn)}}.\[\&_svg\]\:animate-spin svg{animation:spin 1s linear infinite} \ No newline at end of file diff --git a/assets/built/theme.js b/assets/built/theme.js index b2ec56d..4840810 100644 --- a/assets/built/theme.js +++ b/assets/built/theme.js @@ -153,6 +153,30 @@ syncLeftSidebarState(); + function initializeHomeHero() { + document.querySelectorAll("[data-home-hero]").forEach(function (heroSection) { + var heroImage = heroSection.querySelector("[data-home-hero-image]"); + + if (!heroImage) { + return; + } + + function markHeroLoaded() { + heroSection.classList.add("is-loaded"); + } + + if (heroImage.complete && heroImage.naturalWidth > 0) { + markHeroLoaded(); + return; + } + + heroImage.addEventListener("load", markHeroLoaded, { once: true }); + heroImage.addEventListener("error", markHeroLoaded, { once: true }); + }); + } + + initializeHomeHero(); + var tabRoot = document.querySelector("[data-tabs]"); if (tabRoot) { var triggers = tabRoot.querySelectorAll("[data-tab-trigger]"); @@ -176,43 +200,136 @@ var searchModal = document.querySelector("[data-search-modal]"); var searchInput = document.querySelector("[data-search-input]"); var searchResults = document.querySelector("[data-search-results]"); + var searchResetButtons = document.querySelectorAll("[data-search-reset]"); + + function escapeSearchHtml(value) { + return String(value || "") + .replace(/&/g, "&") + .replace(//g, ">") + .replace(/"/g, """) + .replace(/'/g, "'"); + } function getSearchItems() { + var sourceItems = document.querySelectorAll("[data-search-source] [data-search-item]"); var items = []; - document.querySelectorAll(".post-card h2 a, .recommended-list a, .category-chip, .author-list__item").forEach(function (link) { + sourceItems.forEach(function (itemNode) { + var title = (itemNode.dataset.searchTitle || "").trim(); + var url = (itemNode.dataset.searchUrl || "").trim(); + + if (!title || !url) { + return; + } + items.push({ - title: (link.textContent || "").trim(), - url: link.getAttribute("href") || "#" + type: itemNode.dataset.searchType || "post", + title: title, + url: url, + excerpt: (itemNode.dataset.searchExcerpt || "").trim(), + image: (itemNode.dataset.searchImage || "").trim() }); }); return items.filter(function (item, index, array) { - return item.title && array.findIndex(function (candidate) { - return candidate.title === item.title && candidate.url === item.url; + return array.findIndex(function (candidate) { + return candidate.type === item.type && candidate.title === item.title && candidate.url === item.url; }) === index; }); } + function renderSearchSection(heading, items, renderer) { + if (!items.length) { + return ""; + } + + return [ + '
', + '

' + heading + "

", + '
', + items.map(renderer).join(""), + "
", + "
" + ].join(""); + } + function renderSearchResults(keyword) { var normalized = keyword.trim().toLowerCase(); if (!normalized) { - searchResults.innerHTML = '

현재 페이지에 표시되는 게시물, 태그 및 작성자를 필터링하려면 입력을 시작하세요.

'; + searchResults.innerHTML = '

검색어를 입력하면 Authors, Tags, Posts를 함께 보여줍니다.

'; return; } - var items = getSearchItems().filter(function (item) { - return item.title.toLowerCase().indexOf(normalized) !== -1; + var matchedItems = getSearchItems().filter(function (item) { + var title = item.title.toLowerCase(); + var excerpt = item.excerpt.toLowerCase(); + return title.indexOf(normalized) !== -1 || excerpt.indexOf(normalized) !== -1; }); - if (!items.length) { - searchResults.innerHTML = '

현재 보기에 일치하는 항목이 없습니다.

'; + if (!matchedItems.length) { + searchResults.innerHTML = '

일치하는 항목이 없습니다.

'; return; } - searchResults.innerHTML = items.map(function (item) { - return '' + item.title + ""; - }).join(""); + var authorItems = matchedItems.filter(function (item) { + return item.type === "author"; + }); + var tagItems = matchedItems.filter(function (item) { + return item.type === "tag"; + }); + var postItems = matchedItems.filter(function (item) { + return item.type === "post"; + }); + + var resultMarkup = ""; + + resultMarkup += renderSearchSection("Authors", authorItems, function (item) { + var imageMarkup = item.image + ? '' + escapeSearchHtml(item.title) + '' + : '@'; + + return [ + '', + imageMarkup, + '' + escapeSearchHtml(item.title) + "", + "" + ].join(""); + }); + + resultMarkup += renderSearchSection("Tags", tagItems, function (item) { + return [ + '', + '#', + '' + escapeSearchHtml(item.title) + "", + "" + ].join(""); + }); + + resultMarkup += renderSearchSection("Posts", postItems, function (item) { + var excerptMarkup = item.excerpt + ? '

' + escapeSearchHtml(item.excerpt) + "

" + : ""; + + return [ + '', + '

' + escapeSearchHtml(item.title) + "

", + excerptMarkup, + "" + ].join(""); + }); + + searchResults.innerHTML = resultMarkup; + } + + function clearSearchInput() { + if (!searchInput) { + return; + } + + searchInput.value = ""; + renderSearchResults(""); + searchInput.focus(); } function toggleSearch(open) { @@ -242,6 +359,13 @@ }); }); + searchResetButtons.forEach(function (button) { + button.addEventListener("click", function (event) { + event.preventDefault(); + clearSearchInput(); + }); + }); + if (searchInput) { searchInput.addEventListener("input", function (event) { renderSearchResults(event.target.value); @@ -267,6 +391,153 @@ var userThemeThumb = document.querySelector("[data-user-theme-thumb]"); var userMenuTrack = document.querySelector("[data-user-menu-track]"); var userMenuThumb = document.querySelector("[data-user-menu-thumb]"); + var memberNameDisplays = document.querySelectorAll("[data-member-name-display]"); + var memberAvatarImages = document.querySelectorAll("[data-member-avatar-image]"); + var memberAvatarBackgrounds = document.querySelectorAll("[data-member-avatar-background]"); + var memberAvatarInitials = document.querySelectorAll("[data-member-avatar-initial]"); + var memberPortalLinks = document.querySelectorAll("a[href^='#/portal/']"); + var memberRefreshInterval = null; + + function getMemberDisplayName(member) { + if (!member) { + return "Anonymous"; + } + + var name = (member.name || "").trim(); + return name || "Member"; + } + + function getMemberInitial(member, seed) { + var fallbackSeed = (seed || "").trim(); + var source = ""; + + if (member) { + source = ((member.name || "").trim() || (member.email || "").trim()); + } + + source = source || fallbackSeed || "M"; + return source.charAt(0).toUpperCase(); + } + + function applyMemberUi(member) { + if (!memberNameDisplays.length && !memberAvatarImages.length && !memberAvatarBackgrounds.length && !memberAvatarInitials.length) { + return; + } + + var displayName = getMemberDisplayName(member); + var avatarImage = (member && member.avatar_image ? member.avatar_image : "").trim(); + var hasAvatarImage = !!avatarImage; + + memberNameDisplays.forEach(function (element) { + element.textContent = displayName; + }); + + memberAvatarImages.forEach(function (element) { + if (hasAvatarImage) { + element.src = avatarImage; + element.alt = displayName; + element.classList.remove("hidden"); + + if (!element.dataset.errorBound) { + element.addEventListener("error", function () { + element.classList.add("hidden"); + }); + element.dataset.errorBound = "true"; + } + } else { + element.classList.add("hidden"); + } + }); + + memberAvatarBackgrounds.forEach(function (element) { + element.style.backgroundColor = "transparent"; + }); + + memberAvatarInitials.forEach(function (element) { + var seed = element.dataset.memberAvatarSeed || ""; + element.textContent = getMemberInitial(member, seed); + }); + } + + function initializeMemberAvatarFromSeed() { + memberAvatarInitials.forEach(function (element) { + var seed = element.dataset.memberAvatarSeed || ""; + element.textContent = getMemberInitial(null, seed); + }); + + memberAvatarBackgrounds.forEach(function (element) { + element.style.backgroundColor = "transparent"; + }); + } + + function getMemberFromPayload(payload) { + if (!payload) { + return null; + } + + if (payload.member) { + return payload.member; + } + + if (Array.isArray(payload.members) && payload.members.length) { + return payload.members[0]; + } + + return null; + } + + function refreshMemberUi() { + if (!memberNameDisplays.length && !memberAvatarImages.length && !memberAvatarBackgrounds.length && !memberAvatarInitials.length) { + return Promise.resolve(); + } + + return window + .fetch("/members/api/member/?_=" + Date.now(), { + method: "GET", + credentials: "include", + cache: "no-store", + headers: { + Accept: "application/json" + } + }) + .then(function (response) { + if (!response.ok) { + throw new Error("Failed to fetch member"); + } + + return response.json(); + }) + .then(function (payload) { + var member = getMemberFromPayload(payload); + + if (member) { + applyMemberUi(member); + } + }) + .catch(function () {}); + } + + function scheduleMemberUiRefreshLoop() { + var attempts = 0; + var maxAttempts = 20; + + if (memberRefreshInterval) { + window.clearInterval(memberRefreshInterval); + memberRefreshInterval = null; + } + + refreshMemberUi(); + + memberRefreshInterval = window.setInterval(function () { + attempts += 1; + refreshMemberUi(); + + if (attempts >= maxAttempts) { + window.clearInterval(memberRefreshInterval); + memberRefreshInterval = null; + } + }, 1000); + } function syncUserMenuToggles() { var isDark = body.classList.contains("theme-dark"); @@ -316,6 +587,7 @@ event.stopPropagation(); setUserMenu(userMenu.classList.contains("invisible")); syncUserMenuToggles(); + refreshMemberUi(); }); document.addEventListener("click", function (event) { @@ -349,7 +621,25 @@ }); } + initializeMemberAvatarFromSeed(); syncUserMenuToggles(); + refreshMemberUi(); + + memberPortalLinks.forEach(function (link) { + link.addEventListener("click", function () { + scheduleMemberUiRefreshLoop(); + }); + }); + + document.addEventListener("visibilitychange", function () { + if (document.visibilityState === "visible") { + refreshMemberUi(); + } + }); + + window.addEventListener("focus", function () { + refreshMemberUi(); + }); var recommendationsPortalTrigger = document.querySelector("[data-portal='recommendations']"); var recommendationsPortalTitle = recommendationsPortalTrigger ? recommendationsPortalTrigger.getAttribute("data-portal-title") : ""; diff --git a/default.hbs b/default.hbs index a7b424c..b775a38 100644 --- a/default.hbs +++ b/default.hbs @@ -11,7 +11,7 @@ {{ghost_head}} - + {{> "site/topbar"}}
diff --git a/docs/deploy.md b/docs/deploy.md index 438cb81..e383510 100644 --- a/docs/deploy.md +++ b/docs/deploy.md @@ -1,7 +1,7 @@ # 배포 가이드 ## 현재 버전 -- `v0.2.7` +- `v0.2.8` ## Git 기본 설정 - 저장소 작성자 정보는 아래 값으로 통일한다. diff --git a/docs/map.md b/docs/map.md index f64eb4b..2737089 100644 --- a/docs/map.md +++ b/docs/map.md @@ -1,7 +1,7 @@ # 파일-화면 매핑 가이드 ## 현재 버전 -- `v0.2.7` +- `v0.2.8` ## 공통 레이아웃 - [default.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/default.hbs): 전체 3열 셸, 1296px 공통 폭 계산, 공통 자산 로드 diff --git a/docs/spec.md b/docs/spec.md index 88289ad..2676553 100644 --- a/docs/spec.md +++ b/docs/spec.md @@ -1,7 +1,7 @@ # 기술 명세 ## 현재 버전 -- `v0.2.7` +- `v0.2.8` ## 테마 개요 - Ghost `v5` 대응 커스텀 테마 @@ -13,7 +13,11 @@ - `home`, `index`, `tag`, `author`, `post`, `page` 템플릿 - 검색 오버레이, 탭 전환, 다크모드 토글용 프런트 스크립트 - Ghost `navigation`, `get`, `subscribe_form`, `comments`, `pagination` 헬퍼 사용 +- `@site.accent_color`가 설정된 경우 `default.hbs`의 body 인라인 변수로 전역 `--accent`/`--accent-strong`를 덮어써 테마 포인트 색상을 동기화함 +- `topbar` 브랜드는 `@site.logo`를 우선 렌더링하고, 로고 미설정 시 `@site.title` 텍스트를 fallback으로 사용함 +- `home` Hero는 `@site.cover_image`가 있을 때 배경 이미지로 적용하며 오버레이와 텍스트 대비를 함께 조정함 - 좌측 사이드바 `menu-groups`: Primary는 `Home pages` 아코디언 안에 `{{navigation}}`, Secondary(관리자에 항목이 있을 때만)는 그 아래 `More links` 아코디언 안에 `{{navigation type="secondary"}}`로 동일 마크업(`ul.nav`)을 노출함 +- 상단 사용자 메뉴는 멤버 로그인 시에만 드롭다운 상단에 이름/아바타 행을 노출하며, 서버 렌더링 값으로 초기 표시한 뒤 `/members/api/member/` 재조회로 실시간 동기화하고 아바타 미등록 시 fallback 문자(이름/이메일 첫 글자)를 사용함. 비로그인 시 해당 행은 렌더하지 않음 - Tailwind CSS 빌드 결과물(`assets/built/tailwind.css`)을 기존 `screen.css`와 함께 로드 - Tailwind 기본 초기화(`preflight`)를 활성화해 브라우저 기본 마진과 폼 스타일을 리셋 - Alpine.js 로컬 자산(`assets/built/alpine.js`)을 전역 로드 @@ -23,6 +27,12 @@ - 좌측 카테고리 영역은 Alpine.js로 제어되며 `1024px` 이상에서 기본 열림, 미만에서 기본 닫힘 - 좌측 카테고리 목록은 `data-category-priority-order`에 지정한 태그 slug를 우선순위로 먼저 배치하고, 나머지는 `count.posts desc` 기본 순서를 유지한 뒤 제한 개수만 노출함 - 좌측 네비게이션 마커와 카테고리 마커는 동일한 세로 바 → 원형 hover 패턴 사용 +- 상단 사용자 버튼/메뉴 아바타는 로그인 멤버일 때 댓글 UI와 유사한 형태(이니셜 배경 + 이미지 오버레이)로 표시하며, 이니셜과 배경색은 멤버 이름/이메일 기반으로 동기화함. 비로그인 상태는 `icon-user-circle` 아이콘을 사용함 +- 로그인 상태 사용자 버튼/메뉴 아바타의 배경색은 투명으로 유지하며, 비로그인 상태 아이콘은 32px 버튼 영역에 맞는 크기로 렌더링함 +- 상단 사용자 메뉴의 멤버 동기화는 `/members/api/member/` 재조회(`cache: no-store`)로 수행하며 `member`/`members[0]` 응답 형태를 모두 처리함 +- 검색 모달은 `partials/site/topbar.hbs`의 `data-search-source`(posts/tags/authors) 데이터를 사용하고, 결과를 `Authors`, `Tags`, `Posts` 섹션으로 분리해 렌더링함 +- 검색 모달 입력 왼쪽 `X` 버튼은 입력값 초기화 용도이며, 모달 닫기는 배경 클릭/ESC로 처리함 +- 검색 모달 입력의 브라우저 기본 우측 cancel 버튼은 숨김 처리하고, `search-result__excerpt`는 한 줄 말줄임으로 고정함 - 전역 `ol`, `ul`, `menu` 기본 패딩과 리스트 스타일 리셋 적용 - `author.hbs`는 페이지 컨텍스트의 작성자 데이터를 직접 사용 - `page-tags.hbs`는 `slug=tags` 페이지에 연결 가능 @@ -30,6 +40,8 @@ - `tags-index.hbs`는 Ghost `routes.yaml` 커스텀 라우트로 `/tags/`에 연결됨 - 로컬 개발 환경의 실제 라우트 설정은 `.docker/ghost/content/settings/routes.yaml`을 기준으로 사용함 - 홈 메인 피드는 히어로, Featured 수평 슬라이드, Latest 리스트 구성을 사용함 +- 홈 Hero는 `@site.cover_image`가 있을 때만 커버 이미지 영역으로 노출하며, 텍스트/구독 폼은 렌더링하지 않음 +- 홈 Hero 커버는 이미지 로딩 완료 전까지 스켈레톤(shimmer) 애니메이션을 표시하고, 로드 후 실제 이미지로 페이드 전환함 - 홈 Latest 블록 아래에는 `home-categories` partial로 태그별 섹션을 두며, 좌측 사이드바와 동일한 `data-category-priority-order`·`data-category-priority-limit`(10)로 정렬·개수 제한 후 태그당 최신 글 최대 5개를 번호 링크로만 표시함. 세로 액센트는 태그 `accent_color`를 `--color-accent`에 넣고 `assets/styles/tailwind.css`의 `.home-categories__row`에서 `border-left: 3px solid var(--color-accent)`로 표시한다(미설정 시 중립색). 설명이 없으면 빈 칸으로 두며, 좌·우 열은 `minmax(0,2fr)`/`minmax(0,3fr)` 그리드로 고정한다 - 태그·작성자 아카이브(`tag.hbs`, `author.hbs`)는 홈과 동일한 `post-feed`를 쓰지 않고, `post-feed-archive`로 글 목록과 페이지네이션만 노출함 - 우측 사이드바 `Recommended` 섹션은 Ghost `recommendations` 데이터를 우선 사용하며, 항목별 외부 링크와 favicon 표시를 지원함 diff --git a/docs/update.md b/docs/update.md index edc5058..7ee5736 100644 --- a/docs/update.md +++ b/docs/update.md @@ -1,8 +1,34 @@ # 업데이트 로그 +## v0.2.8 - 2026-04-17 +- `package.json` 버전을 `0.2.8`로 증가. +- `partials/site/topbar.hbs`: 비로그인 시 사용자 드롭다운 상단 프로필 행(아바타·이름)을 렌더하지 않도록 `{{#if @member}}`로 분리. +- `docs/spec.md`, `docs/map.md`, `docs/deploy.md` 현재 버전을 `v0.2.8`로 동기화. + ## v0.2.7 - 2026-04-17 - `package.json` 버전을 `0.2.7`로 증가. - `partials/site/sidebar-left.hbs`: `@site.secondary_navigation`이 있을 때 `Home pages` 아래에 `More links` 아코디언 그룹을 추가하고 `{{navigation type="secondary"}}`로 Secondary 링크를 노출. +- `partials/home/hero.hbs`: 로그인 멤버(`@member`)일 때 홈 Hero 구독 폼을 숨기도록 조건 처리. +- `partials/site/topbar.hbs`: 멤버 아바타 미등록 시 사용자 아이콘(`icon-user-circle`)을 노출하고, Gravatar 외부 링크를 제거. +- `partials/site/topbar.hbs`: 이름 비어있을 때 기본 이름(`Member`)을 표시하도록 보정. +- `assets/built/theme.js`: 사용자 메뉴 오픈/포털 진입/포커스 복귀 시 `/members/api/member/`를 `no-store`로 재조회하고 `member`/`members[0]` 응답을 모두 처리해 닉네임 변경이 새로고침 없이 반영되도록 보정. +- `partials/site/topbar.hbs`: 검색 모달 전용 데이터 소스(`data-search-source`)를 추가해 포스트/태그/작성자 전체 목록을 검색 대상으로 통합. +- `assets/built/theme.js`: 검색 로직을 섹션형 결과(`Authors`, `Tags`, `Posts`) 렌더링으로 교체하고 포스트 제목/요약 검색을 지원. +- `assets/built/screen.css`: 검색 모달 레이아웃을 단일 패널 구조로 정리하고 섹션/아이템 스타일을 추가. +- `partials/site/topbar.hbs`, `assets/built/theme.js`: 검색창 좌측 `X` 버튼을 모달 닫기 대신 입력 초기화 동작으로 변경. +- `assets/built/screen.css`: 검색 input의 기본 우측 cancel(`::-webkit-search-cancel-button`)을 숨김 처리. +- `assets/built/screen.css`: `search-result__excerpt`를 한 줄 말줄임(`text-overflow: ellipsis`)으로 변경. +- `partials/site/topbar.hbs`: 로그인 여부와 무관하게 사용자 버튼/메뉴 아바타를 `icon-user-circle` 아이콘으로 고정하고 `@member.avatar_image` 렌더링 분기를 제거. +- `default.hbs`: `@site.accent_color`가 있으면 `--accent`, `--accent-strong` CSS 변수를 런타임으로 덮어쓰도록 적용. +- `partials/site/topbar.hbs`: `@site.logo`가 있을 때 헤더 브랜드에 로고 이미지를 우선 표시하고, 없으면 사이트 제목 텍스트를 표시. +- `partials/home/hero.hbs`: `@site.cover_image`가 있을 때 홈 Hero 배경으로 커버 이미지를 적용하고 텍스트 대비를 보정. +- `partials/site/topbar.hbs`, `assets/built/theme.js`: 로그인 멤버 아바타를 댓글 UI와 유사한 형태(이니셜 배경 + 이미지 오버레이)로 표시하고, 이름/이메일 기반 초기문자·배경색을 동기화. +- `partials/site/topbar.hbs`, `assets/built/theme.js`: 멤버 아바타 초기문자를 템플릿 시드(`@member.name` 또는 `@member.email`)로 먼저 렌더해 `M` 고정 표시가 남지 않도록 보정. +- `partials/home/hero.hbs`: 홈 Hero를 커버 전용 영역으로 정리해 `@site.cover_image`가 있을 때만 렌더링하고, 하드코딩 텍스트/구독 폼을 제거. +- `partials/home/hero.hbs`, `assets/built/screen.css`, `assets/built/theme.js`: 홈 Hero 커버 이미지 로딩 중 그라데이션 대신 스켈레톤(shimmer) 애니메이션을 표시하고, 이미지 로드 완료 시 페이드 전환되도록 처리. +- `partials/site/topbar.hbs`, `assets/built/theme.js`: 로그인 상태 사용자 버튼/팝업 아바타 뒤 배경색을 제거(transparent)하고, 비로그인 사용자 아이콘 크기를 버튼/팝업 영역에 맞게 조정. +- `partials/site/topbar.hbs`: 비로그인 사용자 아이콘의 내부 `svg`를 부모 크기(`size-*`)에 맞춰 렌더링하도록 보정해 24px 고정으로 작게 보이던 문제를 수정. +- `partials/site/topbar.hbs`: 비로그인 사용자 아이콘 크기 규칙을 `w/h-full + svg 62%` 고정 비율로 통일해 팝업 아바타 영역(32/40px)에서 위치·크기 불균형이 생기지 않도록 조정. - `docs/spec.md`, `docs/map.md`, `docs/deploy.md` 현재 버전을 `v0.2.7`로 동기화. - `docs/history.md`에 Secondary 네비 사이드바 노출(`v0.2.7`) 기록. diff --git a/package.json b/package.json index b64e3b4..4c0d2b7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ghost-theme-thred-clone", - "version": "0.2.7", + "version": "0.2.8", "private": true, "description": "A Ghost theme inspired by the Thred reference layout.", "keywords": [ diff --git a/partials/home/hero.hbs b/partials/home/hero.hbs index fdb0c7f..eed84d1 100644 --- a/partials/home/hero.hbs +++ b/partials/home/hero.hbs @@ -1,47 +1,9 @@ -
-
-
-

- Ideas published for meaningful conversation, discussed and shaped by the community -

-

A modern Ghost theme for curated, community-driven publishing, where members join the conversation.

-
-
- Personal information - - -
- -
-
-
-
\ No newline at end of file +{{#if @site.cover_image}} +
+ + {{@site.title}} +
+{{/if}} \ No newline at end of file diff --git a/partials/site/sidebar-left.hbs b/partials/site/sidebar-left.hbs index 3b655cf..3ca374a 100644 --- a/partials/site/sidebar-left.hbs +++ b/partials/site/sidebar-left.hbs @@ -1,5 +1,5 @@ diff --git a/partials/site/topbar.hbs b/partials/site/topbar.hbs index 322d5f0..a2fcd2f 100644 --- a/partials/site/topbar.hbs +++ b/partials/site/topbar.hbs @@ -24,7 +24,11 @@ - {{@site.title}} + {{#if @site.logo}} + {{@site.title}} + {{else}} + {{@site.title}} + {{/if}}
@@ -41,44 +45,41 @@
-