/*
 * Technology-field landing pages in all five public practice-area sections.
 *
 * These pages sit beside 국내 출원 and 해외 출원, so they are built from the
 * original site's own materials: the 60vh photo banner with the tracked white
 * heading, the 940px reading column that keeps the shared heading, paragraph
 * and list sizes, #f2f2f2 bands with centred navy titles, the outlined boxes of
 * the practice-area index, the accordion of /ko/faqs and the consultation
 * panel of /ko/contact-us.
 *
 * Type sizes and colours come from the shared Webflow stylesheet. Add a rule
 * here only for layout the shared sheet does not have; do not restyle headings
 * or body text per page. Shells are generated by tools/field-landing/build.mjs.
 */
html[data-pine-field-landing] {
  scroll-behavior: smooth;
}

.pine-field-page {
  --pine-field-band: var(--f2f2f2, #f2f2f2);
  --pine-field-ink: var(--333, #333);
  --pine-field-navy: var(--color, #2e3b6a);
  --pine-field-navy-deep: #242f55;
  --pine-field-quiet: #666;
  --pine-field-rule: #d0d5dd;
  overflow-wrap: break-word;
  word-break: keep-all;
}

.pine-field-nowrap {
  white-space: nowrap;
}

.pine-field-page a:focus-visible,
.pine-field-page button:focus-visible {
  outline: 3px solid var(--pine-field-navy);
  outline-offset: 3px;
}

/* Banner: the shared .visual-section and .page-heading1, one photograph per page. */
.pine-field-banner .page-heading1 {
  animation: pine-field-title-in 1.2s ease 0.1s both;
  box-sizing: border-box;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0 1.25rem;
}

.pine-field-banner__title {
  text-wrap: balance;
}

.pine-field-banner__sub {
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1.5;
}

.visual01.pine-field-visual {
  background-color: #1d2230;
  background-position: 0 0, 50% 50%;
  background-repeat: no-repeat;
  background-size: auto, cover;
}

.visual01.pine-field-visual--energy {
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("/images/pexels-googledeepmind-25626510-banner.avif");
}

.visual01.pine-field-visual--structure {
  background-image: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), url("/images/tunnel-3230087_1280.avif");
}

.visual01.pine-field-visual--code {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/images/webflow-pexels-markusspiske-360591-1.avif");
}

.visual01.pine-field-visual--road {
  background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("/images/pexels-jplenio-1133505-banner.avif");
  background-position: 0 0, 50% 70%;
}

.visual01.pine-field-visual--city {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/images/pexels-ethan-brooke-1123775-2122406-banner.avif");
}

.visual01.pine-field-visual--bridge {
  background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("/images/pexels-alexmoliski-20612214-banner.avif");
}

/* Reading sections: the 940px column of the practice-area pages. */
.pine-field-section {
  padding-top: 4.5rem;
  scroll-margin-top: 5rem;
}

.pine-field-container {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: calc(940px + 2.5rem);
  padding: 0 1.25rem;
}

.pine-field-container > h2 {
  display: block;
  margin: 0 0 1rem;
  text-wrap: balance;
}

.pine-field-container > h3 {
  margin: 2.5rem 0 0.75rem;
}

.pine-field-container > p {
  margin: 0 0 0.75rem;
}

.pine-field-intro > p + h2 {
  margin-top: 2.5rem;
}

.pine-field-intro li + li {
  margin-top: 0.25rem;
}

/* Matches the navy submit button of the contact form. */
.pine-field-button {
  align-items: center;
  background: var(--pine-field-navy);
  border: 0.0625rem solid var(--pine-field-navy);
  border-radius: 0.5rem;
  box-shadow: 0 1px 0.125rem rgba(16, 24, 40, 0.05);
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  justify-content: center;
  line-height: 1.5;
  min-height: 3rem;
  padding: 0.625rem 2rem;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.pine-field-button:hover,
.pine-field-button:focus-visible {
  background: var(--pine-field-navy-deep);
  border-color: var(--pine-field-navy-deep);
  color: #fff;
}

/* Attorneys: portrait beside the profile facts, flat like the 전문가 pages. */
.pine-field-attorneys {
  display: grid;
  gap: 3.5rem;
  margin-top: 2.5rem;
}

.pine-field-attorney {
  align-items: start;
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 13.75rem minmax(0, 1fr);
}

.pine-field-attorney__photo {
  aspect-ratio: 2 / 3;
  background: var(--pine-field-band);
  display: block;
  height: auto;
  object-fit: cover;
  object-position: 50% 15%;
  width: 100%;
}

.pine-field-attorney__name {
  margin: 0;
}

.pine-field-attorney__name span {
  font-size: 1rem;
  font-weight: 400;
  margin-left: 0.75rem;
}

.pine-field-attorney dl {
  display: grid;
  gap: 0.875rem;
  margin: 1.5rem 0 0;
}

.pine-field-attorney dl > div {
  display: grid;
  gap: 1rem;
  grid-template-columns: 7.5rem minmax(0, 1fr);
}

.pine-field-attorney dt {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
}

.pine-field-attorney dd {
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
}

.pine-field-attorney dd ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pine-field-attorney dd li + li {
  margin-top: 0.25rem;
}

.pine-field-attorney__link {
  color: var(--pine-field-navy);
  display: inline-block;
  font-size: 1rem;
  font-weight: 600;
  margin-top: 1.5rem;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Bands: #f2f2f2 with a centred navy title, as on the practice-area index. */
.pine-field-band {
  background: var(--pine-field-band);
  margin-top: 4.5rem;
  padding: 5rem 1.875rem;
  scroll-margin-top: 5rem;
}

.pine-field-wide {
  margin: 0 auto;
  max-width: 71.25rem;
}

.pine-field-band__title {
  color: var(--pine-field-navy);
  display: block;
  margin: 0;
  text-align: center;
}

.pine-field-band__lead {
  font-size: 1rem;
  line-height: 1.65;
  margin: 0.75rem auto 0;
  max-width: 40rem;
  text-align: center;
}

/* Representative work: the outlined .team-card boxes of the index page. */
.pine-field-cases {
  display: grid;
  gap: 0.625rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 3.125rem;
}

.pine-field-case {
  background: #fff;
  border: 0.0625rem solid var(--pine-field-navy);
  display: flex;
  flex-direction: column;
  padding: 2.5625rem;
}

.pine-field-case h3 {
  color: var(--pine-field-navy);
  font-weight: 500;
  line-height: 1.45;
  margin: 0 0 0.375rem;
  text-wrap: balance;
}

.pine-field-case__tag {
  color: var(--pine-field-navy);
  font-size: 0.875rem;
  line-height: 1.375rem;
  margin: 0 0 1.5rem;
}

.pine-field-case__body {
  font-size: 1rem;
  line-height: 1.65;
  margin: 0 0 1.5rem;
}

.pine-field-case__body:last-child {
  margin-bottom: 0;
}

.pine-field-case__link {
  font-size: 0.875rem;
  line-height: 1.375rem;
  margin: auto 0 0;
}

.pine-field-case__link a {
  color: var(--pine-field-navy);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Procedure and timing. */
.pine-field-steps {
  counter-reset: pine-field-step;
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
}

.pine-field-steps li {
  column-gap: 0.75rem;
  counter-increment: pine-field-step;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  padding-bottom: 1.5rem;
}

.pine-field-steps li::before {
  content: counter(pine-field-step) ".";
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  grid-row: 1 / span 3;
  line-height: 1.5;
}

.pine-field-steps strong {
  font-size: 1.25rem;
  grid-column: 2;
  line-height: 1.5;
}

.pine-field-steps__time {
  color: var(--pine-field-navy);
  font-size: 1rem;
  font-weight: 500;
  grid-column: 2;
  line-height: 1.5;
  margin-top: 0.125rem;
}

.pine-field-steps__text {
  font-size: 1rem;
  grid-column: 2;
  line-height: 1.6;
  margin-top: 0.25rem;
}

.pine-field-notes {
  color: var(--pine-field-quiet);
  font-size: 0.875rem;
  line-height: 1.6;
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
}

.pine-field-notes li {
  font-size: inherit;
}

.pine-field-notes li + li {
  margin-top: 0.25rem;
}

/* Related columns. */
.pine-field-links {
  margin: 1.25rem 0 0;
  padding-left: 1.5rem;
}

.pine-field-links li {
  font-size: 1.125rem;
  line-height: 1.6;
}

.pine-field-links li + li {
  margin-top: 0.625rem;
}

.pine-field-links a {
  color: var(--pine-field-navy);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.pine-field-links a:hover {
  text-decoration-thickness: 2px;
}

/* Questions: the /ko/faqs accordion, set in the site typeface. */
.pine-field-faq {
  margin-top: 1.5rem;
}

.pine-field-faq .rl_faq6_question-text,
.pine-field-faq .rl-text-style-regular {
  font-family: inherit;
}

.pine-field-faq .rl-text-style-regular {
  color: var(--pine-field-ink);
  line-height: 1.7;
}

/* Consultation: the white panel of /ko/contact-us. */
.pine-field-consult__panel {
  align-items: center;
  background: #fff;
  border-radius: 0.5rem;
  display: grid;
  gap: 4rem;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  margin-top: 2.5rem;
  padding: 2.5rem 3rem;
}

.pine-field-consult__contact {
  display: grid;
  gap: 2rem;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pine-field-consult__contact li {
  align-items: center;
  color: var(--pine-field-navy);
  display: flex;
  font-size: 1.5rem;
  font-weight: 600;
  gap: 1rem;
  line-height: 1.4;
}

.pine-field-consult__contact svg {
  flex: none;
  height: 2rem;
  width: 2rem;
}

.pine-field-consult__contact a {
  color: inherit;
  text-decoration: none;
}

.pine-field-consult__contact a:hover {
  text-decoration: underline;
}

.pine-field-consult__form {
  margin: 0;
  min-width: 0;
}

.pine-field-form {
  gap: 1rem;
  margin: 0;
}

.pine-field-form .form-field-2col {
  gap: 1rem 1.5rem;
}

.pine-field-form .uui-field-label {
  margin-bottom: 0.5rem;
}

.pine-field-form .uui-form_input {
  box-sizing: border-box;
  margin-bottom: 0;
  width: 100%;
}

.pine-field-form [data-pine-field-error="true"] {
  border-color: #b42318;
}

.pine-field-form__consent {
  align-items: flex-start;
  cursor: pointer;
  display: flex;
  font-size: 1rem;
  font-weight: 500;
  gap: 0.75rem;
  line-height: 1.5;
  margin: 0;
}

.pine-field-form__consent input {
  -webkit-appearance: none;
  appearance: none;
  background: #fff;
  border: 0.0625rem solid var(--pine-field-rule);
  border-radius: 0.375rem;
  cursor: pointer;
  flex: none;
  height: 1.25rem;
  margin: 0.125rem 0 0;
  width: 1.25rem;
}

.pine-field-form__consent input:checked {
  background: transparent url("/images/5291043.png") 50% / cover no-repeat;
  border-radius: 0.25rem;
  border-width: 0;
}

.pine-field-form__consent input:focus-visible {
  box-shadow: 0 0 0 0.25rem #ebedff;
  outline: none;
}

.pine-field-form__consent a {
  color: inherit;
  text-decoration: underline;
}

.pine-field-form__submit {
  margin-top: 0.5rem;
  width: 100%;
}

.pine-field-consult__form .w-form-done,
.pine-field-consult__form .w-form-fail {
  display: none;
}

@media (max-width: 991px) {
  .pine-field-banner .page-heading1 {
    font-size: 2.4rem;
    letter-spacing: 0.4rem;
  }

  .pine-field-cases {
    grid-template-columns: minmax(0, 1fr);
  }

  .pine-field-consult__panel {
    gap: 2rem;
    grid-template-columns: minmax(0, 1fr);
    padding: 2rem;
  }

  .pine-field-consult__contact {
    gap: 1rem;
    justify-content: start;
  }

  .pine-field-consult__contact li {
    font-size: 1.25rem;
  }
}

@media (max-width: 767px) {
  .pine-field-section {
    padding-top: 3.5rem;
  }

  .pine-field-band {
    margin-top: 3.5rem;
    padding: 3.75rem 1.25rem;
  }

  .pine-field-container > h2,
  .pine-field-band__title {
    font-size: 1.625rem;
    line-height: 1.4;
  }

  .pine-field-container > h3 {
    font-size: 1.25rem;
  }

  .pine-field-container > p {
    font-size: 1.125rem;
  }

  /* Portrait beside the name; the facts run full width underneath. */
  .pine-field-attorney {
    align-items: center;
    gap: 1.25rem;
    grid-template-columns: 6.5rem minmax(0, 1fr);
  }

  .pine-field-attorney__body {
    display: contents;
  }

  .pine-field-attorney__name {
    font-size: 1.25rem;
  }

  .pine-field-attorney__name span {
    display: block;
    margin-left: 0;
  }

  .pine-field-attorney dl,
  .pine-field-attorney__link {
    grid-column: 1 / -1;
    margin-top: 0;
  }

  .pine-field-attorney dl > div {
    gap: 0.75rem;
    grid-template-columns: 5.5rem minmax(0, 1fr);
  }

  .pine-field-case {
    padding: 1.75rem 1.5rem;
  }

  .pine-field-case h3 {
    font-size: 1.25rem;
  }

  .pine-field-steps strong,
  .pine-field-steps li::before {
    font-size: 1.125rem;
  }

  .pine-field-links li {
    font-size: 1rem;
  }

  .pine-field-consult__panel {
    padding: 1.5rem 1.25rem;
  }

  .pine-field-consult__contact li {
    font-size: 1.125rem;
  }

  .pine-field-consult__contact svg {
    height: 1.5rem;
    width: 1.5rem;
  }

  .pine-field-form__consent {
    font-size: 0.875rem;
  }
}

@media (max-width: 479px) {
  .pine-field-banner .page-heading1 {
    font-size: clamp(1.5rem, 7.2vw, 2rem);
    letter-spacing: 0.2rem;
  }

  .pine-field-consult__contact li {
    font-size: 1rem;
  }

  /* One field per row, so the e-mail address stays readable while typing. */
  .pine-field-form .form-field-2col {
    grid-template-columns: minmax(0, 1fr);
  }

  .pine-field-banner__sub {
    font-size: 0.9375rem;
    letter-spacing: 0.08em;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-pine-field-landing] {
    scroll-behavior: auto;
  }

  .pine-field-banner .page-heading1 {
    animation: none;
  }

  .pine-field-button {
    transition: none;
  }
}

@keyframes pine-field-title-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Localized copy needs natural CJK wrapping and room for longer Latin words. */
html[lang="zh-CN"] .pine-field-page,
html[lang="ja"] .pine-field-page {
  word-break: normal;
  line-break: strict;
}

html[lang="en"] .pine-field-page,
html[lang="de"] .pine-field-page {
  word-break: normal;
  hyphens: auto;
}

html[lang="en"] .pine-field-banner .page-heading1,
html[lang="de"] .pine-field-banner .page-heading1 {
  font-size: clamp(1.5rem, 4.5vw, 3.5rem);
  letter-spacing: 0.02em;
}

html[lang="en"] .pine-field-banner__sub,
html[lang="de"] .pine-field-banner__sub {
  letter-spacing: 0.02em;
}

@media (max-width: 767px) {
  html[lang="en"] .pine-field-attorney dl > div,
  html[lang="de"] .pine-field-attorney dl > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.25rem;
  }
}