/* Main reference: left phone content (432px wide), normalized to 390px.
   Right phone product cards are separately normalized from its 354px content.
   No flattened UI: text, buttons and indicators are independent DOM elements. */
html{scrollbar-width:none}html::-webkit-scrollbar{display:none}
body{font-family:'GXJ Serif','Noto Serif TC','Noto Serif SC',serif}
.logo>span{font-family:'GXJ Serif',serif;font-weight:700;font-size:26px;letter-spacing:2px}
.announcement{font-family:'GXJ Serif',serif;font-size:12px;letter-spacing:.2px}
.hero{background:#f5e4c7}
.hero-photo{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-copy{inset:0;pointer-events:none}
.hero-copy h1{position:absolute;left:5.4%;top:11.6%;font-family:'GXJ Serif',serif;font-size:clamp(30px,8.46vw,38px);font-weight:700;line-height:1.3;letter-spacing:1.4px}
.hero-copy p{position:absolute;left:5.4%;top:44.5%;font-family:'GXJ Serif',serif;font-size:15px;line-height:1.5;margin:0;letter-spacing:.7px}
.hero-copy .gold{position:absolute;left:5.4%;top:57.54%;pointer-events:auto;font-family:'GXJ Serif',serif;width:174px;height:35px;min-height:35px;padding:0 10px;font-size:14px;letter-spacing:.2px;gap:9px}
.gold{background:linear-gradient(110deg,#d0a04a,#916019);border-color:#ae7b28}
.hero-dots{left:46.5%;bottom:7px;background:none;padding:0}
.hero-dots button{width:16px;height:24px;min-height:24px}
.hero-dots button:after{height:7px;width:7px;background:#c5b38c}
.hero-dots button.chosen:after{background:#fff}
.brands-section{padding-top:6px;padding-bottom:8px}
.section-title{margin-bottom:6px}
.section-title h2{font-family:'GXJ Serif',serif;font-weight:700;font-size:22px;letter-spacing:1px}
.brand-grid{gap:8px}
.brand-card strong{font-family:'GXJ Serif',serif;font-size:14px;font-weight:600}
.brand-card>span:not(.art){font-family:'GXJ Serif',serif;font-size:12px}
.product-card{padding:4px}
.product-photo{aspect-ratio:153/84!important}
.product-photo img{height:1347.3684%}
.product-card:nth-child(n+3) .product-photo img{height:1462.8571%}
.badge{width:37%;min-height:25px;height:25px;left:4px;top:4px;display:flex;align-items:center;justify-content:center;border-radius:4px 0 4px 0;font-size:11px;padding:2px 3px;letter-spacing:.4px}
.badge.pink{width:23%}
.product-action{font-family:'GXJ Serif',serif;font-size:11px;min-height:30px;letter-spacing:.4px}
.bottom-nav{background:#fffdf8;height:54px}
.bottom-nav svg{width:22px;height:22px}
#app{padding-bottom:64px}
.bottom-nav span{font-family:'GXJ Serif',serif}
@media(min-width:720px){
 .hero{aspect-ratio:2.6}
 .hero-photo{left:35%;width:65%;object-position:50% 60%;mask-image:linear-gradient(90deg,transparent,#000 24%)}
 .hero-copy h1{left:7%;top:17%;font-size:clamp(32px,4vw,42px);letter-spacing:2px}
 .hero-copy p{left:7%;top:49%;font-size:18px;margin:0}
 .hero-copy .gold{left:7%;top:66%;width:210px;height:44px;font-size:16px}
 .hero-dots{left:64%}
 .brands-section{padding-top:20px;padding-bottom:20px}
 .brand-grid{gap:12px}
 .brand-card strong{font-size:16px}
 .badge{height:30px;min-height:30px;font-size:12px}
 .product-action{min-height:40px;font-size:13px}
 .bottom-nav{height:68px}
 .bottom-nav svg{width:23px;height:23px}
 #app{padding-bottom:76px}
}
.hero-reference-photo{position:absolute;inset:0;mask-image:url("assets/hero-reference-mask.svg");mask-size:100% 100%;mask-mode:luminance;pointer-events:none;background:transparent}@media(min-width:720px){.hero-reference-photo{display:none}}
.announcement svg{width:15px;height:15px;vertical-align:-2px}.product-copy{font-size:12px;line-height:1.3}.product-copy>span{display:block;font-size:10.5px;line-height:1.25}.product-copy h3{line-height:1.25}.product-action{height:26px;min-height:26px}.composed-photo{display:block;position:relative;width:100%;overflow:hidden}.composed-photo .clean-photo{position:absolute;inset:0}.clean-photo{aspect-ratio:153/84!important;display:block;position:relative;overflow:hidden}.clean-photo img{position:absolute!important;width:200%!important;height:200%!important;transform:none!important;max-width:none!important}.original-photo{position:absolute;inset:0;mask-image:url("assets/product-tag-mask.svg");mask-size:100% 100%;mask-mode:luminance}.original-photo>.art{position:absolute;inset:0;aspect-ratio:auto!important}.original-photo img{height:var(--reference-image-height)!important}.badge{z-index:1}@media(min-width:720px){.product-action{height:40px;min-height:40px}}
.detail-grid .clean-photo.detail-photo{aspect-ratio:153/84!important;position:relative;top:auto}