:root{
  --teal:#0d9488; --teal-dark:#0f766e; --text:#111827; --muted:#6b7280; --bg:#ffffff; --ring:#e5e7eb;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Apple SD Gothic Neo,Noto Sans KR,Helvetica,Arial,sans-serif;
  background:var(--bg);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{cursor:pointer}
.container{max-width:1200px;margin:0 auto;padding:0 16px}

/* ===== Header ===== */
.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(6px); border-bottom:1px solid var(--ring);
}
.header-row{display:flex;justify-content:space-between;align-items:center;height:64px}
.header-left{display:flex;align-items:center;gap:10px}
.logo-dot{border:0px solid red !important; width:55px;height:55px;border-radius:14px;
  background:linear-gradient(135deg,#34d399,#0d9488);box-shadow:0 1px 2px rgba(0,0,0,.12)
}
.nav{display:flex;gap:8px;flex-wrap:wrap}
.nav a{padding:8px 12px;border-radius:10px;color:#374151}
.nav a:hover{background:#f3f4f6;color:#111827}
.btn-cta{background:var(--teal);color:#fff;padding:8px 14px;border-radius:12px;font-weight:600}
.btn-cta:hover{background:var(--teal-dark)}

/* ===== Hero (¸ÞÀÎÀ̹ÌÁö 1/2 Æø + ÅؽºÆ®) ===== */
.hero{padding:0px 0;border-bottom:1px solid var(--ring)}
.hero-main{display:flex;flex-direction:column;align-items:center;gap:16px}
.hero-main img{width:50%;border-radius:16px;border:1px solid var(--ring)}
@media(max-width:640px){ .hero-main img{width:100%} }
.hero-title{font-size:clamp(18px,3.4vw,28px);font-weight:800;margin:0;text-align:center}
.hero-sub{color:var(--muted);text-align:center;margin:0}

/* ===== °øÅë ¼½¼Ç ===== */
section{scroll-margin-top:96px}
.section{padding:64px 0}
h2{font-size:clamp(22px,3.2vw,32px)}
.muted{color:var(--muted)}

/* ===== Ä«µå/±×¸®µå ===== */
.grid{display:grid;gap:16px}
@media(min-width:640px){.grid-2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)}}
.card{border:1px solid var(--ring);border-radius:16px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.card-inner{padding:20px}
.thumb{height:130px;background:linear-gradient(135deg,#f3f4f6,#e5e7eb);border-radius:12px}

/* ===== ¹öÆ° ===== */
.btn{display:inline-block;border-radius:12px;padding:12px 16px;font-weight:700}
.btn-white{background:rgba(255,255,255,.95);color:#111827}
.btn-white:hover{background:#fff}
.btn-teal{background:var(--teal);color:#fff}
.btn-teal:hover{background:var(--teal-dark)}
.btn-teal2{background:#0076a3;color:#fff}
.btn-teal2:hover{background:#004f6d}


/* ===== »ó¼¼ À̹ÌÁö ½ºÅà ===== */
.detail-stack{max-width:1000px;margin:0 auto}
.detail-stack img{width:100%;height:auto;margin:0 auto 20px auto;border-radius:50px;border:1px solid var(--ring)}

/* ===== Æû/ǪÅÍ ===== */
.input{width:100%;border:1px solid var(--ring);border-radius:12px;padding:10px 12px}
footer{border-top:1px solid var(--ring);background:#fff;text-align:center;padding:30px 0;color:#6b7280;font-size:14px}


/*======¸Þ´º°£°Ý ³ÐÈ÷±â ============*/
.menu-nav li {
    margin: 0 18px;   /* ÁÂ¿ì °£°Ý 18px Ãßõ */
}

.menu-nav a {
    padding: 8px 16px;   /* ÅÇ ¿©¹é Áõ°¡ */
    font-size: 16px;     /* PC´Â ±Û¾¾ Á¶±Ý Å©°Ô */
}


/* ¸ð¹ÙÀÏ »ó´Ü ¸Þ´º ±úÁü ¹æÁö */
@media (max-width: 768px) {

  .menu-nav {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    padding: 8px 0;
  }

  .menu-nav li {
    margin: 0 10px;
  }

  .menu-nav a {
    padding: 6px 12px;
    font-size: 12px;
    white-space: nowrap;
  }

  /* ¿©±â! WATERZERO ·Î°í ±ÛÀÚ ¼û±â±â */
  .header-left strong a {
      display: none !important;
  }

}

.logo-dot {
  background:url('/img/logo.png') no-repeat center/contain !important;
}

.logo-text a {
  display: inline-block;
  line-height: 1.2;
}

.logo-text span {
  font-size: 12px;  /* ¿µ¾î ¼Ò¹®ÀÚ ¾Æ·¡ÁÙÀº ¾à°£ ÀÛ°Ô */
  color: #555;
  letter-spacing: 0.5px;
}

.pill-emerald {
  color: #0f172a !important;   /* ¾ÆÁÖ ÁøÇÑ ³²»ö(°ÅÀÇ °ËÁ¤) */
  font-weight: 700;
}

.menu-nav a {
  font-weight: 700 !important;
  color: #0f172a !important;  /* ¾ÆÁÖ ÁøÇÑ ³²»ö = °ËÁ¤º¸´Ù °í±ÞÁö°í ¼±¸í */
}
.logo-link {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
}

.logo-text span {
  font-size: 12px;
  letter-spacing: 0.3px;
  color: #444;
}
/* ¸ð¹ÙÀÏ¿¡¼­´Â ·Î°í ±ÛÀÚ ¼û±â±â */
@media (max-width: 768px) {
    .logo-text,
    .logo-text * {
        display: none !important;
    }
}

/* PC¿ë ·Î°í ÅؽºÆ® °­È­ */
.logo-text {
    font-weight: 800 !important;     /* Á¤¸» ¼±¸íÇÏ°Ô */
    color: #ffffff  !important;       /* °ÅÀÇ °ËÁ¤¿¡ °¡±î¿î °í±Þ ³×À̺ñ */
    line-height: 1.15;
}

.logo-text span {
    font-weight: 700 !important;     /* ¿µ¾î ºÎºÐµµ ¶Ç·ÇÇÏ°Ô */
    color: #1e3a8a !important;       /* ÁøÇÑ µö±×·¹ÀÌ */
    letter-spacing: 0.3px;
}

.menu-nav .btn-cta {
    color: #ffffff !important;
}


/* Ä«µå ¹è°æ/Æеù Á¦°ÅÇÏ°í, ¾ÈÂÊ ¹Ú½º¸¸ º¸ÀÌ°Ô */
.card {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ¾ÈÂÊ Ä«µå°¡ Àüü ³ôÀ̸¦ ä¿ìµµ·Ï */
.card-inner {
  height: 100%;
}


.hero-half {
  width: 100%;
  height: 45vh; /* ¸ÞÀÎ À̹ÌÁöÀÇ ¹Ý Á¤µµ ³ôÀÌ */
  min-height: 300px;
  background: url('/img/main3.jpg') center/cover no-repeat;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ÅؽºÆ®°¡ À̹ÌÁö À§¿¡ ¿Ã¶ó¿Àµµ·Ï */
.hero-overlay {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
  text-shadow: 0 3px 8px rgba(0,0,0,0.4);
}

/* Á¦¸ñ ½ºÅ¸ÀÏ */
.hero-title {
  font-size: 38px;
  font-weight: 700;
  margin-bottom: 12px;
}

/* ºÎÁ¦¸ñ ½ºÅ¸ÀÏ */
.hero-sub {
  font-size: 18px;
  font-weight: 300;
  opacity: 0.95;
}

/* ¼±Åà »çÇ×: À̹ÌÁö À§¿¡ ¾îµÓ°Ô »ì¦ µ¤¾î ±Û¾¾ ´õ Àß º¸ÀÌ°Ô */
.hero-half::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.25); /* ¾îµÎ¿î Åõ¸í ·¹À̾î */
  z-index: 1;
}
.hero-sub {
  font-size: 18px;
  font-weight: 400;
  color: #fff;
  text-shadow: 0 4px 12px rgba(0,0,0,0.65);
  opacity: 1;
}

.hero-half::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1;
}
.product-title-section {
  padding: 0px 0px 0px;
  text-align: center;
  background: #ffffff;
}

.product-title {
  font-size: 38px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 10px;
}

.product-subtitle {
  font-size: 20px;
  color: #6b7280;
  margin-top: 0;
}