:root{--red:#f20b2a;--muted:#a9a2a5}*{box-sizing:border-box}html,body{margin:0;background:#070405;color:#fff;font-family:Pretendard,"Noto Sans KR",Arial,sans-serif}body{overflow:hidden}
.ht-shell{position:relative;width:min(100%,430px);height:min(860px,calc(100vh - 48px));background:#090607;border:1px solid #39242a;border-radius:25px;box-shadow:0 32px 90px rgba(0,0,0,.7);overflow:hidden}.ht-scroll{height:100%;overflow-y:auto;overscroll-behavior-y:contain;padding-bottom:96px;scrollbar-width:none}.ht-scroll::-webkit-scrollbar,.ht-reel::-webkit-scrollbar{display:none}
.ht-header{height:64px;padding:0 20px;display:flex;align-items:center;gap:18px;background:rgba(7,4,5,.92);backdrop-filter:blur(14px);position:sticky;top:0;z-index:20;border-bottom:1px solid #281217}.ht-header h1{font-size:19px;margin:0}.ht-logo{width:104px;height:34px;background:url("../logo/maflex-wordmark.svg") left center/contain no-repeat;display:block}
.ht-hero{position:relative;height:420px;overflow:hidden}.ht-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,3,4,.06) 18%,rgba(6,3,4,.22) 48%,#090607 100%),linear-gradient(90deg,rgba(4,2,3,.68),transparent 72%)}.ht-hero img{width:100%;height:100%;object-fit:cover}.ht-hero-copy{position:absolute;z-index:2;left:22px;right:22px;bottom:31px}.ht-hero-copy span,.ht-section-head span,.ht-update span{color:#ff4964;font-size:11px;font-weight:900;letter-spacing:1.35px}.ht-hero-copy h2{font-size:29px;line-height:1.18;margin:9px 0 12px;letter-spacing:-1.3px}.ht-hero-copy p{margin:0;color:#ddd4d7;font-size:14px;line-height:1.65}
.ht-section{padding:27px 0 10px;border-top:8px solid #110a0c}.ht-section-head{display:flex;align-items:flex-end;justify-content:space-between;padding:0 20px 17px}.ht-section-head h2{font-size:24px;letter-spacing:-.9px;margin:5px 0}.ht-section-head p{font-size:13px;color:var(--muted);margin:0}.ht-section-head>b{color:#5b3a41;font-size:14px;padding-bottom:4px}
.ht-reel{display:flex;gap:10px;overflow-x:auto;padding:0 44px 17px;scroll-snap-type:x mandatory;scroll-padding-inline:44px;scroll-behavior:smooth;overscroll-behavior-x:contain;touch-action:pan-y;cursor:grab;scrollbar-width:none;user-select:none}.ht-reel.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}.ht-region-card{position:relative;flex:0 0 342px;height:282px;border-radius:15px;overflow:hidden;border:1px solid #402027;background:#171012;color:#fff;text-decoration:none;scroll-snap-align:center;scroll-snap-stop:always}.ht-region-card:after,.ht-small-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 28%,rgba(4,2,3,.25) 50%,rgba(4,2,3,.95) 100%)}.ht-region-card img,.ht-small-card img{width:100%;height:100%;object-fit:cover;pointer-events:none}.ht-region-card>div{position:absolute;z-index:2;left:19px;right:19px;bottom:18px}.ht-region-card span,.ht-small-card span{font-size:10px;color:#ff4964;font-weight:900;letter-spacing:1.2px}.ht-region-card h3{font-size:23px;margin:5px 0 7px;letter-spacing:-.8px}.ht-region-card p{font-size:13px;line-height:1.48;color:#d7cfd2;margin:0}
.ht-small-reel{padding-inline:52px}.ht-small-card{position:relative;flex:0 0 250px;height:174px;border:1px solid #3b2026;border-radius:13px;overflow:hidden;scroll-snap-align:center;scroll-snap-stop:always}.ht-small-card>div{position:absolute;z-index:2;left:16px;right:16px;bottom:14px}.ht-small-card h3{font-size:21px;margin:4px 0 0}
.ht-regions{padding-bottom:18px}.ht-region-group{padding:5px 0 23px}.ht-region-group+.ht-region-group{padding-top:23px;border-top:1px solid #241519}.ht-region-title{display:flex;align-items:center;gap:12px;padding:0 20px 14px}.ht-region-title>span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#2a0d14;color:#ff3656;font-size:11px;font-weight:900}.ht-region-title h3{margin:0 0 3px;font-size:19px;letter-spacing:-.6px}.ht-region-title p{margin:0;color:#8f8588;font-size:12px}.ht-region-group .ht-region-card{height:246px}.ht-region-group .ht-region-card h3{font-size:27px}.ht-region-group .ht-region-card p{max-width:275px}
.ht-guide-list{padding:0 20px 20px;display:grid;gap:10px}.ht-guide-list article{display:flex;gap:14px;align-items:flex-start;padding:17px 15px;background:linear-gradient(135deg,#191013,#0d090a);border:1px solid #351c22;border-radius:12px}.ht-guide-list article>b{flex:0 0 36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#2a0d14;color:#ff3656;font-size:12px}.ht-guide-list h3{font-size:16px;margin:1px 0 6px}.ht-guide-list p{font-size:12px;line-height:1.5;color:#a9a2a5;margin:0}.ht-update{margin:12px 16px 24px;padding:27px 21px;border:1px solid #402028;border-radius:15px;background:radial-gradient(circle at 92% 10%,rgba(242,11,42,.24),transparent 36%),#12090c}.ht-update h2{font-size:22px;line-height:1.32;margin:8px 0 10px}.ht-update p{font-size:13px;line-height:1.6;color:#b9afb2;margin:0}
@media(min-width:1051px){.ht-header{height:72px}.ht-hero{height:440px}}@media(max-width:1050px){.ht-shell{width:100%;height:100svh;border:0;border-radius:0;box-shadow:none}.ht-region-card{flex-basis:calc(100vw - 88px);max-width:342px}}
.ht-header-search{margin-left:auto;padding:8px 10px;border:1px solid #453036;border-radius:9px;background:#171012;color:#fff;font-size:11px;text-decoration:none}