*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:#000;color:#fff;font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",Arial,sans-serif}
button{cursor:pointer;font-family:inherit}
.header{height:84px;background:#000;position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid #111}
.brand{position:absolute;left:50%;transform:translateX(-50%);font-size:28px;letter-spacing:6px;font-weight:800;color:#fff;text-decoration:none}
.hamburger{width:34px;background:none;border:0}
.hamburger span{display:block;height:2px;background:#fff;margin:6px 0;border-radius:2px}
.icons{display:flex;gap:28px;align-items:center}
.icons button{position:relative;background:none;border:0;color:white;font-size:42px;line-height:1}
.icons i{position:absolute;right:-9px;top:-4px;background:#fff;color:#000;border-radius:50%;font-size:12px;font-style:normal;width:18px;height:18px;display:grid;place-items:center}
.hero{position:relative;background:#000}
.hero img{width:100%;height:min(42vw,540px);min-height:300px;object-fit:contain;display:block;background:#000}
.dots{position:absolute;bottom:24px;left:0;right:0;display:flex;gap:13px;justify-content:center}
.dots b{width:12px;height:12px;background:#555;border-radius:50%}
.dots b:first-child{background:#fff}
.best{padding:26px 24px 36px;background:#000}
.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}
.section-head h1{font-size:28px;font-weight:400;letter-spacing:-1px}
.section-head button{background:#080808;border:1px solid #333;color:#fff;border-radius:7px;padding:14px 24px;font-size:18px}
.section-head span{font-size:28px;vertical-align:-2px;margin-left:8px}
.products{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.product{position:relative;border:1px solid #222;background:linear-gradient(#0a0a0a,#050505);border-radius:8px;padding:0 0 22px;text-align:center;overflow:hidden;transition:.25s}
.product:hover{transform:translateY(-4px);border-color:#555}
.product img{width:100%;aspect-ratio:1/1.18;object-fit:cover;display:block;margin-bottom:18px}
.product h2{font-size:18px;font-weight:400;margin-bottom:6px}
.product p{font-size:16px;color:#f2f2f2}
.heart{position:absolute;right:12px;top:12px;background:transparent;border:0;color:#fff;font-size:34px;z-index:2}
.contact{padding:58px 28px 100px;text-align:center;border-top:1px solid #151515}
.contact h2{font-size:38px;letter-spacing:8px;margin-bottom:14px}
.contact p{color:#bbb;margin-bottom:24px}
.contact button,.modal-text button{background:#fff;color:#000;border:0;border-radius:999px;padding:15px 32px;font-weight:800;font-size:17px}
.menu{position:fixed;inset:0;background:#000;z-index:70;transform:translateX(-100%);transition:.3s ease;padding-bottom:80px}
.menu.active{transform:translateX(0)}
.menu-top{height:84px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #222;position:relative}
.menu-top button{position:absolute;left:25px;background:none;border:0;color:#fff;font-size:46px}
.menu-top strong{font-size:28px;letter-spacing:6px}
.menu a{display:block;color:#fff;text-decoration:none;font-size:24px;font-weight:300;padding:18px 32px;border-bottom:1px solid #111}
.modal,.popup{display:none;position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:90;align-items:center;justify-content:center;padding:18px}
.modal.active,.popup.active{display:flex}
.modal-card,.popup>div{background:#101010;border:1px solid #333;border-radius:18px;width:min(520px,100%);overflow:hidden;position:relative}
.modal-card img{width:100%;max-height:62vh;object-fit:cover}
.x,.popup button{position:absolute;right:12px;top:10px;background:rgba(0,0,0,.6);color:#fff;border:0;border-radius:50%;width:44px;height:44px;font-size:32px}
.modal-text{padding:22px}
.modal-text h2{font-size:30px;font-weight:500}
.modal-text p{font-size:21px;margin:8px 0 22px}
.popup>div{padding:65px 24px 30px}
.popup h2{font-size:28px;margin-bottom:18px}
.popup input{width:100%;padding:16px;background:#000;border:1px solid #444;border-radius:12px;color:#fff;font-size:17px}
.popup p{font-size:18px;color:#ccc}
@media(max-width:900px){
  .header{height:56px;padding:0 12px}
  .brand{font-size:18px;letter-spacing:3px}
  .hamburger{width:24px}
  .hamburger span{height:1.5px;margin:4px 0}
  .icons{gap:14px}
  .icons button{font-size:20px}
  .hero img{height:42vh;min-height:260px}
  .dots{bottom:14px}
  .dots b{width:8px;height:8px}
  .best{padding:18px 10px 26px}
  .section-head{margin-bottom:14px}
  .section-head h1{font-size:18px}
  .section-head button{font-size:11px;padding:8px 10px;border-radius:6px}
  .section-head span{font-size:16px}
  .products{grid-template-columns:repeat(2,1fr);gap:10px}
  .product{border-radius:6px;padding-bottom:12px}
  .product img{margin-bottom:10px}
  .product h2{font-size:13px;margin-bottom:4px}
  .product p{font-size:12px}
  .heart{font-size:22px;right:8px;top:8px}
  .contact{padding:34px 16px 60px}
  .contact h2{font-size:20px;letter-spacing:3px}
  .contact p{font-size:13px}
  .contact button,.modal-text button{padding:11px 18px;font-size:13px}
  .menu a{font-size:20px;padding:16px 24px}
}

@media (max-width: 1200px){.products{grid-template-columns:repeat(3,1fr)} }
@media (max-width: 768px){.hero img{height:420px;object-fit:cover}.products{grid-template-columns:repeat(2,1fr)} .brand{font-size:22px} }