/* nyw-fg.css — 시안 직역 지면의 «바탕».
   좌표·크기·타이포·색은 nyw-figma-<key>.css 가 준다(그 파일은 생성물이다).
   여기는 그 절대배치가 걸리지 않는 폭(좁은 화면)의 흐름 레이아웃과,
   화면 전체 폭을 차지하는 섹션 배경·넘침 자르기만 맡는다. */

.nyw-fg-main {
  background: #fff;
  color: #0a0a0a;
}

/* 시안 프레임은 1920 폭이다. 그보다 좁은 화면에서는 가운데를 보여 주고 양옆을 자른다.
   자르지 않으면 가로 스크롤이 생긴다. */
.nyw-fg {
  position: relative;
  overflow: hidden;
  background: #fff;
}
.nyw-fg--process { background: #f5f5f5; }

.nyw-fg__cv { position: relative; }
/* 히어로 위쪽의 흰 띠 — 시안에서는 배경 판이다. 글자를 가리지 않게 눌러 둔다. */
.nyw-fg__band { pointer-events: none; }
@media (max-width: 1279px) { .nyw-fg__band { display: none; } }

/* 히어로 */
.nyw-fg__crumb { display: flex; align-items: center; gap: 7px; }
/* 색은 좁은 화면 전용 규칙에서만 지정한다 — 여기서 상속시키면 데스크톱 배치색을 덮어쓴다. */
.nyw-fg__crumb a { text-decoration: none; }
.nyw-fg__crumb a:hover { text-decoration: underline; }
.nyw-fg__kicker,
.nyw-fg__eyebrow { text-transform: none; }
.nyw-fg__h1,
.nyw-fg__h2,
.nyw-fg__item-h,
.nyw-fg__card h3,
.nyw-fg__def h3,
.nyw-fg__step h3 { font-weight: 600; }

/* 사진 — 시안 프레임이 곧 사진 틀이다. 틀 밖으로 나가지 않게 채운다. */
.nyw-fg__shot { margin: 0; overflow: hidden; }
.nyw-fg__shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nyw-fg__steps,
.nyw-fg__rel-row { list-style: none; margin: 0; padding: 0; }

.nyw-fg__rel-card {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.nyw-fg__rel-card:hover { background: #f5f5f5; }
/* 칸 이름은 한 줄이다. 시안 글자수가 곧 칸 폭이라, 이름이 한 글자만 길어도 두 줄로 접힌다. */
.nyw-fg__rel-card span { white-space: nowrap; }

/* ── 시안 절대배치가 걸리지 않는 폭 — 읽을 수 있는 흐름으로 세운다 ───────── */
@media (max-width: 1279px) {
  .nyw-fg { padding: 0 20px; }
  .nyw-fg__cv { max-width: 760px; margin: 0 auto; }
  .nyw-fg--hero .nyw-fg__cv { padding: 28px 0 40px; }
  .nyw-fg--types .nyw-fg__cv,
  .nyw-fg--process .nyw-fg__cv,
  .nyw-fg--related .nyw-fg__cv { padding: 48px 0; }

  .nyw-fg__crumb { font-size: 13px; color: #8f8f8f; margin-bottom: 18px; }
  .nyw-fg__crumb a { color: inherit; }
  .nyw-fg__crumb b { color: #0a0a0a; font-weight: 500; }
  .nyw-fg__kicker { font-size: 13px; font-weight: 600; letter-spacing: 2px; color: #707070; margin: 0 0 10px; }
  .nyw-fg__h1 { font-size: 32px; line-height: 1.25; letter-spacing: -0.6px; margin: 0 0 14px; }
  .nyw-fg__lead { font-size: 16px; line-height: 1.6; color: #3d3d3d; margin: 0 0 26px; }
  .nyw-fg--hero .nyw-fg__shot { aspect-ratio: 1200 / 433; }

  .nyw-fg__eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 2px; color: #707070; margin: 0 0 12px; }
  .nyw-fg__h2 { font-size: 26px; line-height: 1.25; letter-spacing: -1px; margin: 0 0 28px; }

  .nyw-fg__item + .nyw-fg__item { margin-top: 44px; }
  .nyw-fg__item-h { font-size: 20px; line-height: 1.4; margin: 0 0 10px; }
  .nyw-fg__item-p { font-size: 14px; line-height: 1.7; color: #7e7e7e; margin: 0 0 18px; }
  .nyw-fg__item-body .nyw-fg__shot { aspect-ratio: 1080 / 250; margin-bottom: 18px; }

  .nyw-fg__pair,
  .nyw-fg__defs { display: grid; gap: 12px; }
  .nyw-fg__card { border: 1px solid #e4e4e4; padding: 22px; }
  .nyw-fg__def { background: #f5f5f5; padding: 20px 22px; }
  .nyw-fg__defs { margin-bottom: 12px; }
  .nyw-fg__card h3,
  .nyw-fg__def h3 { font-size: 16px; line-height: 1.5; margin: 0 0 6px; }
  .nyw-fg__card p,
  .nyw-fg__def p { font-size: 14px; line-height: 1.6; color: #7e7e7e; margin: 0; }

  .nyw-fg__steps { display: grid; gap: 12px; }
  .nyw-fg__step { background: #fff; border: 1px solid #e4e4e4; padding: 22px; }
  .nyw-fg__step h3 { font-size: 16px; line-height: 1.5; margin: 0 0 6px; }
  .nyw-fg__step p { font-size: 14px; line-height: 1.6; color: #7e7e7e; margin: 0; }

  .nyw-fg__rel-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .nyw-fg__rel-card { border: 1px solid #e8e8e8; padding: 22px 20px; font-size: 16px; font-weight: 600; }
}

@media (max-width: 480px) {
  .nyw-fg__rel-row { grid-template-columns: 1fr; }
}