/* ==========================================================================
   OMNION — Official Brand Site
   Palette source: OMNION Brand Core Delivery (04_Documentation/README.md)
   Navy #17324D · Coral #FF6B4A · Warm Cream #F7F3EA · Soft Sage #A8B9A5 · Charcoal #252A2E
   Visual ratio: Navy 55 / Cream 30 / Coral 10 / Sage 5
   Pure static. No framework, no external font, no tracker.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Brand */
  --navy:        #17324D;
  --navy-deep:   #12273C;
  --navy-70:     rgba(23, 50, 77, .70);
  --navy-55:     rgba(23, 50, 77, .55);
  --navy-12:     rgba(23, 50, 77, .12);
  --navy-08:     rgba(23, 50, 77, .08);

  --coral:       #FF6B4A;
  --coral-dark:  #E85A3A;
  --coral-soft:  rgba(255, 107, 74, .12);

  --cream:       #F7F3EA;
  --cream-deep:  #EFE8DB;
  --paper:       #FFFFFF;

  --sage:        #A8B9A5;
  --sage-soft:   rgba(168, 185, 165, .22);

  --charcoal:    #252A2E;
  --charcoal-70: rgba(37, 42, 46, .70);

  /* Layout */
  --wrap:        1200px;
  --radius:      14px;
  --radius-lg:   22px;
  --header-h:    72px;

  /* Type */
  --font: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
          "Malgun Gothic", "Noto Sans KR", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --shadow-sm: 0 1px 2px rgba(23, 50, 77, .05);
  --shadow-md: 0 10px 30px -18px rgba(23, 50, 77, .35);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 2. Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--charcoal);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: -0.005em;
  /* Korean typography: keep words intact, break at spaces */
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* 푸터를 화면 하단에 고정 — 404.html 처럼 내용이 짧은 페이지에서
     푸터가 화면 중간에 떠 보이는 것을 막습니다. 내용이 길면 영향 없음. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* flex 자식인 main 이 남는 높이를 흡수해 푸터를 아래로 밀어냅니다 */
main { flex: 1 0 auto; }

body.nav-open { overflow: hidden; }

h1, h2, h3, h4 {
  margin: 0;
  color: var(--navy);
  line-height: 1.3;
  letter-spacing: -0.02em;
  font-weight: 700;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { max-width: 100%; }
img { height: auto; }

a {
  color: var(--navy);
  text-decoration: none;
  transition: color .2s var(--ease);
}
a:hover { color: var(--coral); }

:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- 3. Utilities ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--navy);
  color: var(--cream);
  padding: 12px 18px;
  border-radius: 0 0 10px 0;
  font-size: 14px;
}
.skip-link:focus { left: 0; color: var(--cream); }

/* .todo — 모든 자리표시자가 실제 값으로 채워져 현재는 쓰이지 않습니다.
   내용을 추가하며 '확인 필요' 메모를 남길 때 다시 사용하세요. */
.todo {
  color: var(--coral);
  font-size: .87em;
}

/* ---------- 4. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease), transform .22s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--navy);
  color: var(--cream);
}
.btn--primary:hover { background: var(--navy-deep); color: var(--cream); }

.btn--ghost {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy-12);
}
.btn--ghost:hover {
  background: var(--paper);
  border-color: var(--navy-55);
  color: var(--navy);
}

/* .btn--buy — 제품 카드는 현재 '전시 전용'이라 버튼을 쓰지 않습니다.
   제품별 구매 버튼을 다시 넣을 때 그대로 사용하세요. */
.btn--buy {
  width: 100%;
  margin-top: auto;
  background: transparent;
  color: var(--coral);
  border-color: rgba(255, 107, 74, .45);
  font-size: 13px;
  padding: 11px 14px;
}
.btn--buy:hover {
  background: var(--coral);
  border-color: var(--coral);
  color: #fff;
}

.btn--light {
  background: var(--cream);
  color: var(--navy);
}
.btn--light:hover { background: #fff; color: var(--navy); }

.btn--lg { padding: 15px 30px; font-size: 15px; }

/* ---------- 5. Media placeholders -----------------------------------------
   실제 이미지를 ./images/ 에 넣으면 자동으로 표시됩니다.
   파일이 없으면 클래스명이 붙어(opacity:0) 아래 파일 경로 라벨이 보입니다.
   -------------------------------------------------------------------------- */
.media {
  position: relative;
  display: block;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(45deg, rgba(168, 185, 165, .13) 0 1px, transparent 1px 12px),
    linear-gradient(150deg, var(--cream) 0%, var(--cream-deep) 100%);
  border: 1px solid var(--navy-08);
}

.media img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .3s var(--ease);
}
.media img.is-missing { opacity: 0; }

.media__ph {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  color: rgba(23, 50, 77, .40);
  text-align: center;
  word-break: break-all;
}

.media--hero    { aspect-ratio: 4 / 5; border-radius: var(--radius-lg); }
.media--about   { aspect-ratio: 4 / 3; }
.media--product { aspect-ratio: 1 / 1; background:
    repeating-linear-gradient(45deg, rgba(23, 50, 77, .05) 0 1px, transparent 1px 12px),
    linear-gradient(160deg, #FBF8F2 0%, var(--cream-deep) 100%);
}

/* ---------- 6. Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 243, 234, .88);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--navy-08);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--header-h);
}

.brand { display: inline-flex; align-items: center; }
.brand__logo {
  display: block;
  width: clamp(132px, 15vw, 168px);
  height: auto;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 34px);
}

.nav__link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  color: var(--navy);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  padding-block: 6px;
  border-bottom: 2px solid transparent;
}
.nav__ko {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--navy-55);
  transition: color .2s var(--ease);
}
.nav__link:hover { border-bottom-color: var(--coral); }
.nav__link:hover .nav__ko { color: var(--navy-70); }

/* Mobile toggle */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--navy-12);
  border-radius: 12px;
  cursor: pointer;
}
.nav-toggle__bars {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 100%;
  height: 100%;
}
.nav-toggle__bars i {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- 7. Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--cream);
  padding-block: clamp(44px, 7vw, 96px) clamp(52px, 8vw, 110px);
  scroll-margin-top: var(--header-h);
}

.hero__deco { position: absolute; inset: 0; pointer-events: none; }
.deco { position: absolute; border-radius: 50%; display: block; }
.deco--sage {
  width: min(46vw, 560px);
  aspect-ratio: 1;
  right: -12vw;
  top: -14vw;
  background: var(--sage);
  opacity: .28;
}
.deco--coral {
  width: min(26vw, 300px);
  aspect-ratio: 1;
  right: 6vw;
  bottom: -12vw;
  background: var(--coral);
  opacity: .10;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}

.hero__eyebrow {
  display: inline-block;
  margin-bottom: 18px;
  padding: 6px 14px;
  background: var(--coral-soft);
  border-radius: 999px;
  color: var(--coral-dark);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
}

.hero__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 14px;
  margin-bottom: 22px;
  font-size: clamp(30px, 4.6vw, 54px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.18;
}
.hero__title-en {
  letter-spacing: 0.02em;
  font-weight: 800;
}
.hero__title-sep {
  color: var(--coral);
  font-weight: 300;
  opacity: .7;
}
.hero__title-ko {
  font-size: clamp(22px, 3.1vw, 36px);
  font-weight: 700;
  letter-spacing: -0.035em;
}

.hero__lede {
  max-width: 34em;
  margin-bottom: 30px;
  color: var(--charcoal-70);
  font-size: clamp(15px, 1.35vw, 17px);
  line-height: 1.85;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 30px;
}

.hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.hero__chips li {
  padding: 6px 14px;
  background: rgba(255, 255, 255, .7);
  border: 1px solid var(--navy-08);
  border-radius: 999px;
  color: var(--navy-70);
  font-size: 12.5px;
  font-weight: 500;
}

/* ---------- 8. Sections ---------- */
.section {
  padding-block: clamp(60px, 8vw, 116px);
  scroll-margin-top: var(--header-h);
}
.section--about    { background: var(--paper); }
.section--products { background: var(--cream); }
.section--contact  { background: var(--paper); }

.section__head {
  max-width: 62ch;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.section__label {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
  color: var(--navy-55);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.section__num {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  background: var(--coral);
  border-radius: 999px;
  color: #fff;
  font-size: 11px;
  letter-spacing: 0;
}
.section__title {
  font-size: clamp(25px, 3.2vw, 38px);
  font-weight: 800;
  letter-spacing: -0.03em;
}
.section__sub {
  margin-top: 12px;
  color: var(--charcoal-70);
  font-size: 15px;
  line-height: 1.8;
}
.section__label--inverse { color: rgba(247, 243, 234, .6); }
.section__title--inverse { color: var(--cream); }

/* ---------- 9. About ---------- */
.about__grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

.about__text > p {
  color: var(--charcoal-70);
  font-size: 15.5px;
  line-height: 1.95;
}
.about__text > p + p { margin-top: 18px; }
.about__text strong { color: var(--navy); font-weight: 600; }

.values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 34px;
  padding-top: 30px;
  border-top: 1px solid var(--navy-08);
}
.value {
  padding: 20px 18px;
  background: var(--cream);
  border-radius: var(--radius);
}
.value__title {
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 700;
}
.value__desc {
  color: var(--charcoal-70);
  font-size: 13px;
  line-height: 1.7;
}

.about__aside { display: grid; gap: 20px; }

.slogan {
  margin: 0;
  padding: 24px 26px;
  background: var(--navy);
  border-radius: var(--radius);
  color: var(--cream);
}
.slogan__en {
  color: var(--cream);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.slogan__ko {
  margin-top: 6px;
  color: rgba(247, 243, 234, .7);
  font-size: 14px;
}

/* 운영 주체 정보는 About 본문에서 노출하지 않고 Footer 'Operator' 열에만 표기합니다. */

/* ---------- 10. Product lines ---------- */
.line + .line {
  margin-top: clamp(48px, 6vw, 84px);
  padding-top: clamp(44px, 5vw, 72px);
  border-top: 1px solid var(--navy-12);
}

.line__head {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: clamp(24px, 3vw, 36px);
}
.line__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: var(--coral);
  border-radius: 999px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
}
.line__title {
  font-size: clamp(20px, 2.3vw, 26px);
  font-weight: 800;
  letter-spacing: -0.03em;
}
.line__en {
  margin-top: 2px;
  color: var(--coral-dark);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.line__desc {
  max-width: 56ch;
  margin-top: 10px;
  color: var(--charcoal-70);
  font-size: 14.5px;
  line-height: 1.8;
}

.grid { display: grid; gap: clamp(14px, 1.8vw, 24px); }
.grid--products { grid-template-columns: repeat(3, 1fr); }
.grid--contact  { grid-template-columns: repeat(3, 1fr); }

.card {
  display: flex;
  flex-direction: column;
  padding: 14px;
  background: var(--paper);
  border: 1px solid var(--navy-08);
  border-radius: var(--radius);
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.card:hover {
  border-color: rgba(23, 50, 77, .18);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.card__name {
  margin: 16px 2px 6px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}
.card__desc {
  margin: 0 2px 4px;          /* 버튼이 없어져 하단 여백 축소 */
  color: var(--charcoal-70);
  font-size: 13px;
  line-height: 1.7;
}

.brk { display: inline; }

.products__note {
  margin-top: clamp(32px, 4vw, 48px);
  padding-top: 22px;
  border-top: 1px solid var(--navy-08);
  color: var(--navy-55);
  font-size: 13px;
  text-align: center;
}

/* ---------- 11. Where to Buy (Navy) ---------- */
.section--buy {
  background: var(--navy);
  color: var(--cream);
}
.buy__inner {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.buy__text {
  color: var(--cream);
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.85;
  font-weight: 500;
}
.buy__text--sub {
  margin-top: 12px;
  margin-bottom: 30px;
  color: rgba(247, 243, 234, .68);
  font-size: 14.5px;
  font-weight: 400;
}
.buy__todo {
  margin-top: 14px;
  color: rgba(247, 243, 234, .42);
  font-size: 12px;
}

.buy__points { display: grid; gap: 12px; }
.point {
  padding: 20px 22px;
  background: rgba(247, 243, 234, .06);
  border: 1px solid rgba(247, 243, 234, .16);
  border-radius: var(--radius);
}
.point__title {
  margin-bottom: 6px;
  color: var(--cream);
  font-size: 15px;
  font-weight: 700;
}
.point__desc {
  color: rgba(247, 243, 234, .68);
  font-size: 13px;
  line-height: 1.7;
}

/* ---------- 12. Contact ---------- */
.contact__card {
  display: flex;
  flex-direction: column;
  padding: 26px 24px;
  background: var(--cream);
  border-radius: var(--radius);
}
.contact__title {
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--navy-55);
}
.contact__value {
  color: var(--navy);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
}
.contact__value a { border-bottom: 1px solid rgba(255, 107, 74, .4); }
.contact__note {
  margin-top: 10px;
  color: var(--charcoal-70);
  font-size: 13px;
  line-height: 1.7;
}
.contact__links { font-size: 16px; font-weight: 600; }

/* ---------- 13. Footer ---------- */
.site-footer {
  background: var(--navy);
  color: rgba(247, 243, 234, .72);
  border-top: 1px solid rgba(247, 243, 234, .14);
  padding-block: clamp(44px, 5vw, 68px) 28px;
}
.footer__inner {
  display: grid;
  /* 브랜드 열 + (Brand / Support / Company) 3열 */
  grid-template-columns: minmax(180px, .85fr) 2.6fr;
  gap: clamp(32px, 5vw, 68px);
  align-items: start;
  padding-bottom: clamp(28px, 4vw, 44px);
}
.footer__logo {
  display: block;
  width: clamp(130px, 14vw, 160px);
  height: auto;
}
.footer__slogan {
  margin-top: 18px;
  color: var(--cream);
  font-size: 14px;
  font-weight: 600;
}
.footer__slogan-ko {
  margin-top: 4px;
  color: rgba(247, 243, 234, .55);
  font-size: 13px;
}

.footer__nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 44px);
}
.footer__colTitle {
  margin-bottom: 14px;
  color: rgba(247, 243, 234, .45);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.footer__col ul { display: grid; gap: 9px; }
.footer__col a {
  color: rgba(247, 243, 234, .78);
  font-size: 14px;
}
.footer__col a:hover { color: var(--coral); }

/* Company 열 — 회사명 / 주소 / 연락처만 간결하게 */
.footer__address {
  display: grid;
  gap: 5px;
  font-style: normal;
  color: rgba(247, 243, 234, .68);
  font-size: 13.5px;
  line-height: 1.8;
}
.footer__address strong {
  color: var(--cream);
  font-weight: 600;
}
.footer__address a { color: rgba(247, 243, 234, .78); }
.footer__address a:hover { color: var(--coral); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 24px;
  padding-top: 22px;
  border-top: 1px solid rgba(247, 243, 234, .12);
}
.footer__copy,
.footer__domain {
  color: rgba(247, 243, 234, .5);
  font-size: 12px;
}
.footer__domain { letter-spacing: .02em; }

/* ---------- 13b. Legal page (privacy.html) ---------- */
.legal { padding-block: clamp(40px, 6vw, 72px) clamp(60px, 8vw, 100px); }
.legal__head {
  padding-bottom: 26px;
  margin-bottom: 34px;
  border-bottom: 1px solid var(--navy-12);
}
.legal__title { font-size: clamp(26px, 3.2vw, 36px); font-weight: 800; }
.legal__meta { margin-top: 10px; color: var(--navy-55); font-size: 13px; }
.legal__body { max-width: 74ch; }
.legal__body h2 {
  margin: 38px 0 12px;
  font-size: 17px;
  font-weight: 700;
}
.legal__body h2:first-child { margin-top: 0; }
.legal__body p,
.legal__body li {
  color: var(--charcoal-70);
  font-size: 14.5px;
  line-height: 1.9;
}
.legal__body p + p { margin-top: 10px; }
.legal__body ul { margin: 10px 0 0; padding-left: 0; }
.legal__body ul li {
  position: relative;
  padding-left: 15px;
}
.legal__body ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .78em;
  width: 5px;
  height: 5px;
  background: var(--coral);
  border-radius: 50%;
}
.legal__body table {
  width: 100%;
  margin-top: 14px;
  border-collapse: collapse;
  font-size: 13.5px;
}
.legal__body th,
.legal__body td {
  padding: 11px 12px;
  border: 1px solid var(--navy-12);
  text-align: left;
  vertical-align: top;
  color: var(--charcoal-70);
  line-height: 1.7;
}
.legal__body th { background: var(--cream); color: var(--navy); font-weight: 600; }
.legal__back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 44px;
  color: var(--navy);
  font-size: 14px;
  font-weight: 600;
}
.legal__notice {
  padding: 18px 20px;
  margin-bottom: 30px;
  background: var(--cream);
  border-left: 3px solid var(--coral);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--charcoal-70);
  font-size: 13.5px;
  line-height: 1.8;
}

/* 표 안의 작은 부기 문구 (개인 운영 안내 등) */
.legal__fineprint {
  display: block;
  margin-top: 6px;
  color: var(--navy-55);
  font-size: 12.5px;
  line-height: 1.7;
}

/* ---------- 13c. Error page (404.html) ----------
   Cloudflare Pages 는 404.html 이 있으면 자동으로 잘못된 경로에 이 파일을 응답합니다.
   별도 설정 불필요. 색은 브랜드 토큰만 사용합니다.
   --------------------------------------------- */
.err {
  background: var(--cream);
  text-align: center;
  padding-block: clamp(76px, 12vw, 168px);
}
.err__inner { max-width: 620px; }
.err__code {
  color: var(--navy);
  font-size: clamp(76px, 14vw, 128px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.045em;
}
.err__rule {
  display: block;
  width: 46px;
  height: 4px;
  margin: 24px auto 0;
  border-radius: 2px;
  background: var(--coral);
}
.err__title {
  margin-top: 24px;
  color: var(--navy);
  font-size: clamp(19px, 2.4vw, 26px);
  font-weight: 800;
  line-height: 1.4;
}
.err__desc {
  margin-top: 14px;
  color: var(--navy-70);
  font-size: 15px;
  line-height: 1.85;
}
.err__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 36px;
}
.err__contact {
  margin-top: 32px;
  color: var(--navy-55);
  font-size: 13.5px;
}
.err__contact a { color: var(--navy); font-weight: 600; }
.err__contact a:hover { color: var(--coral-dark); }

/* ---------- 14. Responsive ----------
   제품 라인은 라인당 3개 기준 → 3열 / 2열 조합으로 균형을 유지합니다.
   (열 수는 '라인당 제품 수'의 약수로 맞춥니다. 3개면 3열, 4개면 4열/2열)
   · 721px 이상 : 3열 (소형 노트북 포함)
   · 720px 이하 : 2열 (모바일)
   ※ 라인당 제품 수를 4개 이상으로 늘리면 .grid--products 를 4열로 되돌리세요.
   --------------------------------------- */
@media (max-width: 940px) {
  /* 3열 유지 — 721px 까지 충분히 읽힙니다 */
}

@media (max-width: 900px) {
  :root { --header-h: 64px; }

  .nav-toggle { display: block; }

  .nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    display: none;
    padding: 8px clamp(20px, 5vw, 48px) 22px;
    background: var(--cream);
    border-bottom: 1px solid var(--navy-08);
    box-shadow: var(--shadow-md);
  }
  .nav.is-open { display: block; }
  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav__list li + li { border-top: 1px solid var(--navy-08); }
  .nav__link {
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 10px;
    padding: 15px 2px;
    border-bottom: 0;
    font-size: 15px;
  }
  .nav__ko { font-size: 12.5px; }

  .hero__inner { grid-template-columns: 1fr; }
  .media--hero { aspect-ratio: 16 / 11; order: -1; }

  .about__grid { grid-template-columns: 1fr; }

  .buy__inner { grid-template-columns: 1fr; }

  /* 문의 3개 카드 → 1열 스택 */
  .grid--contact { grid-template-columns: 1fr; }

  .footer__inner { grid-template-columns: 1fr; }
  /* Brand / Support 2열 + Company는 전체 폭 */
  .footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__col--company { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .values { grid-template-columns: 1fr; }

  /* 라인당 3개 → 모바일 2열 */
  .grid--products { grid-template-columns: repeat(2, 1fr); }

  .hero__title { flex-direction: column; gap: 6px; align-items: flex-start; }
  .hero__title-sep { display: none; }

  .line__head { gap: 14px; }
  .line__num { width: 38px; height: 38px; font-size: 13.5px; }

  .footer__nav { gap: 26px 30px; }

  .legal__body table { font-size: 12.5px; }
  .legal__body th, .legal__body td { padding: 9px 10px; }
}

@media (max-width: 420px) {
  .card { padding: 11px; }
  .card__name { font-size: 14px; }
  .card__desc { font-size: 12.5px; }
  .brk { display: none; }
  .btn--buy { font-size: 12px; padding: 10px 10px; }
  .btn { padding: 11px 18px; }
  .hero__actions .btn { flex: 1 1 auto; }
}

/* ---------- 15. Motion / print ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .site-header, .nav-toggle, .btn { display: none !important; }
  body { background: #fff; }
}