/* v1 storefront: existing product, two thumbnail shelves, existing journal catalogue. */
body[data-entry=main]{background:var(--light);padding-bottom:68px}
body[data-entry=main] .front-brand{position:sticky;top:0;z-index:75}
body[data-entry=main] #content{overflow:hidden}
/* One image banner per SKU; manual navigation and native touch scrolling. */
.shop-feature{padding:16px 20px 18px}
.shop-feature .crsl{display:grid;grid-template-columns:40px 1fr 40px;gap:7px 8px;margin:0}
#homeProducts{display:flex;overflow-x:auto;gap:12px;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0;margin:0;grid-column:1/-1}
#homeProducts::-webkit-scrollbar{display:none}
#homeProducts>.shop-banner{flex:0 0 100%;max-width:100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always;margin:0}
.shop-banner>a{display:block;position:relative;isolation:isolate;aspect-ratio:4/5;background:var(--night);overflow:hidden;border-radius:8px;color:#fffdfa}
.shop-banner-image{position:absolute;inset:0;width:100%;height:100%!important;object-fit:cover;z-index:-2}
.shop-banner>a:after{content:'';position:absolute;inset:35% 0 0;background:linear-gradient(transparent,#06060ae0 85%);z-index:-1}
.shop-banner-tag{position:absolute;left:17px;top:17px;background:#fffdfaee;padding:5px 10px;font-size:11px;font-weight:650;color:#7e312c;border-radius:3px}
.shop-banner-seal{position:absolute;right:17px;top:17px;width:29px;height:29px!important}
.shop-banner-copy{position:absolute;left:24px;right:24px;bottom:26px}
.shop-banner-copy>p{font-size:12px;font-weight:550;color:#e6d7c3;margin-bottom:7px!important}
.shop-banner-copy :is(h1,h2){font-size:clamp(30px,8.5vw,40px);line-height:1.25;font-weight:770;letter-spacing:-.055em;color:#fffdfa}
.shop-banner-copy>span{display:block;font-size:15px;line-height:1.6;margin-top:11px;color:#eee7df}
.shop-banner-copy>b{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:21px;padding-top:14px;border-top:1px solid #ffffff4d;font-size:13px;font-weight:650}
.shop-banner-copy>b>span{font-size:22px;font-weight:400}
.shop-feature .crsl>.crsl-nav{position:static;transform:none;display:flex;width:36px;height:36px;min-height:36px;border:0;background:transparent;color:var(--ink);box-shadow:none;backdrop-filter:none;grid-row:2}
.shop-feature .crsl>.prev{grid-column:1}
.shop-feature .crsl>.next{grid-column:3;justify-self:end}
.shop-feature .crsl>.crsl-dots{grid-row:2;grid-column:2;display:flex;align-items:center;justify-content:center;gap:0;padding:0;margin:0}
.shop-feature .crsl-dot{width:28px;height:36px;min-width:0;margin:0;border:0;background:transparent;box-shadow:none;border-radius:0;position:relative}
.shop-feature .crsl-dot:after{content:'';position:absolute;width:5px;height:5px;border-radius:50%;left:12px;top:15px;background:#c6c3bd}
.shop-feature .crsl-dot.on:after{background:var(--red)}
.shop-shelf{padding:28px 20px 24px;border-top:7px solid var(--soft);background:var(--light)}
.shop-kicker{font-size:12px;color:var(--red);font-weight:600;line-height:1.6;margin-bottom:7px!important}
.shop-shelf h2{font-size:23px;line-height:1.4;font-weight:740;letter-spacing:-.045em}
.shop-shelf .crsl{display:grid;grid-template-columns:40px 1fr 40px;gap:15px 8px;margin:20px 0 0}
.shop-shelf .crsl>.crsl-track{grid-column:1/-1;gap:12px;margin:0 -20px 0 0;padding:0 20px 0 0;scroll-padding-inline:0}
.shop-shelf .crsl>.crsl-track>*{flex:0 0 46%;max-width:46%;min-width:0}
.shop-story{display:block;color:var(--ink)}
.shop-story-poster{display:block;position:relative;isolation:isolate;aspect-ratio:3/4;background:var(--night);border-radius:7px;overflow:hidden}
.shop-story-poster img{position:absolute;inset:0;width:100%;height:100%!important;object-fit:cover;z-index:-2}
.shop-story-poster:after{content:'';position:absolute;inset:40% 0 0;background:linear-gradient(transparent,#06060ae0);z-index:-1}
.shop-story-label{position:absolute;inset:auto 12px 16px;color:#fffdfa;word-break:keep-all}
.shop-story-label small{display:block;font-size:9px;font-weight:550;color:#e0ccad;line-height:1.6;margin-bottom:5px}
.shop-story-label b{display:block;font-size:24px;line-height:1.23;font-weight:730;letter-spacing:-.05em}
.shop-story>p{margin-top:10px!important;font-size:13px;line-height:1.6;letter-spacing:-.02em;color:#484850}
.shop-shelf .crsl>.crsl-nav{position:static;transform:none;display:flex;width:36px;height:36px;min-height:36px;border:1px solid var(--line);background:transparent;color:var(--ink);box-shadow:none;backdrop-filter:none;grid-row:2}
.shop-shelf .crsl>.prev{grid-column:1}
.shop-shelf .crsl>.next{grid-column:3;justify-self:end}
.shop-shelf .crsl>.crsl-dots{grid-row:2;grid-column:2;display:flex;align-items:center;justify-content:center;gap:3px;padding:0;margin:0}
.shop-shelf .crsl-dot{width:30px;height:36px;min-width:0;margin:0;border:0;background:transparent;box-shadow:none;border-radius:0;position:relative}
.shop-shelf .crsl-dot:after{content:'';position:absolute;width:5px;height:5px;border-radius:50%;left:13px;top:15px;background:#c6c3bd}
.shop-shelf .crsl-dot.on:after{background:var(--red)}
.shop-first-reading{padding:7px 20px 26px;background:var(--light)}
.shop-first-reading>a{display:grid;grid-template-columns:minmax(0,1fr) 30%;border:1px solid #e5ded2;border-radius:7px;background:var(--paper);overflow:hidden}
.shop-first-reading a>div{position:relative;z-index:1;padding:22px 0 23px 20px}
.shop-first-reading div>span{font-size:11px;line-height:1.6;color:var(--red);font-weight:600}
.shop-first-reading h2{font-size:23px;line-height:1.35;font-weight:740;letter-spacing:-.045em;margin-top:8px!important}
.shop-first-reading p{font-size:11px;line-height:1.7;color:var(--muted);margin-top:10px!important}
.shop-first-reading b{display:flex;gap:9px;align-items:center;font-size:12px;line-height:1.6;margin-top:16px;font-weight:700}
.shop-first-reading img{height:100%!important;width:100%;object-fit:cover;object-position:46% top;mask-image:linear-gradient(to right,transparent,#000 30%)}
.shop-journal-mount{height:0;margin:0;padding:0}
body[data-entry=main] .journal-section{padding:28px 20px 30px;border-top:7px solid var(--soft)}
body[data-entry=main] .journal-section .eyebrow{font-size:12px;font-weight:600;margin-bottom:7px!important}
body[data-entry=main] .journal-section h2{font-size:23px;font-weight:740;line-height:1.4;letter-spacing:-.045em}
body[data-entry=main] .journal-intro{display:none}
body[data-entry=main] .journal-toolbar{margin:8px 0 14px}
body[data-entry=main] .journal-all{font-size:13px}
body[data-entry=main] .journal-controls button{width:36px;height:36px}
body[data-entry=main] .journal-track{margin-right:-20px;padding-right:20px;gap:12px}
body[data-entry=main] .journal-card{flex-basis:46%}
body[data-entry=main] .journal-image{border-radius:7px}
body[data-entry=main] .journal-card h3{font-size:16px;line-height:1.5;font-weight:650;margin-top:10px}
body[data-entry=main] .journal-count{font-size:11px;margin-top:10px!important}
body[data-entry=main] .front-footer{padding:30px 20px 25px}
body[data-entry=main] .front-footer img{width:96px;margin-bottom:18px}
.shop-dock{position:fixed;z-index:65;left:50%;bottom:0;transform:translateX(-50%);width:100%;max-width:480px;padding:8px 8px max(7px,env(safe-area-inset-bottom));display:flex;gap:4px;background:#fffdfaf5;border-top:1px solid var(--line);backdrop-filter:blur(12px)}
.shop-dock>a{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:45px;gap:4px;font-size:10px;color:var(--muted);line-height:1.4}
.shop-dock>a[aria-current]{color:var(--red);font-weight:700}
.shop-dock svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}
.shop-dock [data-journal-link]{display:none}
body:has(.journal-section) .shop-dock [data-journal-link]{display:flex}
/* Two square product thumbnails immediately below the banner. */
.shop-product-picker{padding:0 20px 28px;background:var(--light);scroll-margin-top:75px}
.shop-picker-heading{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:15px}
.shop-picker-heading h2{font-size:21px;line-height:1.4;font-weight:740;letter-spacing:-.045em}
.shop-picker-heading p{font-size:11px;color:var(--muted);line-height:1.6}
#skuGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:0;margin:0;background:transparent}
#skuGrid .sku-card{margin:0;padding:0;border:0;background:transparent;color:var(--ink);min-width:0}
#skuGrid .sku-card>a{display:block;color:inherit;text-decoration:none}
#skuGrid .sku-square{position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:7px;background:var(--night)}
#skuGrid .sku-square:after{content:'';position:absolute;inset:60% 0 0;background:linear-gradient(transparent,#06060ac9)}
#skuGrid .sku-square img{display:block;width:100%;height:100%!important;object-fit:cover;object-position:var(--sku-portrait-position,center top);transform:scale(var(--sku-portrait-scale,1));transform-origin:var(--sku-portrait-origin,center);transition:transform .3s ease}
/* Align the existing portraits: crown near 5%, chin near 50% of each square. */
#skuGrid .sku-card[data-sku="천명"]{--sku-portrait-scale:1;--sku-portrait-origin:center top;--sku-portrait-position:center top}
#skuGrid .sku-card[data-sku="자미두수"]{--sku-portrait-position:center 30%}
#skuGrid .sku-square>span{position:absolute;z-index:1;bottom:12px;left:12px;right:10px;color:#f1e2cb;font-size:11px;line-height:1.5}
#skuGrid h3{margin:11px 0 3px!important;font:720 17px/1.45 'Pretendard Variable',Pretendard,sans-serif;letter-spacing:-.04em}
#skuGrid p{font-size:12px;line-height:1.6;color:var(--muted)}
@media(hover:hover){#skuGrid a:hover img{transform:scale(calc(var(--sku-portrait-scale,1)*1.035))}}
@media(prefers-reduced-motion:reduce){#skuGrid img{transition:none}}
@media(max-width:359px){.shop-product-picker{padding-left:16px;padding-right:16px}.shop-banner-copy{left:19px;right:19px;bottom:20px}.shop-banner-copy>span{font-size:13px}.shop-banner-copy>b{margin-top:14px;padding-top:11px;font-size:12px}#skuGrid{gap:10px}#skuGrid h3{font-size:15px}#skuGrid p{font-size:11px}.shop-picker-heading h2{font-size:20px}.shop-picker-heading p{font-size:10px}}
@media(min-width:480px){.shop-poster-copy{left:28px;bottom:38px}.shop-feature{padding-top:20px}.shop-story-label b{font-size:28px}}
@media(min-width:900px){body[data-entry=main] .journal-track{margin-right:0;padding-right:0;gap:12px}body[data-entry=main] .journal-card{flex-basis:calc((100% - 24px)/3)}body[data-entry=main] .journal-card h3{font-size:14px}}
@media(max-width:359px){.shop-feature,.shop-shelf{padding-left:16px;padding-right:16px}.shop-poster-copy{left:19px;right:19px;bottom:25px}.shop-poster-copy>p{font-size:11px}.shop-poster-copy>span{font-size:12px}.shop-product-info h2{font-size:21px}.shop-product-desc{font-size:12px}.shop-shelf h2{font-size:21px}.shop-shelf .crsl>.crsl-track{margin-right:-16px;padding-right:16px}.shop-story-label{inset:auto 10px 13px}.shop-story-label b{font-size:21px}.shop-first-reading{padding-left:16px;padding-right:16px}.shop-first-reading a>div{padding-left:16px}.shop-first-reading h2{font-size:21px}body[data-entry=main] .journal-section{padding-left:16px;padding-right:16px}body[data-entry=main] .journal-track{margin-right:-16px;padding-right:16px}}

/* Compact free entry, separate from the two paid SKUs. */
.shop-free{padding:18px 20px 26px;background:var(--light)}
.shop-free>a{display:block;background:var(--paper);border:1px solid #e1d8c9;border-radius:5px;padding:22px}
.shop-free-symbols{display:flex;gap:6px;margin-bottom:15px}
.shop-free-symbols>span{display:grid;place-items:center;width:33px;height:34px;border:1px solid #cfc6b8;background:#fffdfa90;color:#568577;font:23px/1 serif;border-radius:50% 50% 2px 2px}
.shop-free-symbols>span:nth-child(2){color:#b75b4d}.shop-free-symbols>span:nth-child(3){color:#ae9662}.shop-free-symbols>span:nth-child(4){color:#8f9097}.shop-free-symbols>span:nth-child(5){color:#657f99}
.shop-free-copy>p{font-size:11px;color:var(--red);font-weight:600;margin-bottom:4px!important}
.shop-free-copy>h2{font-size:22px;line-height:1.5;letter-spacing:-.05em;font-weight:740}
.shop-free-copy>span{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#68625a;margin-top:8px;gap:6px}
.shop-free-copy>span>b{font-size:23px;line-height:1;font-weight:400;color:var(--red)}
