:root {
  --ink: #0c0e10;
  --ink-soft: #161b20;
  --paper: #f1eee8;
  --muted: rgba(241, 238, 232, 0.68);
  --soft: rgba(241, 238, 232, 0.5);
  --line: rgba(241, 238, 232, 0.17);
  --warm: #c99568;
  --display: "SUIT Variable", "Pretendard Variable", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
  --sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
  --mono: "DM Mono", "SFMono-Regular", Consolas, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; font-synthesis: none; }
html { background: var(--ink); scroll-behavior: smooth; overflow-x: clip; }
body { min-width: 320px; margin: 0; overflow-x: hidden; background: var(--ink); color: var(--paper); font-family: var(--sans); -webkit-font-smoothing: antialiased; text-rendering: auto; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--warm); outline-offset: 5px; }
.skip-link { position: fixed; top: 1rem; left: 50%; z-index: 20; padding: 0.7rem 1rem; background: var(--paper); color: var(--ink); transform: translate(-50%, -180%); transition: transform 240ms var(--ease); }
.skip-link:focus { transform: translate(-50%, 0); }
.service-shell { width: min(100% - clamp(2.5rem, 14vw, 15rem), 1240px); margin: 0 auto; }
.service-header { display: flex; min-height: 84px; align-items: center; justify-content: space-between; gap: 2rem; border-bottom: 1px solid var(--line); }
.service-brand { display: inline-flex; min-height: 44px; align-items: center; gap: 0.7rem; font-family: var(--display); font-size: 1rem; font-weight: 750; letter-spacing: -0.08em; }
.service-brand img { width: 28px; height: 28px; padding: 3px; border-radius: 8px; background: var(--paper); object-fit: contain; }
.service-brand small { margin-left: 0.45rem; color: var(--soft); font-family: var(--sans); font-size: 0.52rem; font-weight: 400; letter-spacing: 0; }
.service-nav { display: flex; align-items: center; gap: 1.5rem; color: var(--soft); font-family: var(--sans); font-size: 0.62rem; letter-spacing: -0.01em; }
.service-nav a { min-height: 44px; display: inline-flex; align-items: center; border-bottom: 1px solid transparent; transition: color 220ms ease, border-color 220ms ease; }
.service-nav a:hover, .service-nav a[aria-current="page"] { color: var(--paper); border-color: var(--warm); }
.service-main { padding: clamp(5rem, 10vw, 9rem) 0 7rem; }
.service-crumb { color: var(--warm); font-family: var(--sans); font-size: 0.66rem; letter-spacing: -0.01em; }
.service-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(19rem, 0.66fr); align-items: end; gap: clamp(2rem, 9vw, 9rem); padding: 1.7rem 0 7rem; border-bottom: 1px solid var(--line); }
.service-hero h1 { max-width: 14ch; margin: 0; font-family: var(--display); font-size: clamp(3rem, 5.55vw, 5.8rem); font-weight: 570; letter-spacing: -0.115em; line-height: 1; }
.service-hero h1 em { color: var(--warm); font-style: normal; }
.service-hero__aside p { max-width: 32rem; margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.95; word-break: keep-all; }
.service-cta { display: inline-flex; min-height: 50px; align-items: center; gap: 0.75rem; margin-top: 2rem; padding: 0 1.15rem; background: var(--paper); color: var(--ink); font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.04em; transition: background 220ms ease, transform 220ms var(--ease); }
.service-cta span { font-size: 1rem; }
.service-cta:hover, .service-cta:focus-visible { background: var(--warm); transform: translateY(-2px); }
.service-section { padding: 5rem 0; border-bottom: 1px solid var(--line); }
.service-section__heading { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr); gap: clamp(2rem, 8vw, 8rem); align-items: start; }
.service-section__heading h2 { max-width: 12ch; margin: 0; font-family: var(--display); font-size: clamp(2rem, 4vw, 4.1rem); font-weight: 600; letter-spacing: -0.11em; line-height: 0.96; }
.service-section__heading p { max-width: 38rem; margin: 0; color: var(--muted); font-size: 0.95rem; line-height: 1.9; word-break: keep-all; }
.service-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 4rem; border-top: 1px solid var(--line); background: transparent; }
.service-point { min-height: 13rem; padding: 1.25rem 1.25rem 1.25rem 0; border-bottom: 1px solid var(--line); background: transparent; }
.service-point > span, .service-flow li > span, .service-spec strong, .service-related small, .service-footer, .service-eyebrow { color: var(--warm); font-family: var(--sans); font-size: 0.58rem; letter-spacing: 0; }
.service-point h3 { margin: 3rem 0 0.7rem; font-family: var(--display); font-size: 1.2rem; font-weight: 600; letter-spacing: -0.06em; }
.service-point p { margin: 0; color: var(--muted); font-size: 0.82rem; line-height: 1.75; }
.service-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 3.5rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.service-flow li { min-height: 14rem; padding: 1.2rem 1.2rem 1.3rem 0; border-right: 1px solid var(--line); }
.service-flow li + li { padding-left: 1.2rem; }
.service-flow li:last-child { border-right: 0; }
.service-flow h3 { margin: 3rem 0 0.6rem; font-family: var(--display); font-size: 1.2rem; font-weight: 600; letter-spacing: -0.06em; }
.service-flow p { margin: 0; color: var(--muted); font-size: 0.8rem; line-height: 1.8; }
.service-output { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr); gap: clamp(2rem, 8vw, 8rem); align-items: start; }
.service-output h2 { max-width: 12ch; margin: 0; font-family: var(--display); font-size: clamp(2rem, 4vw, 4rem); font-weight: 600; letter-spacing: -0.11em; line-height: 0.98; }
.service-output h2 em { color: var(--warm); font-style: normal; }
.service-output > div > p { max-width: 38rem; margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.9; }
.service-spec { margin-top: 2.4rem; border-top: 1px solid var(--line); }
.service-spec div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 0.8rem; line-height: 1.6; }
.service-spec strong { font-weight: 400; }
.service-related { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 3.5rem; }
.service-related a { display: block; min-height: 8rem; padding: 1.15rem 0; border-top: 1px solid var(--line); transition: color 220ms ease; }
.service-related a:hover { color: var(--warm); }
.service-related span { display: block; margin-top: 0.8rem; font-family: var(--display); font-size: 1.05rem; letter-spacing: -0.05em; }
.service-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(19rem, 0.66fr); gap: clamp(2rem, 9vw, 9rem); align-items: end; padding: 6rem 0 0; }
.service-contact h2 { max-width: 11ch; margin: 0; font-family: var(--display); font-size: clamp(2.7rem, 5vw, 5.7rem); font-weight: 620; letter-spacing: -0.13em; line-height: 0.92; }
.service-contact h2 em { color: var(--warm); font-style: normal; }
.service-contact p { max-width: 30rem; margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.85; }
.service-email { display: inline-flex; min-height: 46px; align-items: center; margin-top: 1.4rem; padding-bottom: 0.45rem; border-bottom: 1px solid var(--warm); color: var(--paper); font-family: var(--mono); font-size: 0.88rem; transition: color 220ms ease; }
.service-email:hover { color: var(--warm); }
.service-footer { display: flex; justify-content: space-between; gap: 1rem; padding: 2rem 0 3rem; border-top: 1px solid var(--line); line-height: 1.7; }
.service-footer a { color: var(--paper); transition: color 220ms ease; }
.service-footer a:hover { color: var(--warm); }

@media (max-width: 760px) {
  .service-shell { width: min(100% - 2.5rem, 1240px); }
  .service-header { min-height: 72px; }
  .service-brand small { display: none; }
  .service-nav { gap: 0.8rem; font-size: 0.52rem; }
  .service-nav a:nth-child(3) { display: none; }
  .service-main { padding-top: 4.7rem; }
  .service-hero, .service-section__heading, .service-output, .service-contact { display: block; }
  .service-hero { padding-bottom: 4.6rem; }
  .service-hero h1 { max-width: none; font-size: clamp(2.7rem, 10.4vw, 4.25rem); }
  .service-hero__aside { margin-top: 2rem; }
  .service-hero__aside p { font-size: 0.88rem; line-height: 1.85; }
  .service-section { padding: 4rem 0; }
  .service-section__heading p { margin-top: 1.4rem; font-size: 0.86rem; line-height: 1.85; }
  .service-points { display: block; margin-top: 2.5rem; }
  .service-point { min-height: 11.5rem; border-bottom: 1px solid var(--line); }
  .service-point h3 { margin-top: 2.5rem; }
  .service-flow { display: block; margin-top: 2.5rem; }
  .service-flow li, .service-flow li + li { min-height: 0; padding: 1.1rem 0 1.3rem; border-right: 0; border-bottom: 1px solid var(--line); }
  .service-flow h3 { margin-top: 2rem; }
  .service-output h2 { font-size: clamp(2.3rem, 11vw, 4rem); }
  .service-output > div > p { margin-top: 1.4rem; font-size: 0.86rem; }
  .service-spec div { grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0.8rem; font-size: 0.75rem; }
  .service-related { grid-template-columns: 1fr; gap: 0; }
  .service-contact { padding-top: 4.5rem; }
  .service-contact h2 { font-size: clamp(2.7rem, 13vw, 5rem); }
  .service-contact > div:last-child { margin-top: 2.5rem; }
  .service-footer { display: block; font-size: 0.5rem; }
  .service-footer span, .service-footer a { display: block; }
  .service-footer a { margin-top: 0.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .skip-link, .service-nav a, .service-cta, .service-related a, .service-email { transition-duration: 0.001ms; }
}

/* --------------------------------------------------------------------------
   2026-09-05 screenshot QA pass
   A service page should feel like the same studio as the home, not a second
   copper/serif template. Keep the content structure; reduce the theatre.
---------------------------------------------------------------------------- */

:root {
  --ink: #0d0f11;
  --ink-soft: #15191d;
  --paper: #f2f1ed;
  --muted: #aeb2b6;
  --soft: #7d8389;
  --line: rgba(242, 241, 237, 0.14);
  --warm: #bcc3ca;
}

html,
body {
  background: var(--ink);
  color: var(--paper);
}

.service-shell {
  width: min(calc(100% - 2.5rem), 80rem);
}

.service-header {
  min-height: 68px;
}

.service-brand {
  gap: 0;
  font-family: var(--display);
  font-weight: 650;
}

.service-brand img {
  display: none;
}

.service-brand small {
  color: var(--muted);
}

.service-nav {
  gap: 1.2rem;
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0;
}

.service-main {
  padding: clamp(4rem, 6.5vw, 6rem) 0 5rem;
}

.service-crumb,
.service-eyebrow,
.service-point > span,
.service-flow li > span,
.service-spec strong,
.service-related small,
.service-footer {
  color: var(--warm);
}

.service-hero {
  gap: clamp(2rem, 7vw, 7rem);
  padding: 1rem 0 4.2rem;
  border-bottom: 0;
}

.service-hero h1 {
  max-width: 12ch;
  font-size: clamp(2.8rem, 5vw, 5rem);
  font-weight: 610;
  letter-spacing: -0.1em;
  line-height: 1.02;
}

.service-hero h1 em,
.service-section__heading h2 em,
.service-output h2 em,
.service-contact h2 em {
  color: inherit;
}

.service-hero__aside p,
.service-section__heading p,
.service-output > div > p,
.service-contact p {
  font-family: var(--sans);
  font-size: 0.94rem;
  line-height: 1.85;
}

.service-cta {
  background: var(--paper);
  border: 1px solid var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.76rem;
  letter-spacing: 0;
}

.service-cta:hover,
.service-cta:focus-visible {
  background: var(--warm);
  border-color: var(--warm);
}

.service-section {
  padding: 4rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 0;
}

.service-section__heading {
  gap: clamp(2rem, 7vw, 7rem);
}

.service-section__heading h2,
.service-output h2,
.service-contact h2 {
  font-size: clamp(2rem, 3.3vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -0.1em;
  line-height: 1.04;
}

.service-points,
.service-flow {
  margin-top: 2.6rem;
  border-top-color: var(--line);
}

.service-point {
  min-height: 9.8rem;
  padding: 1rem 1rem 1.1rem 0;
  border-bottom-color: var(--line);
}

.service-point h3,
.service-flow h3 {
  margin-top: 2.25rem;
  font-family: var(--display);
  font-size: 1.05rem;
}

.service-flow li {
  min-height: 10.5rem;
  border-color: var(--line);
}

.service-output {
  gap: clamp(2rem, 7vw, 7rem);
  padding-top: 4rem;
}

.service-spec,
.service-related a,
.service-footer {
  border-color: var(--line);
}

.service-contact {
  gap: clamp(2rem, 7vw, 7rem);
  padding-top: 4rem;
}

.service-footer a {
  color: var(--paper);
}

@media (max-width: 760px) {
  .service-shell {
    width: min(calc(100% - 2.5rem), 80rem);
  }

  .service-header {
    min-height: 62px;
  }

  .service-main {
    padding-top: 3.8rem;
  }

  .service-hero {
    padding-bottom: 3.5rem;
  }

  .service-hero h1 {
    max-width: 11ch;
    font-size: clamp(2.55rem, 11vw, 4rem);
  }

  .service-section,
  .service-output {
    padding-top: 3.5rem;
  }

  .service-section__heading h2,
  .service-output h2,
  .service-contact h2 {
    font-size: clamp(2rem, 9vw, 3.2rem);
  }

  .service-point {
    min-height: 0;
  }

  .service-flow li,
  .service-flow li + li {
    min-height: 0;
    padding-top: 1rem;
  }

  .service-contact {
    padding-top: 3.5rem;
  }
}

/* --------------------------------------------------------------------------
   2026-09-05 captured review: service pages are decision pages, not repeated
   card templates. Scope is a flat comparison list, process is a compact flow,
   and output remains the one specification table.
---------------------------------------------------------------------------- */

@media (min-width: 761px) {
  .service-section--scope .service-section__heading,
  .service-section--list .service-section__heading {
    display: block;
    max-width: 58rem;
  }

  .service-section--scope .service-section__heading h2,
  .service-section--list .service-section__heading h2 {
    max-width: none;
    font-size: clamp(2rem, 3.1vw, 3.2rem);
    line-height: 1.05;
  }

  .service-section--scope .service-section__heading h2 br,
  .service-section--list .service-section__heading h2 br {
    display: none;
  }

  .service-section--scope .service-section__heading p,
  .service-section--list .service-section__heading p {
    max-width: 42rem;
    margin-top: 1rem;
  }

  .service-section--scope .service-points,
  .service-section--list .service-points {
    grid-template-columns: 1fr;
    margin-top: 2.15rem;
  }

  .service-section--scope .service-point,
  .service-section--list .service-point {
    display: grid;
    grid-template-columns: 8.5rem minmax(12rem, 0.62fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
    min-height: 0;
    padding: 1.15rem 0;
  }

  .service-section--scope .service-point h3,
  .service-section--list .service-point h3 {
    margin: 0;
    font-size: 1.04rem;
  }

  .service-section--scope .service-point p,
  .service-section--list .service-point p {
    max-width: 32rem;
  }

  .service-section--process .service-section__heading,
  .service-section--flow .service-section__heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: clamp(2rem, 7vw, 7rem);
  }

  .service-section--process .service-section__heading h2,
  .service-section--flow .service-section__heading h2 {
    max-width: 18ch;
    font-size: clamp(1.9rem, 2.8vw, 2.9rem);
    line-height: 1.08;
  }

  .service-section--process .service-section__heading h2 br,
  .service-section--flow .service-section__heading h2 br {
    display: none;
  }

  .service-section--process .service-section__heading p,
  .service-section--flow .service-section__heading p {
    max-width: 32rem;
  }

  .service-section--process .service-flow,
  .service-section--flow .service-flow {
    margin-top: 2.15rem;
  }

  .service-section--process .service-flow li,
  .service-section--flow .service-flow li {
    min-height: 10.5rem;
  }
}

@media (max-width: 760px) {
  .service-section--scope .service-section__heading h2,
  .service-section--list .service-section__heading h2 {
    max-width: 16ch;
  }

  .service-section--scope .service-point,
  .service-section--list .service-point {
    display: grid;
    grid-template-columns: 5.8rem minmax(0, 1fr);
    gap: 0.45rem 0.8rem;
    min-height: 0;
    padding: 1rem 0 1.15rem;
  }

  .service-section--scope .service-point > span,
  .service-section--list .service-point > span {
    grid-row: 1 / span 2;
  }

  .service-section--scope .service-point h3,
  .service-section--list .service-point h3 {
    margin: 0;
  }

  .service-section--scope .service-point p,
  .service-section--list .service-point p {
    grid-column: 2;
    margin: 0;
  }

  .service-section--process .service-section__heading,
  .service-section--flow .service-section__heading {
    display: block;
  }

  .service-section--process .service-section__heading h2,
  .service-section--flow .service-section__heading h2 {
    max-width: 16ch;
  }

  .service-section--process .service-section__heading p,
  .service-section--flow .service-section__heading p {
    margin-top: 1rem;
  }
}

/* --------------------------------------------------------------------------
   2026-09-05 captured review: tighten the decision page without flattening
   the reading rhythm. The output table remains the main proof object.
---------------------------------------------------------------------------- */

@media (min-width: 761px) {
  .service-section--scope,
  .service-section--process,
  .service-section--list,
  .service-section--flow {
    padding-block: 3.25rem;
  }

  .service-section--scope,
  .service-section--list {
    padding-top: 3.4rem;
  }

  .service-section--process,
  .service-section--flow {
    padding-top: 3.4rem;
  }

  .service-section--process .service-flow,
  .service-section--flow .service-flow {
    margin-top: 1.8rem;
  }

  .service-section--process .service-flow li,
  .service-section--flow .service-flow li {
    min-height: 8.75rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .service-output {
    padding-top: 3.3rem;
    padding-bottom: 0;
  }

  .service-related {
    margin-top: 2.4rem;
  }

  .service-related a {
    min-height: 5.2rem;
    padding-block: 0.9rem;
  }

  .service-contact {
    padding-top: 3.3rem;
  }
}

@media (max-width: 760px) {
  .service-header {
    gap: 0.8rem;
  }

  .service-nav {
    flex: 0 0 auto;
    gap: 0.85rem;
  }

  .service-nav a:nth-child(2),
  .service-nav a:nth-child(3) {
    display: none;
  }

  .service-section,
  .service-output {
    padding-block: 3.2rem;
  }

  .service-output {
    padding-bottom: 0;
  }

  .service-related a {
    min-height: 5.4rem;
  }

  .service-contact {
    padding-top: 3.6rem;
  }
}

/* 2026-09-05 captured review: make the process read as a sequence and the
   related guides read as references, rather than as a second card grid. */
@media (min-width: 761px) {
  .service-section--process .service-flow,
  .service-section--flow .service-flow,
  .service-related {
    width: min(100%, 900px);
    margin-right: auto;
  }

  .service-related {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .service-section--process .service-flow,
  .service-section--flow .service-flow,
  .service-related {
    width: 100%;
  }

  .service-related {
    grid-template-columns: 1fr;
  }
}

/* 2026-09-05 narrow-screen QA: keep decision-page copy inside its column.
   The desktop reading measure stays unchanged. */
@media (max-width: 760px) {
  .service-hero h1,
  .service-section__heading h2,
  .service-output h2,
  .service-contact h2,
  .service-hero p,
  .service-section p,
  .service-output p,
  .service-contact p,
  .service-point h3,
  .service-flow h3,
  .service-flow p,
  .service-related span,
  .service-spec span,
  .service-footer {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .service-hero__aside p,
  .service-section__heading p,
  .service-output > div > p,
  .service-contact p {
    width: 100%;
  }
}

@media (max-width: 360px) {
  .service-hero h1 {
    font-size: clamp(2.35rem, 10.4vw, 3.5rem);
  }

  .service-section__heading h2,
  .service-output h2,
  .service-contact h2 {
    font-size: clamp(1.85rem, 8.8vw, 2.8rem);
  }

  .service-hero h1,
  .service-section__heading h2,
  .service-output h2,
  .service-contact h2,
  .service-hero p,
  .service-section p,
  .service-output p,
  .service-contact p {
    word-break: normal;
  }
}

/* 2026-09-05 final visual review: the detail header has two useful mobile
   destinations only; the body keeps the same readable measure as the home. */
@media (max-width: 760px) {
  .service-header,
  .service-brand,
  .service-nav {
    min-width: 0;
  }

  .service-nav a {
    white-space: nowrap;
  }

  .service-shell,
  .service-main,
  .service-footer {
    width: min(calc(100% - 2rem), 80rem);
  }
}

/* 2026-09-05 browser review v2: keep the detail page legible at phone width
   and keep two clear header destinations visible. */
@media (max-width: 760px) {
  .service-shell,
  .service-main,
  .service-footer {
    width: calc(100% - 2rem);
    max-width: 80rem;
  }

  .service-header {
    width: 100%;
    gap: 0.5rem;
  }

  .service-brand {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.92rem;
  }

  .service-nav {
    display: flex;
    flex: 0 0 auto;
    gap: 0.7rem;
    color: var(--paper);
    font-size: 0.58rem;
  }

  .service-nav a {
    min-height: 44px;
    white-space: nowrap;
  }

  .service-hero,
  .service-section,
  .service-output,
  .service-contact,
  .service-related {
    width: 100%;
    max-width: 100%;
  }

  .service-hero h1 {
    max-width: 13ch;
    font-size: clamp(2.3rem, 8.9vw, 3.35rem);
    line-height: 1.07;
    letter-spacing: -0.075em;
    word-break: keep-all;
  }

  .service-hero__aside p,
  .service-section__heading p,
  .service-point p,
  .service-flow p,
  .service-output > div > p,
  .service-contact p,
  .service-spec span,
  .service-related span,
  .service-footer {
    max-width: 100%;
    word-break: normal;
    overflow-wrap: anywhere;
  }

  .service-hero__aside p,
  .service-section__heading p,
  .service-output > div > p,
  .service-contact p {
    font-size: 0.86rem;
    line-height: 1.8;
  }

  .service-section__heading h2,
  .service-output h2,
  .service-contact h2 {
    max-width: 14ch;
    font-size: clamp(1.95rem, 7.9vw, 2.75rem);
    line-height: 1.08;
    letter-spacing: -0.075em;
    word-break: keep-all;
  }
}

@media (max-width: 360px) {
  .service-shell,
  .service-main,
  .service-footer {
    width: calc(100% - 1.5rem);
  }

  .service-nav {
    gap: 0.55rem;
    font-size: 0.54rem;
  }

  .service-hero h1 {
    font-size: clamp(2.15rem, 8.9vw, 2.8rem);
  }
}

/* 2026-09-05 browser review v3: keep secondary-page navigation visible by
   giving it its own compact row on phones. */
@media (max-width: 760px) {
  .service-header {
    flex-wrap: wrap;
    row-gap: 0;
    padding-block: 0.65rem;
  }

  .service-nav {
    flex: 1 0 100%;
    order: 2;
    justify-content: flex-start;
    gap: 1rem;
  }

  .service-nav a {
    min-height: 34px;
  }
}

/* 2026-09-05 browser review v4: service pages are working documents. Keep
   the hero readable, then let the scope and delivery details arrive sooner. */
@media (min-width: 761px) {
  .service-hero h1 {
    max-width: 14ch;
    font-size: clamp(3rem, 3.8vw, 4rem);
    line-height: 1.06;
    letter-spacing: -0.075em;
  }

  .service-section__heading h2,
  .service-output h2,
  .service-contact h2 {
    max-width: 15ch;
    font-size: clamp(1.85rem, 2.55vw, 2.7rem);
    line-height: 1.08;
    letter-spacing: -0.07em;
  }

  .service-section,
  .service-output,
  .service-contact {
    padding-block: clamp(3rem, 3.5vw, 4rem);
  }
}

@media (max-width: 760px) {
  .service-shell,
  .service-main,
  .service-footer {
    width: calc(100% - 2.25rem);
  }

  .service-main {
    padding-top: 3rem;
  }

  .service-hero {
    gap: 1.8rem;
    padding-bottom: 2.8rem;
  }

  .service-hero h1 {
    max-width: 15ch;
    font-size: clamp(2.25rem, 9vw, 2.85rem);
    line-height: 1.08;
    letter-spacing: -0.07em;
  }

  .service-hero__aside p,
  .service-section__heading p,
  .service-output > div > p,
  .service-contact p {
    font-size: 0.83rem;
    line-height: 1.78;
  }

  .service-section__heading h2,
  .service-output h2,
  .service-contact h2 {
    max-width: 15ch;
    font-size: clamp(1.75rem, 7.2vw, 2.2rem);
    line-height: 1.1;
    letter-spacing: -0.065em;
  }

  .service-section,
  .service-output,
  .service-contact {
    padding-block: 2.8rem;
  }

  .service-page .service-cta,
  .service-page .service-email {
    max-width: 100%;
  }

  .service-spec,
  .service-related,
  .service-flow,
  .service-points {
    min-width: 0;
    max-width: 100%;
  }
}

/* 2026-09-05 final width correction: service-main sits inside service-shell.
   Do not subtract the phone gutter twice; that created the visible narrow
   right-side void in real 390px captures. */
@media (max-width: 760px) {
  .service-shell {
    width: calc(100% - 2.25rem);
  }

  .service-main,
  .service-footer {
    width: 100%;
  }
}

@media (max-width: 360px) {
  .service-shell {
    width: calc(100% - 1.5rem);
  }
}

/* 2026-09-05 final visual pass: the detail pages carry decisions, not
   declarations. Keep the home as the strongest display surface and let
   service pages read like compact, useful briefs. */
.service-decision-note {
  max-width: 34rem;
  margin: 0.95rem 0 0;
  color: var(--soft);
  font-family: var(--sans);
  font-size: 0.76rem;
  line-height: 1.72;
}

@media (min-width: 761px) {
  .service-hero {
    gap: clamp(2rem, 6vw, 6rem);
    padding-bottom: 3.45rem;
  }

  .service-hero h1 {
    max-width: 14ch;
    font-size: clamp(2.75rem, 3.45vw, 3.65rem);
    line-height: 1.07;
    letter-spacing: -0.075em;
  }

  .service-section,
  .service-output,
  .service-contact {
    padding-block: clamp(2.9rem, 3.2vw, 3.65rem);
  }

  .service-section__heading h2,
  .service-output h2,
  .service-contact h2 {
    max-width: 16ch;
    font-size: clamp(1.95rem, 2.55vw, 2.75rem);
    line-height: 1.08;
    letter-spacing: -0.07em;
  }

  .service-point {
    min-height: 8.9rem;
  }

  .service-flow li {
    min-height: 9.6rem;
  }
}

@media (max-width: 760px) {
  .service-decision-note {
    max-width: 100%;
    font-size: 0.74rem;
    line-height: 1.72;
  }
}

/* 2026-09-05 final phone frame: one compact row, one useful destination.
   Keeping the nav on the same line prevents the detail header from becoming
   a second page section at narrow widths. */
@media (max-width: 760px) {
  body {
    min-width: 0;
  }

  .service-header {
    flex-wrap: nowrap;
    gap: 0.7rem;
  }

  .service-brand {
    flex: 1 1 auto;
    min-width: 0;
  }

  .service-nav {
    flex: 0 0 auto;
    min-width: 0;
    margin-left: auto;
    gap: 0.7rem;
  }

  .service-nav a {
    display: none;
  }

  .service-nav a:last-child {
    display: inline-flex;
  }
}

/* 2026-09-05 screen review v5: detail pages should help someone decide,
   not repeat the oversized landing-page treatment. */
@media (min-width: 761px) {
  .service-main {
    padding-top: clamp(3.25rem, 5vw, 4.5rem);
    padding-bottom: 5.25rem;
  }

  .service-hero {
    display: block;
    max-width: 800px;
    padding-top: 0.75rem;
    padding-bottom: 2.75rem;
  }

  .service-hero h1 {
    max-width: 15ch;
    font-size: clamp(2.35rem, 3vw, 3rem);
    line-height: 1.08;
  }

  .service-hero__aside {
    max-width: 30rem;
    margin-top: 1.35rem;
  }

  .service-hero__aside p {
    font-size: 0.9rem;
    line-height: 1.8;
  }

  .service-section__heading h2,
  .service-output h2,
  .service-contact h2 {
    max-width: 16ch;
    font-size: clamp(1.75rem, 2.2vw, 2.4rem);
    line-height: 1.1;
  }

  .service-section,
  .service-output,
  .service-contact {
    padding-block: clamp(2.6rem, 3vw, 3.4rem);
  }
}

@media (max-width: 760px) {
  .service-main {
    padding-top: 2.6rem;
  }

  .service-hero {
    padding-bottom: 2.45rem;
  }

  .service-hero h1 {
    max-width: 15ch;
    font-size: clamp(2rem, 8.4vw, 2.35rem);
    line-height: 1.1;
  }

  .service-hero__aside {
    margin-top: 1.45rem;
  }

  .service-section,
  .service-output,
  .service-contact {
    padding-block: 2.4rem;
  }
}

/* --------------------------------------------------------------------------
   2026-09-05 browser visual repair v6
   The service detail pages have real supporting copy in the hero aside. Keep
   that copy in the layout so the page reads as an intentional brief instead
   of a title stranded in a large empty field.
---------------------------------------------------------------------------- */

@media (min-width: 761px) {
  .service-main {
    padding-top: clamp(4.25rem, 6.5vw, 6rem);
    padding-bottom: 6rem;
  }

  .service-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(19rem, 0.74fr);
    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: start;
    max-width: none;
    padding: 1.7rem 0 4.35rem;
    border-bottom: 1px solid var(--line);
  }

  .service-hero h1 {
    max-width: 14ch;
    font-size: clamp(2.8rem, 4.1vw, 4.4rem);
    line-height: 1.03;
    letter-spacing: -0.09em;
  }

  .service-hero__aside {
    max-width: none;
    margin: 0;
    padding: 0.25rem 0 0 clamp(1.5rem, 3vw, 3rem);
    border-left: 1px solid var(--line);
  }

  .service-hero__aside p {
    max-width: 31rem;
    font-size: 0.94rem;
    line-height: 1.86;
  }

  .service-decision-note {
    max-width: 31rem;
    margin-top: 1rem;
  }

  .service-cta {
    margin-top: 1.55rem;
  }
}

@media (max-width: 760px) {
  .service-main {
    padding-top: 3.3rem;
  }

  .service-hero {
    padding-bottom: 3.35rem;
  }

  .service-hero__aside {
    margin-top: 1.8rem;
    padding: 1.4rem 0 0;
    border-top: 1px solid var(--line);
  }

  .service-hero__aside p {
    max-width: 100%;
  }
}

/* --------------------------------------------------------------------------
   2026-09-05 browser review v7
   Keep service pages information-led. The visual system should come from
   the writing and the actual work, not from repeating a poster-sized heading
   and a forced line break in every section.
---------------------------------------------------------------------------- */

@media (min-width: 761px) {
  .service-main {
    padding-top: clamp(3.6rem, 5vw, 4.8rem);
    padding-bottom: 5rem;
  }

  .service-hero {
    gap: clamp(2rem, 5vw, 4.75rem);
    padding: 1rem 0 3.35rem;
  }

  .service-hero h1 {
    max-width: 15ch;
    font-size: clamp(2.55rem, 3.55vw, 3.7rem);
    line-height: 1.05;
    letter-spacing: -0.075em;
  }

  .service-hero__aside {
    padding-left: clamp(1.25rem, 2.4vw, 2.35rem);
  }

  .service-section__heading h2,
  .service-output h2,
  .service-contact h2 {
    max-width: 15ch;
    font-size: clamp(1.8rem, 2.65vw, 2.7rem);
    line-height: 1.08;
    letter-spacing: -0.075em;
  }

  .service-section__heading h2 br,
  .service-output h2 br,
  .service-contact h2 br {
    display: none;
  }

  .service-section {
    padding-block: 3.35rem;
  }

  .service-points,
  .service-flow {
    margin-top: 2.25rem;
  }

  .service-output,
  .service-contact {
    padding-top: 3.35rem;
  }
}

@media (max-width: 760px) {
  .service-section__heading h2 br,
  .service-output h2 br,
  .service-contact h2 br {
    display: none;
  }

  .service-contact > div:last-child {
    margin-top: 2.15rem;
  }
}

/* --------------------------------------------------------------------------
   2026-09-05 browser review v9
   Korean display copy should break at phrase boundaries after the editorial
   line breaks are removed. Never split a syllable in a service heading.
---------------------------------------------------------------------------- */

.service-hero h1,
.service-section__heading h2,
.service-output h2,
.service-contact h2 {
  word-break: keep-all;
  overflow-wrap: normal;
}

/* --------------------------------------------------------------------------
   2026-09-05 editorial rhythm v10
   Service detail pages are decision pages. Keep the hero in one reading flow
   instead of repeating the same left-title/right-rail template used by the
   guide and inquiry pages.
---------------------------------------------------------------------------- */

@media (min-width: 761px) {
  .service-hero {
    display: block;
    width: min(100%, 1040px);
    max-width: none;
  }

  .service-hero > div:first-child,
  .service-hero h1 {
    max-width: 900px;
  }

  .service-hero__aside {
    max-width: 840px;
    margin-top: 2.1rem;
    padding: 1.45rem 0 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .service-hero__aside p {
    max-width: 840px;
  }
}