:root {
  --d-bg: #f2f4f6;
  --d-paper: #ffffff;
  --d-ink: #101820;
  --d-sub: #59636d;
  --d-line: #cfd5da;
  --d-line-dark: #303941;
  --d-blue: #2457ff;
  --d-lime: #c9ff4b;
  --d-coral: #f06449;
  --d-dark: #0c131a;
  --d-max: 1320px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--d-ink);
  background: var(--d-bg);
  font-family: "Noto Sans KR", sans-serif;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
body, button, input, select, textarea { font-family: "Noto Sans KR", sans-serif; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }

.d-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 max(28px, calc((100vw - var(--d-max)) / 2));
  color: white;
  background: var(--d-dark);
  border-bottom: 1px solid var(--d-line-dark);
}
.d-brand { min-height: 44px; display: inline-flex; align-items: center; gap: 10px; }
.d-brand-mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--d-dark);
  background: var(--d-lime);
  font-family: "Archivo", sans-serif;
  font-weight: 800;
}
.d-brand-name { font-family: "Archivo", sans-serif; font-size: 19px; font-weight: 800; }
.d-brand-label { padding-left: 10px; border-left: 1px solid var(--d-line-dark); color: #aeb7bf; font-family: "Archivo", sans-serif; font-size: 11px; font-weight: 700; }
.d-nav { display: flex; align-items: center; gap: 8px; }
.d-nav a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 15px; color: #d8dde1; font-size: 14px; font-weight: 700; }
.d-nav a:hover, .d-nav a:focus-visible { color: white; background: #202a33; }
.d-nav .d-nav-cta { margin-left: 8px; color: var(--d-dark); background: var(--d-lime); }
.d-nav .d-nav-cta:hover, .d-nav .d-nav-cta:focus-visible { color: var(--d-dark); background: #dcff82; }
.d-menu-button { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; color: white; background: transparent; border: 1px solid var(--d-line-dark); }
.d-menu-button svg { width: 21px; height: 21px; }

.d-hero {
  width: min(var(--d-max), 100%);
  min-height: 650px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  background: var(--d-paper);
  border-left: 1px solid var(--d-line);
  border-right: 1px solid var(--d-line);
}
.d-hero-copy { padding: 68px 58px 52px; display: flex; flex-direction: column; justify-content: center; }
.d-kicker { margin: 0 0 22px; display: flex; gap: 8px; flex-wrap: wrap; }
.d-kicker span { min-height: 30px; display: inline-flex; align-items: center; padding: 0 10px; border: 1px solid var(--d-line); color: var(--d-sub); font-size: 12px; font-weight: 800; }
.d-kicker span:first-child { color: white; background: var(--d-blue); border-color: var(--d-blue); }
.d-hero h1 { margin: 0; font-family: "Archivo", "Noto Sans KR", sans-serif; font-size: 68px; line-height: 1.04; letter-spacing: 0; }
.d-lead { max-width: 590px; margin: 24px 0 0; color: var(--d-sub); font-size: 17px; font-weight: 500; line-height: 1.75; }
.d-search { margin-top: 34px; }
.d-search > label { display: block; margin-bottom: 9px; font-size: 13px; font-weight: 800; }
.d-search-control { height: 62px; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding-left: 18px; background: white; border: 2px solid var(--d-ink); }
.d-search-control svg { width: 21px; height: 21px; }
.d-search-control input { width: 100%; min-width: 0; height: 56px; color: var(--d-ink); background: transparent; border: 0; outline: 0; font-size: 16px; }
.d-search-control input::placeholder { color: #8b949c; }
.d-search-control button { min-width: 90px; height: 58px; color: white; background: var(--d-blue); border: 0; font-weight: 800; cursor: pointer; }
.d-search-control:focus-within { outline: 3px solid rgba(36, 87, 255, 0.22); outline-offset: 3px; }
.d-facts { margin: 34px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--d-line); border-bottom: 1px solid var(--d-line); }
.d-facts div { padding: 18px 12px 18px 0; }
.d-facts div + div { padding-left: 18px; border-left: 1px solid var(--d-line); }
.d-facts dt { color: var(--d-sub); font-size: 11px; font-weight: 800; }
.d-facts dd { margin: 5px 0 0; font-family: "Archivo", "Noto Sans KR", sans-serif; font-size: 25px; font-weight: 800; }
.d-hero-media { position: relative; min-height: 650px; margin: 0; overflow: hidden; background: #dfe5e8; }
.d-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 54% center; filter: saturate(0.85) contrast(1.04); }
.d-hero-media::after { content: ""; position: absolute; inset: 0; border-left: 1px solid rgba(16, 24, 32, 0.18); pointer-events: none; }
.d-hero-media figcaption { position: absolute; right: 22px; bottom: 22px; width: min(280px, calc(100% - 44px)); padding: 16px; color: white; background: rgba(12, 19, 26, 0.92); border-left: 5px solid var(--d-lime); }
.d-hero-media figcaption span, .d-hero-media figcaption small { display: block; color: #bfc7cd; font-family: "Archivo", sans-serif; font-size: 10px; font-weight: 700; }
.d-hero-media figcaption strong { display: block; margin: 5px 0; font-size: 15px; }

.d-catalog { width: min(var(--d-max), calc(100% - 48px)); margin: 0 auto; padding: 104px 0; }
.d-section-heading { display: grid; grid-template-columns: 230px minmax(0, 760px); gap: 34px; align-items: start; margin-bottom: 48px; }
.d-section-heading > p, .d-process-copy > p, .d-inquiry > div > p { margin: 8px 0 0; color: var(--d-blue); font-family: "Archivo", sans-serif; font-size: 12px; font-weight: 800; }
.d-section-heading h2, .d-process h2, .d-inquiry h2 { margin: 0; font-family: "Archivo", "Noto Sans KR", sans-serif; font-size: 46px; line-height: 1.16; letter-spacing: 0; }
.d-catalog-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 34px; align-items: start; }
.d-filter { position: sticky; top: 92px; border-top: 3px solid var(--d-ink); }
.d-filter > p { margin: 0; padding: 18px 0 14px; font-size: 13px; font-weight: 800; }
.d-filter-buttons { display: grid; }
.d-filter-buttons button { min-height: 48px; padding: 0 14px; text-align: left; color: var(--d-sub); background: transparent; border: 0; border-top: 1px solid var(--d-line); cursor: pointer; font-weight: 700; }
.d-filter-buttons button:last-child { border-bottom: 1px solid var(--d-line); }
.d-filter-buttons button[aria-pressed="true"] { color: white; background: var(--d-blue); border-color: var(--d-blue); }
.d-filter-note { margin-top: 20px; padding: 16px 0; display: grid; grid-template-columns: 20px 1fr; gap: 10px; color: var(--d-sub); border-top: 1px solid var(--d-line); }
.d-filter-note svg { width: 18px; height: 18px; color: var(--d-coral); }
.d-filter-note p { margin: 0; font-size: 12px; line-height: 1.65; }
.d-results-bar { min-height: 48px; display: flex; align-items: center; justify-content: space-between; border-top: 3px solid var(--d-ink); border-bottom: 1px solid var(--d-line); font-size: 13px; font-weight: 700; }
.d-results-bar strong { font-family: "Archivo", "Noto Sans KR", sans-serif; font-size: 15px; }
.d-product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-left: 1px solid var(--d-line); }
.d-product-card { min-height: 190px; display: grid; grid-template-columns: 44px minmax(0, 1fr) 28px; gap: 18px; align-items: start; padding: 26px; background: var(--d-paper); border-right: 1px solid var(--d-line); border-bottom: 1px solid var(--d-line); transition: background 160ms ease-out, color 160ms ease-out; }
.d-product-card[hidden] { display: none; }
.d-product-card:hover, .d-product-card:focus-visible { color: white; background: var(--d-dark); outline: 0; }
.d-card-index { width: 34px; height: 26px; display: grid; place-items: center; color: var(--d-dark); background: var(--d-lime); font-family: "Archivo", sans-serif; font-size: 11px; font-weight: 800; }
.d-product-card p { margin: 0 0 10px; color: var(--d-blue); font-family: "Archivo", sans-serif; font-size: 10px; font-weight: 800; }
.d-product-card:hover p, .d-product-card:focus-visible p { color: var(--d-lime); }
.d-product-card h3 { margin: 0; font-size: 24px; line-height: 1.25; }
.d-product-card div > span { display: block; margin-top: 12px; color: var(--d-sub); font-size: 13px; line-height: 1.55; }
.d-product-card:hover div > span, .d-product-card:focus-visible div > span { color: #bfc7cd; }
.d-product-card > svg { width: 22px; height: 22px; }
.d-empty { margin: 0; padding: 40px 24px; text-align: center; color: var(--d-sub); background: white; border: 1px solid var(--d-line); border-top: 0; }

.d-category-index { padding: 104px max(24px, calc((100vw - var(--d-max)) / 2)); color: white; background: var(--d-dark); }
.d-section-heading-light > p { color: var(--d-lime); }
.d-category-rows { border-top: 1px solid var(--d-line-dark); }
.d-category-rows article { min-height: 86px; display: grid; grid-template-columns: 72px 220px minmax(0, 1fr) 150px; gap: 20px; align-items: center; border-bottom: 1px solid var(--d-line-dark); scroll-margin-top: 88px; }
.d-category-rows b { color: var(--d-lime); font-family: "Archivo", sans-serif; font-size: 12px; }
.d-category-rows h3 { margin: 0; font-size: 19px; }
.d-category-rows p { margin: 0; color: #adb6bd; font-size: 14px; }
.d-category-rows span { justify-self: end; color: var(--d-coral); font-size: 12px; font-weight: 700; }

.d-process { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(460px, 0.88fr); background: var(--d-paper); }
.d-process figure { position: relative; min-height: 610px; margin: 0; overflow: hidden; }
.d-process figure img { width: 100%; height: 100%; object-fit: cover; }
.d-process figure figcaption { position: absolute; left: 18px; bottom: 18px; padding: 10px 12px; color: white; background: rgba(12, 19, 26, 0.9); font-size: 10px; }
.d-process-copy { padding: 74px 58px; color: white; background: var(--d-blue); }
.d-process-copy > p { color: var(--d-lime); }
.d-process ol { margin: 38px 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,0.32); }
.d-process li { min-height: 98px; display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.32); }
.d-process li > b { color: var(--d-lime); font-family: "Archivo", sans-serif; font-size: 13px; }
.d-process strong, .d-process span { display: block; }
.d-process strong { font-size: 17px; }
.d-process span { margin-top: 6px; color: #dfe5ff; font-size: 13px; line-height: 1.6; }

.d-inquiry { padding: 104px max(24px, calc((100vw - 1120px) / 2)); display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 70px; align-items: start; background: var(--d-lime); }
.d-inquiry > div > p { color: var(--d-blue); }
.d-contact-placeholder { display: inline-flex; align-items: center; min-height: 36px; margin-top: 28px; padding: 0 12px; color: white; background: var(--d-dark); font-size: 12px; font-weight: 800; }
.d-inquiry-form { display: grid; grid-template-columns: 130px 1fr; border-top: 3px solid var(--d-ink); }
.d-inquiry-form label { min-height: 56px; display: flex; align-items: center; font-size: 13px; font-weight: 800; border-bottom: 1px solid rgba(16,24,32,0.35); }
.d-inquiry-form input, .d-inquiry-form select, .d-inquiry-form textarea { width: 100%; min-height: 56px; padding: 13px; color: var(--d-ink); background: transparent; border: 0; border-bottom: 1px solid rgba(16,24,32,0.35); border-radius: 0; outline: 0; }
.d-inquiry-form textarea { resize: vertical; }
.d-inquiry-form input:focus, .d-inquiry-form select:focus, .d-inquiry-form textarea:focus { background: rgba(255,255,255,0.52); box-shadow: inset 4px 0 0 var(--d-blue); }
.d-inquiry-form button { grid-column: 1 / -1; min-height: 58px; margin-top: 18px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; color: white; background: var(--d-dark); border: 0; cursor: pointer; font-weight: 800; }
.d-inquiry-form button:hover, .d-inquiry-form button:focus-visible { background: var(--d-blue); outline: 0; }
.d-inquiry-form button svg { width: 19px; height: 19px; }
.d-form-status { grid-column: 1 / -1; margin: 10px 0 0; color: #34410f; font-size: 11px; line-height: 1.5; }

.d-footer { min-height: 104px; padding: 24px max(24px, calc((100vw - var(--d-max)) / 2)); display: flex; align-items: center; justify-content: space-between; gap: 24px; color: #b9c1c7; background: var(--d-dark); border-top: 1px solid var(--d-line-dark); }
.d-footer div { display: flex; align-items: center; gap: 14px; }
.d-footer strong { color: white; font-family: "Archivo", sans-serif; }
.d-footer span { font-size: 12px; }
.d-footer a { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; color: white; font-size: 13px; font-weight: 700; }
.d-footer svg { width: 17px; height: 17px; }

a:focus-visible, button:focus-visible { outline: 3px solid rgba(36, 87, 255, 0.45); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; } }

@media (max-width: 1080px) {
  .d-hero { grid-template-columns: 1fr; }
  .d-hero-copy { padding: 64px 48px; }
  .d-hero-media { min-height: 520px; }
  .d-catalog-layout { grid-template-columns: 1fr; }
  .d-filter { position: static; }
  .d-filter-buttons { grid-template-columns: repeat(4, 1fr); }
  .d-filter-buttons button { text-align: center; border: 1px solid var(--d-line); border-right: 0; }
  .d-filter-buttons button:last-child { border-right: 1px solid var(--d-line); }
  .d-filter-note { max-width: 480px; }
  .d-process { grid-template-columns: 1fr; }
  .d-process figure { min-height: 500px; }
  .d-process-copy { padding: 64px 48px; }
}

@media (max-width: 820px) {
  .d-header { padding: 0 18px; }
  .d-brand-label { display: none; }
  .d-menu-button { display: inline-flex; }
  .d-nav { position: absolute; top: 68px; left: 0; right: 0; display: none; padding: 12px 18px 18px; flex-direction: column; align-items: stretch; background: var(--d-dark); border-bottom: 1px solid var(--d-line-dark); }
  .d-nav.is-open { display: flex; }
  .d-nav a { justify-content: space-between; border-bottom: 1px solid var(--d-line-dark); }
  .d-nav .d-nav-cta { margin-left: 0; justify-content: center; border-bottom: 0; }
  .d-hero h1 { font-size: 50px; }
  .d-section-heading { grid-template-columns: 1fr; gap: 14px; }
  .d-section-heading h2, .d-process h2, .d-inquiry h2 { font-size: 38px; }
  .d-product-grid { grid-template-columns: 1fr; }
  .d-category-rows article { grid-template-columns: 42px minmax(0, 1fr) 130px; padding: 16px 0; }
  .d-category-rows p { grid-column: 2 / -1; }
  .d-category-rows span { grid-column: 3; grid-row: 1; }
  .d-inquiry { grid-template-columns: 1fr; gap: 44px; }
}

@media (max-width: 560px) {
  .d-brand-name { font-size: 17px; }
  .d-hero { border: 0; }
  .d-hero-copy { padding: 48px 20px 42px; }
  .d-hero h1 { font-size: 41px; }
  .d-lead { font-size: 15px; }
  .d-search-control { height: auto; grid-template-columns: 22px minmax(0, 1fr); padding: 0 12px 0 14px; }
  .d-search-control button { grid-column: 1 / -1; width: calc(100% + 26px); min-height: 50px; margin-left: -14px; }
  .d-facts { grid-template-columns: 1fr; }
  .d-facts div { padding: 14px 0; }
  .d-facts div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--d-line); }
  .d-facts div { display: flex; align-items: center; justify-content: space-between; }
  .d-facts dd { margin: 0; font-size: 21px; }
  .d-hero-media { min-height: 420px; }
  .d-catalog { width: calc(100% - 32px); padding: 76px 0; }
  .d-section-heading h2, .d-process h2, .d-inquiry h2 { font-size: 32px; }
  .d-filter-buttons { grid-template-columns: repeat(2, 1fr); }
  .d-filter-buttons button:nth-child(2) { border-right: 1px solid var(--d-line); }
  .d-product-card { min-height: 170px; grid-template-columns: 38px minmax(0, 1fr) 24px; gap: 12px; padding: 22px 18px; }
  .d-product-card h3 { font-size: 22px; }
  .d-category-index { padding: 76px 18px; }
  .d-category-rows article { grid-template-columns: 34px minmax(0, 1fr); gap: 10px; }
  .d-category-rows p { grid-column: 2; }
  .d-category-rows span { grid-column: 2; grid-row: auto; justify-self: start; }
  .d-process figure { min-height: 390px; }
  .d-process-copy { padding: 58px 20px; }
  .d-inquiry { padding: 76px 20px; }
  .d-inquiry-form { grid-template-columns: 1fr; }
  .d-inquiry-form label { min-height: 42px; padding-top: 8px; border-bottom: 0; }
  .d-inquiry-form input, .d-inquiry-form select, .d-inquiry-form textarea { background: rgba(255,255,255,0.46); }
  .d-footer { align-items: flex-start; flex-direction: column; }
  .d-footer div { align-items: flex-start; flex-direction: column; gap: 5px; }
}