/* ===== 초기화 ===== */
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Noto Sans KR',sans-serif;line-height:1.6;background:#fff;margin: 0px;padding: 0px;overflow-x: hidden;}
html{overflow-x: hidden;}

/* ===== 고정 헤더 ===== */
header{position: fixed;top:0;left:0;width:100%;background:#fff;box-shadow: 0px 0px 11px #6f6f6f;z-index:1000;}
.nav{display:flex;justify-content:space-between;align-items:center;padding:20px;position: relative;}
.menu{display:flex;gap:0;list-style:none;margin:0;padding:0;}
.menu li{position:relative;}
.menu li+li::before{content:"|";color:#0078e7;margin:0 20px;}
.menu li a{color:#0078e7;text-decoration:none;font-weight:600;padding:8px 12px;transition:background-color .3s ease;border-radius:4px;}
.menu li a:hover{background-color:rgba(0,120,231,0.1);}
.menu li a.active {color: #00428b;border-bottom: 2px solid #00428b;padding-bottom: 3px;}

/* ===== 본문 콘텐츠 ===== */
.content{padding-top:100px;background:#f0f0f0;color:#000000;text-align:center;padding-bottom:100px;}
.product-image {
  display: block;
  width: 100vw;           /* 가로 여백 없이 브라우저 너비 전체 */
  height: 500px;          /* PC에서 보기 좋은 높이 */
  object-fit: cover;      /* 잘림 없이 꽉 차게 */
  margin: 0;              /* 헤더와 붙게 */
  border-radius: 0;       /* 배너 느낌으로 모서리 없음 */
}
.product-description{margin-top:100px;font-family:'Noto Sans KR',sans-serif;font-size:20px;line-height:1.9;color:#000000;max-width:800px;margin-left:auto;margin-right:auto;text-align:center;}

/* ===== 섹션1 ===== */
.feature-section{text-align:center;padding-top:150px;padding-bottom:150px;background:#ffffff;}
.feature-image{width:800px;max-width:100%;height:auto;display:block;margin:0 auto;border-radius: 15px;}
.feature-text{margin-top:50px;color:#333;}
.feature-text h2{font-size:28px;font-weight:700;margin-bottom:50px;}
.feature-text p{font-size:20px;line-height:1.8;max-width:800px;margin:0 auto;white-space:normal;}

/* ===== 섹션2 ===== */
.feature-section.two-column{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:40px;padding:200px 50px;background:#fff;}
.feature-box{flex:0 0 400px;height:400px;display:flex;align-items:center;justify-content:center;}
.square-image{width:100%;height:100%;object-fit:cover;border:none;border-radius:12px;transition:.3s ease;transform:scale(1);}
.square-image:hover{transform:scale(1.03);box-shadow:0 8px 20px rgba(0,0,0,0.15);}
.side-text{flex:1;max-width:600px;text-align:left;color:#333;}
.side-text h2{font-size:28px;margin-bottom:15px;}
.side-text p{font-size:16px;line-height:1.8;white-space:normal;}

/* ===== 섹션3 ===== */
.highlight-banner {background: #007aff;color: #fff;text-align: center;display: flex;flex-direction: column;justify-content: center;align-items: center;min-height: 240px;padding: 40px 20px;}
.highlight-text {font-family: "Black Han Sans";font-size: clamp(32px, 6vw, 75px);font-weight: 400;}
.btn-wrap{margin-top:12px;}

/* ===== 섹션 4 ===== */
.need-section{text-align:center;padding:100px 20px;background:#f9f9f9;}
.need-title{font-size: 1.875rem;font-weight:800;margin-bottom: 3.75rem;}
.need-grid {display: grid;grid-template-columns: repeat(2, 1fr);max-width: 800px;margin: 0 auto;gap: 20px;}
.need-item{position:relative;width:100%;aspect-ratio:1;overflow:hidden;border-radius:8px;}
.need-item img{width:100%;height:100%;object-fit:cover;display:block;}
.need-caption{position:absolute;bottom:0;left:0;width:100%;padding:20px;color:#fff;font-size:30px;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,0.7);background:linear-gradient(to top,rgba(0,0,0,0.6),transparent);}

/* ===== 섹션 4 hover 효과 ===== */
.need-item img{transition:transform .4s ease,filter .3s ease;}
.need-item:hover img{transform:scale(1.05);filter:brightness(.9);}
.need-item{transition:box-shadow .3s ease;}
.need-item:hover{box-shadow:0 12px 24px rgba(0,0,0,.2);}

/* ===== 섹션 5 ===== */
.faq-section{padding:100px 20px;max-width:800px;margin:0 auto;text-align: left;}
.faq-title{text-align:center;font-size:30px;font-weight:800;margin-bottom:60px;}
.faq-item{border-radius:10px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.05);margin-bottom:20px;overflow:hidden;transition:.3s;}
.faq-item summary{cursor:pointer;padding:20px 24px;font-size:16px;font-weight:700;list-style:none;display:flex;align-items:center;justify-content:space-between;background:#f9f9f9;}
.faq-item summary::after{content:"+";font-weight:bold;font-size:20px;transition:.2s;}
.faq-item[open] summary::after{content:"−";}
.faq-answer{padding:20px 24px;font-size:15px;line-height:1.7;border-top:1px solid #eee;background:#fcfcfc;text-align: center;}
.q-icon{color:#007aff;font-weight:800;margin-right:10px;}
.faq-item summary:hover{background:#eef9ff;color: #007aff;}
.faq-item summary:hover .q-icon {color: #005fc1;}
.faq-button-wrap {text-align: center;}

/* ===== 섹션 6 ===== */
.guide-section{padding:120px 20px;background:#f9f9f9;}
.guide-inner {display: flex;flex-wrap: wrap;gap: 40px;max-width: 1000px;margin: 0 auto;align-items: flex-start;flex-direction: row;}
.guide-text {flex: 1 1 0;min-width: 0;}
.guide-text h2{font-size:26px;font-weight:800;margin-bottom:20px;}
.guide-text p{font-size:15px;line-height:1.8;color:#333;white-space: normal;}
.guide-box {width: 100%;max-width: 500px;margin: 0 auto;background: #fff;padding: 30px;border-radius: 12px;box-shadow: 0 6px 12px rgba(0, 0, 0, 0.05);text-align: center;}
.guide-box h3{font-size:18px;margin-bottom:20px;text-align: center;}
.guide-box ul{list-style:none;padding:0;margin:0 0 30px 0;text-align: center;}
.guide-box ul li{margin-bottom:12px;}
.guide-box ul li a{text-decoration:none;color:#007aff;font-weight:600;text-align: center;}
.guide-banner {width: 100%;height: auto;margin-bottom: 30px;border-radius: 10px;}

/* ===== 섹션 2-1 ===== */
.intro-section{margin-top:100px;padding:120px 0px;text-align:center;background:#f9f9f9;}
.intro-title{font-size:50px;font-weight:800;margin-bottom:20px;color:#111;}
.intro-sub{font-size:30px;color:#000000;margin-bottom:40px;}
.intro-image img{max-width:100%;height:auto;border-radius:10px;box-shadow:0 4px 10px rgba(0,0,0,.1);}
.intro-desc{max-width:800px;margin:40px auto 0;text-align:center;color:#444;font-size:15px;line-height:1.8;}

/* ===== 섹션 2-2 ===== */
.step-section{padding:120px 20px;background:#fff;text-align:center;}
.step-title{font-size:26px;font-weight:800;margin-bottom:60px;}
.step-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2px;max-width:1000px;margin:0 auto;}
.step-box h3{font-size:18px;font-weight:700;margin-bottom:10px;}
.step-box p{font-size:14px;line-height:1.7;color:#555;}
.step-box img{width:100%;height:auto;border-radius:12px;transition:transform .4s ease,box-shadow .3s ease,filter .3s ease;}
.step-box:hover img{transform:scale(1.05);box-shadow:0 12px 24px rgba(0,0,0,.2);filter:brightness(.95);}

/* ===== 섹션 2-3 ===== */
.cta-section{padding:120px 20px;background:#f0f8ff;text-align:center;}
.cta-title{font-size:28px;font-weight:800;color:#111;margin-bottom:40px;line-height:1.5;}
.cta-points{list-style:none;padding:0;margin:0 auto 40px;max-width:500px;font-size:16px;line-height:2;color:#333;}
.cta-points li::before{content:"✔ ";color:#007aff;font-weight:bold;}
.buy-button.large{display:inline-block;padding:16px 48px;background:#007aff;color:#fff;font-size:18px;font-weight:bold;border-radius:8px;text-decoration:none;transition:.3s;}
.buy-button.large:hover{background:#00428b;color:#ffffff;}
.cta-lead{font-size:34px;color:#000000;margin-bottom:30px;font-weight:600;}
.cta-image img{width:100%;max-width:800px;height:auto;border-radius:12px;margin-bottom:40px;box-shadow:0 4px 12px rgba(0,0,0,.1);}

/* ===== 섹션 3-1 ===== */
.intro-section{margin-top:100px;padding-top:10px;text-align:center;background:#f9f9f9;}
.intro-image{margin-top:40px;}
.intro-image img{max-width:100%;height:auto;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.1);margin-bottom:40px;}

/* ===== 섹션 3-2 ===== */
.top-products-section{padding:100px 20px;text-align:center;background:#fff;}
.top-title{font-size:26px;font-weight:800;margin-bottom:60px;}
.top-product-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:30px;max-width:1000px;margin:0 auto;}
.top-card{border:1px solid #ddd;border-radius:12px;padding:16px;transition:.3s;box-shadow:0 2px 6px rgba(0,0,0,.05);}
.top-card:hover{box-shadow:0 6px 16px rgba(0,0,0,.15);transform:translateY(-4px);}
.top-card img{width:100%;height:auto;border-radius:8px;margin-bottom:8px;}
.top-card h3{font-size:17px;margin-bottom:6px;}
.top-card p{font-size:13px;color:#444;margin:2px 0;}
.top-card .price{font-weight:bold;color:#111;margin-bottom:2px;}

/* ===== 섹션 3-3 ===== */
.category-guide{padding:100px 20px;background:#f9f9f9;text-align:center;}
.category-title{font-size:26px;font-weight:800;margin-bottom:50px;}
.category-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:30px;max-width:1000px;margin:0 auto;}
.category-box{background:#fff;border:1px solid #ddd;border-radius:10px;padding:30px 20px;transition:.3s;box-shadow:0 2px 6px rgba(0,0,0,.05);}
.category-box:hover{box-shadow:0 6px 16px rgba(0,0,0,.12);transform:translateY(-3px);}
.category-box .icon{font-size:28px;display:block;margin-bottom:12px;}
.category-box h3{font-size:18px;font-weight:700;margin-bottom:8px;}
.category-box p{font-size:14px;color:#555;}
.category-box.link-only{display:flex;align-items:center;justify-content:center;}

/* ===== 섹션 3-4 ===== */
.myth-section{padding:100px 20px;text-align:center;background:#fff;}
.myth-title{font-size:26px;font-weight:800;margin-bottom:50px;}
.myth-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));gap: 30px;max-width: 1000px;margin: 0 auto;}
.myth-card{border:1px solid #ddd;border-radius:10px;padding:30px 20px;text-align:left;background:#f9f9f9;box-shadow:0 2px 6px rgba(0,0,0,.05);transition:transform .3s ease,box-shadow .3s ease;}
.myth-card:hover{transform:scale(1.03);box-shadow:0 12px 24px rgba(0,0,0,.2);}
.myth-label{font-size:14px;color:#e60023;font-weight:700;margin-bottom:4px;}
.truth-label{font-size:14px;color:#007aff;font-weight:700;margin-bottom:4px;}
.myth-card .text-body2 + .truth-label{margin-top:20px;}
.truth-text{font-size:15px;color:#333;line-height:1.6;}
.myth-image-wrap{max-width:1000px;margin:100px auto 100px;padding:0 20px;}
.myth-image{width:100%;height:auto;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.06);}

/* ===== 섹션 4-1 ===== */
.price-intro{background:#f5f5f5;padding-top: 100px;padding-bottom: 50px;text-align:center;}
.price-intro .header-image img{max-width:100%;height:auto;margin:40px 0;border-radius:8px;}

/* ===== 섹션 4-2 ===== */
.price-table-section{padding:3rem 1rem;background:#fff;text-align:center;display: flex;flex-direction: column;align-items: center;}
.price-table-section h2{font-size:1.5rem;margin-bottom:1.5rem;color:#222;font-family:'Noto Sans KR',sans-serif;}
.section-image img {width: 100%; height: auto; max-width: 800px; border-radius: 12px;}
.table-wrapper {
+width: 100%;/* text-align: center; *//* display: flex; */flex-direction: column;align-items: center;}
.price-table{width:100%;border-collapse:collapse;font-family:'Noto Sans KR',sans-serif;table-layout: fixed;word-break: break-word;max-width: 800px;}
.price-table th,.price-table td{padding:1rem;border:1px solid #ddd;text-align:center;font-size:0.95rem;word-break: break-word;white-space: normal;}
.price-table th{background:#f9f9f9;color:#333;font-weight:600;}
.price-table td{color:#444;}
.price-table td.diff{color:#d60000;font-weight:700;}
.table-note{font-size:0.85rem;color:#666;margin-top:0.5rem;}

/* ===== 섹션 4-3 ===== */
.qa-section{background:#f9f9f9;padding:3rem 1.5rem;text-align:left;font-family:'Noto Sans KR',sans-serif;}
.qa-section h2{font-size:1.4rem;color:#222;margin-bottom:60px;text-align:center;margin-top: 30px;}
.qa-list{list-style:none;padding:0;margin:0 auto;width: 100%;max-width: 800px;text-align:center;}
.qa-list li{margin-bottom:3.5rem;}
.qa-list li strong{display:block;font-size:1.05rem;color:#333;margin-bottom:0.5rem;}
.qa-list li p{margin:0;font-size:0.95rem;color:#555;line-height:1.7;}
.qa-cta{text-align:center;margin-top:5rem;}
.btn-related{display:inline-block;padding:0.6rem 1.2rem;background:#007aff;color:#fff;text-decoration:none;border-radius:4px;font-weight:600;transition:background 0.3s;}
.btn-related:hover{background:#00428b;color:#ffffff}

/* ===== 섹션 4-4 ===== */
.cta-section{background:#f6faff;padding:3rem 5rem;text-align:center;font-family:'Noto Sans KR',sans-serif;flex-direction:column;align-items:center;display: flex;}
.cta-section h2{font-size:1.4rem;color:#222;margin-bottom:2rem;}
.cta-section p{font-size:1rem;color:#555;margin-bottom:3.5rem;}
.cta-banner{background:#f6faff;padding:0.5rem;border-radius:8px;max-width: 800px;}
.cta-banner img{width:280px;height:280px;object-fit:cover;border-radius:8px;display:block;transition:transform .3s ease,box-shadow .3s ease;max-width: 100%;}
.cta-banner img:hover{transform:scale(1.05);box-shadow:0 8px 16px rgba(0,0,0,0.15);}
.btn-cta{display:inline-block;padding:0.75rem 1.5rem;background:#007aff;color:#fff;text-decoration:none;border-radius:4px;font-weight:600;font-size:1rem;transition:background 0.3s;margin-top:1.5rem;}
.btn-cta:hover{background:#4495ff;}

/* ===== 링크x배너 ===== */
.highlight-banner.no-btn{background:#007aff;color:#fff;text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center;height:150px;padding:20px;}

/* ===== 버튼 ===== */
.buy-button{display:inline-block;margin-top:20px;padding:14px 20px;background:#007aff;color:#fff;font-size:18px;font-weight:bold;text-decoration:none;border-radius:6px;transition:.3s;}
.buy-button:hover{background:#00428b;color:#ffffff}

.buy-button.tight{display:inline-block;margin-top:8px;padding:14px 40px;background:#007aff;color:#fff;font-size:18px;font-weight:bold;text-decoration:none;border-radius:6px;transition:.3s;}
.buy-button.tight:hover{background:#00428b;color:#ffffff}

.buy-buttonw{display:inline-block;margin-top:90px;padding:14px 40px;background:#007aff;color:#ffffff;font-size:18px;font-weight:bold;text-decoration:none;border-radius:6px;transition:.3s;}
.buy-buttonw:hover{background:#00428b;color:#ffffff}

.buy-buttonw.tight{display:inline-block;margin-top:8px;padding:14px 40px;background:#007aff;color:#ffffff;font-size:18px;font-weight:bold;text-decoration:none;border-radius:6px;transition:.3s;}
.buy-buttonw.tight:hover{background:#00428b;color:#ffffff}

.buy-buttonw, .buy-buttonw.tight {max-width: 100%;box-sizing: border-box;}

/* ===== 푸터 ===== */
#footer-area{background:#6fb5ff;color:#ffffff;padding:40px 20px 40px;font-size:13px;}
.footer-inner{max-width:1000px;margin:0 auto;}
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:20px;}
.footer-brand{font-size:16px;font-weight:bold;color:#fff;}
.footer-info{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px;}
.footer-copy{text-align:center;color:#ffffff;font-size:12px;margin-top:20px;}
.topBtn{position:fixed;bottom:30px;right:20px;z-index:1000;width:48px;height:48px;background:#ffffff;border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,.2);display:flex;justify-content:center;align-items:center;font-size:24px;color:#007aff;text-decoration:none;transition:.3s ease;}
.topBtn:hover{background:#d7ddff;transform:translateY(-3px);box-shadow:0 6px 12px rgba(0,0,0,.25);}

/* ===== 폰트 ===== */
/* 로고 */
.logo a {
  display: inline-block;
  height: auto;
}

.logo-img {
  height: 50px; /* 적절한 높이 조정 */
  width: auto;
  display: block;
}
.logo-text {
  font-family: 'Black Han Sans', sans-serif;
  font-weight: 900;
  font-size: 32px;
  color: #0056b8;
  letter-spacing: -1px;
  display: inline-block;
}

.logo-text .santen {
  color: #009de0;
  margin-left: 6px;
}

.visually-hidden {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* 타이틀 텍스트 */
.title-main {font-family: "Black Han Sans", "Noto Sans KR", sans-serif;font-size: 5em;font-weight: 400;letter-spacing: -1.5px;line-height: 1.1;margin-top: 60px;margin-bottom: 40px;color: #007aff;text-align: center;}
.title-sub{font-family:'aperlogy-8ExtraBold','Noto Sans KR',sans-serif;font-size:1.5em;font-weight:800;letter-spacing:-1px;line-height:1.3;margin-bottom:16px;color:#000000;text-align:center;}
.subtext{font-family:'Noto Sans KR',sans-serif;font-size:1.1em;font-weight:500;color:#000000;text-align:center;}
.title-sub1{font-family:'GmarketSans','Noto Sans KR','Noto Sans JP', sans-serif;font-size:1.5em;font-weight:800;letter-spacing:-1px;line-height:1.3;margin-bottom:16px;color:#000000;text-align:left;}
.title-subL{font-family:'aperlogy-8ExtraBold','Noto Sans KR',sans-serif;font-size:2.5em;font-weight:800;letter-spacing:-1px;line-height:1.3;margin-bottom:50px;color:#000000;text-align:center;}


/* 본문 텍스트 */
.text-body{font-family:'Noto Sans KR',sans-serif;font-size:20px;font-weight:400;line-height:1.8;color:#333;word-break: break-word;overflow-wrap: break-word;}
.side-text p { margin-bottom: 24px; }
.text-body2{font-family:'Noto Sans KR',sans-serif;font-size:16px;font-weight:400;line-height:1.8;color:#333;}2

/* 서브타이틀 */
.subtitle{font-family:'Noto Sans JP','Noto Sans KR',sans-serif;font-size:18px;margin-bottom:30px;}

/* 강조 텍스트 */
strong{color:#0078e7;font-weight:700;}

.black-han-sans-regular {font-family: "Black Han Sans", sans-serif;font-weight: 400;font-style: normal;}

.menu-toggle {display: none; background: none; border: none; font-size: 28px; cursor: pointer; color: #000;}
.menu {display: flex; gap: 40px; list-style: none; margin: 0; padding: 0;}

/* 상단 이미지 */
.header-banner {
  display: block;
  width: 100%;
  height: auto;
}
}
.intro-section {
  padding-top: 10px; /* 고정 헤더 높이만큼 확보 */
  padding-bottom: 60px;
  text-align: center;
  background: #f9f9f9;
  margin-top: 0;
}


html {font-size: 16px;}

/* 모바일 전용: 800px 이하 */
@media screen and (max-width: 600px) {
  .menu-toggle {
    display: block;
    background: none;
    position: relative;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #000;
  }

  .menu {
    display: none;
    position: absolute;
    width: 60vw;
    max-width: 300px;
    flex-direction: column;
    top: 100%;
    right: 0;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 20px;
    z-index: 999;
    animation: fadeSlide 0.3s ease-in-out;
    border-radius: 0 0 0 10px;
  }

  .menu.show {
    display: flex;
  }

  .menu li {
    margin-bottom: 10px;
  }

  .menu li::before,
  .menu li + li::before {
    content: none;
    margin: 0;
  }

  .menu li a {
    white-space: nowrap;
  }
  .need-caption{font-size: 20px;
  }
  .text-body{font-size: 16px;
}
  .feature-text p.text-body {
    font-size: 16px;
  }
    .title-main{
    font-size: 60px;
  }
}