(() => { // Deterministic scroll on navigation: opening a post/product should always land at // the top, never a leftover/restored position (owner: "product 누를때마다 스크롤이 // 제각각"). 'manual' stops the browser from restoring a stale offset on history nav; // fresh document loads already start at the top. try { if ('scrollRestoration' in history) history.scrollRestoration = 'manual'; } catch (_) {} const GALLERY_ROOT_SELECTOR = '.gallery-grid'; const POST_FEED_ROOT_SELECTOR = '#post-feed-list, .post-feed-list'; const MOBILE_BREAKPOINT = 680; function parsePx(raw, fallback) { const text = String(raw ?? '').trim(); if (!text || text.includes('%')) return fallback; const value = parseFloat(text); return Number.isFinite(value) && value >= 0 ? value : fallback; } function parseCount(raw, fallback) { const value = parseInt(String(raw ?? '').trim(), 10); return Number.isFinite(value) && value > 0 ? value : fallback; } function readRootStyles() { return window.getComputedStyle(document.documentElement); } function getAvailableWidth(root, options = {}) { const source = root.parentElement || root; const rectWidth = Math.ceil(source.getBoundingClientRect().width); const clientWidth = source.clientWidth || 0; const rawWidth = Math.max(clientWidth, rectWidth); const offset = options.subtractMenuOffset ? parsePx(readRootStyles().getPropertyValue('--starter-window-menu-offset'), 0) : 0; return Math.max(0, rawWidth - offset); } function readContainerAlignment() { const styles = readRootStyles(); return { start: (styles.getPropertyValue('--starter-container-margin-inline-start') || '').trim() || 'auto', end: (styles.getPropertyValue('--starter-container-margin-inline-end') || '').trim() || 'auto', }; } function setStyle(el, property, value) { if (value === '') { el.style.removeProperty(property); return; } if (el.style.getPropertyValue(property) !== value) { el.style.setProperty(property, value); } } function resolveResponsiveColumns(options) { const { availableWidth, preferredWidth, gap, maxColumns, } = options; if (!(availableWidth > 0)) return null; const safeGap = gap > 0 ? gap : 0; const safeColumns = Math.max(1, maxColumns || 1); if (availableWidth <= MOBILE_BREAKPOINT) { return { columnCount: 1, rootWidth: '100%', itemWidth: '100%', columnWidth: 'auto', }; } if (preferredWidth > 0) { if (preferredWidth >= availableWidth) { return { columnCount: 1, rootWidth: '100%', itemWidth: '100%', columnWidth: 'auto', }; } const fitColumns = Math.floor((availableWidth + safeGap) / (preferredWidth + safeGap)); const columnCount = Math.max(1, Math.min(safeColumns, fitColumns)); const fittedWidth = Math.min( availableWidth, columnCount * preferredWidth + Math.max(0, columnCount - 1) * safeGap, ); return { columnCount, rootWidth: `${fittedWidth}px`, itemWidth: `${preferredWidth}px`, columnWidth: `${preferredWidth}px`, }; } const columnCount = safeColumns; const computedItemWidth = Math.floor( Math.max(0, availableWidth - Math.max(0, columnCount - 1) * safeGap) / columnCount, ); if (!(computedItemWidth > 0)) { return { columnCount: 1, rootWidth: '100%', itemWidth: '100%', columnWidth: 'auto', }; } return { columnCount, rootWidth: '100%', itemWidth: `${computedItemWidth}px`, columnWidth: `${computedItemWidth}px`, }; } function readGalleryMetrics(root) { const rootStyles = readRootStyles(); const rootStylesForGap = window.getComputedStyle(root); const preferredWidth = parsePx(rootStyles.getPropertyValue('--starter-global-gallery-width'), 1120); const gap = parsePx( rootStyles.getPropertyValue('--starter-global-gallery-gap') || rootStylesForGap.columnGap || rootStylesForGap.gap, 16, ); const maxColumns = parseCount(rootStyles.getPropertyValue('--starter-global-gallery-columns'), 1); return { preferredWidth, gap, maxColumns }; } function readPostFeedMetrics(root) { const rootStyles = readRootStyles(); const rootStylesForGap = window.getComputedStyle(root); const preferredWidth = parsePx(rootStyles.getPropertyValue('--starter-global-post-width'), 0); const gap = parsePx( rootStyles.getPropertyValue('--starter-global-post-feed-gap') || rootStylesForGap.columnGap || rootStylesForGap.gap, 16, ); const maxColumns = parseCount(rootStyles.getPropertyValue('--starter-global-post-feed-columns'), 1); return { preferredWidth, gap, maxColumns }; } function applyRootAlignment(root) { const alignment = readContainerAlignment(); setStyle(root, 'margin-left', alignment.start); setStyle(root, 'margin-right', alignment.end); } function applyGalleryLayout(root) { const availableWidth = getAvailableWidth(root); const { preferredWidth, gap, maxColumns } = readGalleryMetrics(root); const layout = resolveResponsiveColumns({ availableWidth, preferredWidth, gap, maxColumns }); if (!layout) return; applyRootAlignment(root); setStyle(root, 'width', layout.rootWidth); setStyle(root, 'max-width', layout.rootWidth); setStyle(root, 'column-count', String(layout.columnCount)); setStyle(root, 'column-width', layout.columnWidth); root.dataset.galleryColumns = String(layout.columnCount); } function applyPostFeedLayout(root) { const availableWidth = getAvailableWidth(root); const { preferredWidth, gap, maxColumns } = readPostFeedMetrics(root); const layout = resolveResponsiveColumns({ availableWidth, preferredWidth, gap, maxColumns }); if (!layout) return; applyRootAlignment(root); setStyle(root, 'width', layout.rootWidth); setStyle(root, 'max-width', layout.rootWidth); setStyle(root, '--starter-post-feed-item-width', layout.itemWidth); root.dataset.postFeedColumns = String(layout.columnCount); } function bindRoot(root, options) { if (!(root instanceof HTMLElement)) return; if (root.dataset[options.boundKey] === '1') return; root.dataset[options.boundKey] = '1'; let frame = 0; let cleaned = false; let resizeObserver = null; const cleanup = () => { if (cleaned) return; cleaned = true; if (frame) window.cancelAnimationFrame(frame); resizeObserver?.disconnect(); window.removeEventListener('resize', schedule); delete root.dataset[options.boundKey]; delete root.dataset[options.columnsKey]; root.style.removeProperty('width'); root.style.removeProperty('max-width'); root.style.removeProperty('margin-left'); root.style.removeProperty('margin-right'); for (const property of options.resetProperties) { root.style.removeProperty(property); } }; const schedule = () => { if (!root.isConnected) { cleanup(); return; } if (frame) window.cancelAnimationFrame(frame); frame = window.requestAnimationFrame(() => { frame = 0; options.apply(root); }); }; resizeObserver = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(() => schedule()) : null; resizeObserver?.observe(root.parentElement || root); window.addEventListener('resize', schedule, { passive: true }); schedule(); } function normalizePath(pathname) { const path = String(pathname || '/').split('?')[0].split('#')[0] || '/'; if (path === '/') return '/'; return path.replace(/\/+$/, '') || '/'; } function getRowPath(row) { const href = row.getAttribute('href') || ''; if (!href || href.startsWith('#')) return ''; try { return normalizePath(new URL(href, window.location.href).pathname); } catch (_) { return ''; } } function placeIndexInlineContent() { const list = document.querySelector('.index-page-list'); const content = document.querySelector('.index-current-content'); if (!(list instanceof HTMLElement) || !(content instanceof HTMLElement)) return; const currentPath = normalizePath(window.location.pathname); const rows = Array.from(list.querySelectorAll('.index-page-row')); const isHomeContent = content.classList.contains('index-home-content'); const params = new URLSearchParams(window.location.search); const isIndexVisibleRequest = isHomeContent && (params.has('index-show') || window.location.hash === '#index-show'); const hasContent = hasInlineContent(content); const descriptionRow = list.querySelector('.index-page-row--description'); // Match the current URL to a page row so its content reveals inline right under // that row (the "inherited from main" index behaviour). A post-detail URL // (/c/) matches no page row: leave its content at the natural DOM end // (after the whole index list) rather than hoisting it above the list — the // index reads first, exactly like the main index, then the post below it. const target = isHomeContent ? list.querySelector('.index-page-row--index') : rows.find((row) => !row.classList.contains('index-page-row--index') && getRowPath(row) === currentPath) || null; for (const row of rows) { row.classList.toggle('is-current', row === target && row !== descriptionRow && (!isHomeContent || isIndexVisibleRequest)); } content.classList.toggle('is-empty', !hasContent); content.hidden = !hasContent || (isHomeContent && !isIndexVisibleRequest); if (content.hidden) return; if (target instanceof HTMLElement && target.nextElementSibling !== content) { target.insertAdjacentElement('afterend', content); } } function hasInlineContent(content) { const clone = content.cloneNode(true); if (!(clone instanceof HTMLElement)) return false; clone.querySelectorAll('script, style, template, .section-heading, .page-title, .section-kicker, .section-meta-row').forEach((node) => node.remove()); if (clone.textContent && clone.textContent.replace(/\s+/g, '').length > 0) { return true; } return !!clone.querySelector([ 'img', 'picture', 'video', 'audio', 'iframe', 'canvas', 'svg', 'form', 'input', 'select', 'textarea', 'button', 'table', 'ul', 'ol', 'blockquote', 'pre', 'article', '.tc-live-blocks > *', '.post-card', '.gallery-card', '.post-product', '.post-detail-product', '.cart-grid', '.cart-empty-state', '.category-list', '.calendar-section', '.post-pagination', '.post-load-more-wrap', '.search-results', '.search-form', ].join(',')); } function sortIndexRowsByCreated() { // The index list should read in page-creation order, regardless of category or // the site's nav sort order. Reorder the content rows by their createdAt; the // description (tagline) row and the trailing "Index" row are left in place. const list = document.querySelector('.index-page-list'); if (!(list instanceof HTMLElement)) return; const rows = Array.from(list.querySelectorAll('.index-page-row[data-index-row]:not(.index-page-row--index)')); if (rows.length < 2) return; const key = (r) => String(r.getAttribute('data-index-created-at') || ''); const sorted = rows.slice().sort((a, b) => { const ka = key(a), kb = key(b); return ka < kb ? -1 : ka > kb ? 1 : 0; // stable, ascending = oldest first }); if (sorted.every((r, i) => r === rows[i])) return; // already ordered // Keep the "Index" (home) row pinned at the top: re-insert the sorted content // rows before the inline-content section (or at the end), never before the // Index row, so it stays first. const anchor = list.querySelector('.index-current-content'); for (const r of sorted) { if (anchor) list.insertBefore(r, anchor); else list.appendChild(r); } } function bindSearchOverlay() { const toggle = document.getElementById('collection-search-toggle'); if (!(toggle instanceof HTMLInputElement) || toggle.dataset.searchFocusBound === '1') return; toggle.dataset.searchFocusBound = '1'; toggle.addEventListener('change', () => { if (!toggle.checked) return; window.requestAnimationFrame(() => { document.getElementById('collection-search-input')?.focus?.(); }); }); } function bindLiveSearch() { const form = document.querySelector('.index-search-form'); const input = document.getElementById('collection-search-input'); if (!(form instanceof HTMLElement) || !(input instanceof HTMLInputElement)) return; if (form.dataset.liveSearchBound === '1') return; form.dataset.liveSearchBound = '1'; let results = document.getElementById('collection-search-results'); if (!results) { results = document.createElement('div'); results.id = 'collection-search-results'; results.className = 'index-search-results'; results.setAttribute('aria-live', 'polite'); form.insertAdjacentElement('afterend', results); } // Reuse the existing /search page as a same-origin data source and lift its // server-rendered .search-results list into the overlay (self-scrape). Keeps the // form's action as a no-JS fallback but never navigates when JS is on. const searchBase = (form.getAttribute('action') || '/search').split('?')[0] || '/search'; let timer = 0; let controller = null; let lastQ = ''; const render = (html, q) => { try { const doc = new DOMParser().parseFromString(html, 'text/html'); const list = doc.querySelector('.search-results'); if (list && list.querySelector('.search-result-card')) { results.innerHTML = ''; results.appendChild(document.importNode(list, true)); } else { const safe = q.replace(/[&<>"]/g, ''); results.innerHTML = '

No results for “' + safe + '”.

'; } } catch (_) { results.innerHTML = ''; } }; const run = (q) => { if (controller) { try { controller.abort(); } catch (_) {} } controller = ('AbortController' in window) ? new AbortController() : null; fetch(searchBase + '?q=' + encodeURIComponent(q), { signal: controller ? controller.signal : undefined }) .then((r) => (r.ok ? r.text() : '')) .then((html) => { if (q === lastQ) render(html, q); }) .catch(() => {}); }; const onInput = () => { const q = input.value.trim(); lastQ = q; window.clearTimeout(timer); if (q.length < 1) { results.innerHTML = ''; return; } timer = window.setTimeout(() => run(q), 220); }; input.addEventListener('input', onInput); form.addEventListener('submit', (e) => { e.preventDefault(); onInput(); }); } function setupBackToTop() { // A floating "back to top" control, injected once and shown after the visitor // scrolls past ~one viewport. CSS (.index-to-top / .is-visible) slides it up from // the bottom edge; here we only toggle the class and smooth-scroll on click. if (window.__tcCollBackToTop) return; const body = document.body; if (!body) return; window.__tcCollBackToTop = true; const btn = document.createElement('button'); btn.type = 'button'; btn.className = 'index-to-top'; btn.setAttribute('aria-label', 'Back to top'); btn.setAttribute('title', 'Back to top'); btn.innerHTML = 'Back to top'; body.appendChild(btn); const prefersReduced = !!(window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches); btn.addEventListener('click', () => { try { window.scrollTo({ top: 0, behavior: prefersReduced ? 'auto' : 'smooth' }); } catch (_) { window.scrollTo(0, 0); } }); let ticking = false; const update = () => { ticking = false; const y = window.pageYOffset || document.documentElement.scrollTop || 0; const threshold = Math.max(360, Math.round(window.innerHeight * 0.9)); btn.classList.toggle('is-visible', y > threshold); }; const onScroll = () => { if (ticking) return; ticking = true; window.requestAnimationFrame(update); }; window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', onScroll, { passive: true }); update(); } function scan() { sortIndexRowsByCreated(); placeIndexInlineContent(); bindSearchOverlay(); bindLiveSearch(); setupBackToTop(); for (const root of Array.from(document.querySelectorAll(GALLERY_ROOT_SELECTOR))) { if (root.closest('.index-inline-content')) continue; bindRoot(root, { boundKey: 'galleryLayoutBound', columnsKey: 'galleryColumns', resetProperties: ['column-count', 'column-width'], apply: applyGalleryLayout, }); } for (const root of Array.from(document.querySelectorAll(POST_FEED_ROOT_SELECTOR))) { if (root.closest('.index-inline-content')) continue; bindRoot(root, { boundKey: 'postFeedLayoutBound', columnsKey: 'postFeedColumns', resetProperties: ['--starter-post-feed-item-width'], apply: applyPostFeedLayout, }); } } function observeMutations() { if (window.__tcStarterLayoutObserver) return; let frame = 0; const schedule = () => { if (frame) window.cancelAnimationFrame(frame); frame = window.requestAnimationFrame(() => { frame = 0; scan(); }); }; const observer = new MutationObserver(() => schedule()); observer.observe(document.documentElement, { childList: true, subtree: true }); window.__tcStarterLayoutObserver = observer; } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', () => { scan(); observeMutations(); }, { once: true }); } else { scan(); observeMutations(); } window.addEventListener('load', scan, { once: true }); })(); /* tc-like-plural-v1 — "(N) Like" for 0/1, "(N) Likes" for 2+; CSS reads data-tc-like-label */ ;(function(){if(window.__tcLikePlural)return;window.__tcLikePlural=1; var sync=function(){document.querySelectorAll('.like-count').forEach(function(el){var n=parseInt(String(el.textContent||'').replace(/[^0-9]/g,''),10);el.setAttribute('data-tc-like-label',(isNaN(n)||n<=1)?'Like':'Likes');});}; var run=function(){sync();try{new MutationObserver(sync).observe(document.body,{subtree:true,childList:true,characterData:true});}catch(e){}}; if(document.readyState==='loading'){document.addEventListener('DOMContentLoaded',run,{once:true});}else{run();}})(); /* ================= tc-coll-r3 (2026-07-14) — cart rename ================= */ (function () { const isCart = /\/cart(\/|$|\?)/.test(location.pathname) || document.querySelector('.layout-shell.shopping-cart, .layout-shell.cart, .cart-grid, .cart-empty-state'); if (!isCart) return; document.querySelectorAll('h1, .page-title').forEach((h) => { if (/shopping cart/i.test(h.textContent)) h.textContent = 'Cart'; }); const syncTitle = () => { if (/shopping cart/i.test(document.title)) document.title = 'Cart'; }; syncTitle(); const titleEl = document.querySelector('title'); if (titleEl) new MutationObserver(syncTitle).observe(titleEl, { childList: true }); })(); /* ================= end tc-coll-r3 ================= */