:root {
  /* Black & white system — orange kept only for the single highest-priority conversion action */
  --navy-950: #0a0a0a;
  --navy-900: #171717;
  --navy: #1c1c1c;
  --navy-600: #3a3a3a;
  --navy-100: #f0f0f0;
  --ink: #141414;
  --subtle: #5c5c5c;
  --muted: #8f8f8f;
  --line: #e6e6e6;
  --soft: #f6f6f6;
  --white: #ffffff;
  --accent: #ff8300;
  --accent-strong: #c25a00;
  --accent-strong-hover: #a24a00;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  /* Round 12: softened site-wide (user: shadows read as heavy and clipped).
     Smaller offsets/blurs keep every shadow inside its container's painting
     room, so nothing shears off mid-gradient. */
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, .05);
  --shadow: 0 8px 24px rgba(0, 0, 0, .08);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, .13);
  --font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto,
    'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--white);
  font-family: var(--font);
  word-break: keep-all;
  overflow-wrap: break-word;
  font-feature-settings: "tnum" 1;
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

::selection {
  background: var(--navy);
  color: #fff;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--navy-600);
  outline-offset: 2px;
}

.wrap {
  width: min(1240px, calc(100% - 40px));
  margin: 0 auto;
}

/* ---------- Topbar ---------- */

.topbar {
  background: var(--navy-950);
  color: rgba(255, 255, 255, .92);
  font-size: 14.5px;
}

.topbar__inner {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.topbar a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.site-header__inner {
  display: flex;
  min-height: 82px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  font-size: 18px;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: -.01em;
}

.brand img {
  width: auto;
  max-height: 44px;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 26px;
}

.main-nav a {
  position: relative;
  color: var(--ink);
  font-size: 17px;
  font-weight: 500;
  text-decoration: none;
  padding: 4px 0;
}

.main-nav a:hover {
  color: var(--navy);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ---------- Buttons ---------- */

.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 28px;
  border: 1px solid var(--navy);
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: normal;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease;
  box-shadow: 0 5px 14px rgba(0, 0, 0, .12);
}

.button:hover {
  background: var(--navy-900);
  border-color: var(--navy-900);
  transform: translateY(-2px);
  box-shadow: 0 7px 18px rgba(0, 0, 0, .16);
}

/* Reserved for the single highest-priority conversion action (the phone-call CTA)
   and the hero headline emphasis badge (.hero h1 .hl) — orange stays rare and
   high-impact rather than scattered through the interface. */
.button--accent {
  border-color: var(--accent-strong);
  background: var(--accent-strong);
  box-shadow: 0 5px 14px rgba(194, 90, 0, .20);
}

.button--accent:hover {
  background: var(--accent-strong-hover);
  border-color: var(--accent-strong-hover);
  box-shadow: 0 7px 18px rgba(194, 90, 0, .24);
}

.button--dark {
  border-color: rgba(255, 255, 255, .55);
  background: transparent;
  color: #fff;
  box-shadow: none;
}

.button--dark:hover {
  background: rgba(255, 255, 255, .12);
  border-color: #fff;
  box-shadow: none;
}

.button--ghost {
  border-color: var(--line);
  background: #fff;
  color: var(--navy);
  box-shadow: none;
}

.button--ghost:hover {
  border-color: var(--navy);
  background: var(--navy-100);
  transform: translateY(-2px);
  box-shadow: none;
}

.button--light {
  border-color: #fff;
  background: #fff;
  color: var(--navy);
  box-shadow: 0 5px 14px rgba(0, 0, 0, .10);
}

.button--light:hover {
  background: var(--soft);
  transform: translateY(-2px);
}

/* ---------- More-link (label + circular arrow button) ---------- */
/* A lighter-weight "view all / see more" affordance than a full pill
   button: plain text label beside a small round icon button. Reusable
   anywhere a section links out to a fuller listing. */

.more-link {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  color: var(--navy);
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
}

.more-link__icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--navy);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}

.more-link__icon svg {
  width: 19px;
  height: 19px;
}

.more-link:hover .more-link__icon {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  transform: translateX(3px);
}

/* ---------- Scroll-strip next button (overlaid on .gallery-scroll / .case-scroll) ---------- */
/* A circular "scroll forward" control pinned to the right edge of a
   horizontal strip — distinct from .more-link's "go see the full list"
   role: this one just pages the same strip forward in place. Sits as a
   sibling of the scroll element (not a child of it), so the strip's own
   right-edge fade mask — which clips everything painted inside it —
   never hides the button. */

.scroll-strip {
  position: relative;
  /* Without this, a grid/flex ancestor (e.g. .gallery-split's grid track)
     sizes itself to fit the non-shrinking .gallery-scroll/.case-scroll
     content inside instead of respecting its own track width, since a
     plain block div's automatic min-width is content-based, not 0 — the
     classic CSS Grid/Flexbox "min-width: auto" blowout. The scroll
     element itself is exempt from this (overflow-x: auto resolves its
     own auto-minimum to 0), but this wrapper isn't unless told to be. */
  min-width: 0;
}

.scroll-strip__next {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: var(--navy);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, transform .15s ease, opacity .15s ease;
}

.scroll-strip__next svg {
  width: 19px;
  height: 19px;
}

.scroll-strip__next:hover {
  background: var(--navy);
  color: #fff;
  transform: translateY(-50%) scale(1.06);
}

.scroll-strip__next.at-end {
  opacity: 0;
  pointer-events: none;
}

.no-js .scroll-strip__next {
  display: none;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 600px;
  display: grid;
  align-items: center;
  padding: 90px 0;
  background:
    linear-gradient(100deg, rgba(6, 6, 6, .92), rgba(6, 6, 6, .66) 55%, rgba(6, 6, 6, .16)),
    var(--hero-image);
  background-position: center;
  background-size: cover;
  color: #fff;
}

.hero:has(+ .stat-band) {
  padding-bottom: 154px;
}

.hero--home {
  --hero-image: url("../assets/source-images/wr-280-01.jpg");
}

.hero--service {
  --hero-image: url("../assets/source-images/wr-264-01.jpg");
}

.hero--cases {
  --hero-image: url("../assets/source-images/wr-285-02.jpg");
}

.hero--products {
  --hero-image: url("../assets/source-images/wr-274-01.jpg");
}

.hero--quote {
  --hero-image: url("../assets/source-images/wr-278-01.jpg");
}

.hero__content {
  max-width: 740px;
  margin: 0 auto;
  text-align: center;
}

@media (prefers-reduced-motion: no-preference) {
  .hero__content {
    animation: hero-fade-up .7s cubic-bezier(.2, .7, .3, 1) both;
  }
}

@keyframes hero-fade-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  color: var(--subtle);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: '';
  width: 22px;
  height: 2px;
  background: currentColor;
}

.hero .eyebrow,
.panel--dark .eyebrow,
.section--dark .eyebrow {
  color: rgba(255, 255, 255, .68);
}

h1,
h2,
h3 {
  line-height: 1.4;
  letter-spacing: normal;
  font-weight: 700;
}

h1 {
  margin: 0 0 20px;
  font-size: clamp(38px, 4.6vw, 60px);
}

h2 {
  margin: 0 0 18px;
  font-size: clamp(28px, 3.4vw, 46px);
}

h3 {
  margin: 0 0 9px;
  font-size: 22px;
}

p {
  margin: 0 0 16px;
}

.lead {
  max-width: 780px;
  color: var(--subtle);
  font-size: 19px;
  line-height: 1.72;
}

.hero .lead {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  color: rgba(255, 255, 255, .92);
  font-size: 20px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
}

/* ---------- Stat band (homepage, overlaps hero) ---------- */

.stat-band {
  position: relative;
  z-index: 5;
  margin-top: -78px;
}

.stat-band__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.stat-band__item {
  padding: 32px 20px;
  text-align: center;
  border-right: 1px solid var(--line);
}

.stat-band__item:last-child {
  border-right: none;
}

.stat-band__item strong {
  display: block;
  font-size: clamp(30px, 3vw, 40px);
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -.02em;
}

.stat-band__item span {
  display: block;
  margin-top: 6px;
  color: var(--subtle);
  font-size: 14.5px;
  font-weight: 600;
}

/* ---------- Work steps (about.html "HOW WE WORK", round 11) ---------- */
/* Round 11: replaced the plain centered-text 4-card grid (.about-stats,
   now unused) with numbered, icon-led cards -- the old version read as too
   sparse/empty per direct feedback. Large pale watermark numerals +
   dark icon badges + left-aligned copy give each card real visual weight
   without introducing any new colors (icon badges reuse --navy-950, the
   numerals reuse --navy-100, both already in the palette). */

.work-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.work-step {
  position: relative;
  padding: 30px 24px 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.work-step:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--navy);
}

.work-step__num {
  position: absolute;
  top: -6px;
  right: 14px;
  z-index: 0;
  color: var(--navy-100);
  font-size: 64px;
  font-weight: 800;
  line-height: 1;
  user-select: none;
}

.work-step__icon {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 18px;
  border-radius: 12px;
  background: var(--navy-950);
  color: #fff;
}

.work-step__icon svg {
  width: 22px;
  height: 22px;
}

.work-step h3 {
  position: relative;
  z-index: 1;
  margin: 0 0 8px;
  font-size: 18px;
}

.work-step p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--subtle);
  font-size: 14.5px;
  line-height: 1.6;
}

/* ---------- Sections ---------- */

.section {
  padding: clamp(72px, 9vw, 128px) 0;
}

.section--soft {
  background: var(--soft);
}

.section--dark {
  background: linear-gradient(155deg, var(--navy-900), var(--navy-950));
  color: #fff;
}

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}

.section-head__copy {
  max-width: 780px;
}

.breadcrumb-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
}

.breadcrumb {
  padding: 22px 0 0;
  color: rgba(255, 255, 255, .72);
  font-size: 14px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .55);
}

.breadcrumb a {
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: #fff;
}

/* Round 13: breadcrumbs on light (article/guide) pages — the base component
   is white text for dark hero overlays, which is invisible on white. */
.breadcrumb--onlight {
  padding: 0;
  color: var(--muted);
  text-shadow: none;
}

.breadcrumb--onlight a {
  color: var(--muted);
}

.breadcrumb--onlight a:hover {
  color: var(--navy);
}

/* ---------- Cards ---------- */

.hub-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.hub-card {
  min-height: 210px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: var(--radius-lg);
  background: #fff;
  padding: 26px;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}

.hub-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}

.hub-card span {
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: .08em;
}

.hub-card h3 {
  color: var(--ink);
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.category-card {
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}

.category-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}

.category-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .5s ease;
}

.category-card:hover img {
  transform: scale(1.06);
}

.category-card__body {
  display: block;
  padding: 22px;
}

.category-grid--4up {
  grid-template-columns: repeat(4, 1fr);
}

.meta {
  color: var(--subtle);
  font-size: 15px;
}

.product-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 40px 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 110px;
}

.product-detail:first-of-type {
  padding-top: 8px;
}

.product-detail:last-of-type {
  border-bottom: none;
  padding-bottom: 8px;
}

.product-detail__copy h3 {
  margin-bottom: 12px;
}

.product-detail__copy p {
  color: var(--subtle);
  margin-bottom: 20px;
}

.product-detail__gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.product-detail__gallery img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius);
}

.crosslink-line {
  margin: 18px 0 0;
  color: var(--subtle);
  font-size: 14.5px;
}

.crosslink-line a {
  color: var(--navy);
  font-weight: 700;
  text-decoration: none;
}

.crosslink-line a:hover {
  text-decoration: underline;
}

.split {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 44px;
  align-items: start;
}

.panel {
  border-radius: var(--radius-lg);
  background: #fff;
  padding: 28px;
  box-shadow: var(--shadow);
}

.panel--dark {
  background: linear-gradient(155deg, var(--navy-900), var(--navy-950));
  color: #fff;
}

.panel--dark .meta,
.panel--dark .lead {
  color: rgba(255, 255, 255, .78);
}

.spec-list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
}

.spec-list li {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  list-style: none;
}

.spec-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.panel--dark .spec-list li {
  border-bottom-color: rgba(255, 255, 255, .14);
}

.spec-list strong {
  color: var(--navy);
  font-weight: 700;
}

.panel--dark .spec-list strong {
  color: #fff;
}

/* ---------- About page: real-photo grid + greeting photo layout ---------- */
/* Round 9: the ABOUT intro text and the GREETING panel used to share one
   .split row, stretched to match the taller panel's height -- on a lot of
   real viewport widths the intro column ran out of content well before the
   panel did, reading as a big empty gap. Pairing the intro with a real
   photo grid instead (own natural height, no forced match) and giving the
   greeting its own full-width section below fixes that at the layout
   level, not just by tweaking spacing. */

.about-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.about-photo-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .4s ease;
}

.about-photo-grid img:hover {
  transform: scale(1.03);
}

/* Round 11: the greeting card used to be a narrow (.greeting-panel,
   max-width 760px) dark card floating alone in a wide white section --
   read as sparse per direct feedback. Replaced with a full-bleed dark
   section (.section--dark on the parent <section>) pairing the letter
   with a real site photo, reusing the same .split grid the ABOUT intro
   already uses so the two sections feel like one consistent system. */
.greeting-layout {
  grid-template-columns: .85fr 1.15fr;
  align-items: stretch;
}

.greeting-photo {
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 360px;
  box-shadow: var(--shadow-lg);
}

.greeting-photo img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
}

@media (max-width: 680px) {
  .about-photo-grid {
    gap: 10px;
  }

  .greeting-photo,
  .greeting-photo img {
    min-height: 240px;
  }
}

.process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.process-step {
  border-radius: var(--radius);
  border-top: 3px solid var(--navy);
  background: #fff;
  padding: 22px;
  box-shadow: var(--shadow-sm);
}

.process-step span {
  display: block;
  margin-bottom: 14px;
  color: var(--navy);
  font-weight: 800;
}

/* ---------- Case grid / filter ---------- */

.case-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 26px;
}

.pill {
  display: inline-block;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: #fff;
  padding: 10px 16px;
  color: var(--subtle);
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.pill:hover {
  border-color: var(--navy);
  color: var(--navy);
}

.pill.is-active {
  border-color: var(--navy);
  background: var(--navy);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .14);
}

.case-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.case-card {
  overflow: hidden;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}

.case-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
}

.case-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform .5s ease;
}

.case-card:hover img {
  transform: scale(1.07);
}

.case-card__body {
  padding: 18px 20px 20px;
}

.case-card__body strong {
  display: block;
  margin-bottom: 5px;
  color: var(--navy);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .01em;
}

.case-card__body .meta {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
}

/* ---------- CTA band ---------- */
/* Deliberately light (not dark) — this section sits directly above the
   near-black .footer, and a dark-on-dark stack with only a hairline border
   read as one blended block. A light band creates a clean, obvious seam. */

.cta-band {
  padding: 60px 0;
  background: var(--soft);
  color: var(--ink);
  border-top: 1px solid var(--line);
}

.cta-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.cta-band h2 {
  margin-bottom: 8px;
  color: var(--ink);
  font-size: clamp(25px, 2.6vw, 34px);
}

.cta-band .lead {
  margin-bottom: 0;
  max-width: 560px;
  color: var(--subtle);
  font-size: 17px;
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  flex-shrink: 0;
}

.cta-band .button--light {
  border-color: var(--navy);
  background: transparent;
  color: var(--navy);
  box-shadow: none;
}

.cta-band .button--light:hover {
  background: var(--navy);
  color: #fff;
  transform: translateY(-2px);
}

/* ---------- Forms ---------- */

.quote-layout {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 28px;
}

.contact-list {
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 12px 14px;
  margin: 24px 0;
}

.contact-list dt {
  color: rgba(255, 255, 255, .68);
}

.contact-list dd {
  margin: 0;
  font-weight: 700;
}

.contact-list a {
  color: #fff;
}

/* ---------- CEO greeting (about.html panel--dark) ---------- */
/* A real letter from the representative, not a stats/photo callout --
   see about.html for why. .greeting-text keeps body copy readable on the
   dark panel (softer than pure white); .about-signature echoes the
   handwritten signature from the source document via Nanum Pen Script,
   with a plain-text fallback if the webfont doesn't load. */

.greeting-text p {
  margin: 0 0 14px;
  color: rgba(255, 255, 255, .84);
  font-size: 15.5px;
  line-height: 1.7;
}

.greeting-text p:last-child {
  margin-bottom: 0;
}

.about-signature {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 10px;
  margin: 18px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .16);
}

.about-signature span {
  color: rgba(255, 255, 255, .68);
  font-size: 14.5px;
  font-weight: 600;
}

.about-signature strong {
  color: #fff;
  font-family: "Nanum Pen Script", "Pretendard Variable", sans-serif;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: .04em;
}

.panel--dark .more-link {
  color: #fff;
}

.panel--dark .more-link__icon {
  border-color: rgba(255, 255, 255, .4);
  background: transparent;
  color: #fff;
}

.panel--dark .more-link:hover .more-link__icon {
  background: #fff;
  border-color: #fff;
  color: var(--navy);
}

.form {
  border-radius: var(--radius-lg);
  background: #fff;
  padding: 28px;
  box-shadow: var(--shadow);
}

.field {
  display: grid;
  gap: 7px;
  margin-bottom: 15px;
}

label {
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
}

input,
textarea,
select {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font: inherit;
  color: var(--ink);
  transition: border-color .15s ease;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--navy-600);
  outline: none;
}

textarea {
  min-height: 130px;
  resize: vertical;
}

.content {
  max-width: 880px;
}

.content h2 {
  margin-top: 44px;
}

/* ---------- Footer ---------- */

.footer {
  padding: 58px 0 36px;
  background: var(--navy-950);
  color: rgba(255, 255, 255, .74);
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 24px;
}

.footer strong {
  color: #fff;
  font-size: 18px;
  font-weight: 800;
}

.footer p {
  margin: 0 0 6px;
}

.footer a {
  color: rgba(255, 255, 255, .74);
  text-decoration: none;
}

.footer a:hover {
  color: #fff;
}

/* ---------- Responsive ---------- */

@media (max-width: 1040px) {
  .site-header__inner {
    align-items: flex-start;
    flex-direction: column;
    padding: 14px 0;
    min-height: 0;
  }

  .main-nav,
  .header-actions {
    flex-wrap: wrap;
  }

  .hub-grid,
  .category-grid,
  .process,
  .quote-layout,
  .split,
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .case-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .stat-band__inner {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-band__item:nth-child(2) {
    border-right: none;
  }

  .stat-band__item:nth-child(1),
  .stat-band__item:nth-child(2) {
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 680px) {

  .topbar__inner,
  .section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .hero {
    min-height: 560px;
    padding: 90px 0 56px;
  }

  .hero:has(+ .stat-band) {
    padding-bottom: 210px;
  }

  .stat-band {
    margin-top: -140px;
  }

  .hub-grid,
  .category-grid,
  .process,
  .quote-layout,
  .split,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .case-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .work-steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .spec-list li {
    grid-template-columns: 1fr;
  }

  .cta-band__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .product-detail {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 28px 0;
  }
}

/* ---------- Scroll interactions ---------- */
/* Reveals each element once as it scrolls into view (see interactions.js,
   which unobserves after the first reveal instead of toggling .in-view on
   every crossing) -- so it stays visible regardless of scroll speed or
   direction afterward. Gated on html.js so content stays fully visible if
   JavaScript doesn't run. */

.js .reveal,
.js .reveal-left,
.js .reveal-right {
  transition: opacity .8s cubic-bezier(.16, .7, .3, 1), transform .8s cubic-bezier(.16, .7, .3, 1);
  will-change: opacity, transform;
}

.js .reveal {
  opacity: 0;
  transform: translateY(30px);
}

.js .reveal-left {
  opacity: 0;
  transform: translateX(-44px);
}

.js .reveal-right {
  opacity: 0;
  transform: translateX(44px);
}

.js .reveal.in-view,
.js .reveal-left.in-view,
.js .reveal-right.in-view {
  opacity: 1;
  transform: none;
}

/* Stagger: apply to a parent (e.g. a grid) whose direct children carry
   .reveal / .reveal-left / .reveal-right, so they cascade in one after
   another instead of popping together. */
.stagger > *:nth-child(1) { transition-delay: .04s; }
.stagger > *:nth-child(2) { transition-delay: .1s; }
.stagger > *:nth-child(3) { transition-delay: .16s; }
.stagger > *:nth-child(4) { transition-delay: .22s; }
.stagger > *:nth-child(5) { transition-delay: .28s; }
.stagger > *:nth-child(6) { transition-delay: .34s; }
.stagger > *:nth-child(7) { transition-delay: .4s; }
.stagger > *:nth-child(8) { transition-delay: .46s; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js .reveal-left,
  .js .reveal-right {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Animated underline on nav links, in keeping with the rest of the hover
   language (buttons already lift on hover). */
.main-nav a {
  overflow: hidden;
}

.main-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  background: currentColor;
  transition: right .25s cubic-bezier(.16, .7, .3, 1);
}

.main-nav a:hover::after {
  right: 0;
}

/* ---------- Hero background carousel (homepage only) ---------- */

.hero--carousel {
  background: var(--navy-950);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero__bg-slide {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  opacity: 0;
  transition: opacity 1.4s ease;
}

.hero__bg-slide.is-active {
  opacity: 1;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg, rgba(6, 6, 6, .92), rgba(6, 6, 6, .66) 55%, rgba(6, 6, 6, .16));
}

.hero--carousel .hero__content {
  position: relative;
  z-index: 2;
}

.hero__dots {
  position: absolute;
  left: 50%;
  bottom: 26px;
  z-index: 2;
  display: flex;
  gap: 9px;
  transform: translateX(-50%);
}

.hero__dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .4);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}

.hero__dots button.is-active {
  background: #fff;
  transform: scale(1.35);
}

/* ---------- Hero headline emphasis badge ---------- */

.hero h1 .hl {
  display: inline-block;
  color: var(--ink);
  background: var(--accent);
  padding: 3px 12px;
  border-radius: 8px;
  line-height: 1.3;
}

/* ---------- Centered section head (used by wide, single-focus intro sections) ---------- */

.section-head--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.section-head--center .section-head__copy {
  max-width: 640px;
}

.section-head--center .eyebrow {
  justify-content: center;
}

/* ---------- Gallery split (sticky intro + horizontal-scroll case strip) ---------- */

.gallery-split {
  display: grid;
  grid-template-columns: .78fr 1.7fr;
  gap: 48px;
  align-items: center;
}

.gallery-split__copy {
  position: sticky;
  top: 110px;
}

.gallery-split__copy .meta {
  font-size: 17px;
}

.gallery-scroll {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  /* Round 12: an overflow-x:auto box clips on BOTH axes, so card shadows
     were shearing off at the old 4/14px padding edges -- visibly "cut"
     at rest and worse on hover. Generous padding gives shadows room to
     finish fading inside the clip box; the matching negative margins
     cancel it out of the page layout. scroll-padding keeps snap points
     aligned to the visible card position instead of the enlarged box. */
  padding: 24px 24px 36px;
  margin: -24px -24px -36px;
  scroll-padding-left: 24px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.gallery-scroll::-webkit-scrollbar {
  display: none;
}

.gallery-card {
  flex: 0 0 320px;
  scroll-snap-align: start;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: var(--ink);
  transition: transform .2s ease, box-shadow .2s ease;
}

.gallery-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}

.gallery-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .5s ease;
}

.gallery-card:hover img {
  transform: scale(1.06);
}

.gallery-card__body {
  padding: 20px 22px 22px;
}

.gallery-card__tag {
  display: inline-block;
  margin-bottom: 12px;
  padding: 5px 13px;
  border-radius: 999px;
  background: var(--navy-100);
  color: var(--navy);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .04em;
}

.gallery-card__body h3 {
  margin-bottom: 6px;
  font-size: 22px;
}

.gallery-card__body .meta {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
}

@media (max-width: 1040px) {
  .gallery-split {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .gallery-split__copy {
    position: static;
  }
}

/* ---------- Drag-to-scroll (mouse-drag panning for horizontal strips) ---------- */
/* Paired with the pointer-event utility in interactions.js: dragging
   directly on the photos now pans the strip, in addition to the native
   scrollbar. Touch devices keep their native scroll gesture untouched
   (the JS only engages for pointerType === "mouse"). */

.gallery-scroll,
.case-scroll {
  cursor: grab;
  /* Round 12: the strip's box is now 24px wider each side (shadow room, see
     .gallery-scroll). The mask ramps in over that left zone -- so a passing
     card fades instead of shearing -- and the right fade ends 24px before
     the box edge, i.e. exactly at the strip's original visible edge, so
     mid-scroll content still never leaks into the page gutter. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 24px, black calc(100% - 80px), transparent calc(100% - 24px));
  mask-image: linear-gradient(to right, transparent 0, black 24px, black calc(100% - 80px), transparent calc(100% - 24px));
}

/* JS adds .at-end once the strip is scrolled as far right as it can go, so
   the fade doesn't imply hidden content when there isn't any. Without JS
   (html.no-js) the mask is dropped entirely so nothing is ever obscured. */
.gallery-scroll.at-end,
.case-scroll.at-end {
  /* At the end of the strip only the right FADE is dropped; the left ramp
     stays so cards scrolled past still soften out instead of hard-cutting. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 24px);
  mask-image: linear-gradient(to right, transparent 0, black 24px);
}

.no-js .gallery-scroll,
.no-js .case-scroll {
  -webkit-mask-image: none;
  mask-image: none;
}

.gallery-scroll.is-dragging,
.case-scroll.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

.gallery-scroll img,
.case-scroll img {
  -webkit-user-drag: none;
  user-drag: none;
  user-select: none;
}

/* ---------- Field toolbar row + field panel (index.html case browser) ---------- */
/* Same progressive-enhancement tab+panel mechanism as .product-tabs /
   .product-panel on products.html (reuses its product-panel-in keyframe),
   but each panel holds a short description plus a full drag-scrollable
   strip of every real case in that category, instead of picking just 4. */

.field-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  margin-bottom: 26px;
}

.field-toolbar-row .case-toolbar {
  margin-bottom: 0;
}

.field-toolbar-row__all {
  flex-shrink: 0;
  white-space: nowrap;
}

.js .field-panel {
  display: none;
}

.js .field-panel.is-active {
  display: block;
}

@media (prefers-reduced-motion: no-preference) {
  .js .field-panel.is-active {
    animation: product-panel-in .5s cubic-bezier(.16, .7, .3, 1);
  }
}

.field-panel__desc {
  margin: 0 0 22px;
  max-width: 62ch;
  color: var(--subtle);
  font-size: 17px;
}

.case-scroll {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  /* Round 12: same shadow-room treatment as .gallery-scroll above. */
  padding: 24px 24px 36px;
  margin: -24px -24px -36px;
  scroll-padding-left: 24px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.case-scroll::-webkit-scrollbar {
  display: none;
}

.case-scroll .case-card {
  flex: 0 0 260px;
  scroll-snap-align: start;
}

@media (max-width: 680px) {
  .field-toolbar-row {
    align-items: stretch;
  }

  .field-toolbar-row__all {
    justify-content: center;
  }

  .case-scroll .case-card {
    flex-basis: 200px;
  }

  .scroll-strip__next {
    width: 44px;
    height: 44px;
  }
}

/* ---------- Estimate photo panel (paired with the reused .form on-page) ---------- */

.estimate-photo {
  position: relative;
  min-height: 460px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--photo) center / cover;
  box-shadow: var(--shadow);
}

.estimate-photo__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 34px;
  background: linear-gradient(180deg, transparent 38%, rgba(0, 0, 0, .82));
  color: #fff;
}

.estimate-photo__overlay .eyebrow {
  color: rgba(255, 255, 255, .7);
}

.estimate-photo__overlay h3 {
  margin-bottom: 10px;
  color: #fff;
  font-size: clamp(22px, 2.4vw, 28px);
}

.estimate-photo__overlay p {
  margin-bottom: 22px;
  color: rgba(255, 255, 255, .85);
}

@media (max-width: 680px) {
  .estimate-photo {
    min-height: 320px;
  }
}

/* ---------- Footer (3-column: brand / navigate / contact) ---------- */

.footer-grid--full {
  display: grid;
  grid-template-columns: 1.3fr .8fr 1fr;
  gap: 40px;
}

.footer__col-title {
  margin: 0 0 14px;
  color: rgba(255, 255, 255, .42);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .12em;
}

.footer__nav {
  display: grid;
  gap: 10px;
  align-content: start;
}

.footer__nav a {
  color: rgba(255, 255, 255, .78);
  font-size: 15.5px;
  text-decoration: none;
}

.footer__nav a:hover {
  color: #fff;
}

.footer__contact {
  display: grid;
  gap: 13px;
}

.footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  color: rgba(255, 255, 255, .78);
}

.footer__contact-item svg {
  flex-shrink: 0;
  margin-top: 2px;
  width: 16px;
  height: 16px;
  color: rgba(255, 255, 255, .42);
}

.footer__contact-item a {
  color: rgba(255, 255, 255, .78);
  text-decoration: none;
}

.footer__contact-item a:hover {
  color: #fff;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  margin-top: 42px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: 13px;
  color: rgba(255, 255, 255, .45);
}

@media (max-width: 1040px) {
  .footer-grid--full {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 680px) {
  .footer-grid--full {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .footer-bottom {
    flex-direction: column;
  }
}

/* ---------- Product tabs + panel (products.html category browser) ---------- */
/* Mirrors a "pick a category, see its detail" pattern: a pill tab bar plus
   one detail panel per category. Progressive enhancement — without JS
   (html.no-js) every panel stays stacked and visible, same as a plain page;
   once html.js is set, only the .is-active panel is shown and the tabs
   swap it via interactions.js. */

.product-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin-bottom: 40px;
}

.product-panel {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 44px;
  align-items: center;
  padding: 36px 0;
  border-bottom: 1px solid var(--line);
}

.product-panel:last-of-type {
  border-bottom: none;
  padding-bottom: 8px;
}

.js .product-panel {
  display: none;
  padding: 0;
  border-bottom: none;
}

.js .product-panel.is-active {
  display: grid;
}

@media (prefers-reduced-motion: no-preference) {
  .js .product-panel.is-active {
    animation: product-panel-in .5s cubic-bezier(.16, .7, .3, 1);
  }
}

@keyframes product-panel-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.product-panel__gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.product-panel__gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}

.product-panel__body h3 {
  margin-bottom: 12px;
}

.product-panel__body > p {
  color: var(--subtle);
  margin-bottom: 22px;
}

.product-panel__features {
  margin-bottom: 24px;
  padding: 22px 24px;
  border-radius: var(--radius);
  background: var(--soft);
}

.product-panel__features-title {
  margin: 0 0 12px;
  color: var(--navy);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .01em;
}

.product-panel__features ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-panel__features li {
  position: relative;
  padding-left: 16px;
  color: var(--subtle);
  font-size: 15.5px;
  line-height: 1.6;
}

.product-panel__features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--navy);
}

.product-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 1040px) {
  .product-panel {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

@media (max-width: 680px) {
  .product-panel__gallery {
    gap: 8px;
  }

  .product-panel__features {
    padding: 18px 20px;
  }
}

/* ---------- Case card tag + click-to-open (round 8) ---------- */
/* Each .case-card's headline now shows the real site name recovered from
   the original board post when one exists, or the case's own real spec
   title otherwise — never the repeated category name. The category still
   shows as a small tag so that context isn't lost. */

.case-card {
  cursor: pointer;
}

.case-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.case-card__tag {
  display: inline-block;
  margin-bottom: 7px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--subtle);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}

body.modal-open {
  overflow: hidden;
}

/* ---------- Case detail modal ---------- */
/* Opens on any .case-card click/Enter — shows the full photo plus the same
   real headline/description/date already on the card, just untruncated.
   Populated from window.CASE_DATA (see cases-data.js), not duplicated
   per-card markup, so this stays a single shared component. */

.case-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  visibility: hidden;
  opacity: 0;
  transition: opacity .22s ease, visibility 0s linear .22s;
}

.case-modal.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity .22s ease;
}

.case-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, .72);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.case-modal__dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1040px;
  max-height: 92vh;
  overflow: hidden;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

@media (prefers-reduced-motion: no-preference) {
  .case-modal__dialog {
    transform: translateY(14px) scale(.98);
    transition: transform .25s cubic-bezier(.16, .7, .3, 1);
  }

  .case-modal.is-open .case-modal__dialog {
    transform: translateY(0) scale(1);
  }
}

/* Round 11 fix: real photos come in very different native aspect ratios
   (1.33 to 2.06 across the archive), and round 9's "show it at native
   resolution" approach made the photo -- and the whole dialog around it --
   resize every time you paged through a multi-photo case, which read as
   janky rather than "larger". A fixed height (viewport-relative, so it
   still scales down on shorter screens) + object-fit: cover keeps every
   photo the same size and the whole dialog perfectly stable while paging;
   a bit of cropping on the widest/narrowest shots is an acceptable trade
   for that consistency, matching what the user asked for directly.
   Height bumped again later the same round once the thumbnail strip moved
   from its own flow row to an overlay INSIDE this box -- see
   .case-modal__thumbs below -- so the reclaimed space goes to the photo. */
.case-modal__media {
  position: relative;
  flex: 0 0 auto;
  height: clamp(320px, 54vh, 520px);
  overflow: hidden;
  background: var(--navy-950);
}

/* Targets the #id, NOT ".case-modal__media img" -- the thumbnail strip
   (.case-modal__thumbs, with its own <img> tags) now lives INSIDE
   .case-modal__media too (see below), so a descendant selector here would
   also match every thumbnail image and blow each one up to fill the whole
   photo box via position:absolute + inset:0 + 100%/100%. */
#case-modal-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Gallery chrome (round 10) -- only shown when a case has 2+ real photos.
   Nav buttons + counter overlay the photo; JS toggles [hidden] on all of
   it for single-photo cases, so most cases render exactly as before. */
.case-modal__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--navy);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background .15s ease, transform .15s ease;
}

.case-modal__nav[hidden] {
  display: none;
}

.case-modal__nav:hover {
  background: #fff;
  transform: scale(1.05);
}

.case-modal__nav svg {
  width: 20px;
  height: 20px;
}

.case-modal__nav--prev {
  left: 16px;
}

.case-modal__nav--next {
  right: 16px;
}

/* Count badge moved to the top-left (round 11) -- it used to sit
   bottom-right, which is now where the overlaid thumbnail strip lives. */
.case-modal__count {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 2;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(10, 10, 10, .62);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .01em;
}

.case-modal__count[hidden] {
  display: none;
}

/* Round 11: thumbnails used to live in their own flat-black flow row below
   the photo -- direct feedback called that wasted space ("검정색 부분을
   손해보는거"). Now they float directly on the photo instead (absolute,
   inside .case-modal__media), and a bottom-up gradient scrim keeps them
   readable against whatever is in the photo behind them, the same pattern
   most photo-app lightboxes use for overlaid controls. */
.case-modal__thumbs {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  gap: 8px;
  padding: 30px 16px 14px;
  background: linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0));
  overflow-x: auto;
}

.case-modal__thumbs[hidden] {
  display: none;
}

.case-modal__thumb {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, .55);
  border-radius: 7px;
  overflow: hidden;
  background: none;
  cursor: pointer;
  opacity: .72;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .35);
  transition: opacity .15s ease, border-color .15s ease, transform .15s ease;
}

.case-modal__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-modal__thumb:hover {
  opacity: .92;
  transform: translateY(-2px);
}

.case-modal__thumb.is-active {
  opacity: 1;
  border-color: var(--accent);
}

/* flex: 1 1 auto + min-height: 0 + its own overflow-y means the text body
   is the ONLY part of the dialog that can ever scroll -- the dialog itself
   is overflow: hidden (see .case-modal__dialog) so a description that runs
   long never produces a scrollbar across the whole modal (the "스크롤 표시"
   the user flagged); the photo and thumbnails above stay fully visible and
   fixed in place either way. */
.case-modal__body {
  padding: 26px 34px 32px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.case-modal__tag {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 10px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--navy-100);
  color: var(--navy-600);
  font-size: 12.5px;
  font-weight: 700;
}

.case-modal__title {
  margin: 0 0 12px;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.35;
}

.case-modal__desc {
  margin: 0;
  color: var(--subtle);
  font-size: 15px;
  line-height: 1.7;
}

.case-modal__date {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 13.5px;
}

.case-modal__actions {
  margin-top: 24px;
}

.case-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--navy);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

.case-modal__close svg {
  width: 18px;
  height: 18px;
}

.case-modal__close:hover {
  background: #fff;
}

@media (max-width: 760px) {
  .case-modal {
    padding: 0;
  }

  .case-modal__dialog {
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    border-radius: 0;
  }

  .case-modal__media {
    height: 42vh;
  }

  .case-modal__nav {
    width: 34px;
    height: 34px;
    margin-top: -17px;
  }

  .case-modal__nav svg {
    width: 17px;
    height: 17px;
  }

  .case-modal__nav--prev {
    left: 10px;
  }

  .case-modal__nav--next {
    right: 10px;
  }

  .case-modal__thumbs {
    padding: 22px 12px 10px;
  }

  .case-modal__thumb {
    width: 44px;
    height: 44px;
  }

  .case-modal__body {
    padding: 22px 22px 30px;
  }
}

/* ---------- Image lightbox: product & about photo grids ---------- */
/* Round 12: gallery photos open enlarged on click. cursor:zoom-in signals
   the affordance; the overlay reuses the case-modal's dark-backdrop and
   round-close-button language so the two viewers feel like one system.
   z-index sits above the case modal layer (500) -- they never coexist on
   a page today, but the ordering stays unambiguous if that changes. */

.product-panel__gallery img,
.about-photo-grid img {
  cursor: zoom-in;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
}

.lightbox[hidden] {
  display: none;
}

.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, .88);
  cursor: zoom-out;
}

.lightbox__img {
  position: relative;
  z-index: 1;
  display: block;
  max-width: min(1240px, 94vw);
  max-height: 86vh;
  border-radius: var(--radius);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}

.lightbox__close {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--navy);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

.lightbox__close svg {
  width: 18px;
  height: 18px;
}

.lightbox__close:hover {
  background: #fff;
}

@media (max-width: 760px) {
  .lightbox {
    padding: 14px;
  }

  .lightbox__img {
    max-width: 96vw;
    max-height: 80vh;
  }
}

/* ---------- Blog / guide articles (Round 13 — SEO content section) ---------- */
/* Competitive research P4/P12: 정보성 키워드의 1페이지가 가이드형 장문 콘텐츠로
   채워져 있어, 실측 사례 데이터에 근거한 가이드 섹션을 신설. 구조는 강의
   룰북 C6(퍼스트뷰 목차)·H구조·P12(장문+H2+표+FAQ+날짜)를 따른다. */

.article-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.article-card {
  display: flex;
  flex-direction: column;
  padding: 30px 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: var(--ink);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.article-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--navy);
}

.article-card__tag {
  align-self: flex-start;
  margin-bottom: 14px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--navy-100);
  color: var(--navy);
  font-size: 13.5px;
  font-weight: 700;
}

.article-card h2 {
  margin: 0 0 10px;
  font-size: 20px;
  line-height: 1.4;
}

.article-card p {
  margin: 0 0 16px;
  color: var(--subtle);
  font-size: 15.5px;
}

.article-card__meta {
  margin-top: auto;
  color: var(--muted);
  font-size: 13.5px;
}

.article-body {
  max-width: 760px;
  margin: 0 auto;
}

.article-body__date {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 14px;
}

.article-body h2 {
  margin: 44px 0 14px;
  font-size: 25px;
  letter-spacing: -.01em;
}

.article-body h3 {
  margin: 28px 0 10px;
  font-size: 19px;
}

.article-body p,
.article-body li {
  color: var(--subtle);
  font-size: 16.5px;
  line-height: 1.85;
}

.article-body ul,
.article-body ol {
  padding-left: 22px;
}

.article-toc {
  margin: 30px 0 10px;
  padding: 22px 26px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.article-toc strong {
  display: block;
  margin-bottom: 10px;
  color: var(--navy);
  font-size: 15px;
}

.article-toc ol {
  margin: 0;
  padding-left: 20px;
}

.article-toc a {
  color: var(--subtle);
  text-decoration: none;
}

.article-toc a:hover {
  color: var(--navy);
  text-decoration: underline;
}

.article-table {
  width: 100%;
  margin: 18px 0;
  border-collapse: collapse;
  font-size: 15px;
}

.article-table th,
.article-table td {
  padding: 12px 14px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  color: var(--subtle);
}

.article-table th {
  background: var(--soft);
  color: var(--navy);
  font-weight: 700;
  white-space: nowrap;
}

.faq-list {
  margin-top: 8px;
}

.faq-item {
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.faq-item h3 {
  margin: 0 0 8px;
  font-size: 17.5px;
  color: var(--navy);
}

.faq-item p {
  margin: 0;
}

.article-cta {
  margin: 46px 0 0;
  padding: 30px;
  background: linear-gradient(155deg, var(--navy-900), var(--navy-950));
  border-radius: var(--radius-lg);
  color: #fff;
  text-align: center;
}

.article-cta p {
  margin: 0 0 18px;
  color: rgba(255, 255, 255, .85);
  font-size: 16.5px;
}

@media (max-width: 900px) {
  .article-list {
    grid-template-columns: 1fr;
  }
}