@charset "UTF-8";
/* ===================================================================
   PLASNO — 처음부터 새로 작성한 클린 CSS 디자인 시스템
   (기존 plasno.co.kr 화면/카피/이미지를 참고했지만 코드는 100% 새로 작성)
   =================================================================== */

@font-face {
  font-family: "Pretendard";
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  src: url("../assets/fonts/pretendard-medium.woff2") format("woff2");
}

@font-face {
  font-family: "Pretendard";
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
  src: url("../assets/fonts/pretendard-semibold.woff2") format("woff2");
}

:root {
  /* 파랑 계열은 이 세 단계가 전부입니다. 새 색을 직접 적지 말고 여기서 가져다 쓰세요.
     아주짙은남색 : 본문 글자색, 푸터 배경, 헤더 반투명 막, story 진남색 띠
     남색         : 섹션 남색 배경, 큰 제목, 모바일 메뉴, story·company 남색 띠
     파랑         : 버튼, 특허 밴드, 교수 밴드, 로드맵, 서브페이지 히어로·물결, 강조 텍스트 */
  --navy-deep: #03122f;
  --navy: #092144;
  --blue: #124080;
  /* 아래 둘은 위 세 단계와 나란히 쓰는 색이 아니라, 어두운 배경 위 대비를 만드는
     보조색입니다 (남색 배경 위 eyebrow / 로드맵 현재 단계 배경) */
  --blue-light: #8fc7ea;
  --blue-tint: #eef4fb;
  --white: #fefefe;
  --gray-100: #f4f6f9;
  --gray-300: #d7dde5;
  --gray-500: #8a93a3;
  --gray-700: #4a5568;
  --red-accent: #ed1c24;

  /* reset.css 가 CDN 에서 가변 Pretendard(100~900)를 불러옵니다.
     이것이 있어야 시안의 Light(300)·Thin(100)이 제 굵기로 나옵니다.
     내려받지 못한 경우에만 assets/fonts 의 정적 Pretendard 로 떨어집니다. */
  --font: "Pretendard Variable", "Pretendard", "Malgun Gothic", sans-serif;

  /* 페이지 대표 제목 — 회사소개·브랜드스토리·기술소개·제품소개·파트너십이 같은 크기여야 합니다 */
  /* ── 글자 크기 스케일 ──────────────────────────────
     기준 : 메인(index) · 회사소개(company) 의 원래 값.
     두 페이지처럼 1440 폭에서 오른쪽 최대값에 닿습니다.
     새 글자 크기는 직접 적지 말고 여기서 고르세요.
       display 메인 히어로        100
       1       믿음의 플라즈노·히어로 부제  70
       2       페이지·섹션 대표 제목      52   (= --title-lg)
       3       2단계 제목               45   (= --title-md)
       4       소제목                  35
       5       카드 제목                28
       6       본문(큰)                24
       7       본문(기본)·메뉴·버튼      19
       8       본문(작은)               16
       9       주석·라벨                13   */
  --fs-display: clamp(52px, 6.94vw, 100px);
  --fs-1: clamp(34px, 4.86vw, 70px);
  --fs-2: clamp(28px, 3.61vw, 52px);
  --fs-3: clamp(26px, 3.13vw, 45px);
  --fs-4: clamp(20px, 2.43vw, 35px);
  --fs-5: clamp(18px, 1.94vw, 28px);
  --fs-6: clamp(16px, 1.67vw, 24px);
  --fs-7: clamp(15px, 1.32vw, 19px);
  --fs-8: clamp(14px, 1.11vw, 16px);
  --fs-9: clamp(12px, 0.9vw, 13px);
  /* 제목 별칭 */
  --title-lg: var(--fs-2);
  /* 2단계 제목 — 회사소개 "사업 확장 로드맵", 기술소개 부제, 파트너십의 제휴 유형/협력 프로세스/제휴 문의 */
  --title-md: var(--fs-3);

  --header-h: 82px;
  /* Figma 176:1319 */
  /* Figma 푸터 본문(182:712) 1067px 에 좌우 24 패딩을 더해 1115 */
  --container: 1115px;
  /* Figma inner 프레임 = 1440 (히어로 카피 기준선·시나리오 카드가 이 폭을 씁니다) */
  --container-wide: 1440px;
  --radius: 999px;
  --radius-card: 20px;

  --shadow-card: 0 12px 32px rgba(3, 18, 47, 0.08);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--navy-deep);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* 확대/축소 시 한글이 단어 중간에서 잘리지 않게, 긴 영문·숫자는 강제 줄바꿈 */
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 이미지는 어떤 배율에서도 비율 유지 (찌그러짐 방지).
   ※ img:not([width]) 같은 선택자는 .brand img 보다 우선순위가 높아
     로고 크기 지정을 덮어쓰므로 쓰지 않습니다. */
/* width/height 속성은 CLS 방지용 자리표시입니다. 실제 높이는 CSS 가 정하도록 auto 로 풀어둡니다.
   (안 그러면 height 속성이 aspect-ratio 를 눌러 그림 비율이 틀어집니다) */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

button {
  font-family: inherit;
  cursor: pointer;
}

/* 본문 강조 — 주변 글자보다 1.2배 크고 조금 굵게.
   ※ 배율이므로 단위는 em 입니다. 단위 없는 1.2 는 무효값이라 무시됩니다.
   ※ reset.css 가 strong 의 기본 굵기를 지우므로(font: inherit) 여기서 직접 줍니다. */
strong {
  font-weight: 600;
  font-size: 1.2em;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

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

/* ---------- 스크롤 리빌 애니메이션 ---------- */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .9s cubic-bezier(.25, .46, .45, .94), transform .9s cubic-bezier(.25, .46, .45, .94);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1.is-visible {
  transition-delay: .12s;
}

.reveal-delay-2.is-visible {
  transition-delay: .24s;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Header ----------
   화면 맨 위에 고정되어 히어로 영상 위에 겹쳐 표시됩니다.
   (영상이 헤더 뒤 화면 최상단까지 채워지도록 fixed 처리) */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: rgba(3, 18, 47, 0.5);
  /* Figma 176:1319 — 블러 없음 */
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Figma: 로고+메뉴가 한 덩어리로 가운데 정렬 */
  gap: clamp(20px, 5.2vw, 75px);
  height: var(--header-h);
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  /* 로고가 눌려 찌그러지지 않도록 (중요) */
}

.brand img {
  /* Figma image7 = 187x60. 원본이 이미 흰색 로고라 filter 불필요.
     aspect-ratio 를 고정해 어떤 폭에서도 비율이 깨지지 않게 함 */
  height: clamp(38px, 4.17vw, 60px);
  width: auto;
  aspect-ratio: 2163 / 690;
  object-fit: contain;
  flex-shrink: 0;
}

.main-nav {
  display: none;
}

/* 메뉴 묶음이 헤더 높이를 꽉 채우게 합니다.
   그래야 아래 뒷판과 하위 항목이 '헤더 바로 밑'에서 시작합니다. */
.main-nav ul {
  display: flex;
  align-items: stretch;
  height: 100%;
  gap: clamp(18px, 4.17vw, 60px);
  /* Figma 179:11 = 60 @1440 */
}

.main-nav li {
  display: flex;
  align-items: center;
}

.main-nav a {
  color: var(--white);
  font-size: var(--fs-7);
  /* Figma = 18.857 @1440 */
  font-weight: 400;
  padding: 8px 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

/* 상위 항목이 헤더 높이를 꽉 채우게 해서, 펼침 메뉴가 글자 바로 밑이 아니라
   헤더 띠가 끝나는 지점에서 시작하도록 합니다 (헤더와 겹치지 않게) */
.main-nav .has-dropdown {
  position: relative;
  align-self: stretch;
}

/* Figma 180:3 — 반투명 남색 패널, 모서리 각짐.
   좌우 패딩이 47px 이라 패널을 그만큼 왼쪽으로 빼면 항목 글자가 상위 메뉴와 맞습니다. */
.dropdown {
  position: absolute;
  top: 100%;
  left: -47px;
  background: rgba(3, 18, 47, 0.5);
  padding: 22px 47px;
  min-width: 160px;
  display: none;
  flex-direction: column;
  gap: 17px;
}

/* 올려놓은 메뉴의 하위 항목만 펼쳐집니다 */
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
  display: flex;
}

.dropdown a {
  color: var(--white);
  font-size: var(--fs-7);
  font-weight: 400;
  line-height: 1.22;
  white-space: nowrap;
}

.dropdown a:hover {
  opacity: 0.7;
}

.menu-toggle {
  background: none;
  border: none;
  color: var(--white);
  display: flex;
  align-items: center;
  padding: 6px;
}

.menu-toggle svg {
  width: 26px;
  height: 26px;
}

.mobile-nav {
  position: fixed;
  inset: 0;
  background: var(--navy);
  z-index: 300;
  display: none;
  flex-direction: column;
  padding: 24px;
  overflow-y: auto;
}

.mobile-nav.open {
  display: flex;
}

.mobile-nav-top {
  display: flex;
  justify-content: flex-end;
}

.mobile-nav-close {
  background: none;
  border: none;
  color: var(--white);
  font-size: var(--fs-5);
  line-height: 1;
  padding: 8px;
}

.mobile-nav ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 16px;
}

.mobile-nav a {
  color: var(--white);
  font-size: var(--fs-7);
  font-weight: 600;
  padding: 14px 4px;
  display: block;
  border-bottom: 1px solid rgba(254, 254, 254, 0.1);
}

.mobile-nav .sub-list {
  padding-left: 16px;
  margin-top: 4px;
  margin-bottom: 8px;
}

.mobile-nav .sub-list a {
  font-size: var(--fs-8);
  font-weight: 400;
  padding: 10px 4px;
  border-bottom: none;
  color: var(--gray-300);
}

@media (min-width: 900px) {

  /* align-self:stretch 로 헤더 높이를 그대로 물려받습니다 (뒷판 기준선) */
  .main-nav {
    display: block;
    position: relative;
    align-self: stretch;
  }

  .menu-toggle {
    display: none;
  }
}

/* ---------- Buttons ---------- */
/* Figma 180:4 / 181:24 — 227 x 40, radius 20, 글자 20px */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 227px;
  height: 40px;
  padding: 0 24px;
  border-radius: 20px;
  font-size: var(--fs-7);
  font-weight: 400;
  border: 1px solid transparent;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.btn:hover {
  transform: translateY(-2px);
  background: var(--white);
  color: var(--blue);
}

.btn-primary {
  background: var(--blue);
  color: var(--white);
}

.btn-outline {
  background: transparent;
  color: var(--white);
  border-color: rgba(254, 254, 254, 0.6);
}

.btn-outline:hover {
  background: rgba(254, 254, 254, 0.1);
}

.btn-row {
  display: flex;
  gap: 13px;
  flex-wrap: wrap;
}

@media (max-width: 560px) {
  .btn {
    min-width: 0;
    flex: 1 1 auto;
    padding: 0 18px;
    font-size: var(--fs-8);
  }
}

/* ---------- Hero ----------
   .hero-media(영상)는 inset:0 이라 화면 최상단(헤더 뒤)부터 채워집니다.
   본문 텍스트만 헤더 높이만큼 아래로 밀어 가려지지 않게 합니다. */
/* Figma 182:596 — 히어로 프레임 1920x1024.
   카피는 가운데가 아니라 inner(1440) 기준 왼쪽 259px 에 놓입니다. */
.hero {
  position: relative;
  min-height: 1024px;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  color: var(--white);
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* 영상 오른쪽 아래(원본 1280x720 기준 x 1115~1215, y 462~623)에 4각 별 표시가
   박혀 있습니다. 옅은 광채까지 치면 x 1038 부터 시작합니다.
   가로만 125% 로 늘리고 왼쪽을 기준으로 맞추면 보이는 영역이 원본 가로
   1024px 까지로 줄어 광채까지 화면 밖으로 나갑니다.
   세로는 100% + center 라 원래 구도(수평선 위치)가 그대로 유지됩니다.
   어떤 화면 비율에서도 보이는 가로 폭은 1024px 를 넘지 않습니다. */
.hero-media video,
.hero-media img {
  width: 125%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}

/* 시안에는 영상을 어둡게 덮는 막이 없습니다. 원본 밝기 그대로 씁니다. */

.hero .container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-wide);
  padding: 356px 24px 0;
  /* Figma 179:56 — 첫 줄 상단 356 */
}

.hero-eyebrow {
  font-size: var(--fs-8);
  opacity: 0.8;
  margin-bottom: 12px;
  letter-spacing: 0.04em;
}

/* Figma 179:56~181:28 — 1920 기준 실측값 */
.hero-copy {
  max-width: 620px;
  margin-left: 235px;
  /* inner 259 − 컨테이너 패딩 24 */
}

.hero h1 {
  font-size: var(--fs-display);
  font-weight: 400;
  line-height: 1.195;
  /* Figma 179:56 h=121 */
  margin-bottom: 0;
}

.hero .hero-sub {
  display: block;
  font-size: var(--fs-1);
  font-weight: 400;
  line-height: 1.185;
  /* Figma 179:57 h=70 */
  margin-top: 0;
  /* 두 줄이 맞붙습니다 (356+121=477) */
}

/* 부제 아래 가로 구분선 (Figma 180:2 — x 275, y 611, width 100) */
.hero-line {
  display: block;
  width: 100px;
  height: 1px;
  background: var(--white);
  margin: 64px 0 0 16px;
}

.hero p {
  font-size: var(--fs-7);
  /* Figma 179:58 */
  line-height: 1.22;
  opacity: 1;
  max-width: 620px;
  margin: 23px 0 0 17px;
  /* Figma 179:58 — y 635 */
}

.hero .btn-row {
  margin: 24px 0 0 17px;
}

/* Figma 180:4 — y 728 */

@media (max-width: 1240px) {

  /* 좁은 화면에서는 왼쪽 여백을 풀고 헤더 아래로 자연스럽게 내립니다 */
  .hero {
    min-height: 0;
    align-items: center;
  }

  .hero .container {
    padding: calc(var(--header-h) + 90px) 24px 90px;
  }

  .hero-copy {
    margin-left: 0;
  }

  .hero-line {
    margin-left: 0;
  }

  .hero p,
  .hero .btn-row {
    margin-left: 0;
  }
}

/* ---------- Sections ---------- */
.section {
  padding: 96px 0;
}

.section-tight {
  padding: 64px 0;
}

.section-navy {
  background: var(--navy);
  color: var(--white);
}

.section-alt {
  background: var(--gray-100);
}

.section-head {
  text-align: center;
  margin-bottom: 56px;
}

.section-head .eyebrow {
  display: inline-block;
  font-size: var(--fs-9);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--blue);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.section-navy .section-head .eyebrow {
  color: var(--blue-light);
}

/* 섹션 제목 — 제품소개·파트너십의 제목을 기술소개와 같은 무드로 통일합니다.
   .title-md 를 함께 주면 2단계 크기로 내려갑니다. */
.section-head h2.title-md {
  font-size: var(--title-md);
}

.section-head h2 {
  font-size: var(--title-lg);
  color: var(--blue);
  font-weight: 700;
  line-height: 1.3;
}

.section-head p {
  margin-top: 16px;
  font-size: var(--fs-7);
  color: var(--gray-700);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}

.section-navy .section-head p {
  color: rgba(254, 254, 254, 0.75);
}

/* 남색 배경 위에서는 파랑이 묻히므로 흰색으로 */
.section-navy .section-head h2 {
  color: var(--white);
}

/* ---------- Trust bands (흰색/남색 밴드가 번갈아 나오는 구조) ---------- */
/* Figma 197:903 — 노벨 줄은 흰 배경 위, 좌우 여백 68/64 */
.trust-band {
  padding: 68px 0 64px;
}

.trust-band.is-navy {
  background: var(--navy);
  color: var(--white);
}

/* 믿음의 플라즈노 — 교수 사진이 흰 배경과 남색 배너에 걸쳐 서 있는 구조 */
/* Figma 197:865 — 믿음의 플라즈노 59.056px Bold #092144 */
.trust-professor {
  padding-top: 116px;
}

.trust-title {
  text-align: center;
  font-size: var(--fs-1);
  font-weight: 700;
  line-height: 1.185;
  /* Figma 197:865 h=70 */
  color: var(--navy);
  /* Figma 197:908 의 gap 241 은 사진이 위로 넘쳐 나오기 전 기준점입니다.
     실제 사진 윗단(1299.5)까지는 제목 아래 90px 입니다. */
  margin-bottom: 90px;
}

.prof-stage {
  position: relative;
}

/* Figma 182:593 — 1920 기준 밴드 303px.
   ※ 사진은 폭을 따라 줄어드는데(23.2vw) 밴드만 303 고정이면 1000px 아래에서
     사진이 밴드보다 작아져 '걸쳐 선' 구도가 무너집니다. 같은 비율로 줄입니다.
     303 / 445(사진폭) = 0.681 → 23.2vw × 0.681 = 15.8vw */
.prof-band {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(136px, 15.8vw, 303px);
  background: var(--blue);
}

.prof-content {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  /* Figma 197:869 — 왼쪽 정렬 */
  gap: clamp(24px, 3.8vw, 73px);
  /* 1920 기준 73 */
}

/* Figma 197:867 — 445 x 582, 사진 밑단이 남색 밴드 밑단과 맞습니다 */
.prof-photo {
  width: clamp(200px, 23.2vw, 445px);
  height: auto;
  flex-shrink: 0;
}

/* Figma 197:866 — 1920 기준 글 밑단이 밴드 밑단에서 144px 위.
   밴드가 줄면 글도 같은 비율로 따라와야 밴드 밖으로 밀려나지 않습니다. */
.prof-text {
  color: var(--white);
  padding-bottom: clamp(65px, 7.5vw, 144px);
}

/* Figma 182:634 — Light 24px / 182:633 — Bold 35px */
.prof-text .eyebrow {
  display: block;
  font-size: var(--fs-6);
  font-weight: 300;
  letter-spacing: -0.48px;
  line-height: 0.95;
  color: var(--white);
  margin-bottom: 11px;
}

.prof-text h3 {
  font-size: var(--fs-4);
  font-weight: 700;
  letter-spacing: -0.7px;
  line-height: 0.95;
}

@media (max-width: 780px) {
  .trust-professor {
    padding-top: 60px;
  }

  .trust-title {
    margin-bottom: 50px;
  }

  .prof-band {
    height: 175px;
  }

  .prof-content {
    flex-direction: column;
    align-items: center;
    gap: 0;
    text-align: center;
  }

  .prof-photo {
    width: 190px;
  }

  .prof-text {
    padding-bottom: 40px;
    padding-top: 18px;
  }
}

/* Figma 197:903 / 197:889 — 각 줄의 열 너비와 왼쪽 들여쓰기 */
@media (min-width: 1100px) {
  .trust-band .two-col {
    grid-template-columns: 463fr 392fr;
    gap: 79px;
    align-items: center;
  }

  .trust-band.is-navy .two-col {
    grid-template-columns: 387.87fr 540fr;
    gap: 77px;
  }
}

.trust-band .two-col img {
  width: 100%;
  height: auto;
}

/* 칸을 꽉 채우면 시안(메달 392 / 특허증 388)보다 커집니다.
   크기는 시안대로 두고, 바깥쪽 기준선(왼 179 / 오른 1246)에만 붙입니다. */
.trust-band:not(.is-navy) .img-col img {
  max-width: 392px;
  margin-left: auto;
}

.trust-band.is-navy .img-col img {
  max-width: 388px;
  margin-right: auto;
}

/* Figma 197:871 / 197:892 — 소제목 Bold 35px, 본문 Light 24px */
.trust-band .two-col h3 {
  font-size: var(--fs-4);
  font-weight: 700;
  letter-spacing: -0.7px;
  margin-bottom: 15px;
  line-height: 1.1;
  color: var(--blue);
}

.trust-band .two-col p {
  font-size: var(--fs-7);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.48px;
  color: var(--blue);
  margin-bottom: 0;
}

.trust-band.is-navy .two-col h3 {
  color: var(--white);
}

.trust-band.is-navy .two-col p {
  color: var(--white);
}

.trust-band.is-navy .two-col .eyebrow {
  color: var(--blue-light);
}

/* 특허 표 — Figma 197:893 (라벨 Medium 24 / 값 Bold 24, 줄간격 7 / 열간격 9) */
.trust-band.is-navy .patent-table th,
.trust-band.is-navy .patent-table td {
  border: 0;
  padding: 3.5px 0;
  font-size: var(--fs-7);
  letter-spacing: -0.48px;
  color: var(--white);
  line-height: 1.34;
}

/* 라벨을 113px 폭에 양쪽정렬 — 시안의 "출원 번 호" 자간 벌림을 그대로 재현 */
.trust-band.is-navy .patent-table th {
  font-weight: 500;
  width: 113px;
  padding-right: 9px;
  text-align: justify;
  text-align-last: justify;
}

.trust-band.is-navy .patent-table td {
  font-weight: 700;
}

/* 표 전체 높이를 시안(142px)에 맞추기 위해 위아래 끝 여백은 뺍니다 */
.trust-band.is-navy .patent-table tr:first-child th,
.trust-band.is-navy .patent-table tr:first-child td {
  padding-top: 0;
}

.trust-band.is-navy .patent-table tr:last-child th,
.trust-band.is-navy .patent-table tr:last-child td {
  padding-bottom: 0;
}

.trust-band.is-navy {
  background: var(--blue);
  padding: 111px 0 114px;
  /* Figma 197:874 밴드 766 안에서 본문 541 */
}

.trust-band.is-navy .two-col h3 {
  line-height: 1.13;
}

.trust-band.is-navy .patent-table {
  margin-top: 41px;
}

/* Figma 197:891 gap */

.patent-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-9);
  margin-top: 16px;
}

.patent-table th,
.patent-table td {
  text-align: left;
  padding: 12px 8px;
  border-bottom: 1px solid var(--gray-300);
  vertical-align: top;
}

.patent-table th {
  width: 110px;
  color: var(--gray-700);
  font-weight: 600;
  white-space: nowrap;
}

/* ---------- Scenario cards ---------- */
.scenario-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}

@media (min-width: 800px) {
  .scenario-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.scenario-card {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  min-height: 320px;
  display: flex;
  align-items: flex-end;
  color: var(--white);
}

.scenario-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.scenario-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(3, 18, 47, 0) 30%, rgba(3, 18, 47, 0.9) 100%);
  z-index: 1;
}

.scenario-card .content {
  position: relative;
  z-index: 2;
  padding: 24px;
}

.scenario-card h3 {
  font-size: var(--fs-7);
  font-weight: 700;
  margin-bottom: 8px;
}

.scenario-card p {
  font-size: var(--fs-9);
  line-height: 1.6;
  opacity: 0.92;
}

/* ---------- Feature list ---------- */
.feature-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}

@media (min-width: 800px) {
  .feature-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.feature-card {
  padding: 28px;
  border-radius: var(--radius-card);
  background: var(--white);
  box-shadow: var(--shadow-card);
}

.feature-card .num {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  font-weight: 700;
  margin-bottom: 16px;
}

.feature-card h3 {
  font-size: var(--fs-8);
  font-weight: 700;
  margin-bottom: 10px;
}

.feature-card p {
  font-size: var(--fs-9);
  color: var(--gray-700);
  line-height: 1.7;
}

/* ---------- Roadmap ---------- */
.roadmap {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}

@media (min-width: 800px) {
  .roadmap {
    grid-template-columns: 1fr 1fr;
  }
}

.roadmap-step {
  border-radius: var(--radius-card);
  padding: 32px;
  border: 1px solid var(--gray-300);
}

.roadmap-step.current {
  border-color: var(--blue);
  background: var(--blue-tint);
}

.roadmap-step .step-label {
  font-size: var(--fs-9);
  font-weight: 700;
  color: var(--blue);
  margin-bottom: 8px;
}

.roadmap-step h3 {
  font-size: var(--fs-7);
  font-weight: 700;
  margin-bottom: 14px;
}

.roadmap-step ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.roadmap-step li {
  font-size: var(--fs-9);
  color: var(--gray-700);
  padding-left: 18px;
  position: relative;
  line-height: 1.6;
}

.roadmap-step li::before {
  content: "\2014";
  position: absolute;
  left: 0;
  color: var(--blue);
}

/* ---------- Simple two-column ---------- */
.two-col {
  display: grid;
  gap: 48px;
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 860px) {
  .two-col {
    grid-template-columns: 1fr 1fr;
  }
}

/* 사진에는 둥근 모서리도 그림자도 넣지 않습니다 (시안 기준, 사이트 전체 동일) */

.two-col .eyebrow {
  font-size: var(--fs-9);
  font-weight: 700;
  color: var(--blue);
  letter-spacing: 0.06em;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.two-col h2 {
  font-size: var(--fs-4);
  font-weight: 700;
  margin-bottom: 18px;
  line-height: 1.3;
}

.two-col p {
  font-size: var(--fs-7);
  color: var(--gray-700);
  line-height: 1.8;
  margin-bottom: 14px;
}

.two-col.reverse .img-col {
  order: 2;
}

@media (max-width: 859px) {
  .two-col.reverse .img-col {
    order: 0;
  }
}

/* ---------- Quote block ---------- */
.quote-block {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  font-size: var(--fs-7);
  font-weight: 600;
  line-height: 1.7;
  color: var(--navy-deep);
}

.quote-block::before {
  content: "\201C";
  color: var(--blue);
  font-size: var(--fs-2);
  font-weight: 800;
  display: block;
  line-height: 1;
  margin-bottom: 8px;
}

/* ---------- Partnership types ---------- */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 24px;
}

.tag-list span {
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  padding: 10px 20px;
  font-size: var(--fs-9);
  font-weight: 600;
}

.process-steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 32px;
}

.process-steps .step {
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 20px 28px;
  font-weight: 700;
  font-size: var(--fs-8);
  min-width: 140px;
  text-align: center;
}

.process-steps .arrow {
  display: flex;
  align-items: center;
  color: var(--blue);
  font-size: var(--fs-7);
  padding: 0 4px;
}

/* ---------- Forms ---------- */
.form-card {
  max-width: 640px;
  margin: 0 auto;
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 40px;
}

.form-row {
  margin-bottom: 20px;
}

.form-row label {
  display: block;
  font-size: var(--fs-9);
  font-weight: 600;
  margin-bottom: 8px;
}

.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--gray-300);
  border-radius: 10px;
  font-family: inherit;
  font-size: var(--fs-8);
  background: var(--white);
  color: var(--navy-deep);
}

.form-row textarea {
  min-height: 120px;
  resize: vertical;
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--blue);
}

.form-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-9);
  color: var(--gray-700);
  margin-bottom: 24px;
}

.form-check input {
  margin-top: 3px;
}

.form-note {
  font-size: var(--fs-9);
  color: var(--gray-500);
  margin-top: 16px;
  line-height: 1.6;
}

/* ---------- Legal text pages ---------- */
.legal-content {
  max-width: 760px;
  margin: 0 auto;
  font-size: var(--fs-7);
  line-height: 1.9;
  color: var(--gray-700);
  white-space: pre-line;
}

.legal-content h2 {
  font-size: var(--fs-7);
  color: var(--navy-deep);
  margin: 32px 0 12px;
}

.legal-content h2:first-child {
  margin-top: 0;
}

/* ---------- Footer (Figma 182:648) ---------- */
.site-footer {
  background: var(--navy-deep);
  /* #03122f */
  color: var(--white);
  padding: 52px 0;
}

/* 왼쪽 = 로고 한 칸, 오른쪽 = 메뉴+회사정보 한 칸.
   회사정보가 로고 밑으로 흘러 들어가지 않고 메뉴와 왼쪽 끝을 맞춥니다. */
.footer-main {
  display: flex;
  align-items: center;
  /* 로고를 오른쪽 글 묶음의 세로 가운데에 둡니다 */
  gap: 36px;
}

.footer-body {
  flex: 1 1 auto;
  min-width: 0;
  /* 긴 회사정보 줄이 칸을 밀어내지 않도록 */
}

/* Figma image3 = 58x70. 원본이 흰색이라 filter 불필요, 비율 고정으로 찌그러짐 방지 */
.footer-logo img {
  height: clamp(48px, 4.9vw, 70px);
  width: auto;
  aspect-ratio: 1562 / 1870;
  object-fit: contain;
  flex-shrink: 0;
}

.footer-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.footer-links a {
  color: var(--white);
  /* reset.css 의 a{color:#333} 이 남색 푸터에서 묻히지 않도록 명시 */
  font-size: var(--fs-7);
  font-weight: 300;
  letter-spacing: -0.4px;
  line-height: 0.95;
  white-space: nowrap;
}

/* Figma 182:662 — 개인정보처리방침만 Medium */
.footer-links a[href="privacy.html"] {
  font-weight: 500;
}

/* Figma 182:658 — 항목 사이 세로 구분선 (양쪽 여백 7px) */
.footer-links a+a::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 20px;
  background: rgba(254, 254, 254, 0.65);
  margin: 0 7px -0.24em;
  vertical-align: baseline;
}

.footer-links a:hover {
  opacity: 0.75;
}

.footer-meta {
  font-size: var(--fs-7);
  font-weight: 300;
  letter-spacing: -0.4px;
  line-height: 1.6;
  /* 원본 사이트와 같은 줄간격 (20px x 1.6 = 32) */
  color: var(--white);
}

.footer-copy {
  font-size: var(--fs-7);
  font-weight: 300;
  letter-spacing: -0.4px;
  line-height: 0.95;
  color: var(--white);
  text-align: center;
  margin-top: 46px;
}

@media (max-width: 700px) {

  /* 좁은 화면에서는 두 칸을 위아래로 풉니다 (로고가 위, 글 묶음이 아래) */
  .footer-main {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
  }

  .footer-meta {
    line-height: 1.7;
  }

  .footer-links a+a::before {
    margin: 0 6px -0.2em;
    height: 1em;
  }

  .footer-copy {
    margin-top: 37px;
  }
}

/* 메인 외 모든 페이지의 히어로는 .wave-hero 로 통일했습니다 (아래 "웨이브 히어로" 참고) */

@media (max-width: 900px) {

  /* 모바일·태블릿에서는 헤더를 낮춰 화면을 넓게 씁니다 (--header-h 하나만 바꾸면
     헤더 높이·히어로 여백·서브페이지 여백이 함께 따라옵니다) */
  :root {
    --header-h: 72px;
  }
}

@media (max-width: 640px) {
  .section {
    padding: 64px 0;
  }

  .form-card {
    padding: 28px 20px;
  }
}

/* ===================================================================
   사용 시나리오 소개 — 원본 Wix 커스텀 HTML 임베드 코드 그대로 이식
   (자동 확장 카드 애니메이션, 9초 주기 PC / 6초 주기 모바일)
   섹션 배경/타이포는 Figma 186:153~155 기준
   =================================================================== */
/* Figma 176:1318 — 섹션 1024 안에서 본문 블록이 위 153 / 아래 152 */
.scenario-section {
  background: var(--white);
  padding: 135px 0 152px;
}

.scenario-section .section-head {
  margin-bottom: 60px;
}

/* 시안은 53.375px 이지만 사이트 전체 제목과 같은 기준(--title-lg)으로 맞췄습니다 */
.scenario-section .section-head h2 {
  letter-spacing: 0.05em;
}

.scenario-section .section-head p {
  margin-top: 9px;
  font-size: var(--fs-7);
  font-weight: 400;
  color: var(--blue);
  letter-spacing: 0.05em;
  line-height: 1.3;
}

/* Figma 185:88 — 카드 영역은 inner 폭(1440) 전체를 씁니다.
   본문 컨테이너(1109)보다 넓으므로 화면 가운데를 기준으로 밖으로 빼냅니다. */
.card-container {
  display: flex;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: var(--container-wide);
  max-width: calc(100vw - 48px);
  height: 531px;
  gap: 26.891px;
}

/* Figma 185:129 / 186:89 — 접힌 카드 301, 펼친 카드 784. 모서리는 각집니다. */
.card {
  position: relative;
  flex: 1 1 0;
  flex-grow: 301;
  overflow: hidden;
  transition: flex-grow .8s cubic-bezier(.25, 1, .5, 1);
}

.card .bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card .bg1 {
  opacity: 1;
}

.card .bg2 {
  opacity: 0;
}

/* 접힌 카드는 흰 40%, 펼친 카드는 남색 40% 로 덮습니다 (Figma 186:95 / 186:123) */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(254, 254, 254, 0.4);
  z-index: 1;
}

/* Figma 186:149 — 접힘: 카드 가운데 / 펼침: 왼쪽 72px */
.card-content {
  position: absolute;
  top: calc(50% - 38px);
  left: 50%;
  width: 245px;
  transform: translate(-50%, -50%);
  color: var(--white);
  z-index: 2;
}

.card-content h3 {
  font-size: var(--fs-5);
  font-weight: 700;
  letter-spacing: 1.4006px;
  line-height: 1.3;
}

.card-content .line {
  width: 100%;
  height: 1px;
  background: var(--white);
  margin: 17px 0;
}

.card-content p {
  font-size: var(--fs-7);
  font-weight: 400;
  letter-spacing: -0.69px;
  line-height: 1.3;
  color: var(--white);
  opacity: 0;
  /* 본문은 펼쳐진 카드에서만 보입니다 */
}

@keyframes autoExpand {

  0%,
  100% {
    flex-grow: 301;
  }

  3.3%,
  30% {
    flex-grow: 784;
  }

  33.3%,
  96.7% {
    flex-grow: 301;
  }
}

@keyframes contentExpand {

  0%,
  100% {
    top: calc(50% - 38px);
    left: 50%;
    width: 245px;
    transform: translate(-50%, -50%);
  }

  3.3%,
  30% {
    top: 50%;
    left: 72px;
    width: 368px;
    transform: translate(0, -50%);
  }

  33.3%,
  96.7% {
    top: calc(50% - 38px);
    left: 50%;
    width: 245px;
    transform: translate(-50%, -50%);
  }
}

@keyframes bodyFade {

  0%,
  100% {
    opacity: 0;
  }

  5%,
  28% {
    opacity: 1;
  }

  33.3%,
  96.7% {
    opacity: 0;
  }
}

@keyframes overlayShift {

  0%,
  100% {
    background-color: rgba(254, 254, 254, .4);
  }

  3.3%,
  30% {
    background-color: rgba(3, 18, 47, .4);
  }

  33.3%,
  96.7% {
    background-color: rgba(254, 254, 254, .4);
  }
}

@keyframes imageFadeIn {

  0%,
  100% {
    opacity: 0;
  }

  5%,
  28% {
    opacity: 1;
  }

  33.3%,
  96.7% {
    opacity: 0;
  }
}

@keyframes imageFadeOut {

  0%,
  100% {
    opacity: 1;
  }

  5%,
  28% {
    opacity: 0;
  }

  33.3%,
  96.7% {
    opacity: 1;
  }
}

.card:nth-child(1) {
  animation: autoExpand 9s infinite;
}

.card:nth-child(1) .card-content {
  animation: contentExpand 9s infinite;
}

.card:nth-child(1) .card-content p {
  animation: bodyFade 9s infinite;
}

.card:nth-child(1)::before {
  animation: overlayShift 9s infinite;
}

.card:nth-child(1) .bg1 {
  animation: imageFadeOut 9s infinite;
}

.card:nth-child(1) .bg2 {
  animation: imageFadeIn 9s infinite;
}

.card:nth-child(2) {
  animation: autoExpand 9s infinite 3s;
}

.card:nth-child(2) .card-content {
  animation: contentExpand 9s infinite 3s;
}

.card:nth-child(2) .card-content p {
  animation: bodyFade 9s infinite 3s;
}

.card:nth-child(2)::before {
  animation: overlayShift 9s infinite 3s;
}

.card:nth-child(2) .bg1 {
  animation: imageFadeOut 9s infinite 3s;
}

.card:nth-child(2) .bg2 {
  animation: imageFadeIn 9s infinite 3s;
}

.card:nth-child(3) {
  animation: autoExpand 9s infinite 6s;
}

.card:nth-child(3) .card-content {
  animation: contentExpand 9s infinite 6s;
}

.card:nth-child(3) .card-content p {
  animation: bodyFade 9s infinite 6s;
}

.card:nth-child(3)::before {
  animation: overlayShift 9s infinite 6s;
}

.card:nth-child(3) .bg1 {
  animation: imageFadeOut 9s infinite 6s;
}

.card:nth-child(3) .bg2 {
  animation: imageFadeIn 9s infinite 6s;
}

/* 1440 아래에서는 카드가 좁아져 245px 글상자가 카드 밖으로 잘립니다.
   글을 카드 폭에 맞추고, 자리를 옮기는 애니메이션은 끕니다. */
@media (max-width: 1200px) {

  .card:nth-child(1) .card-content,
  .card:nth-child(2) .card-content,
  .card:nth-child(3) .card-content {
    animation: none !important;
  }

  .card-content {
    top: 50%;
    width: calc(100% - 32px);
  }

  .card-content h3 {
    font-size: var(--fs-5);
    letter-spacing: 0.05em;
  }

  .card-content p {
    font-size: var(--fs-6);
  }
}

@media (max-width: 768px) {
  .card-container {
    flex-direction: column;
    position: static;
    left: auto;
    transform: none;
    width: 100%;
    max-width: 100%;
    height: 100vh;
    height: 100dvh; /* 사파리 주소창 때문에 100vh 가 화면보다 큽니다 */
    gap: 10px;
    padding: 10px;
  }

  .card {
    width: 100%;
  }

  .card-content {
    top: auto;
    bottom: 20px;
    left: 20px;
    width: calc(100% - 40px);
    transform: none;
  }

  .card-content h3 {
    font-size: var(--fs-6);
    letter-spacing: 1.1px;
  }

  .card-content .line {
    width: 100%;
    max-width: 300px;
    margin: 12px 0;
  }

  .card-content p {
    font-size: var(--fs-9);
  }

  @keyframes autoExpandMobile {

    0%,
    100% {
      flex-grow: 301;
    }

    5%,
    33.3% {
      flex-grow: 784;
    }

    38.3%,
    95% {
      flex-grow: 301;
    }
  }

  @keyframes imageFadeInMobile {

    0%,
    100% {
      opacity: 0;
    }

    5%,
    33.3% {
      opacity: 1;
    }

    38.3%,
    95% {
      opacity: 0;
    }
  }

  @keyframes imageFadeOutMobile {

    0%,
    100% {
      opacity: 1;
    }

    5%,
    33.3% {
      opacity: 0;
    }

    38.3%,
    95% {
      opacity: 1;
    }
  }

  @keyframes bodyFadeMobile {

    0%,
    100% {
      opacity: 0;
    }

    3%,
    33.3% {
      opacity: 1;
    }

    38.3%,
    95% {
      opacity: 0;
    }
  }

  @keyframes overlayShiftMobile {

    0%,
    100% {
      background-color: rgba(254, 254, 254, .4);
    }

    5%,
    33.3% {
      background-color: rgba(3, 18, 47, .4);
    }

    38.3%,
    95% {
      background-color: rgba(254, 254, 254, .4);
    }
  }

  /* 세로 배치에서는 글 위치를 옮기지 않고 본문만 나타났다 사라집니다 */
  .card:nth-child(1) .card-content,
  .card:nth-child(2) .card-content,
  .card:nth-child(3) .card-content {
    animation: none !important;
  }

  .card:nth-child(1) {
    animation: autoExpandMobile 6s infinite !important;
  }

  .card:nth-child(1) .card-content p {
    animation: bodyFadeMobile 6s infinite !important;
  }

  .card:nth-child(1)::before {
    animation: overlayShiftMobile 6s infinite !important;
  }

  .card:nth-child(1) .bg1 {
    animation: imageFadeOutMobile 6s infinite !important;
  }

  .card:nth-child(1) .bg2 {
    animation: imageFadeInMobile 6s infinite !important;
  }

  .card:nth-child(2) {
    animation: autoExpandMobile 6s infinite 2s !important;
  }

  .card:nth-child(2) .card-content p {
    animation: bodyFadeMobile 6s infinite 2s !important;
  }

  .card:nth-child(2)::before {
    animation: overlayShiftMobile 6s infinite 2s !important;
  }

  .card:nth-child(2) .bg1 {
    animation: imageFadeOutMobile 6s infinite 2s !important;
  }

  .card:nth-child(2) .bg2 {
    animation: imageFadeInMobile 6s infinite 2s !important;
  }

  .card:nth-child(3) {
    animation: autoExpandMobile 6s infinite 4s !important;
  }

  .card:nth-child(3) .card-content p {
    animation: bodyFadeMobile 6s infinite 4s !important;
  }

  .card:nth-child(3)::before {
    animation: overlayShiftMobile 6s infinite 4s !important;
  }

  .card:nth-child(3) .bg1 {
    animation: imageFadeOutMobile 6s infinite 4s !important;
  }

  .card:nth-child(3) .bg2 {
    animation: imageFadeInMobile 6s infinite 4s !important;
  }
}

@media (max-width: 390px) {
  .card-container {
    gap: 8px;
    padding: 8px;
  }

  .card-content {
    left: 15px;
    bottom: 15px;
  }

  .card-content h3 {
    font-size: var(--fs-7);
  }

  .card-content p {
    font-size: var(--fs-9);
    line-height: 1.4;
  }
}

/* ===================================================================
   회사소개 페이지 (con1_company.pdf 시안 기준, 1920x4135)
   =================================================================== */

/* ---- ① 웨이브 히어로 ----
   메인(index)을 제외한 모든 페이지가 이 히어로를 씁니다.
   아래 물결(.wave-hero-curve)과 같은 색이라야 이어져 보입니다. */
.wave-hero {
  position: relative;
  background: var(--blue);
  color: var(--white);
  /* 물결이 통째로 위로 올라오도록 히어로를 짧게 잡았습니다 */
  padding: calc(var(--header-h) + 42px) 0 0;
  text-align: center;
}

.wave-hero h1 {
  font-size: var(--fs-2);
  font-weight: 700;
  line-height: 1.15;
}

.wave-hero-en {
  font-size: var(--fs-4);
  font-weight: 300;
  letter-spacing: 0.02em;
  margin-top: 2px;
  opacity: 0.95;
}

/* 히어로 배경은 글자보다 위에서 끝나고, 글자는 그 아래(물결 위)로 넘칩니다.
   이렇게 해야 물결을 히어로에 밀어 넣지 않고도 높이 올릴 수 있어
   좌우 끝에 직선 구간이 생기지 않습니다.
   넘치는 양은 물결 깊이에 비례시켜 어느 폭에서나 같은 비율로 보이게 합니다. */
.wave-hero {
  padding-bottom: 0;
  /* 자식의 음수 여백이 밖으로 새어나가(마진 상쇄) 물결만 끌려 올라가는 것을 막습니다.
     overflow:hidden 을 쓰면 넘친 글자가 잘리므로 flow-root 를 씁니다. */
  display: flow-root;
}

.wave-hero .container {
  position: relative;
  z-index: 1;
  /* 글자가 물결 위에 오도록 */
  margin-bottom: max(-46px, -2.42vw);
}

/* 하단 물결 — 히어로 바로 아래에 붙는 별도 블록입니다.
   1910 폭 기준으로 그려진 그림이라 그보다 좁으면 contain 으로 맞춥니다.
   ※ 아래 SVG 안에는 CSS 변수를 쓸 수 없고, data URI 라 '#' 도 못 씁니다.
     rgba(18, 64, 128, 1) 이 --blue(#124080) 입니다. --blue 를 바꾸면 여기도 같이 바꾸세요. */
.wave-hero-curve {
  display: block;
  position: relative;
  top: -2px;
  /* 물결을 히어로 속으로 밀어 넣으면 곡선이 얕은 좌우 끝이 묻혀서
     직선 구간이 생깁니다. 겹치지 않게 두고, 위로 올리는 일은
     히어로 자체의 높이를 줄여서 처리합니다. */
  margin-top: 0;
  height: 200px;
  /* ※ path 를 반드시 '하나'로 유지하세요.
     원래는 왼쪽 절반(0~966)과 오른쪽 절반(965~1910)이 각각 path 였는데,
     두 도형이 맞닿는 가운데 열이 양쪽 안티앨리어싱만 겹쳐 알파 207 로 덜 칠해졌고
     그게 물결 한가운데 세로 흰 줄로 보였습니다. 이어진 곡선 한 줄로 그립니다. */
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1910 200" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(18, 64, 128, 1)" d="M 0 0 C 483 0 483 110 965.5 110 C 1437.5 110 1437.5 0 1910 0 L 0 0 Z" stroke-width="0"></path></svg>');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  /* 그림 비율 그대로 늘립니다. cover 로 두면 1910px 이상에서 곡선이 세로로 잘려
     좌우 끝에 직선 구간이 생깁니다. */
  aspect-ratio: 1910 / 200;
  height: auto;
}

/* 1910px 미만에서는 그림이 contain 으로 줄어드는데, 상자 높이는 200px 로 남아
   그림 아래에 빈 공간이 그대로 생깁니다(모바일에서 200px 중 39px 만 그림).
   상자 높이를 그림 비율에 맞춰 같이 줄입니다. */


/* ---- ② 주식회사 플라즈노 + 로고/소개 ---- */
.co-title {
  text-align: center;
  font-size: var(--title-lg);
  font-weight: 700;
  line-height: 1.3;
  color: var(--blue);
  margin-bottom: clamp(48px, 6vw, 90px);
}

.co-intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}

/* 태블릿(760~)도 데스크톱과 같은 좌우 배치.
   860 이면 820px 태블릿이 모바일 쌓기로 떨어져 글칸 757px 에 가장 긴 줄이 291px,
   오른쪽 61% 가 빈 채로 남고 로고(가운데)와 글(왼쪽 끝)의 축도 어긋납니다. */
@media (min-width: 760px) {
  .co-intro {
    grid-template-columns: 0.8fr 1.2fr;
    gap: 60px;
  }
}

.co-intro-logo {
  text-align: center;
}

.co-intro-logo img {
  width: clamp(150px, 17vw, 247px);
  height: auto;
  margin: 0 auto;
}

.co-intro-text p {
  font-size: var(--fs-7);
  line-height: 1.6;
  color: var(--navy-deep);
  margin-bottom: 1.5em;
}

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

/* ---- ③ 핵심 기술 (남색 + 논문) ---- */
.co-band-navy {
  background: var(--navy);
  color: var(--white);
  padding: clamp(56px, 7vw, 110px) 0;
}

.co-paper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}

/* 본문에 <br> 로 지정한 줄바꿈이 그대로 지켜지도록 글칸을 넓게 잡습니다.
   가장 긴 줄이 글자 19px 기준 678px 필요합니다. */
@media (min-width: 760px) {
  .co-paper {
    grid-template-columns: 0.62fr 1.38fr;
    gap: 32px;
  }
}

.co-paper-img {
  text-align: center;
}

.co-paper-img img {
  width: clamp(200px, 24vw, 340px);
  height: auto;
  margin: 0 auto;
}

.co-paper-text p {
  font-size: var(--fs-7);
  line-height: 1.6;
  margin-bottom: 1.6em;
}

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

/* ---- ④ 원천기술 파트너십 (사진이 아래 섹션에 걸침) ---- */
.co-partner {
  background: var(--white);
  padding: clamp(56px, 7vw, 100px) 0 0;
  /* 사진이 아래 파란 섹션으로 넘어가는 부분을 잘라냅니다 (섹션 경계에서 끊김) */
  overflow: hidden;
}

.co-partner-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: end;
}

@media (min-width: 760px) {
  .co-partner-inner {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 40px;
  }
}

.co-partner-text {
  padding-bottom: clamp(30px, 5vw, 80px);
}

.co-partner-text .eyebrow {
  display: block;
  font-size: var(--fs-7);
  font-weight: 300;
  color: var(--navy-deep);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
  text-transform: none;
}

.co-partner-text h3 {
  font-size: var(--fs-4);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.2;
  margin-bottom: 8px;
}

.co-partner-role {
  font-size: var(--fs-8);
  font-weight: 300;
  color: var(--navy-deep);
  margin-bottom: 28px;
}

.co-partner-desc {
  font-size: var(--fs-7);
  line-height: 1.55;
  color: var(--navy-deep);
  margin-bottom: 14px;
}

.co-partner-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.co-partner-list li {
  position: relative;
  padding-left: 18px;
  font-size: var(--fs-7);
  line-height: 1.55;
  color: var(--navy-deep);
}

.co-partner-list li::before {
  content: "\2022";
  /* • — 글자를 직접 쓰면 서버가 CSS 를 EUC-KR 로 넘길 때 깨집니다 */
  position: absolute;
  left: 2px;
  color: var(--navy-deep);
}

/* 사진 : 아래 파란 섹션 위로 겹쳐 내려오도록 음수 마진 */
.co-partner-photo {
  text-align: center;
}

.co-partner-photo img {
  width: clamp(210px, 26vw, 400px);
  height: auto;
  margin: 0 auto;
  margin-bottom: clamp(-70px, -5vw, -40px);
  position: relative;
  z-index: 2;
}

/* ---- ⑤ 사업 확장 로드맵 ---- */
.co-roadmap {
  background: var(--blue);
  color: var(--white);
  padding: clamp(50px, 6vw, 90px) 0 clamp(56px, 7vw, 110px);
}

.co-roadmap-title {
  text-align: center;
  font-size: var(--title-md);
  font-weight: 700;
  margin-bottom: clamp(30px, 4vw, 60px);
}

/* 리본+화살표 그래픽 : 시안과 동일하게 전체 폭.
   단 시안 폭(1920)까지만 커집니다. 상한이 없으면 브라우저를 축소했을 때
   본문(1115px)은 그대로인데 이 그림만 화면 폭을 따라 계속 커집니다. */
.co-roadmap-graphic {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}

/* 원본보다 크게 늘리면 흐려집니다. 원본 크기를 상한으로 두고 가운데 놓습니다. */
.co-roadmap-graphic img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* 좁은 화면에서는 한 장짜리 그림의 글씨가 너무 작아집니다.
   1단계(남색)·2단계(흰 화살표)를 따로 잘라 위아래로 크게 보여줍니다. */
/* 위 `.co-roadmap-graphic img` 보다 선택자가 세야 display 가 먹습니다 */
.co-roadmap-graphic .co-roadmap-split {
  display: none;
}

@media (max-width: 1100px) {
  .co-roadmap-graphic .co-roadmap-full {
    display: none;
  }

  .co-roadmap-graphic .co-roadmap-split {
    display: block;
  }

  .co-roadmap-graphic .co-roadmap-split+.co-roadmap-split {
    margin-top: 14px;
  }
}

/* 타임라인 */
.co-timeline {
  margin-top: clamp(34px, 4.5vw, 70px);
}

.co-timeline-track {
  position: relative;
  height: 22px;
  margin-bottom: 18px;
}

.co-tl-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  background: var(--white);
  transform: translateY(-50%);
}

/* 시작은 ● 점, 끝은 화살촉 */
.co-tl-line::before,
.co-tl-line::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.co-tl-line::before {
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--white);
}

.co-tl-line::after {
  right: 0;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid var(--white);
}

/* 넓은 화면 : 점을 각 항목(연도) 한가운데 위에 답니다.
   트랙 높이 22 + 아래 여백 18 이므로 항목 위 40px 지점이 선의 중심입니다. */
@media (min-width: 700px) {
  .co-tl-item { position: relative; }

  .co-tl-item::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -40px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--white);
    transform: translateX(-50%);
  }
}

.co-tl-dot { display: none; }

.co-timeline-items {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
  text-align: center;
}

@media (min-width: 700px) {
  .co-timeline-items {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 3vw, 60px);
  }
}

.co-tl-year {
  font-size: var(--fs-6);
  font-weight: 700;
  margin-bottom: 14px;
}

.co-tl-item img {
  width: 100%;
  max-width: 300px;
  aspect-ratio: 455 / 250;
  object-fit: cover;
  margin: 0 auto 16px;
}

.co-tl-label {
  font-size: var(--fs-6);
  font-weight: 700;
}

@media (max-width: 759px) {

  /* 모바일 : 사진을 키우고 섹션 바닥에 붙입니다.
     아래 여백을 두면 사진 밑에 흰 공백이 남습니다. */
  .co-partner {
    padding-bottom: 0;
  }

  .co-partner-inner {
    gap: 24px;
  }

  .co-partner-photo img {
    width: min(82%, 340px);
    margin-bottom: 0;
  }
}

/* ---- 좁은 화면 : 타임라인 화살표를 세로로 ----
   항목이 위아래로 쌓이는 폭(700px 미만)에서는 가로 화살표가 흐름과 어긋납니다.
   왼쪽에 세로 화살표를 세우고, 연도마다 점을 답니다. */
@media (max-width: 699px) {
  .co-timeline {
    position: relative;
    padding-left: 46px;
  }

  .co-timeline-track {
    position: absolute;
    left: 0;
    top: -18px;
    bottom: -18px;
    /* 화살촉이 첫·마지막 점과 겹치지 않게 */
    width: 22px;
    height: auto;
    margin-bottom: 0;
  }

  .co-tl-line {
    left: 50%;
    right: auto;
    top: 0;
    bottom: 0;
    width: 2px;
    height: auto;
    transform: translateX(-50%);
  }

  /* 시작점 ● */
  .co-tl-line::before {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  /* 아래쪽 화살촉 */
  .co-tl-line::after {
    top: auto;
    bottom: 0;
    right: auto;
    left: 50%;
    border-bottom: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 11px solid var(--white);
    transform: translateX(-50%);
  }

  .co-timeline-items {
    text-align: left;
    gap: 40px;
  }

  /* 연도와 항목명을 "2026년 하반기 : 에스테틱 / 두피·피부" 처럼 한 줄로 묶고,
     사진은 그 아래로 내립니다 */
  .co-tl-item {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 6px;
  }

  .co-tl-year {
    order: 1;
    margin-bottom: 0;
  }

  .co-tl-label {
    order: 2;
  }

  .co-tl-label::before { content: ": "; }

  .co-tl-item img {
    order: 3;
    flex-basis: 100%;
    margin-top: 14px;
    margin-bottom: 0;
  }

  .co-tl-item::before {
    content: "";
    position: absolute;
    left: -46px;
    /* 세로선 한가운데(왼쪽에서 11px)에 원 중심을 맞춤 */
    top: 2px;
    /* 연도 글자 줄 높이에 맞춤 */
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--white);
  }

}

/* ===================================================================
   브랜드 스토리 페이지 (plasno.co.kr/blank-1 기준, 1920 실측)
   sy- = story
   =================================================================== */

:root {
  --sy-w: 1330px;
  /* 본문 폭 (좌우 24 패딩 포함) */
}

.sy-inner {
  max-width: var(--sy-w);
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
}

.sy-band {
  position: relative;
}

.sy-band-white {
  background: var(--white);
}

.sy-band-navy {
  background: var(--navy);
}

/* #092144 */
.sy-band-deep {
  background: var(--navy-deep);
}

/* #03122f */

/* 본문 공통 — 25px / 줄높이 35 */
.sy-body {
  font-size: var(--fs-7);
  font-weight: 300;
  line-height: 1.4;
  margin: 0;
}

.sy-strong {
  font-weight: 700;
}

.sy-band-navy .sy-body,
.sy-band-deep .sy-body {
  color: var(--white);
}

.sy-band-white .sy-body {
  color: var(--navy-deep);
}


/* ① 히어로는 다른 페이지와 같은 .wave-hero 를 씁니다 */

/* ---------- ② 흰 바탕 — 회복의 원리 ---------- */
.sy-origin {
  padding: 88px 0 140px;
  z-index: 2;
  /* 대표 사진이 아래 남색 띠로 넘어가지 않게 섹션 경계에서 잘라냅니다.
     (폭에 따라 72~133px 걸쳐 있었습니다) */
  overflow: hidden;
}

.sy-origin-text {
  max-width: 760px;
}

/* 큰제목이 한 줄에 들어가는 최소 폭 */

.sy-title {
  font-size: var(--title-lg);
  font-weight: 700;
  line-height: 1.3;
  color: var(--blue);
  margin: 0;
}

.sy-lead {
  font-size: var(--fs-3);
  font-weight: 700;
  line-height: 1.4;
  color: var(--navy-deep);
  margin: 68px 0 0;
}

.sy-origin .sy-strong {
  margin-top: 0;
}

.sy-origin .sy-body+.sy-body {
  margin-top: 94px;
}

/* 대표 사진 — 553 x 815, 오른쪽에서 아래 띠까지 내려옵니다 */
.sy-origin-photo {
  position: absolute;
  right: 24px;
  top: -98px;
  width: 553px;
}

/* 원본은 553x815 로 잘라 씁니다 (소스 583x890 보다 세로가 짧음) */
.sy-origin-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 553 / 815;
  object-fit: cover;
}


/* ---------- ③ 남색 — 질문과 확장 ---------- */
.sy-question {
  padding: 121px 0 112px;
}

.sy-question-text {
  max-width: 1000px;
  position: relative;
  z-index: 1;
}

.sy-question .sy-body+.sy-body {
  margin-top: 35px;
}

/* 따옴표로 감싼 질문 */
.sy-quote {
  margin: 0;
  padding: 0;
  position: relative;
}

.sy-quote-line {
  display: block;
  font-size: var(--fs-4);
  font-weight: 400;
  line-height: 1.4;
  color: var(--white);
  white-space: nowrap;
}

.sy-quote-line-2 {
  margin-left: 74px;
  position: relative;
}

/* 둘째 줄은 안쪽으로 */
.sy-quote-mark {
  opacity: 30%;
  width: 78px;
  height: auto;
  display: inline-block;
  vertical-align: middle;
}

.sy-quote-close {
  transform: scaleX(-1);
}

/* 여는 따옴표: 기본은 글 위에 얹고, 화면이 충분히 넓을 때만
   원본처럼 첫 줄 왼쪽 옆으로 빼냅니다 (컨테이너 왼쪽에 100px 여유가 필요) */
.sy-quote {
  padding-top: 46px;
}

.sy-quote-open {
  position: absolute;
  left: 0;
  top: 0;
}

@media (min-width: 1500px) {
  .sy-quote {
    padding-top: 0;
  }

  .sy-quote-open {
    left: -100px;
    top: -5px;
  }
}

/* 닫는 따옴표는 줄 높이를 늘리지 않도록 흐름에서 뺍니다 */
.sy-quote-close {
  position: absolute;
  margin-left: 14px;
  top: 6px;
}

/* 질문 위아래 여백 (실측 y1221 → 1321 → 1471) */
.sy-question .sy-body:first-child {
  margin-bottom: 65px;
}

.sy-quote+.sy-body {
  margin-top: 56px;
}

/* 플라즈마 이미지 — 505 x 448, 오른쪽 */
.sy-question-img {
  position: absolute;
  right: 24px;
  top: 0;
  /* 원본이 379px 이라 그보다 크게 쓰면 확대되어 흐려집니다 */
  width: 379px;
}

.sy-question-img img {
  width: 100%;
  height: auto;
  aspect-ratio: 505 / 448;
  object-fit: cover;
}


/* ---------- ④ 진남색 — 조광섭 교수 ---------- */
/* 교수 사진 밑단이 띠 밑단과 정확히 맞습니다 (아래 여백 없음) */
.sy-partner {
  padding: 68px 0 0;
}

.sy-partner .sy-inner {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* 글 블록이 내용 폭만큼만 차지해서 오른쪽에 220px 가 남아
     사진+글 덩어리가 왼쪽으로 쏠려 보였습니다 */
  gap: 113px;
}

.sy-partner-photo {
  width: 428px;
  flex-shrink: 0;
}

.sy-partner-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 428 / 656;
  object-fit: cover;
}

.sy-partner-text {
  padding-top: 186px;
}

/* 사진보다 아래에서 시작 */
.sy-partner-eyebrow {
  font-size: var(--fs-4);
  font-weight: 700;
  line-height: 1.3;
  color: var(--white);
  margin: 0;
}

.sy-partner-name {
  font-size: var(--fs-2);
  font-weight: 700;
  line-height: 1.3;
  color: var(--white);
  margin: 9px 0 0;
}

.sy-partner-text .sy-body {
  margin-top: 28px;
}


/* ---------- ⑤ 흰 바탕 — 맺음말 ---------- */
.sy-closing {
  padding: 121px 0 119px;
  text-align: center;
}

.sy-closing-lead {
  font-size: var(--fs-7);
  font-weight: 700;
  line-height: 1.4;
  color: var(--navy);
  margin: 0;
}

.sy-closing-lead+.sy-closing-lead {
  margin-top: 17px;
}

.sy-closing-big {
  font-size: var(--fs-2);
  font-weight: 400;
  line-height: 1.4;
  color: var(--navy);
  margin: 19px 0 0;
}


/* 넓은 화면 — 글 덩어리를 사진 옆 빈 칸의 한가운데에 놓습니다.
   글이 왼쪽 끝(72px)에 붙어 있어 섹션마다 무게중심이 달라 보였습니다.
   글줄 자체는 왼쪽 정렬 그대로입니다. */
@media (min-width: 1181px) {
  .sy-origin .sy-inner {
    padding-right: calc(553px + 48px);
  }

  .sy-question .sy-inner {
    padding-right: calc(379px + 48px);
  }

  .sy-origin-text,
  .sy-question-text {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
  }
}

/* ---------- 좁은 화면 : 세로로 쌓이는 한 줄 흐름 ----------
   PC 레이아웃은 좌우 2단이라 간격이 제각각이어도 티가 나지 않지만,
   세로로 쌓이면 간격 차이가 그대로 드러납니다. 그래서 이 아래로는
   아래 네 가지 값만 사용합니다.
     --sy-x   16px  붙어 있는 한 쌍 (작은글 ↔ 제목)
     --sy-s   28px  문단 ↔ 문단
     --sy-m   40px  글덩어리 ↔ 그림, 제목 ↔ 본문
     --sy-p   64px  섹션 위아래 여백
   ------------------------------------------------------------ */
@media (max-width: 1180px) {
  .sy-band {
    --sy-x: 16px;
    --sy-s: 28px;
    --sy-m: 40px;
    --sy-p: 64px;
  }

  /* 섹션 여백 통일 */
  .sy-origin,
  .sy-question,
  .sy-partner,
  .sy-closing {
    padding: var(--sy-p) 0;
  }

  /* 사진을 흐름 안으로 되돌려 글과 위아래로 쌓습니다 */
  .sy-origin-photo,
  .sy-question-img {
    position: static;
    width: min(70%, 379px);
    margin: var(--sy-m) auto 0;
  }

  .sy-origin-text,
  .sy-question-text {
    max-width: none;
  }

  /* ② 제목 → 리드 → 본문 → 본문 */
  .sy-lead {
    margin-top: var(--sy-m);
  }

  .sy-origin .sy-strong {
    margin-top: var(--sy-x);
  }

  .sy-origin .sy-body+.sy-body {
    margin-top: var(--sy-s);
  }

  /* ③ 본문 → 인용 → 본문 → 본문 */
  .sy-question .sy-body:first-child {
    margin-bottom: var(--sy-m);
  }

  .sy-quote+.sy-body {
    margin-top: var(--sy-m);
  }

  .sy-question .sy-body+.sy-body {
    margin-top: var(--sy-s);
  }

  /* ④ 사진 → 소제목 → 이름 → 본문.
     .sy-inner 의 좌우 24px 안쪽을 꽉 채워 다른 섹션과 글줄 시작점을 맞춥니다
     (전에는 내용 폭에 맞춰 좁아져 좌우가 32px 이 되어 있었습니다) */
  .sy-partner .sy-inner {
    flex-direction: column;
    gap: var(--sy-m);
    align-items: center;
  }

  .sy-partner-photo {
    width: min(70%, 360px);
  }

  .sy-partner-text {
    width: 100%;
    padding-top: 0;
    text-align: center;
  }

  .sy-partner-name {
    margin-top: var(--sy-x);
  }

  .sy-partner-text .sy-body {
    margin-top: var(--sy-s);
  }

  /* ⑤ 맺음말 */
  .sy-closing-lead+.sy-closing-lead {
    margin-top: var(--sy-x);
  }

  .sy-closing-big {
    margin-top: var(--sy-s);
  }

  /* 인용문 — 여는 따옴표를 글 흐름에 넣어야 가운데정렬을 따라갑니다.
     absolute 로 두면 글은 가운데, 따옴표만 왼쪽 끝에 남습니다. */
  .sy-quote {
    padding-top: 0;
  }

  .sy-quote-line {
    white-space: normal;
  }

  .sy-quote-line-2 {
    margin-left: 0;
  }

  /* 여는 따옴표는 글 위에, 닫는 따옴표는 글 아래에 — 둘 다 가운데 */
  .sy-quote-open {
    position: static;
    display: block;
    margin: 0 auto var(--sy-x);
  }

  .sy-quote-close {
    position: static;
    display: block;
    margin: var(--sy-x) auto 0;
  }
}

/* 좁은 화면에서는 넓은 화면용으로 넣어둔 <br> 을 무시하고 자연스럽게 흘립니다.
   그대로 두면 "먼저 느꼈습니다." 처럼 한두 낱말만 남는 줄이 계속 생깁니다.
   text-wrap:pretty 는 마지막 줄에 낱말 하나만 떨어지는 것을 막아줍니다. */
@media (max-width: 760px) {
  main p br { display: none; }

  main p { text-wrap: pretty; }
}

@media (max-width: 760px) {
  .sy-band {
    --sy-x: 14px;
    --sy-s: 24px;
    --sy-m: 32px;
    --sy-p: 54px;
  }

  .sy-hero {
    height: auto;
    padding: calc(var(--header-h) + 46px) 0 40px;
  }

  .sy-quote-mark {
    width: 52px;
  }
}


/* ===================================================================
   기술소개 페이지 (plasno.co.kr/blank-1-1 기준)
   tc- = technology
   ※ 원본 글자 크기는 1920 기준입니다. 본문 블록이 1115px 에서 멈추므로
     1200px 부근에서 원본 크기에 도달하도록 vw 계수를 맞췄습니다.
   =================================================================== */

/* 강조 — 원본은 크기는 그대로 두고 굵기만 올립니다.
   전역 strong(1.2배)을 쓰면 원본보다 커지므로 별도 클래스를 씁니다. */
.tc-em { font-weight: 700; }

.tc-no { background: var(--white); padding: clamp(56px, 7vw, 110px) 0 clamp(60px, 8vw, 120px); }

.tc-title {
  text-align: center;
  font-size: var(--title-lg);
  font-weight: 700;
  line-height: 1.3;
  color: var(--blue);
  margin: 0;
}
/* 원본 48px 은 120px 제목에 맞춘 값입니다. 제목이 --title-lg 로 내려갔으므로
   항상 제목보다 작고 아래 리드문(최대 32px)보다는 크도록 다시 잡았습니다. */
.tc-subtitle {
  text-align: center;
  font-size: var(--title-md);
  font-weight: 700;
  line-height: 1.3;
  color: var(--blue);
  margin: clamp(8px, 1vw, 16px) 0 0;
}
.tc-lead {
  text-align: center;
  font-size: var(--fs-7);
  font-weight: 400;
  line-height: 1.5;
  color: var(--navy-deep);
  margin: clamp(28px, 3.5vw, 56px) 0 0;
}

/* 그림 + 글 한 줄 */
.tc-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  margin-top: clamp(48px, 6vw, 96px);
}
@media (min-width: 760px) {
  .tc-row { grid-template-columns: 0.9fr 1.1fr; }
  /* 논문 줄은 원본처럼 글이 왼쪽, 사진이 오른쪽 */
  .tc-row-paper { grid-template-columns: 1.1fr 0.9fr; }
}

/* 그래프는 원본과 같이 위, 설명은 그 아래.
   그래프 왼쪽 모서리에서 글이 시작하도록 같은 폭의 칸에 담습니다 */
/* 680px — "나이가 듦에 따라 생성량이 급격히 낮아집니다." 가 최대 글자크기(35px)
   에서도 한 줄에 들어가는 폭입니다 */
.tc-stack {
  max-width: 680px;
  margin: clamp(48px, 6vw, 96px) auto 0;
}
.tc-stack .tc-row-text { margin-top: clamp(24px, 3vw, 48px); }

/* 우측 정렬은 사진이 오른쪽에 있을 때만 의미가 있습니다.
   세로로 쌓이는 좁은 화면에서는 다른 글과 같이 왼쪽 정렬로 둡니다. */
@media (min-width: 760px) {
  .tc-text-right { text-align: right; }
}
.tc-row-img { text-align: center; }
.tc-row-img img { width: 100%; height: auto; margin: 0 auto; }
.tc-row-img:not(.tc-graph) img { max-width: 380px; }
.tc-graph img { max-width: 100%; }

.tc-body-lg {
  font-size: var(--fs-4);
  line-height: 1.45;
  color: var(--navy-deep);
  margin: 0;
}
.tc-body {
  font-size: var(--fs-7);
  line-height: 1.6;
  color: var(--navy-deep);
  margin: clamp(14px, 1.6vw, 24px) 0 0;
}
.tc-decline-lead {
  font-size: var(--fs-4);
  line-height: 1.45;
  color: var(--navy-deep);
  margin: 0;
}
.tc-decline-body {
  font-size: var(--fs-7);
  line-height: 1.7;
  color: var(--navy-deep);
  margin: clamp(14px, 1.6vw, 24px) 0 0;
}

/* ---- 플라즈노는 (파란 띠) ---- */
.tc-band {
  background: var(--blue);
  color: var(--white);
  padding: clamp(56px, 7vw, 110px) 0;
  overflow: hidden;
}
/* 플라즈마 그림을 글 뒤에 30% 로 깔고, 글은 그 위에 가운데 정렬로 얹습니다 */
.tc-band-inner { text-align: center; position: relative; }
.tc-band-img {
  position: absolute;
  inset: 0;
  opacity: .3;
  pointer-events: none;
}
.tc-band-img img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(90%, 480px);
  height: auto;
}
.tc-band-text { position: relative; }
.tc-band-text h2 {
  font-size: var(--fs-3);
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 clamp(16px, 2vw, 32px);
}
.tc-band-text p {
  font-size: var(--fs-7);
  line-height: 1.45;
  margin: 0;
}
.tc-band-text p + p { margin-top: clamp(18px, 2.2vw, 34px); }

/* ---- 논문 : 인용 + 출처 ---- */
.tc-paper { background: var(--white); padding: clamp(56px, 7vw, 110px) 0 clamp(60px, 8vw, 120px); }
/* 여는 따옴표 — 인용문 — 닫는 따옴표를 한 줄에 늘어놓습니다 */
.tc-quote {
  display: flex;
  align-items: flex-start;
  gap: clamp(10px, 1.8vw, 28px);
  margin: 0;
  padding: 0;
}
.tc-quote-body { flex: 1; min-width: 0; }
.tc-quote-mark {
  flex: none;
  width: clamp(38px, 4.8vw, 68px);
  height: auto;
  margin: 0;
  opacity: .3;
}
/* 닫는 따옴표는 좌우를 뒤집고 원본처럼 살짝 아래에 둡니다 */
.tc-quote-mark-close {
  transform: scaleX(-1);
  align-self: flex-end;
}
.tc-quote p {
  font-size: var(--fs-4);
  font-weight: 400;
  line-height: 1.45;
  color: var(--navy-deep);
  margin: 0;
}
.tc-quote cite {
  display: block;
  text-align: right;
  font-size: var(--fs-6);
  font-style: normal;
  color: var(--navy-deep);
  margin-top: clamp(14px, 1.8vw, 28px);
}

/* 학회지 표지 + 논문 첫 장을 나란히 */
.tc-paper-imgs {
  display: flex;
  justify-content: center;
  gap: clamp(12px, 1.6vw, 24px);
  min-width: 0;
}
/* flex:1 1 0 이라야 사이 간격까지 계산에 들어가 칸 밖으로 삐져나오지 않습니다 */
.tc-paper-imgs img {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  /* 그림은 min-width:auto 가 원본 크기라 이게 없으면 좁은 화면에서 안 줄어듭니다 */
  max-width: 220px;
  height: auto;
}
/* 마무리 문구와 버튼은 원본처럼 전체 폭 가운데 */
.tc-paper-closing {
  text-align: center;
  margin-top: clamp(40px, 5vw, 80px);
}
.tc-paper-closing .tc-body { margin-top: 0; }
.tc-paper .btn-row { justify-content: center; margin-top: clamp(20px, 2.4vw, 36px); }


/* ===================================================================
   제품소개 (plasno.co.kr/blank-1-1-1 기준)  pr- = product
   ※ 원본 글자 크기는 1920 기준. 본문 블록이 1115px 에서 멈추므로
     1200px 부근에서 원본 크기에 닿도록 vw 계수를 맞췄습니다.
   =================================================================== */

.pr-intro { background: var(--white); padding: clamp(56px, 7vw, 110px) 0 clamp(60px, 8vw, 120px); }

/* 원본 40px — 대제목(--title-lg) 아래 단계 */
.pr-sub {
  text-align: center;
  font-size: var(--fs-3);
  font-weight: 700;
  line-height: 1.35;
  color: var(--navy-deep);
  margin: 0;
}
.pr-sub-blue { color: var(--blue); }

.pr-device { margin-top: clamp(28px, 3.5vw, 56px); text-align: center; }
.pr-device img {
  width: 100%;
  max-width: 390px;
  height: auto;
  margin: 0 auto;
}

.pr-lead { margin-top: clamp(36px, 4.5vw, 72px); text-align: center; }
.pr-body {
  font-size: var(--fs-7);
  line-height: 1.5;
  color: var(--navy-deep);
  margin: clamp(16px, 2vw, 32px) auto 0;
  max-width: 900px;
}

/* 사용 장면 2가지 */
.pr-scenes {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 3.5vw, 52px);
  margin-top: clamp(48px, 6vw, 96px);
}
@media (min-width: 760px) {
  .pr-scenes { grid-template-columns: 1fr 1fr; }
}
.pr-scene img { width: 100%; height: auto; }
.pr-scene h3 {
  font-size: var(--fs-6);
  font-weight: 700;
  color: var(--navy-deep);
  margin: clamp(14px, 1.6vw, 24px) 0 0;
}
.pr-scene p {
  font-size: var(--fs-7);
  line-height: 1.6;
  color: var(--navy-deep);
  margin: clamp(8px, 1vw, 14px) 0 0;
}

/* ---- 제품 특징 (파란 배경) ---- */
.pr-features {
  background: var(--blue);
  color: var(--white);
  padding: clamp(56px, 7vw, 110px) 0 clamp(60px, 8vw, 120px);
}
.pr-features .section-head h2 { color: var(--white); }

.pr-feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
  margin-top: clamp(40px, 5vw, 80px);
}
.pr-feature:first-of-type { margin-top: 0; }
@media (min-width: 760px) {
  .pr-feature { grid-template-columns: 0.8fr 1.2fr; }
  /* 두 번째 항목은 그림이 오른쪽 (원본의 지그재그 배치) */
  .pr-feature-reverse { grid-template-columns: 1.2fr 0.8fr; }
  .pr-feature-reverse .pr-feature-img { order: 2; }
}
.pr-feature-img { text-align: center; }
.pr-feature-img img { width: 100%; max-width: 300px; height: auto; margin: 0 auto; }
.pr-feature-text h3 {
  font-size: var(--fs-3);
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 clamp(12px, 1.4vw, 22px);
}
.pr-feature-text p {
  font-size: var(--fs-7);
  line-height: 1.5;
  margin: 0;
}

/* ---- 확장 계획 ---- */
.pr-closing { background: var(--white); padding: clamp(56px, 7vw, 110px) 0 clamp(60px, 8vw, 120px); }
.pr-closing-body {
  text-align: center;
  font-size: var(--fs-7);
  font-weight: 700;
  line-height: 1.5;
  color: var(--navy-deep);
  margin: clamp(16px, 2vw, 32px) auto 0;
  max-width: 900px;
}
.pr-closing-img { margin-top: clamp(32px, 4vw, 64px); text-align: center; }
.pr-closing-img img { width: 100%; max-width: 700px; height: auto; margin: 0 auto; }


/* ===================================================================
   파트너십 (plasno.co.kr/blank-2 기준)  pn- = partnership
   =================================================================== */

.section-head .pn-lead {
  font-size: var(--fs-7);
  line-height: 1.5;
  color: var(--navy-deep);
  max-width: 900px;
}
.pn-block { margin-top: clamp(48px, 6vw, 96px); }
.pn-graphic { text-align: center; }
.pn-graphic img { width: 100%; height: auto; margin: 0 auto; }
/* 협력 프로세스 그림은 원본에서도 좁게 씁니다 */
.pn-graphic-narrow img { max-width: 620px; }

/* 개인정보 동의 옆 '자세히 보기' */
.form-more { text-decoration: underline; white-space: nowrap; }
.form-more:hover { opacity: 0.75; }


/* ===================================================================
   개인정보 동의 — 문구만 보이고, 오른쪽 ▾ 버튼을 눌러야 상세가 펼쳐집니다.
   체크박스/문구는 '동의' 전용이라 눌러도 펼쳐지지 않습니다(오동작 방지).
   =================================================================== */
.form-consent {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  column-gap: 8px;
  margin-bottom: 24px;
}
.form-consent .form-check { margin-bottom: 0; }

/* 손가락으로도 충분히 눌리도록 40×40 영역을 확보합니다 */
.form-consent-toggle {
  background: none;
  border: 0;
  padding: 0;
  width: 40px;
  height: 40px;
  flex: none;
  margin: -8px -8px 0 0;
  cursor: pointer;
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}
.form-consent-toggle svg {
  width: 20px;
  height: 20px;
  transition: transform .2s ease;
}
.form-consent-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.form-consent-toggle:hover { background: rgba(18, 64, 128, 0.08); }

.form-consent-detail {
  grid-column: 1 / -1;
  margin-top: 10px;
  padding: 12px 14px;
  border-left: 2px solid var(--blue);
  background: rgba(18, 64, 128, 0.04);
}
.form-consent-detail p {
  font-size: var(--fs-9);
  line-height: 1.7;
  color: var(--gray-700);
  margin: 0;
}
.form-consent-detail p + p { margin-top: 6px; }


/* ---- 파트너십 : 제휴 유형 사진 4장 ---- */
.pn-types {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.4vw, 20px);
  align-items: start;
}
.pn-types img { width: 100%; height: auto; }
/* 좁은 화면은 2행 2열 */
@media (max-width: 700px) {
  .pn-types { grid-template-columns: repeat(2, 1fr); }
}


/* ===================================================================
   좁은 화면(모바일) 다듬기
   =================================================================== */

/* 브랜드 스토리 — 사진이 아래 남색 띠에 바로 닿도록 흰 여백 제거 + 가운데 정렬 */
@media (max-width: 1180px) {
  .sy-origin,
  .sy-question,
  .sy-partner,
  .sy-closing { text-align: center; }
  .sy-origin-text,
  .sy-question-text { margin-left: auto; margin-right: auto; }
  .sy-quote-line-2 { margin-left: 0; }

  /* 대표 사진 아래 흰 여백이 남지 않게 — PC 에서 사진이 남색 띠에 걸치는 것과
     같은 인상이 되도록, 쌓이는 화면에서는 사진 밑단을 띠 경계에 붙입니다 */
  .sy-origin { padding-bottom: 0; }
  .sy-origin-photo { margin-bottom: 0; }
}

/* 회사소개 — 전체 내용 가운데 정렬 */
@media (max-width: 759px) {
  .co-intro-text,
  .co-paper-text,
  .co-partner-text { text-align: center; }
  .co-partner-list { display: inline-block; text-align: left; }
}