/* Reading sizes for customer-facing text. Keep headings, photos and drawings at their own scale. */
@font-face {
  font-family: "Pretendard Variable";
  src: url("../design-5d217c72b888a0bf/PretendardVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root {
  font-family: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --type-body: clamp(1.25rem, 1.18rem + .3vw, 1.375rem);
  --type-action: clamp(1.125rem, 1.065rem + .28vw, 1.25rem);
  --type-note: clamp(1.125rem, 1.09rem + .16vw, 1.1875rem);
  --type-caption: 1rem;
  --ink: #202c38;
  --reading-ink: #414b55;
  --muted: #57636e;
  --blue: #285475;
  --weight-copy: 430;
  --weight-link: 550;
  --weight-heading: 650;
}

body { font-weight: var(--weight-copy); }
button, input, select, textarea { font-family: inherit; }
h1, h2, h3 { font-weight: var(--weight-heading); letter-spacing: -.025em; }
:where([data-page]:not([data-page="quote"])) { font-size: var(--type-body); }
main .eyebrow { font-size: var(--type-caption); font-weight: 500; line-height: 1.5; letter-spacing: .08em; }
.text-link, .button { font-size: var(--type-action); font-weight: var(--weight-link); }
.button.primary, .button.brand-primary { font-weight: 600; }
.page-intro p:not(.eyebrow), .section-heading > div > p:not(.eyebrow),
.bottom-note { font-size: var(--type-body); font-weight: var(--weight-copy); line-height: 1.75; color: var(--reading-ink); }
.text-link { line-height: 1.55; }
.text-link:focus-visible, .button:focus-visible, .product-actions a:focus-visible {
  outline: 3px solid var(--blue); outline-offset: 4px;
}
.brand-hero .hero-description { font-size: var(--type-body); color: white; font-weight: 475; line-height: 1.75; }
.brand-hero .button { font-size: var(--type-action); }
.brand-hero .hero-caption { color: #e8eff7; font-size: .9375rem; }
.preview-bar { font-size: var(--type-caption); }
.preview-bar b { font-size: .875rem; }
.footer-main b { font-size: 1.125rem; }
.footer-main p, .footer-main a { font-size: var(--type-note); overflow-wrap: anywhere; }
.site-footer { color: #e5ebf1; }
.footer-bottom { font-size: var(--type-caption); color: #cbd7e2; }

/* Product detail: make the description, actions and specification rows easy to scan together. */
.detail-page .back { font-size: var(--type-action); padding-block: .4em; }
.detail-grid > div, .detail-bottom > * { min-width: 0; }
.detail-grid h1 { font-size: clamp(2.125rem, 1.65rem + 1.8vw, 3rem); }
.detail-grid #detail-description {
  font-size: var(--type-body); font-weight: var(--weight-copy); line-height: 1.75; color: var(--reading-ink);
  word-break: keep-all; overflow-wrap: anywhere;
}
.detail-grid .actions { gap: 12px; }
#standard-spec-links {
  margin-block-start: clamp(1.5rem, 3vw, 2.25rem);
  padding-block-start: clamp(1rem, 1.8vw, 1.5rem);
  border-top: 1px solid var(--line);
}
#standard-spec-links h2 { margin: 0; font-size: var(--type-action); line-height: 1.45; }
#standard-spec-links .actions { margin-top: .875rem; }
.detail-grid .button { font-size: var(--type-action); min-height: 3.125rem; padding: .65em 1em; gap: .85em; }
.detail-grid p.detail-tip:not(.eyebrow) { font-size: var(--type-note); line-height: 1.7; color: var(--reading-ink); }
.detail-page .store-text { font-size: var(--type-action); margin-top: 1em; }
.detail-bottom h2 { font-size: clamp(1.5rem, 1.4rem + .6vw, 1.875rem); }
.detail-bottom table { font-size: var(--type-action); line-height: 1.65; color: var(--reading-ink); }
.detail-bottom th { width: 7.5em; color: var(--ink); }
.detail-bottom th, .detail-bottom td { word-break: keep-all; overflow-wrap: anywhere; }
.detail-bottom aside h3 { font-size: clamp(1.375rem, 1.25rem + .55vw, 1.625rem); }
.detail-bottom aside p:not(.eyebrow) { font-size: var(--type-note); line-height: 1.7; color: var(--reading-ink); }
.detail-bottom aside a { font-size: 1.5rem; }

/* This card appears on the home page as well as in the full product list. */
.product-card h3 { font-size: clamp(1.375rem, 1.22rem + .65vw, 1.625rem); line-height: 1.4; }
.product-card .english { font-size: var(--type-caption); font-weight: 450; line-height: 1.5; overflow-wrap: anywhere; }
.product-actions { flex-wrap: wrap; gap: 4px 12px; }
.product-actions a, .product-actions button { font-size: var(--type-action); font-weight: var(--weight-link); line-height: 1.5; }
.product-actions a { text-decoration: underline; text-underline-offset: .23em; }
.product-quote-note {
  color: var(--reading-ink);
  font-size: var(--type-note);
  font-weight: 500;
  line-height: 1.55;
  word-break: keep-all;
}
.detail-grid #detail-quote-note { font-size: var(--type-body); color: var(--reading-ink); margin-top: 14px; }
.product-toolbar label, .product-toolbar p { font-size: var(--type-note); }
.product-filters button, .product-toolbar input { font-size: var(--type-action); min-height: 44px; }
.product-empty { font-size: var(--type-body); }
#toast, #toast a { font-size: var(--type-note); }

@media (max-width: 760px) {
  .detail-bottom th { width: 6.25em; }
  .detail-bottom th, .detail-bottom td { padding: 12px 8px; }
  .product-card { grid-template-columns: minmax(82px, 30%) minmax(0, 1fr); column-gap: 15px; }
  .product-actions { grid-column: 1 / -1; }
  .product-card .product-image { grid-row: 1 / 3; height: auto; width: 100%; }
}