/* 브랜드 홈 — 두 장면을 세로로 잇는다.
   정본 프레임이 둘이다. 넓은 자리는 1160, 760 이하는 390이다.
   프레임 폭을 하나의 지면으로 보고 --u 하나로 통째로 줄이므로,
   정본과 같은 폭에서는 그대로이고 그 사이 폭에서는 같은 그림이 작아질 뿐이다. */

:root{
  --frame:1160;
  --u:calc(100vw / 1160);
  --ko:"Noto Sans KR","Apple SD Gothic Neo",system-ui,-apple-system,sans-serif;
  --ink:#1F1F1A;
  --paper:#E7E5E1;
  --wall:#8F8781;
  /* 사진 벽면과 이어지는 옅은 바탕 — 내용이 프레임보다 짧을 때 그 아래를 채운다 */
  --ground:#E0DFDB;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--ground)}
body{
  background:var(--ground);
  color:var(--ink);
  font-family:var(--ko);
  word-break:keep-all;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:none}

.page{
  width:100%;
  container-type:inline-size;
  --u:calc(100cqw / 1160);
}

/* ---------- 제품과 사람 (1160 × 773.33) ---------- */
.shot{
  position:relative;
  width:100%;
  aspect-ratio:1160 / 773.33;
  background:var(--paper);
  overflow:hidden;
}
.shot img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
}

/* ---------- 빛으로 생긴 눈금 (1160 × 837) ---------- */
.cover{
  position:relative;
  width:100%;
  aspect-ratio:1160 / 837;
  background:var(--wall);
  overflow:hidden;
}
.ground{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
}

/* 글이 앉는 자리에만 그림자를 한 겹 더 깐다 */
.band{
  position:absolute;left:0;right:0;
  background:rgba(23,24,27,.1);
}
.band-top{top:0;height:calc(253 * var(--u))}
.band-bottom{top:calc(532 * var(--u));bottom:0}

.title{
  position:absolute;
  left:calc(38 * var(--u));
  top:calc(313 * var(--u));
  width:calc(600 * var(--u));
  margin:0;
  font-weight:500;
  font-size:calc(52 * var(--u));
  line-height:calc(70 * var(--u));
  letter-spacing:calc(-1.56 * var(--u));
  color:var(--ink);
  /* 첫 줄은 정본대로 안쪽에서 시작한다 */
  text-indent:calc(52 * var(--u));
  white-space:pre-line;
}

.rule{
  position:absolute;
  left:calc(40 * var(--u));
  top:calc(479 * var(--u));
  width:calc(134 * var(--u));
  height:calc(2 * var(--u));
  background:rgba(31,31,26,.65);
}

.lede{
  position:absolute;
  left:calc(38 * var(--u));
  top:calc(566 * var(--u));
  width:calc(480 * var(--u));
  margin:0;
  font-weight:400;
  font-size:calc(18 * var(--u));
  line-height:calc(32 * var(--u));
  color:var(--ink);
}
.lede span{display:block;white-space:nowrap}

/* ---------- 390 정본 — HQ가 손에 쥐는 폭으로 넘어가는 자리 ---------- */
@media (max-width:760px){
  .page{
    --u:calc(100cqw / 390);
    display:flex;
    flex-direction:column;
    min-height:100vh;
    min-height:100dvh;
  }

  /* 제품과 사람 (390 × 460) — 사진은 인물과 제품 셋이 다 들어오는 자리에서 잘린다 */
  .shot{
    flex:0 0 auto;
    aspect-ratio:390 / 460;
  }
  .shot img{object-position:39.92% center}

  /* 빛으로 생긴 눈금 (390 × 384) — 지면이 더 길면 이 장면이 늘어나 아래를 채운다 */
  .cover{
    flex:1 1 auto;
    aspect-ratio:auto;
    min-height:calc(384 * var(--u));
  }
  .ground{object-position:30.3% center}

  .band-top{height:calc(116 * var(--u))}
  .band-bottom{top:calc(244 * var(--u));bottom:0}

  .title{
    left:calc(24 * var(--u));
    top:calc(150 * var(--u));
    width:calc(330 * var(--u));
    font-size:calc(28 * var(--u));
    line-height:calc(38 * var(--u));
    letter-spacing:calc(-.84 * var(--u));
    text-indent:calc(28 * var(--u));
  }

  .rule{
    left:calc(24 * var(--u));
    top:calc(246 * var(--u));
    width:calc(72 * var(--u));
  }

  .lede{
    left:calc(24 * var(--u));
    top:calc(272 * var(--u));
    width:calc(342 * var(--u));
    font-size:calc(13 * var(--u));
    line-height:calc(24 * var(--u));
  }
}