@font-face { font-family:"NotoSansKR"; font-style:normal; font-weight:300; font-display:swap; src:url("../mall/assets/fonts/NotoSansKR-Regular.woff2") format("woff2"); }
@font-face { font-family:"NotoSansKR"; font-style:normal; font-weight:600; font-display:swap; src:url("../mall/assets/fonts/NotoSansKR-Bold.woff2") format("woff2"); }
@font-face { font-family:"NotoSansKR"; font-style:normal; font-weight:800; font-display:swap; src:url("../mall/assets/fonts/NotoSansKR-Bold.woff2") format("woff2"); }
@font-face { font-family:"NotoSansKR"; font-style:normal; font-weight:400; font-display:swap; src:url("../mall/assets/fonts/NotoSansKR-Regular.woff2") format("woff2"); }
@font-face { font-family:"NotoSansKR"; font-style:normal; font-weight:500; font-display:swap; src:url("../mall/assets/fonts/NotoSansKR-Medium.woff2") format("woff2"); }
@font-face { font-family:"NotoSansKR"; font-style:normal; font-weight:700; font-display:swap; src:url("../mall/assets/fonts/NotoSansKR-Bold.woff2") format("woff2"); }
/* Compact storefront: one 640px shop canvas and two optional desktop panels. */
:root { --compact-accent:#902d3e; --compact-ink:#171717; --compact-muted:#777; --compact-line:#e9e9e9; }
html:has(.compact-site),body:has(.compact-site) { min-width:0!important; width:100%!important; margin:0; background:#f5f5f5; }
.compact-site,.compact-site *,.compact-site *:before,.compact-site *:after { box-sizing:border-box; }
#wrapper.compact-site { display:grid; grid-template-columns:minmax(0,1fr) 640px minmax(0,1fr); width:100%; max-width:1440px; min-width:0!important; min-height:100vh; margin:0 auto; color:var(--compact-ink); font-family:"NotoSansKR","Noto Sans KR",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:14px; line-height:1.5; letter-spacing:-.035em; }
.compact-site a { color:inherit; text-decoration:none; }
.compact-site button,.compact-site input,.compact-site select { font:inherit; letter-spacing:inherit; }
.compact-site button { color:inherit; cursor:pointer; }
.compact-site button:disabled { cursor:default; }
.compact-site :focus-visible { outline:2px solid #716970; outline-offset:-2px; }
.compact-site [hidden] { display:none!important; }
.compact-site img { max-width:100%; }
.compact-site .mall-icon { display:inline-block; width:24px; height:24px; fill:currentColor; vertical-align:middle; flex:none; }
.compact-site .compact-blind { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.compact-shell { grid-column:2; min-width:0; width:100%; background:#fff; min-height:100vh; position:relative; }
.compact-skip { position:fixed; top:-100px; z-index:300; padding:12px 20px; background:#fff; }
.compact-skip:focus { top:8px; }
.compact-site .compact-icon-button { display:inline-flex; width:44px; height:44px; padding:9px; flex:none; align-items:center; justify-content:center; border:0; background:transparent; border-radius:0; }
.compact-site .compact-icon-button .mall-icon { width:27px; height:27px; }
#header.compact-header { position:relative; top:auto; width:100%; height:auto; min-width:0; padding:0; margin:0; background:#fff; border:0; z-index:20; }
.compact-header__bar { height:80px; display:grid; grid-template-columns:88px minmax(0,1fr) 88px; align-items:center; gap:6px; padding:0 12px; }
.compact-header__logo { justify-self:center; display:flex; align-items:center; justify-content:center; width:100%; max-width:200px; min-width:0; }
.compact-header__logo img { display:block; width:auto; max-width:100%; height:auto; max-height:48px; object-fit:contain; }
.compact-header__logo .mall-default-logo { font-size:25px; line-height:1.2; font-weight:800; text-align:center; overflow-wrap:anywhere; }
.compact-header__actions { display:flex; justify-content:flex-end; }
.compact-header__cart { position:relative; }
.compact-header__cart span { position:absolute; top:3px; right:1px; display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 4px; border-radius:999px; color:#fff; background:var(--compact-accent); font-size:10px; font-weight:600; line-height:1; letter-spacing:0; text-indent:0; text-align:center; }
.compact-nav-frame { position:relative; min-width:0; }
.compact-nav-arrow { display:none; }
.compact-nav { display:flex; gap:25px; align-items:center; width:100%; padding:0 20px; min-height:54px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; border-bottom:1px solid var(--compact-line); }
.compact-nav::-webkit-scrollbar { display:none; }
.compact-nav a { display:flex; align-items:center; min-height:54px; flex:none; font-size:17px; line-height:1.3; font-weight:750; white-space:nowrap; }
.compact-nav a[aria-current=page] { box-shadow:inset 0 -3px var(--compact-accent); }
.compact-nav .compact-nav__best { color:var(--compact-accent); }
.compact-nav .compact-nav__sale { color:#34455c; }
@media (min-width:641px) and (hover:hover) and (pointer:fine) {
    .compact-nav-frame::before,.compact-nav-frame::after { content:""; position:absolute; top:0; bottom:1px; width:52px; z-index:1; pointer-events:none; opacity:0; }
    .compact-nav-frame::before { left:0; background:linear-gradient(to right,#fff 35%,#fff0); }
    .compact-nav-frame::after { right:0; background:linear-gradient(to left,#fff 35%,#fff0); }
    .compact-nav-frame[data-can-previous=true]::before,.compact-nav-frame[data-can-next=true]::after { opacity:1; }
    .compact-site .compact-nav-arrow { position:absolute; top:0; bottom:1px; z-index:2; display:flex; align-items:center; justify-content:center; width:34px; margin:0; padding:0; border:0; border-radius:0; background:transparent; color:#555; }
    .compact-nav-arrow--previous { left:0; }
    .compact-nav-arrow--next { right:0; }
    .compact-site .compact-nav-arrow .mall-icon { width:18px; height:18px; }
    .compact-nav-arrow--previous .mall-icon { transform:scaleX(-1); }
}
#container.compact-container { position:relative; min-width:0!important; margin:0; min-height:280px; background:#fff; }
#wrapper.compact-site #container.compact-container { width:100%; max-width:none; padding:0; }
.compact-site #main { width:100%; max-width:100%; min-width:0; margin:0; padding:0; }
.compact-site .compact-side { min-width:0; padding:42px clamp(18px,3vw,40px); background:#f5f5f5; }
.compact-side--left { grid-column:1; grid-row:1; text-align:center; }
.compact-side--right { grid-column:3; grid-row:1; }
.compact-side__sticky { position:sticky; top:32px; }
.compact-side__logo { display:flex; align-items:center; justify-content:center; min-height:64px; margin:0 0 36px; }
.compact-side__logo img { max-width:100%; width:auto; height:auto; max-height:80px; object-fit:contain; }
.compact-side__logo .mall-default-logo { font-size:32px; font-weight:800; }
.compact-side h2 { margin:0 0 20px; font-size:clamp(20px,1.7vw,28px); line-height:1.5; letter-spacing:-.06em; font-weight:800; }
.compact-side p { margin:0 0 30px; color:#666; font-size:15px; line-height:1.8; }
.compact-side__image { display:block; width:100%; height:auto; margin:0 0 20px; border-radius:12px; }
.compact-side__search { position:relative; display:flex; width:100%; min-height:48px; margin:34px 0 18px; border:1px solid #aaa; background:#fff; border-radius:7px; overflow:visible; }
.compact-side__search input { width:100%; min-width:0; height:auto; min-height:46px; padding:8px 12px; border:0; border-radius:6px 0 0 6px; background:transparent; font-size:13px; }
.compact-site .compact-side__search input:focus { border:0; outline:0; box-shadow:none; }
.compact-side__search:focus-within { border-color:#666; }
.compact-side__search button { width:44px; height:46px; border:0; background:transparent; }
.compact-site [data-compact-search-history] { position:relative; }
.compact-site .compact-search-history { position:absolute; z-index:45; top:calc(100% + 6px); left:0; right:0; width:100%; max-height:230px; margin:0; padding:5px; overflow-y:auto; overscroll-behavior:contain; border:1px solid #dedade; border-radius:7px; background:#fff; box-shadow:0 6px 18px #29212912; text-align:left; }
.compact-site [data-compact-search-history] .compact-search-history__item { display:block; width:100%; min-height:40px; height:auto; margin:0; padding:9px 11px; border:0; border-radius:4px; background:#fff; color:#484047; font-size:13px; font-weight:400; line-height:1.6; letter-spacing:inherit; text-align:left; overflow-wrap:anywhere; }
.compact-site [data-compact-search-history] .compact-search-history__item:is(:hover,[aria-selected=true]) { background:#f5f3f4; color:#292329; }
.compact-side__links { display:flex; justify-content:center; gap:14px; flex-wrap:wrap; padding-bottom:28px; border-bottom:1px solid #ddd; font-size:13px; }
.compact-side__links a { display:flex; gap:5px; align-items:center; }
.compact-side__links .mall-icon { width:19px; height:19px; }
.compact-side .compact-side__help { margin:25px 0 0; font-size:13px; }
.compact-side__help strong,.compact-side__help span { display:block; }
.compact-side__help strong { color:#333; font-size:24px; font-weight:800; line-height:1.5; }
.compact-side--right h2 { margin-bottom:24px; color:var(--compact-accent); font-size:21px; }
.compact-side-products { margin:0; padding:0; list-style:none; display:grid; gap:16px; }
.compact-side__more { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:24px; min-height:24px; font-size:13px; }
.compact-site .compact-hero { position:relative; width:100%; overflow:hidden; background:#f5f3f0; }
.compact-hero__slides { position:relative; }
.compact-hero__slides[data-compact-ready] { transition:height 800ms ease; }
.compact-hero__slides[data-compact-ready] .compact-hero__slide { position:absolute; top:0; left:0; width:100%; opacity:0; z-index:1; pointer-events:none; transition:opacity 800ms ease; }
.compact-hero__slides[data-compact-ready] .compact-hero__slide.is-active { opacity:1; z-index:2; pointer-events:auto; }
.compact-hero__slide a,.compact-hero picture { display:block; }
.compact-hero__slide img { display:block; width:100%; height:auto; object-fit:contain; }
.compact-hero__controls { display:flex; align-items:center; justify-content:flex-end; gap:4px; min-height:38px; padding:0 14px; background:#fff; }
.compact-hero__controls button { display:inline-flex; align-items:center; justify-content:center; width:32px; height:34px; padding:7px; background:transparent; border:0; }
.compact-hero__controls .mall-icon { width:18px; height:18px; }
.compact-hero__controls [data-compact-prev] .mall-icon { transform:scaleX(-1); }
.compact-hero__pages { display:flex; flex:1; gap:5px; }
.compact-hero__pages button { width:22px; height:30px; padding:0; position:relative; }
.compact-hero__pages button:before { content:""; display:block; width:100%; height:2px; background:#d4d4d4; }
.compact-hero__pages button[aria-pressed=true]:before { background:var(--compact-accent); }
.compact-hero__count { font-size:11px; color:#777; margin:0 8px; font-variant-numeric:tabular-nums; }
.compact-section { padding:26px 20px 12px; }
.compact-section + .compact-section { margin-top:12px; }
.compact-section__heading { display:flex; align-items:center; justify-content:space-between; gap:6px; margin:0 0 17px; }
.compact-section__heading h2 { margin:0; display:flex; align-items:center; gap:7px; font-size:24px; line-height:1.35; font-weight:800; letter-spacing:-.06em; }
.compact-section--timesale .compact-section__heading h2 { color:var(--compact-accent); }
.compact-section__more { display:flex; align-items:center; justify-content:center; gap:3px; flex:none; width:auto; height:36px; font-size:12px; white-space:nowrap; }
.compact-site .compact-section__more > .mall-icon,.compact-site .compact-side__more > .mall-icon { width:18px; height:18px; }
.compact-section__intro { margin:-7px 0 18px; font-size:13px; line-height:1.6; color:#777; }
.compact-product-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:12px; row-gap:30px; list-style:none; padding:0; margin:0; width:100%; }
.compact-product-grid>li { min-width:0; width:auto; padding:0; margin:0; float:none; }
.compact-card { min-width:0; position:relative; margin:0; padding:0; }
.compact-card__link { display:block; min-width:0; }
.compact-card__thumb { width:100%; aspect-ratio:1; position:relative; overflow:hidden; border-radius:9px; background:#f5f5f5; }
.compact-card__thumb img { display:block; width:100%; height:100%; max-width:100%; object-fit:cover; }
.compact-card__thumb .mall-prd__empty { display:block; width:100%; height:100%; background:#f2f2f2; }
.compact-card__soldout { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:#ffffffad; color:#333; font-weight:700; font-size:17px; }
.compact-card__body { padding:12px 0 0; min-width:0; }
.compact-site .compact-card__name { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; height:2.8em; min-height:2.8em; margin:0 0 7px; font-size:17px; font-weight:600; line-height:1.4; word-break:keep-all; overflow-wrap:anywhere; color:#222; }
.compact-card__summary { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; margin:0 0 7px; font-size:12px; line-height:1.5; color:#888; }
.compact-card__before { display:block; font-size:15px; color:#a5a5a5; line-height:1.4; font-weight:500; }
.compact-card__price { display:flex; align-items:baseline; flex-wrap:wrap; gap:5px; line-height:1.3; }
.compact-card__price strong { font-size:23px; font-weight:800; color:#222; overflow-wrap:anywhere; }
.compact-card__price strong:empty { display:none; }
.compact-card__discount { color:var(--compact-accent); font-size:22px; font-weight:800; }
.compact-card--small .compact-card__link { display:grid; grid-template-columns:minmax(60px,94px) minmax(0,1fr); gap:12px; align-items:center; }
.compact-card--small .compact-card__body { padding:0; }
.compact-site .compact-card--small .compact-card__name { font-size:13px; line-height:1.5; height:3em; min-height:0; margin-bottom:4px; }
.compact-card--small .compact-card__summary { display:none; }
.compact-card--small .compact-card__before { font-size:12px; }
.compact-card--small .compact-card__price { gap:3px; }
.compact-card--small .compact-card__price strong,.compact-card--small .compact-card__discount { font-size:17px; }
.compact-story-grid { display:grid; gap:15px; }
.compact-story { min-width:0; }
.compact-story a { display:block; }
.compact-story img { display:block; width:100%; height:auto; border-radius:8px; }
.compact-story__body { padding:12px 0 8px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.compact-story__body h3 { margin:0; font-size:17px; font-weight:700; line-height:1.5; }
.compact-story__body span { font-size:12px; color:#777; white-space:nowrap; }
.compact-story__body .mall-icon { width:15px; height:15px; }
.compact-feature picture,.compact-feature img { display:block; width:100%; height:auto; object-fit:contain; }
.compact-feature__cta { display:flex; justify-content:space-between; align-items:center; padding:15px 0; font-size:14px; }
.compact-plan { margin-bottom:35px; }
.compact-plan>a { display:flex; align-items:center; gap:12px; min-height:74px; border-top:1px solid var(--compact-line); border-bottom:1px solid var(--compact-line); }
.compact-plan h2 { margin:0; flex:1; font-size:19px; font-weight:700; }
.compact-plan>a>.mall-icon:first-child { color:var(--compact-accent); width:30px; height:30px; }
.compact-catalog { padding:0 20px 38px; }
.compact-page-heading { min-height:76px; display:flex; align-items:center; gap:7px; margin:0 -10px; }
.compact-page-heading h1 { margin:0; flex:1; text-align:center; font-size:19px; font-weight:750; line-height:1.4; }
.compact-category-banner img { display:block; max-width:100%; height:auto; }
.compact-subcategories { display:flex; gap:23px; overflow-x:auto; padding:0 0 10px; margin-top:3px; scrollbar-width:none; }
.compact-subcategories a { flex:none; display:flex; min-height:38px; align-items:center; color:#888; font-weight:600; }
.compact-subcategories a[aria-current=page] { color:#222; font-weight:800; }
.compact-sortbar { display:flex; justify-content:space-between; align-items:center; gap:10px; margin:17px 0 18px; }
.compact-sortbar p { margin:0; color:#888; font-size:12px; }
.compact-sortbar strong { color:#222; }
.compact-sortbar select { max-width:55%; min-width:100px; height:38px; border:0; padding:3px 20px 3px 5px; background-color:#fff; font-size:12px; color:#555; }
.compact-search-result { font-size:15px; line-height:1.6; margin:8px 0 22px; }
.compact-empty { padding:65px 12px; color:#777; text-align:center; }
.compact-empty button { margin-top:16px; padding:10px 18px; background:#fff; border:1px solid #ddd; }
.compact-paging { text-align:center; margin-top:38px; }
.compact-paging .pg_wrap { margin:0; padding:0; }
.compact-paging a,.compact-paging strong { display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:36px; padding:0 6px; }
.compact-site .pg_wrap .pg_current { background-color:var(--compact-accent,#902d3e); color:#fff!important; border-color:var(--compact-accent,#902d3e)!important; }
#ft.compact-footer { width:100%; min-width:0; margin:28px 0 0; padding:0 24px 34px; background:#f8f8f8; color:#777; border-top:1px solid var(--compact-line); font-size:11px; text-align:left; clear:both; }
.compact-footer__links { display:flex; align-items:center; flex-wrap:wrap; gap:10px 18px; padding:20px 0; color:#555; border-bottom:1px solid #e4e4e4; }
.compact-footer__service { display:grid; grid-template-columns:1.1fr 1fr; gap:30px; padding:24px 0; border-bottom:1px solid #e4e4e4; }
.compact-footer__service h2 { margin:0 0 9px; font-size:12px; font-weight:700; color:#444; }
.compact-footer__service p { margin:4px 0; line-height:1.6; }
.compact-footer__service>div>a { display:block; margin:5px 0; }
.compact-footer__service .compact-footer__tel { font-size:23px; font-weight:800; line-height:1.3; color:#333; margin-bottom:10px; }
.compact-footer__company { margin-top:20px; }
.compact-footer__company summary { display:flex; align-items:center; gap:5px; color:#555; cursor:pointer; list-style:none; }
.compact-footer__company summary .mall-icon { width:14px; height:14px; }
.compact-footer__company p { margin:7px 0 0; line-height:1.7; overflow-wrap:anywhere; }
.compact-site .compact-top { position:fixed; right:max(calc((100vw - 640px)/2 + 16px),16px); bottom:calc(var(--compact-purchase-bar-height, env(safe-area-inset-bottom, 0px)) + 16px); z-index:35; display:flex; flex-direction:column; gap:0; padding:5px; border:1px solid #ddd; background:#ffffffed; border-radius:50%; width:44px; height:44px; }
.compact-site .compact-top .mall-icon { width:19px; height:19px; }
.compact-site .compact-top>span { font-size:9px; font-weight:700; line-height:1.1; letter-spacing:0; }
.compact-overlay { position:fixed; inset:0; z-index:220; display:flex; justify-content:center; }
.compact-overlay__backdrop { position:absolute; inset:0; width:100%; height:100%; border:0; background:#0005; }
.compact-overlay__sheet { position:relative; width:min(640px,100%); height:100%; background:#fff; padding:0 24px 40px; overflow:auto; overscroll-behavior:contain; }
.compact-overlay__head { display:flex; align-items:center; justify-content:space-between; min-height:78px; gap:10px; background:#fff; }
.compact-overlay__head h2 { margin:0; font-size:17px; font-weight:700; line-height:1.5; }
.compact-menu-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border-top:1px solid var(--compact-line); border-left:1px solid var(--compact-line); margin-top:7px; }
.compact-menu-grid a { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:107px; padding:13px 4px; gap:9px; border-right:1px solid var(--compact-line); border-bottom:1px solid var(--compact-line); text-align:center; font-size:12px; line-height:1.35; word-break:keep-all; }
.compact-menu-grid a .mall-icon { width:34px; height:34px; stroke:none; }
.compact-menu-grid a:hover { background:#faf5f5; }
.compact-menu-title { margin:35px 0 8px; font-size:18px; line-height:1.4; font-weight:800; }
.compact-menu-categories { border-top:1px solid #555; }
.compact-menu-categories__all { display:flex; align-items:center; gap:10px; min-height:59px; padding:10px 12px; font-weight:750; border-bottom:1px solid var(--compact-line); }
.compact-menu-categories__all>.mall-icon:last-child { margin-left:auto; }
.compact-menu-category { border-bottom:1px solid var(--compact-line); }
.compact-menu-category__row { display:flex; min-height:59px; align-items:center; padding:0 12px; }
.compact-menu-category__row>a { display:flex; flex:1; align-items:center; min-height:59px; font-size:16px; line-height:1.4; font-weight:700; }
.compact-menu-category__row>button { display:flex; align-items:center; justify-content:center; width:44px; height:44px; border:0; background:transparent; }
.compact-menu-category__row>button[aria-expanded=true] .mall-icon { transform:rotate(180deg); }
.compact-menu-category__children { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 15px; padding:0 14px 12px; background:#fafafa; }
.compact-menu-category__children a { display:flex; align-items:center; min-height:44px; padding:7px; color:#666; font-size:14px; }
.compact-menu-admin { display:block; margin-top:24px; font-size:13px; }
.compact-menu-admin .mall-icon { width:16px; height:16px; }
.compact-search-form { display:flex; align-items:center; margin:14px 0 35px; border-bottom:2px solid #222; }
.compact-search-form input { width:100%; min-width:0; height:54px; padding:10px 4px; background:#fff; border:0; font-size:18px; }
.compact-search-categories { display:flex; flex-wrap:wrap; gap:9px; padding:12px 0; }
.compact-search-categories a { padding:9px 14px; background:#f5f5f5; font-size:14px; border-radius:3px; }
/* Existing bodies still render native cards; the central canvas owns their grid. */
.compact-site .mall-product-grid { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:28px 12px; width:100%!important; max-width:100%; margin-left:0!important; margin-right:0!important; padding:0; list-style:none; }
.compact-site .mall-product-grid>li { width:auto!important; min-width:0; padding:0!important; margin:0!important; float:none!important; }
.compact-site .mall-product-grid .thumb,.compact-site .mall-prd__thumb { width:100%; height:auto!important; aspect-ratio:1; overflow:hidden; border-radius:8px; }
.compact-site .mall-product-grid .thumb img,.compact-site .mall-prd__thumb img { width:100%!important; height:100%!important; object-fit:cover; }
.compact-site .mall-product-grid .name,.compact-site .mall-prd__name { font-size:16px!important; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.compact-site .mall-product-grid .price strong,.compact-site .mall-prd__price strong { font-size:20px!important; color:var(--compact-accent)!important; }
@media (min-width:1100px) and (max-width:1279px) { .compact-side { padding-right:18px!important; padding-left:18px!important; } .compact-card--small .compact-card__link { grid-template-columns:66px minmax(0,1fr); gap:8px; } .compact-card--small .compact-card__price strong,.compact-card--small .compact-card__discount { font-size:14px; } .compact-side--right h2 { font-size:18px; } }
@media (max-width:1099px) { #wrapper.compact-site { display:block; max-width:640px; } .compact-side { display:none; } }
@media (max-width:640px) { .compact-header__bar { height:66px; grid-template-columns:78px minmax(0,1fr) 88px; padding:0 8px; } .compact-header__logo { max-width:170px; } .compact-header__logo img { max-height:42px; } .compact-header__logo .mall-default-logo { font-size:22px; } .compact-nav { min-height:50px; gap:23px; padding:0 15px; } .compact-nav a { min-height:50px; font-size:16px; } .compact-section { padding:23px 15px 10px; } .compact-section__heading { margin-bottom:14px; } .compact-section__heading h2 { font-size:21px; } .compact-product-grid { gap:28px 10px; } .compact-site .compact-card__name { font-size:16px; } .compact-card__body { padding-top:10px; } .compact-card__price strong,.compact-card__discount { font-size:21px; } .compact-card__before { font-size:14px; } .compact-card__summary { display:none; } .compact-catalog { padding:0 15px 32px; } .compact-page-heading { min-height:64px; } .compact-page-heading h1 { font-size:17px; } .compact-sortbar { margin:13px 0 16px; } .compact-story__body { display:block; } .compact-story__body span { display:block; margin-top:3px; } .compact-overlay__sheet { padding:0 15px 32px; } .compact-overlay__head { min-height:60px; } .compact-overlay__head h2 { font-size:14px; } .compact-menu-grid a { min-height:94px; font-size:11px; gap:8px; padding:11px 3px; } .compact-menu-grid a .mall-icon { width:32px; height:32px; } .compact-menu-title { font-size:17px; } #ft.compact-footer { padding:0 20px 28px; } .compact-footer__service { gap:16px; } .compact-footer__service .compact-footer__tel { font-size:21px; } }
@media (max-width:359px) { .compact-header__bar { grid-template-columns:58px minmax(0,1fr) 82px; gap:0; } .compact-header__actions .compact-icon-button { width:41px; padding:8px; } .compact-header__logo .mall-default-logo { font-size:19px; } .compact-section__heading h2 { font-size:19px; } .compact-card__price strong,.compact-card__discount { font-size:18px; } .compact-site .compact-card__name { font-size:14px; } .compact-menu-grid a { font-size:10px; min-height:88px; } .compact-menu-grid a .mall-icon { width:28px; height:28px; } .compact-footer__links { gap:9px 11px; } }
@media (prefers-reduced-motion:reduce) { .compact-site *, .compact-site *:before,.compact-site *:after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }
/* Reference review, iteration 2: matching the side-panel rhythm and header hierarchy. */
.compact-promotion { display:flex; min-height:55px; align-items:center; justify-content:center; gap:12px; padding:8px 16px; background:#6e2433; color:#fff!important; font-size:17px; line-height:1.4; font-weight:600; }
.compact-promotion strong { font-size:21px; font-weight:800; }
.compact-promotion .mall-icon { width:18px; height:18px; }
.compact-header__bar { height:66px; }
.compact-side.compact-side--left { padding-top:200px; padding-left:24px; padding-right:24px; }
.compact-side.compact-side--right { padding-top:145px; padding-left:20px; padding-right:20px; }
/* Desktop rails stay in the viewport; taller contents scroll within their own panel. */
@media (min-width:1100px) {
    #wrapper.compact-site .compact-side { position:fixed; top:0; bottom:0; width:min(400px,calc((100vw - 640px)/2)); padding-top:32px!important; padding-bottom:32px; z-index:10; }
    #wrapper.compact-site .compact-side--left { left:max(0px,calc((100vw - 1440px)/2)); }
    #wrapper.compact-site .compact-side--right { right:max(0px,calc((100vw - 1440px)/2)); }
    #wrapper.compact-site .compact-side__sticky { position:static; max-height:calc(100vh - 64px); max-height:calc(100dvh - 64px); overflow-y:auto; overscroll-behavior-y:contain; }
}
.compact-side__brand-card { min-height:540px; padding:30px 26px 28px; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#fff; border-radius:16px; }
.compact-side__brand-card .compact-side__logo { min-height:48px; margin:0 0 24px; width:100%; }
.compact-side__brand-card .compact-side__logo img { max-height:60px; }
.compact-side__brand-card h2 { margin:20px 0 15px; font-size:25px; line-height:1.45; }
.compact-side__brand-card p { margin:0; font-size:14px; }
.compact-side__story-photo { display:block; width:220px; max-width:100%; }
.compact-side__story-photo img { display:block; width:100%; height:auto; border-radius:10px; }
.compact-side__brand-card .compact-side__image { margin-bottom:0; max-height:310px; object-fit:contain; }
.compact-side__search { margin-top:24px; }
.compact-side--right .compact-side__sticky { padding:23px 19px 20px; background:#fff; border:1px solid #e5e5e5; border-radius:14px; }
.compact-card--small .compact-card__link { grid-template-columns:105px minmax(0,1fr); gap:12px; }
.compact-side-products { gap:16px; }
.compact-side--right h2 { margin-bottom:22px; }
.compact-home>.compact-section:first-of-type .compact-section__heading h2,.compact-home>.compact-section--best .compact-section__heading h2 { font-size:30px; }
.compact-hero__slide--editorial { position:relative; }
.compact-hero__slide--editorial>a,.compact-hero__slide--editorial picture { display:block; width:100%; height:auto; }
.compact-hero__slide--editorial img { height:auto; object-fit:contain; }
.compact-hero__caption { position:absolute; left:0; right:0; bottom:0; display:block; padding:24px 28px; color:#fff; background:#0008; }
.compact-hero__caption strong { display:block; max-width:530px; font-size:31px; font-weight:800; line-height:1.35; letter-spacing:-.06em; word-break:keep-all; }
.compact-hero__caption>span { display:flex; align-items:center; gap:5px; margin-top:9px; font-size:13px; line-height:1.4; }
.compact-hero__caption .mall-icon { width:15px; height:15px; }
.compact-middle-banner { padding:12px 20px; }
.compact-middle-banner img { display:block; width:100%; height:auto; }
.compact-site .mall-banner-slot:not(.mall-banner-slot-header_logo) picture,
.compact-site .mall-banner-slot:not(.mall-banner-slot-header_logo) img { display:block; width:100%; height:auto; object-fit:contain; }
.compact-footer__bank { padding:20px 0; border-bottom:1px solid #e4e4e4; }
.compact-footer__bank h2 { margin:0 0 8px; font-size:12px; font-weight:700; color:#444; }
.compact-footer__bank p { margin:4px 0; }
@media (min-width:1100px) and (max-width:1279px) { .compact-side__brand-card { padding-left:16px; padding-right:16px; } .compact-side__brand-card h2 { font-size:21px; } .compact-side--right .compact-side__sticky { padding:20px 12px; } .compact-card--small .compact-card__link { grid-template-columns:68px minmax(0,1fr); gap:8px; } }
@media (max-width:640px) { .compact-promotion { min-height:36px; gap:7px; font-size:12px; padding:5px 12px; } .compact-promotion strong { font-size:15px; } .compact-promotion .mall-icon { width:14px; height:14px; } .compact-home>.compact-section--best .compact-section__heading h2 { font-size:24px; } .compact-hero__caption { padding:14px 18px; } .compact-hero__caption strong { font-size:23px; } .compact-hero__caption>span { font-size:11px; margin-top:5px; } .compact-middle-banner { padding:10px 15px; } }
@media (max-width:359px) { .compact-hero__caption strong { font-size:20px; } .compact-home>.compact-section--best .compact-section__heading h2 { font-size:22px; } }

/* Mobile review: editorial-photo controls overlay the artwork; uploaded image copy stays clear. */
@media (max-width:640px) {
    .compact-hero:has(.compact-hero__slide--editorial:not([hidden])) .compact-hero__controls { position:absolute; z-index:2; left:0; right:0; bottom:0; min-height:28px; height:28px; padding:0 12px; color:#fff; background:#0007; }
    .compact-hero:has(.compact-hero__slide--editorial:not([hidden])) .compact-hero__controls button { height:28px; width:28px; padding:6px; color:#fff; }
    .compact-hero:has(.compact-hero__slide--editorial:not([hidden])) .compact-hero__controls .compact-hero__pages button { width:20px; padding:0; }
    .compact-hero:has(.compact-hero__slide--editorial:not([hidden])) .compact-hero__count { color:#fff; }
    .compact-hero:has(.compact-hero__slide--editorial:not([hidden])) .compact-hero__pages button:before { background:#ffffff66; }
    .compact-hero:has(.compact-hero__slide--editorial:not([hidden])) .compact-hero__pages button[aria-pressed=true]:before { background:#fff; }
    .compact-hero__caption { padding-bottom:48px; }
    .compact-home>.compact-section--best { padding-top:20px; }
}

/* Subpages use a concise native title bar; the full shopping header belongs to the homepage. */
.compact-subheader { position:relative; display:grid; grid-template-columns:88px minmax(0,1fr) 88px; align-items:center; height:60px; padding:0 8px; border-bottom:1px solid var(--compact-line); }
.compact-subheader__back { justify-self:start; }
.compact-subheader__title { min-width:0; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center; font-size:17px; line-height:1.4; font-weight:700; }
.compact-subheader__actions { display:flex; justify-content:flex-end; }
.compact-catalog>.compact-page-heading { display:block; min-height:0; height:0; margin:0; }
.compact-catalog>.compact-page-heading>a,.compact-catalog>.compact-page-heading>button { display:none; }
.compact-catalog>.compact-page-heading>h1 { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.compact-footer__links>button { border:0; padding:0; min-height:24px; background:transparent; color:inherit; font:inherit; }

@media (prefers-reduced-motion:reduce) { html:has(.compact-site) { scroll-behavior:auto!important; } }