/* Storefront Shortcut — 매대형 카테고리 내비게이션
 * 시안: Documents/Storefront/printallday-storefront.html (.storefront-shortcut 래퍼로 스코프)
 * 적용 수정: 팔레트 정리 / 모바일 2열·텍스트 위계 / 서브 타일 200×250 통일·구분선 마진 통일
 * 색 팔레트(이 외 금지): 그레이 #030d12 #2b3e48 #60737c #91a0a7 #bdc7cd #dde5ea #e9f1f5 #ecf5f9
 *                       액센트 선택 #0f80bb / 구분선 #49a5d4 / 배경 #fafaf8
 * 위계(큰→작): 대분류 h3 22px > 탑네비 라벨 18px > 중분류 h4 14px > 타일 라벨 13px
 */
.storefront-shortcut{
  --sf-paper:#fafaf8;--sf-text:#2b3e48;--sf-muted:#60737c;--sf-accent:#49a5d4;--sf-sel:#0f80bb;
  --sf-border:#dde5ea;--sf-border-hover:#bdc7cd;
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--sf-text);line-height:1.6;-webkit-font-smoothing:antialiased;background:var(--sf-paper);
}
/* 텍스트 요소 리셋: 부모 테마(Blocksy)가 h2 등에 margin-bottom을 강제하므로 특이도(0,1,1)로 무력화 — :where(0특이도)는 테마에 져서 안 됨 */
.storefront-shortcut h2,.storefront-shortcut h3,.storefront-shortcut h4,.storefront-shortcut p{margin:0;padding:0}
.storefront-shortcut :where(span,div,section,a){margin:0;padding:0}   /* 나머지는 0특이도 — 구체 룰(.sf-wrap margin 등)이 덮음 */
.storefront-shortcut *{box-sizing:border-box}
.storefront-shortcut img{max-width:100%;display:block}
.storefront-shortcut a{color:inherit;text-decoration:none}
.storefront-shortcut .sf-wrap{max-width:1300px;margin:0 auto;padding:0 18px}

/* page intro */
.storefront-shortcut .sf-intro{padding:42px 0 8px}
.storefront-shortcut .sf-eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--sf-sel);text-transform:uppercase;display:block}   /* 대시(::before) 제거 */
/* eyebrow→헤드라인→서브카피 세로 간격 균등: h2 line-height 타이트 + margin-top 동일(8px) */
.storefront-shortcut .sf-intro h2{font-size:clamp(22px,5vw,30px);font-weight:900;letter-spacing:-.03em;line-height:1.2;margin-top:8px;word-break:keep-all}
.storefront-shortcut .sf-intro p{color:var(--sf-muted);font-size:14.5px;margin-top:8px;word-break:keep-all}

/* category nav — 구분선 위/아래 마진 통일(30px) */
.storefront-shortcut .sf-tabs{max-width:1300px;margin:16px auto 0;padding:0 18px 30px;border-bottom:3px dashed var(--sf-accent)}
/* 탑네비: 유동 그리드 — 칸 최대 200(폭 따라 ≤200 유동), 어떤 폭도 안 넘침. 기본 2열, 넓으면(≥896px) 4열 한 줄 */
.storefront-shortcut .sf-tabs-in{margin:0 auto;padding:10px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,200px));justify-content:center;gap:20px;max-width:100%}
.storefront-shortcut .sf-tab{display:flex;flex-direction:column;cursor:pointer;background:transparent;border:3px solid var(--sf-border);border-radius:14px;overflow:hidden;transition:border-color .15s,transform .15s}
.storefront-shortcut .sf-tab .sf-tic{position:relative;width:100%;aspect-ratio:4/5}
.storefront-shortcut .sf-tab .sf-tic img{width:100%;height:100%;object-fit:cover;display:block}
.storefront-shortcut .sf-tab span{position:absolute;left:0;right:0;bottom:0;padding:8px 4px 20px;text-align:center;font-size:18px;font-weight:700;color:var(--sf-muted);white-space:nowrap;letter-spacing:-.02em}
.storefront-shortcut .sf-tab.on{border-color:var(--sf-sel)}
.storefront-shortcut .sf-tab.on span{color:var(--sf-sel)}
@media(min-width:896px){.storefront-shortcut .sf-tabs-in{grid-template-columns:repeat(4,minmax(0,200px))}}
@media(max-width:680px){.storefront-shortcut .sf-tab span{font-size:16px}}

/* category section — 구분선 아래 마진 통일(30px). 탑네비(4×200+3×20=860)와 동일 폭·중앙 → 서브 타일 4열로 세로 정렬 */
.storefront-shortcut .sf-cat{padding:30px 0 8px;scroll-margin-top:54px;max-width:860px;margin-left:auto;margin-right:auto}
/* 섹션 헤더: 제목↔서브카피 붙임(gap 축소+h3 line-height 타이트), 서브카피↔다음 그룹 벌림(margin-bottom 확대) */
.storefront-shortcut .sf-chead{display:flex;flex-direction:column;gap:2px;margin-bottom:24px}
.storefront-shortcut .sf-chead h3{font-size:22px;font-weight:900;letter-spacing:-.03em;line-height:1.2;color:var(--sf-text)}
.storefront-shortcut .sf-cdesc{font-size:13.5px;color:var(--sf-muted);word-break:keep-all}

/* mid group */
.storefront-shortcut .sf-mg{margin-bottom:20px}
.storefront-shortcut .sf-mg h4{font-size:14px;font-weight:700;color:var(--sf-text);margin-bottom:9px;padding-left:9px;border-left:3px solid var(--sf-accent);line-height:1.2}
/* 중분류 서브카피(h4 아래 설명) — 있는 그룹만 출력 */
.storefront-shortcut .sf-mg-desc{font-size:13px;color:var(--sf-muted);line-height:1.55;margin:-2px 0 13px;padding-left:9px;word-break:keep-all}
/* 서브 타일: 유동 그리드 — 칸 160~200, auto-fill로 폭에 맞춰 열 수 자동(중간 폭 전부 안 넘침). 데스크톱 5열·200 유지, 모바일 2열 */
.storefront-shortcut .sf-tg{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,200px));justify-content:center;gap:20px}
@media(max-width:680px){.storefront-shortcut .sf-tg{grid-template-columns:repeat(2,minmax(0,200px));justify-content:center;gap:12px}}

.storefront-shortcut .sf-tl{position:relative;display:block;background:transparent;border:3px solid var(--sf-border);border-radius:14px;overflow:hidden;transition:transform .15s,box-shadow .15s,border-color .15s}
.storefront-shortcut .sf-tl:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(3,13,18,.10);border-color:var(--sf-border-hover)}
.storefront-shortcut .sf-ph{position:relative;width:100%;aspect-ratio:4/5;display:block}
.storefront-shortcut .sf-ph img{width:100%;height:100%;object-fit:cover;display:block}
/* 타일 라벨: 라벨 높이 통일(2줄까지 카드 높이 영향 없음 — 이미지 위 오버레이) */
/* 타일 라벨: 글자를 위로 올리고 하단에 태그라인 한 줄 공간 확보(padding-bottom). 모바일은 카드가 작아 더 낮춤(이미지 가림 방지) */
.storefront-shortcut .sf-tn{position:absolute;left:0;right:0;bottom:0;padding:14px 6px 34px;text-align:center;font-size:13px;font-weight:600;letter-spacing:-.02em;line-height:1.3;word-break:keep-all;color:var(--sf-text)}
/* 태그라인: 라벨(.sf-tn) 아래 한 줄. 키움·밝게·라벨과 간격 축소 */
.storefront-shortcut .sf-tag{position:absolute;left:0;right:0;bottom:0;padding:0 6px 16px;text-align:center;font-size:12px;font-weight:500;letter-spacing:-.02em;line-height:1.2;word-break:keep-all;color:#91a0a7}
@media(max-width:680px){.storefront-shortcut .sf-tab span{padding-bottom:12px}.storefront-shortcut .sf-tn{padding-bottom:27px}.storefront-shortcut .sf-tag{padding-bottom:9px;font-size:11px}}
/* 뱃지 전량 제거 — 구분은 그룹 제목 + 타일 라벨이 담당. (.sf-badge / rotate 룰 삭제) */