.product, .product *{
  box-sizing:border-box;
}

body {
    margin: 0;
}

/* 히어로 배너 */
.product-hero {
  position: relative;
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(rgba(10, 10, 20, 0.55), rgba(10, 10, 20, 0.55)),
    url("/image/main_vs2.jpg") center / cover no-repeat;
  padding: 40px 20px;
  text-align: center;
  margin-top: 126px;
}
 
.product-title {
  color: #ffffff;
  font-size: 45px;
  font-weight: bold;
  margin: 0;
  line-height: 1.4;
  word-break: keep-all;
  overflow-wrap: break-word;
}
 
.product{
  color:#14141C;
  padding:64px 24px 100px;
}
 
.product .wrap{
    max-width:1180px;margin:0 auto;
}
 
.product .eyebrow{
  display:inline-block;
  background:#E85A1B;
  color:#FFFFFF;
  font-weight: 700;
  font-size:13px;
  text-transform:uppercase;
  padding:6px 14px;
  border-radius:3px;
  margin-bottom:22px;
}
 
.product h1{
    font-size:clamp(28px,4vw,42px);
    margin:0 0 14px;
    color:#14141C;
}

.product h1 .hl{
    color:#E85A1B;
}
 
.product .lede{
    color:#6B7280;
    font-size:17px;
    max-width:1180px;
    margin:0 0 56px;
}
 
.product section{
    margin-bottom:76px;
}

.product section:last-child{
    margin-bottom:0;
}
 
.product .section-label{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:8px;
}

.product .section-label .idx{
    font-size:13px;
    color:#E85A1B;
    text-transform:uppercase;
}

.product .section-label .line{
    flex:1;
    height:1px;
    background:#E7E7EC;
}
 
.product h2.section-title{
    font-size:25px;
    color:#14141C;
    margin:0 0 8px;
}
.product .section-desc{
    font-size:15px;
    color:#6B7280;
    margin:0 0 28px;
    max-width:1180px;
}
 
/* Tech cards */
.product .tech-grid{
    display:flex;
    flex-direction:column;
    gap:24px;
}

.product .tech-card{
    border:1px solid #E7E7EC;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 1px 3px rgba(20,20,28,0.06), 0 1px 2px rgba(20,20,28,0.04);
}

.product .tech-head{
    padding:22px 26px 18px;
    border-bottom:1px solid #E7E7EC;
}

.product .tech-head .n{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    border-radius:50%;
    background:rgba(232,90,27,0.10);
    color:#E85A1B;
    font-size:14px;
    margin-bottom:14px;
}

.product .tech-head h3{
    font-size:20px;
    margin:0 0 8px;
    color:#14141C;
}

.product .tech-head p{
    font-size:15px;
    color:#3A3F4B;
    margin:0;
}

.product .tech-body{
    padding:20px 26px 24px;
    background:#FAFAFB;
}

.product .tech-body p{
    font-size:15px;
    color:#3A3F4B;
    margin:0 0 14px;
}

.product .tech-body p:last-child{
    margin-bottom:0;
}

.product .tech-specs{
    display:flex;
    border:1px solid #E7E7EC;
    border-radius:10px;
    overflow:hidden;
    background:#FFFFFF;
    margin-top:4px;
}

.product .tech-specs .spec{
    flex:1;
    padding:16px 12px;
    text-align:center;
    border-right:1px solid #E7E7EC;
}

.product .tech-specs .spec:last-child{
    border-right:none;
}

.product .tech-specs .spec .num{
    font-size:18px;
    color:#14141C;
    display:block;
}

.product .tech-specs .spec .label{
    font-size:12px;
    color:#6B7280;
    margin-top:5px;
    display:block;
}
 
.product .pull{
    border-left:3px solid #0E9E7A;
    background:linear-gradient(90deg, rgba(14,158,122,0.06), rgba(14,158,122,0));
    padding:14px 20px;
    font-size:15px;
    font-style:italic;
    color:#3A3F4B;
    border-radius:0 6px 6px 0;
    margin:14px 0 0;
}

.product .pull.orange{
    border-left-color:#E85A1B;
    background:linear-gradient(90deg, rgba(232,90,27,0.06), rgba(232,90,27,0));
}
 
.product .mini-steps{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:6px;
  margin:20px 0;
  padding:16px;
  background:#FFFFFF;
  border:1px solid #E7E7EC;
  border-radius:10px;
}

.product .mstep{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    min-width:56px;
}

.product .mstep .mnum{
  width:26px;
  height:26px;
  border-radius:50%;
  background:rgba(232,90,27,0.10);
  color:#E85A1B;
  font-size:12px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.product .mstep .mlabel{
    font-size:12px;
    color:#3A3F4B;
}

.product .marrow{
    color:#6B7280;
    font-size:13px;
    padding-bottom:14px;
}
 
.product .learn-more{
  display:inline-block;
  margin-top:16px;
  font-size:14px;
  color:#E85A1B;
  text-decoration:none;
}
 
/* Logo placeholder */
.product .logo-slot{
  display:flex;
  align-items:center;
  gap:14px;
  border:1px dashed #E7E7EC;
  border-radius:10px;
  padding:14px 18px;
  margin-bottom:28px;
  background:#FAFAFB;
}

.product .logo-slot .box{
  width:44px;
  height:44px;
  border-radius:8px;
  border:1px dashed #6B7280;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  color:#6B7280;
  text-align:center;
  flex-shrink:0;
}

.product .logo-slot .txt{
    font-size:13px;
    color:#6B7280;
}

.product .logo-slot .txt b{
    color:#14141C;
}
 
/* Platform cards */
.product .platform-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(420px,1fr));
    gap:24px;
}

.product .platform-card{
    border:1px solid #E7E7EC;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 1px 3px rgba(20,20,28,0.06), 0 1px 2px rgba(20,20,28,0.04);
    display:flex;
    flex-direction:column;
}

.product .platform-card.hl{
    border-color:#E85A1B;
}

.product .platform-thumb{
    padding:20px 26px;
    border-bottom:1px solid #E7E7EC;
    display:flex;
    align-items:center;
    gap:14px;
}

.product .img-slot {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  flex-shrink: 0;
  overflow: hidden;
  border: none;
  padding: 0;
  background: transparent;
}

.product .img-slot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product .platform-thumb-text .tag{
    font-size:12px;
    text-transform:uppercase;
    color:#0E9E7A;
    background:rgba(14,158,122,0.10);
    padding:3px 9px;
    border-radius:20px;
    display:inline-block;
    margin-bottom:6px;
}

.product .platform-thumb-text .tag.new{
    color:#E85A1B;
    background:rgba(232,90,27,0.10);
}

.product .platform-thumb-text h3{
    font-size:20px;
    margin:0;
    color:#14141C;
}

.product .platform-body{
    padding:20px 26px 24px;
    flex:1;
}

.product .platform-body p{
    font-size:15px;
    color:#3A3F4B;
    margin:0 0 14px;
}

.product .platform-body ul{
    margin:0 0 14px;
    padding-left:18px;
}

.product .platform-body li{
    font-size:14px;
    color:#3A3F4B;
    margin-bottom:6px;
}

.product .platform-body li:last-child{
    margin-bottom:0;
}

.product .platform-footer{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    padding:14px 26px;
    border-top:1px solid #E7E7EC;
    background:#FAFAFB;
}

.product .badge{
    font-size:12px;
    color:#14141C;
    background:#FFFFFF;
    border:1px solid #E7E7EC;
    padding:5px 11px;
    border-radius:20px;
}

.product .badge.free{
    color:#0E9E7A;
    border-color:rgba(14,158,122,0.3);
}

.product .badge.orange{
    color:#E85A1B;
    border-color:rgba(232,90,27,0.3);
}
 
/* Format cards */
.product .format-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
    gap:24px;
}

.product .format-card{
    border:1px solid #E7E7EC;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 1px 3px rgba(20,20,28,0.06), 0 1px 2px rgba(20,20,28,0.04);
    display:flex;
    flex-direction:column;
}

.product .format-image-slot{
  border-bottom:1px solid #E7E7EC;
  display:flex;
  height: 250px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  background:repeating-linear-gradient(135deg, rgba(20,20,28,0.02) 0 2px, transparent 2px 14px), #F5F5F7;
  color:#6B7280;
  font-size:12px;
  text-align:center;
}

.product .format-card .format-image-slot img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.product .format-image-slot .mark{
    font-size:13px;
    color:rgba(20,20,28,0.35);
}

.product .format-body{
    padding:20px 22px 8px;
    flex:1;
}

.product .format-body .tag{
    font-size:12px;
    text-transform:uppercase;
    color:#0E9E7A;
    background:rgba(14,158,122,0.10);
    padding:4px 10px;
    border-radius:20px;
    display:inline-block;
    margin-bottom:10px;
}

.product .format-body h3{
    font-size:19px;
    margin:0 0 8px;
    color:#14141C;
}

.product .format-body p{
    font-size:14px;
    color:#3A3F4B;
    margin:0 0 14px;
}

.product .scale-row{
  display:flex;
  border-top:1px solid #E7E7EC;
}

.product .scale-row .s{
  flex:1;
  padding:12px 8px;
  text-align:center;
  border-right:1px solid #E7E7EC;
}

.product .scale-row .s:last-child{
    border-right:none;
}

.product .scale-row .s .v{
    font-size:14px;
    color:#14141C;
    display:block;
}

.product .scale-row .s .k{
    font-size:11px;
    color:#6B7280;
    text-transform:uppercase;
    margin-top:3px;
    display:block;
}

.product .format-footer{
    padding:12px 22px 18px;
}

.product .format-footer .badge{
    font-size:11px;
    padding:4px 9px;
}
 
@media (max-width:900px){
  .product .platform-grid{grid-template-columns:1fr;}
}