/* Contact 페이지 (2026-10-13) — contact.html 전용 독립 스타일(style.css 를 싣지 않는다).
   제품형 다크: 거의 검정 바탕, 위쪽 빛 하나, 옅은 노이즈, 1px 테두리 카드, 작은 움직임.
   대시보드의 남색 무대는 쓰지 않는다 — 제품 대표색(cyan)만 빛·아이콘·포커스에 이어 쓴다.
   배치: 휴대폰 한 줄 → 40rem 가운데 한 줄(48rem 폭) → 74rem 영상·내용이 좌우로 엇갈리는 2열.
   읽기(2026-10-19 사용자 요청 '글이 더 잘 읽히게'): 본문 1rem 이상, 설명글은 --ink2(흐린 --muted 는 라벨에만),
   제목 1.375rem, 기능·연락처 줄마다 아이콘 칩, 직책은 칩으로.
   개요·팀 카드 안의 배치는 화면 폭이 아니라 카드 폭(@container)으로 바꾼다 — 카드가 놓인 칸 크기가 화면마다 다르다. */

:root {
  --bg: #07080a;
  --tile: rgba(255, 255, 255, .025);
  --tile-hi: rgba(255, 255, 255, .05);
  --line: rgba(255, 255, 255, .08);
  --line-hi: rgba(255, 255, 255, .16);
  --ink: #f2f4f7;
  --ink2: #b9c1cc;
  --muted: #7f8792;
  --accent: #2a8fc9;
  --accent-ink: #8ccdf3;
  --accent-soft: rgba(42, 143, 201, .14);
  --accent-line: rgba(42, 143, 201, .32);
  --accent-glow: rgba(42, 143, 201, .24);
  --radius: 1.25rem;
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", "Cascadia Mono", ui-monospace, Consolas, monospace;
  --ico-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E");
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); }
body {
  min-height: 100vh;
  color: var(--ink); font-family: var(--font); font-size: 1rem; line-height: 1.55;
  word-break: keep-all; overflow-wrap: break-word;   /* 한글은 어절 단위로 줄바꿈 — '481-/4)' 식으로 끊기지 않게 */
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  background:
    radial-gradient(ellipse 70% 42% at 50% -6%, var(--accent-glow), transparent 70%),
    radial-gradient(ellipse 45% 30% at 100% 0%, rgba(110, 90, 255, .07), transparent 70%),
    var(--bg);
  background-repeat: no-repeat;
}
/* 노이즈 — 어두운 그라데이션의 띠(banding)를 깨고 화면에 질감을 준다 */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a, button { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ct-nowrap { white-space: nowrap; }   /* keep-all 이어도 하이픈 뒤에서는 끊긴다 — '(가산동 481-4)' 는 한 덩어리로 */

.ct-wrap { position: relative; z-index: 1; width: min(100% - 2rem, 72rem); margin: 0 auto; padding: 1.25rem 0 1.5rem; }

/* ── 격자 ── 휴대폰: 파일 순서대로 한 줄 */
.ct-bento {
  display: grid; gap: .75rem;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "brand" "promo" "about" "explain" "team" "demo" "contact";
}
.ct-brand   { grid-area: brand; }
.ct-promo   { grid-area: promo; }
.ct-about   { grid-area: about; }
.ct-explain { grid-area: explain; }
.ct-team    { grid-area: team; }
.ct-demo    { grid-area: demo; }
.ct-contact { grid-area: contact; }

/* ── 카드 ── */
.ct-tile {
  position: relative; overflow: hidden; padding: 1.375rem 1.25rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--tile-hi), var(--tile));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  transition: border-color .25s;
  animation: ct-rise .7s cubic-bezier(.2, .7, .2, 1) both;
}
.ct-bento > :nth-child(2) { animation-delay: 60ms; }
.ct-bento > :nth-child(3) { animation-delay: 120ms; }
.ct-bento > :nth-child(4) { animation-delay: 180ms; }
.ct-bento > :nth-child(5) { animation-delay: 240ms; }
.ct-bento > :nth-child(6) { animation-delay: 300ms; }
.ct-bento > :nth-child(7) { animation-delay: 360ms; }
@keyframes ct-rise { from { opacity: 0; transform: translateY(.75rem); } }

/* 커서 스포트라이트 — src/contact.js 가 카드마다 --mx/--my(커서 위치)를 준다. 마우스 없는 기기는 그대로 */
.ct-tile::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(26rem circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .06), transparent 45%);
}
.ct-tile > * { position: relative; z-index: 1; }
.ct-bento:hover .ct-tile::before { opacity: 1; }
.ct-tile:hover { border-color: var(--line-hi); }

.ct-eyebrow {
  font-family: var(--mono); font-size: .6875rem; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.ct-tile h2 { font-size: 1.375rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; }
.ct-tile .ct-eyebrow + h2 { margin-top: .375rem; }

/* 칩 — 직책·영상 꼬리표 */
.ct-chip {
  display: inline-flex; align-items: center; height: 1.5rem; padding: 0 .625rem;
  border: 1px solid var(--accent-line); border-radius: 999px; background: var(--accent-soft);
  color: var(--accent-ink); font-size: .75rem; font-weight: 600; white-space: nowrap;
}
.ct-chip-muted { border-color: var(--line-hi); background: rgba(255, 255, 255, .04); color: var(--ink2); }

/* 아이콘 칩 — 기능·연락처 줄 머리 */
.ct-ficon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 2.25rem; height: 2.25rem; border-radius: .625rem;
  border: 1px solid var(--accent-line); background: var(--accent-soft);
}
.ct-ficon svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: var(--accent-ink); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ── 브랜드 ── 아이콘 + 이름, 그리고 표어. 넓은 화면에서는 표어가 오른쪽으로 간다.
   아이콘 = 팀 아이콘(정사각 이미지 그대로). 제목 크기는 글 칸 폭(cqi)에 맞춘다 — 칸이 좁아져도 한 줄 */
.ct-brand { display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem 1.25rem; }
.ct-brand-id { display: flex; align-items: center; gap: 1rem; }
.ct-icon {
  flex: none; width: 4.5rem; height: 4.5rem; overflow: hidden;
  border: 1px solid var(--line); border-radius: 1.125rem;
}
.ct-icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ct-brand-text { flex: 1; min-width: 0; container-type: inline-size; }
.ct-brand h1 {
  margin-top: .25rem; white-space: nowrap;
  font-size: min(2.75rem, 13.5cqi); font-weight: 700; letter-spacing: -.035em; line-height: 1.1;
  background: linear-gradient(180deg, #fff 35%, rgba(255, 255, 255, .58));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ct-brand-sub { margin-top: .375rem; color: var(--ink2); font-size: 1rem; }
.ct-tagline {
  font-size: clamp(1.375rem, 1.05rem + 1.2vw, 2rem); font-weight: 650; letter-spacing: -.03em; line-height: 1.35;
  background: linear-gradient(90deg, var(--ink) 0%, #9fd3f2 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ── 개요 ── 한 문장 설명 + 기능 넷(아이콘 칩 + 이름 + 한 줄 설명) */
.ct-about { display: flex; flex-direction: column; container-type: inline-size; }
.ct-about-lead { margin-top: .75rem; color: var(--ink2); font-size: 1rem; line-height: 1.7; }
.ct-about-lead strong { color: var(--ink); font-weight: 650; }
.ct-features { list-style: none; display: grid; gap: 1rem; margin-top: auto; padding-top: 1.375rem; }
.ct-features li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .875rem; align-items: center; }
.ct-features .ct-ficon { grid-row: 1 / 3; align-self: center; }   /* 아이콘은 이름+설명 묶음의 세로 가운데 */
.ct-features strong { font-size: 1rem; font-weight: 650; line-height: 1.35; }
.ct-features span:not(.ct-ficon) { margin-top: .125rem; color: var(--ink2); font-size: .875rem; line-height: 1.5; }
/* 넓은 카드(가운데 한 줄 배치): 기능을 2×2 로 */
@container (min-width: 36rem) {
  .ct-features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.5rem; }
}

/* ── 영상 ── 카드 안쪽에 한 겹 들여 넣은 화면 */
.ct-vtile { display: flex; flex-direction: column; padding: .5rem; }
.ct-video {
  position: relative; flex: none; aspect-ratio: 16 / 9; overflow: hidden;   /* 늘이지 않는다 — YouTube 썸네일(4:3)의 검은 띠가 드러난다 */
  border: 1px solid var(--line); border-radius: calc(var(--radius) - .5rem); background: #000;
}
.ct-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* 옆 칸이 더 길어 카드가 늘어나면 제목 줄이 남는 높이를 받아 그 가운데에 선다 */
.ct-vmeta { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem .75rem .75rem; }
.ct-vtitle { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .625rem; }
.ct-vtile h2 { font-size: 1.1875rem; }

.ct-video[data-youtube=""] {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .625rem;
  background: radial-gradient(ellipse 60% 70% at 50% 40%, rgba(255, 255, 255, .04), transparent 70%), #000;
}
.ct-video[data-youtube=""]::before {
  content: ""; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--line-hi);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7v10l8-5z' fill='%237f8792'/%3E%3C/svg%3E") 55% 50% / 1.25rem no-repeat;
}
.ct-video[data-youtube=""]::after { content: "영상 준비 중"; color: var(--muted); font-size: .875rem; }

/* 썸네일 + 재생 버튼 (src/contact.js 가 만든다) — 누르기 전에는 YouTube 플레이어를 받지 않는다 */
.ct-play {
  position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer;
  background: #000 center / cover no-repeat;
}
.ct-play::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 4rem; height: 4rem; border-radius: 50%;
  background: rgba(0, 0, 0, .4) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='%23fff'/%3E%3C/svg%3E") 55% 50% / 1.5rem no-repeat;
  border: 1px solid rgba(255, 255, 255, .28);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: transform .2s, background-color .2s;
}
.ct-play:hover::after, .ct-play:focus-visible::after { transform: scale(1.08); background-color: rgba(42, 143, 201, .7); }
.ct-play:focus-visible { outline-offset: -2px; }

/* ── 팀 ── 카드마다 '이름 + 직책 칩' 한 줄, 그 아래 메일. 넓은 카드에서는 메일을 같은 줄 오른쪽으로
   (세 명을 나란히 두면 칸이 좁아 메일 주소가 'co./kr' 로 끊긴다) */
.ct-team { display: flex; flex-direction: column; container-type: inline-size; }
.ct-members { flex: 1; display: grid; grid-auto-rows: 1fr; gap: .5rem; margin-top: 1.125rem; }
.ct-member {
  display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 1rem 1.125rem;
  border: 1px solid var(--line); border-radius: calc(var(--radius) - .375rem);
  background: rgba(255, 255, 255, .02);
}
.ct-member-head { display: flex; align-items: center; flex-wrap: wrap; gap: .375rem .5rem; }
.ct-member h3 { margin-right: .25rem; font-size: 1.125rem; font-weight: 700; letter-spacing: -.01em; }
.ct-mail { margin-top: .5rem; font-size: .875rem; overflow-wrap: anywhere; }
/* 주소 앞 봉투 아이콘 — 누르면 메일 메뉴가 뜬다는 표시(src/contact.js) */
.ct-mail a { display: inline-flex; align-items: center; gap: .375rem; color: var(--ink2); text-decoration: none; transition: color .2s; }
.ct-mail a::before {
  content: ""; flex: none; width: .875rem; height: .875rem; background: currentColor;
  -webkit-mask: var(--ico-mail) center / contain no-repeat; mask: var(--ico-mail) center / contain no-repeat;
}
.ct-mail a:hover, .ct-mail a[aria-expanded="true"] { color: var(--ink); }
@container (min-width: 36rem) {
  .ct-member { flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; }
  .ct-mail { margin-top: 0; }
}

/* ── 연락처 ── 줄마다 아이콘 칩 + 라벨(주소·전화·이메일) + 값. 아이콘은 라벨+값 묶음의 세로 가운데.
   목록은 제목 바로 아래부터 — 아래로 밀면(margin-top: auto) 넓은 화면에서 제목과 목록 사이가 크게 빈다 */
.ct-contact { display: flex; flex-direction: column; }
.ct-info { list-style: none; display: grid; gap: 1.125rem; padding-top: 1.375rem; }
.ct-info li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .875rem; align-items: center; }
.ct-info .ct-ficon { grid-row: 1 / 3; align-self: center; }
.ct-info-label { color: var(--muted); font-size: .8125rem; line-height: 1.3; }
.ct-info-val { color: var(--ink); font-size: 1rem; line-height: 1.5; }
.ct-info a { color: inherit; text-decoration: none; }
.ct-info a:hover, .ct-info a[aria-expanded="true"] { text-decoration: underline; text-underline-offset: .2em; }
.ct-info a[href^="mailto:"] { overflow-wrap: anywhere; }

/* 공유 버튼 — 연락처 카드 맨 아래. 넓은 화면에서 카드가 늘어나면 아래 끝에 붙는다(margin-top: auto) */
.ct-info { margin-bottom: 1.5rem; }
.ct-share {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; height: 2.875rem; margin-top: auto; padding: 0 1rem;
  border: 1px solid var(--line-hi); border-radius: 999px; background: rgba(255, 255, 255, .04); cursor: pointer;
  color: var(--ink); font: inherit; font-size: .9375rem; font-weight: 600;
  transition: background-color .2s, border-color .2s, color .2s;
}
.ct-share:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .26); }
.ct-share svg { flex: none; width: 1.0625rem; height: 1.0625rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ct-share.is-done { border-color: rgba(111, 211, 154, .45); color: #6fd39a; }

/* ── 메일 메뉴 ── 메일 주소를 누르면 그 아래에 뜬다(src/contact.js 가 만들고 위치를 잡는다) */
.ct-mailmenu {
  position: fixed; z-index: 10; min-width: 13.5rem; max-width: calc(100vw - 1rem); padding: .375rem;
  border: 1px solid var(--line-hi); border-radius: .875rem;
  background: rgba(22, 24, 28, .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1rem 2.5rem -.5rem rgba(0, 0, 0, .65);
  animation: ct-pop .14s ease-out;
}
.ct-mailmenu[hidden] { display: none; }
@keyframes ct-pop { from { opacity: 0; transform: translateY(-.25rem) scale(.98); } }
.ct-mailmenu-addr { padding: .5rem .625rem .375rem; color: var(--muted); font-size: .75rem; overflow-wrap: anywhere; }
.ct-mailmenu-item {
  display: flex; align-items: center; gap: .625rem; width: 100%; padding: .625rem;
  border: 0; border-radius: .5rem; background: none; cursor: pointer;
  color: var(--ink); font: inherit; font-size: .9375rem; text-align: left; text-decoration: none;
}
.ct-mailmenu-item:hover, .ct-mailmenu-item:focus-visible { background: rgba(255, 255, 255, .07); outline: none; }
.ct-mailmenu-item svg { flex: none; width: 1rem; height: 1rem; fill: none; stroke: var(--ink2); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ct-mailmenu-item.is-done, .ct-mailmenu-item.is-done svg { color: #6fd39a; stroke: #6fd39a; }

/* 맨 아래 — 메탈젠텍 로고(반전판) + 저작권. 로고 높이 3rem(2026-10-14 사용자 요청으로 4.5rem 에서 줄임) */
.ct-foot {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem;
  margin-top: 2rem; padding: 1.75rem .25rem 0; border-top: 1px solid var(--line);
  font-size: .75rem; color: var(--muted);   /* 한글이 섞여 mono 를 쓰지 않는다 — 대체 글꼴로 글자 간격이 벌어진다 */
}
.ct-foot-logo { display: block; width: auto; height: 3rem; }

/* 태블릿·좁은 PC — 가운데 한 줄(48rem). 글 줄이 너무 길어지지 않고 영상도 적당한 크기 */
@media (min-width: 40rem) {
  .ct-wrap { width: min(100% - 3rem, 48rem); padding-top: 2.5rem; }
  .ct-tile:not(.ct-vtile) { padding: 1.75rem; }
}

/* 넓은 PC — 영상과 내용이 좌우로 엇갈리는 2열: 홍보(왼)·개요 / 팀·설명(오) / 시연(왼)·연락처.
   74rem = 본문 폭 최대(72rem) + 여백. 이보다 좁으면 내용 카드가 영상 카드보다 길어져 가운데 한 줄로 둔다 */
@media (min-width: 74rem) {
  .ct-wrap { width: 72rem; padding-top: 3.5rem; }
  .ct-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "brand brand"
      "promo about"
      "team  explain"
      "demo  contact";
  }
  .ct-tile:not(.ct-vtile) { padding: 1.5rem 1.75rem; }
  .ct-brand { flex-direction: row; align-items: flex-end; justify-content: space-between; padding: 1.75rem; }
  .ct-brand-id { flex: 1; min-width: 0; }
  .ct-tagline { flex: none; text-align: right; }
}

@media (prefers-reduced-motion: reduce) {
  .ct-tile, .ct-mailmenu { animation: none; }
  .ct-tile::before, .ct-play::after, .ct-mail a, .ct-share { transition: none; }
}