* { box-sizing: border-box; }
:root {
  --paper: #efeff4;
  --ink: #0070CF;
  --muted: #0070CF;
  --line: #FFFFFF;
}
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Pretendard Variable", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
.hero { min-height: 900px; height: 112vh; max-height: none; position: relative; border-bottom: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; }
.site-header { padding: 27px 3.7vw 0; display: flex; justify-content: space-between; align-items: flex-start; position: relative; z-index: 3; }
.wordmark { font-family: Georgia, "Times New Roman", serif; font-size: clamp(50px, 6.2vw, 60px); line-height: .92; letter-spacing: -0.04em; font-weight: 700; }
.tagline { margin: 22px 0 0 24px; font-size: 15px; line-height: 1.4; text-align: right; max-width: 340px; }
.slider { position: absolute; top: 15vh; left: 0; width: 100%; height: 64vh; overflow: hidden; }
.slider-track { height: 100%; display: flex; align-items: center; gap: clamp(32px, 5.5vw, 90px); width: max-content; will-change: transform; padding: 0 5vw; }
.product-card { display: block; flex: 0 0 clamp(490px, 46vw, 670px); height: 100%; max-height: 730px; position: relative; transition: transform .35s ease; }
.product-card:hover { transform: translateY(-7px); }
/* Give wide images more horizontal room while keeping portrait cards unchanged. */
.product-card.is-landscape { flex-basis: clamp(600px, 65vw, 900px); }

.product-image-wrap { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.product-image { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.product-name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;

  text-align: center;
  font-size: 15px;
  letter-spacing: .06em;

  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
}

.product-card:hover .product-name { opacity: 1; }
.slider-arrow { position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); border: 0; background: transparent; width: 46px; height: 52px; display: grid; place-items: center; cursor: pointer; font-size: 20px; color: #111; transition: opacity .2s, transform .2s; }
.slider-arrow:hover { transform: translateY(-50%) scale(1.15); }
.slider-arrow.prev { left: 8px; color: #0070CF}
.slider-arrow.next { right: 8px; color: #0070CF}
.hero-bottom {
  margin-top: auto;
  padding: 0 20px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  position: relative;
  z-index: 2;
  transform: translateY(-190px);
}
.notice { font-size: 16px; margin: 0; text-align: center; }
.pill-button { background: #fff; min-width: 180px; height: 42px; border-radius: 13px; padding: 0 15px 0 15px; display: flex; align-items: center; justify-content: center; gap: 25px; font-size: 15px; letter-spacing: 0.05em; transition: background .2s; }
.pill-button:hover { background: #0070CF; color: #FFFFFF;}
.circle-arrow { border: 1px solid #222; border-radius: 50%; width: 25px; height: 25px; display: grid; place-items: center; font-size: 15px; letter-spacing: 0; }
.about { min-height: 475px; padding: 110px 5vw 100px; display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; border-bottom: 1px solid var(--line); background-color: #FFFFFF; color: #0070CF;
}

.eyebrow { font-size: 9px; letter-spacing: .15em; margin: 0 0 22px; }
.about h1 { margin: 0; font-size: clamp(54px, 6vw, 78px); line-height: .91; letter-spacing: -.075em; font-weight: 500; }
.about-right { padding-top: 34px; max-width: 430px; }
.intro-copy { font-family: "Noto Sans KR", sans-serif; font-size: 14px; line-height: 1.95; margin: 0 0 18px; word-break: keep-all; }
.services { font-size: 10px; color: var(--muted); margin: 0 0 36px; }
.text-link { display: inline-block; font-size: 9px; letter-spacing: .08em; padding-bottom: 7px; border-bottom: 1px solid #0070CF; }
.site-footer { min-height: 61px; padding: 0 5vw; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 12px; background-color: #0070CF; color: #FFFFFF;}
.footer-brand { font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.footer-brand span { font-size: 7px; vertical-align: top; margin-left: 2px; }
.site-footer p { letter-spacing: .06em; margin: 0; }
.site-footer > a:last-child { letter-spacing: .08em; }

@media (min-width: 1400px) {
  .hero { height: 112vh; }
  .slider { top: 15vh; height: 64vh; }
  .product-card { flex-basis: 700px; max-height: 800px; }
}
@media (max-width: 700px) {
  .hero { height: 112svh; min-height: 800px; max-height: none; }
  .site-header { padding: 27px 3.7vw 0; display: block; }
  .wordmark { font-size: clamp(40px, 17vw, 40px); }
  .tagline { text-align: left; margin: 8px 0 0 2px; font-size: 13.5px; max-width: 280px; }
  .slider { top: 19svh; height: 55.4svh; }
  .slider-track { gap: 24px; padding: 0 5vw; }
  .product-card { flex-basis: 90vw; max-height: 620px; height: 100%; }
  .product-card.is-landscape { flex-basis: 90vw; }
  .slider-arrow { width: 36px; height: 42px; font-size: 18px; background: transparent; }
  .slider-arrow.prev { left: 6px; padding:0; }
  .slider-arrow.next { right: 6px; padding:0; }
  .hero-bottom { padding-bottom: 18px; gap: 15px; }
  .notice { max-width: 165px; line-height: 1.5; font-size: 15px; }
  .about { padding: 74px 24px 76px; grid-template-columns: 1fr; gap: 40px; min-height: auto; }
  .about h1 { font-size: clamp(57px, 16vw, 76px); }
  .about-right { padding-top: 0; }
  .intro-copy { font-size: 13px; }
  .services { margin-bottom: 28px; }
  .site-footer { padding: 0 20px; min-height: 68px; font-size: 8px; }
  .footer-brand { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}