/* ─────────────────────────────────────────────────────────
   하베스 그룹 — 뼈대 스타일
   치수·색·글자값은 전부 답지(cosmax.com) 실측값이다.  → 답지-cosmax.md 8장
   지어낸 값은 제목 굵기 200 하나뿐이다 (답지 100, 한글이라 올림).
   ───────────────────────────────────────────────────────── */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

:root{
  --paper:#FFFFFF;          /* 답지 실측 */
  --ink:#000000;            /* 답지 실측 */
  --ink-2:#212529;          /* 답지 body color */
  --line:#000000;           /* 답지 선 1px 검정 */
  --gut:64px;               /* 화면의 5% (답지 45/862) */
  --split:53%;              /* 오른쪽 칸 시작 (답지 454/862) */
  --face:'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',
         'Malgun Gothic',system-ui,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--face); font-size:17px; line-height:1.4; font-weight:400;
  /* 🔴 한국어는 낱말 중간에서 줄을 넘기지 않는다 (의뢰인 2026-09-18)
     「이어갑니 / 다.」 처럼 쪼개지던 것이 「이어갑니다.」 통째로 다음 줄로 간다 */
  word-break:keep-all; overflow-wrap:break-word;
}
a{color:inherit}

.wrap{max-width:1280px; margin:0 auto; padding-inline:var(--gut)}

/* ── 머리 ── 올리베타 사이트의 메뉴 방식 (의뢰인 2026-09-18)
   글자값(14px · 700 · 자간 .42px · 흐린 회색)은 `oliveta\배포\style.css` 실측 그대로.
   🔴 자리만 다르다 — **로고 왼쪽, 나머지 오른쪽**. 동그란 메뉴 버튼은 안 쓴다.   */
.head{position:sticky; top:0; z-index:9; background:var(--paper)}
.head__row{height:76px; display:flex; align-items:center; gap:30px}

.head__nav{display:flex; gap:24px; margin-left:auto}
.head__nav a{
  font-size:14px; font-weight:700; letter-spacing:.42px;
  color:rgba(18,18,18,.4); text-decoration:none;
}
.head__nav a:hover{color:var(--ink)}
.head__nav a[aria-current]{color:var(--ink); text-decoration:underline; text-underline-offset:5px}

.brand{display:block; line-height:0; text-decoration:none}
.logo{height:31px; width:auto}
.foot__logo{display:block; height:34px; width:auto}

.head__util{display:flex; gap:14px}
.head__util a{
  font-size:14px; font-weight:700; letter-spacing:.42px;
  color:var(--ink); text-decoration:none;
}
.head__util a:hover{text-decoration:underline; text-underline-offset:5px}

/* ── 구역 공통 — 왼쪽 제목 / 오른쪽 문단, 세로선 하나 ────── */
.sec{display:grid; grid-template-columns:var(--split) 1fr; align-items:stretch}
.sec--flip{grid-template-columns:var(--split) 1fr; direction:rtl}
.sec--flip>*{direction:ltr}
.col-r{position:relative; padding-left:26px}
/* 🔴 오른쪽 칸을 세로로 꽉 채운다 — 글은 위, 화살표 링크는 **아래 끝**으로.
   그래야 세로선이 위아래로 당겨져 빈 칸처럼 보이지 않는다 (의뢰인 2026-09-16) */
.org .col-r{display:flex; flex-direction:column}
.org .col-r .more{margin-top:auto; align-self:flex-start; padding-top:34px}
/* 🔴 뒤집혀도 글은 **왼쪽 정렬**이다 — 답지 실측 (driving-beauty-forward · our-story 둘 다 x45).
   오른쪽 정렬은 내가 지어낸 것이었다 (2026-09-16 고침) */
.sec--flip .col-r{padding:0 26px 0 0}
/* 답지 LineGraphic — 1px 세로선. 위에서 아래로 자란다 */
.col-r::before{
  content:""; position:absolute; left:0; top:0; width:1px; height:100%;
  background:var(--line); transform-origin:center top;
}
.sec--flip .col-r::before{left:auto; right:0}
/* 뒤집힌 칸에서는 제목이 세로선에 붙는다 — 선에서 띄운다 */
.sec--flip>:first-child{padding-left:26px}

/* 🔴 제목 굵기 600 — 답지는 100 이지만 **답지 제목은 영어**다.
   한국어 제목을 쓰는 한국 회사 네 곳 실측: CTKCLIP 48px/600 · 한국콜마 38/700 ·
   뷰티누리 30/700 · 아모레 36/400. **100~200 을 쓰는 곳이 하나도 없다.**  */
h1,h2,.big{
  margin:0; font-size:48px; line-height:1.15; font-weight:600; letter-spacing:-.025em;
}
.lede{margin:0; font-size:17px; line-height:1.4; font-weight:400; max-width:34em}

/* ── 화살표 링크 ── 답지의 `Learn more ──▶` ─────────────── */
.more{
  display:inline-flex; align-items:center; gap:10px; margin-top:22px;
  font-size:14px; font-weight:500; text-decoration:none;
}
.more::after{
  content:""; width:46px; height:8px; background:var(--line);
  clip-path:polygon(0 3.5px, 38px 3.5px, 38px 0, 46px 4px, 38px 8px, 38px 4.5px, 0 4.5px);
}

/* ── ① 첫 화면 ─────────────────────────────────────────── */
/* 답지 Hero: 제목 아래 80px 띄우고 사진이 온다 */
.hero{padding-top:64px; padding-bottom:0}
.hero h1{margin-bottom:80px}
.hero .col-r{padding-top:244px}   /* 제목 아래에서 78px 띄운다 */


/* ── ③ 다섯 조직 ───────────────────────────────────────── */
.org{padding-block:86px}
.org__no{font-size:13px; font-weight:500; display:block; margin-bottom:14px}
.org--tall{min-height:520px}
.org--mid{min-height:300px}
.org--short{min-height:280px}
.org--step{min-height:660px}

/* ── ④ 두 단 ───────────────────────────────────────────────
   🔴 값은 제목이 아니다 (의뢰인 2026-09-16).
   제목 자리는 조직 이름이고, 값은 설명 아래 **세부 한 줄**로 앉는다. */
.price{padding-block:96px}
.fact{margin:16px 0 0; font-size:19px; font-weight:500; letter-spacing:-.01em}

/* ── ⑤ 대표 ────────────────────────────────────────────── */
.leader{padding-block:96px; min-height:480px}
.leader__who{margin-top:30px; font-size:17px; font-weight:600; line-height:1.5}
/* 대표 서명 ─ 🔴 세로선 아래 끝까지 내린다. 위만 차면 칸이 비어 보인다 */
.leader .col-r{display:flex; flex-direction:column}
.leader__who--right{margin-top:auto; padding-top:40px; text-align:right}
.leader__who span{display:block; font-size:14px; font-weight:400; color:#3B4045}

/* 소제목 ─ 🔴 **본문보다 커야 한다** (의뢰인 2026-09-16).
   48px 제목과 17px 본문 사이의 층. 한글이라 자간은 벌리지 않고 조인다. */
.subhead{
  margin:0 0 24px; font-size:24px; font-weight:600; letter-spacing:-.02em; line-height:1.3;
}

/* ── ⑥ 꼬리 ────────────────────────────────────────────── */
.foot{padding-block:96px 72px; font-size:14px}
.foot__grid{display:grid; grid-template-columns:var(--split) 1fr}
.foot__links{display:flex; flex-direction:column; gap:10px}
.foot__links a{text-decoration:none}

/* ── 자리 표시 ── 글은 GPT, 사진은 의뢰인이 고른다 ───────── */
.slot{
  display:inline-block; border:1px dashed #9AA0A6; color:#6B7075;
  padding:2px 8px; font-size:13px; font-weight:400; line-height:1.5;
  font-family:var(--face); letter-spacing:0;
}
.slot--block{display:block; margin:6px 0}
.pic{
  border:1px dashed #9AA0A6; color:#6B7075; font-size:13px;
  position:relative; overflow:hidden; line-height:1.6;
}
/* 사진이 들어찬 칸 — 자리표시 점선을 지운다 */
.pic--filled{border:0}
img.pic__in{object-fit:cover; display:block; padding:0}
/* 🔴 인물 사진은 자르지 않는다 — 답지의 인물도 `object-fit:contain` 이다 (208×208, 원본 542×542).
   안쪽을 120% 로 키우면 패럴랙스가 얼굴을 칸 밖으로 밀어낸다. 인물 칸만 100% 로 둔다. */
.pic--sq .pic__in{top:0; height:100%}

/* 답지 Asset_root_inner — 안쪽을 120% 로 키워두고 그 안에서 -15%~+15% 움직인다 */
.pic__in{
  position:absolute; left:0; top:-10%; width:100%; height:120%;
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:20px;
}
.pic--tall{aspect-ratio:4/5}
.pic--sq{aspect-ratio:1/1}      /* 🔴 답지의 인물 사진은 정사각이다 (208×208) */
.pic--wide{aspect-ratio:3/2}
.pic--band{aspect-ratio:5/8}     /* 답지 `what-we-do` 세 장 띠 = 417×667 */

/* ── 사진 배치 세 가지 ── 답지 실측 그대로 (2026-09-16, 1265 폭) ────
   | 두 장 나란히 | 507×547 **두 장 같은 크기** · 비율 .928 · 합 81% · contain |
   | 세 장 가로 띠 | 412×659 셋 · 비율 .625 · **화면 끝까지** · cover        |
   | 엇갈린 계단식 | 204px 셋 · x903·692·986 / y 0·255·364 — **오른쪽에 흩어짐** |
   🔴 내 맘대로 정하지 않는다. 위 숫자는 cosmax.com 에서 잰 것이다.      */
.bleed{width:100%}
.pics{position:relative; margin-block:52px}

/* 두 장 나란히 — 같은 크기, 가운데 정렬 */
.pics--2{display:grid; grid-template-columns:1fr 1fr; gap:26px;
         width:min(1040px, 92%); margin-inline:auto; padding-inline:0}  /* 답지 507+26+507 */
.pics--2 .pic{aspect-ratio:507/547}
/* 🔴 `contain` 자리는 안쪽을 120% 로 키우지 않는다 — 키우면 위아래가 잘린다 */
.pics--2 .pic__in{top:0; height:100%}
.pics--2 img.pic__in{object-fit:contain}

/* 세 장 가로 띠 — 화면 끝까지 */
.pics--3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:0; padding-inline:15px}
/* 🔴 답지는 세 장 사이에 틈이 **없다** — 412+412+412 = 1236 이 15~1250 을 꽉 채운다 */
.pics--3 .pic{aspect-ratio:412/659}
/* 🔴 칸이 세로로 아주 길다(안쪽 0.521) — 3:4 원본은 **좌우 30% 가 잘린다.**
   잘리는 쪽을 사진마다 따로 정한다. 9:16 원본이 들어오면 이 줄은 필요 없다. */
.pics--3 .pic:nth-child(1) img.pic__in{object-position:center}   /* 원본이 9:16 이라 거의 안 잘린다 */
/* 🔴 오른쪽 사진 — 패럴랙스(안쪽 120%)가 **위를 79~197px 잘라먹는다.**
   이 칸만 안쪽을 100% 로 두어 사진 위아래를 다 보여준다 (의뢰인 2026-09-16). */
.pics--3 .pic:nth-child(3) .pic__in{top:0; height:100%}

/* 엇갈린 계단식 — 셋이 서로 다른 자리에 뜬다 */
/* 🔴 01 올리베타 칸의 **반대편**에 들어간다 (의뢰인 2026-09-16).
   답지 `our-story` 는 이 셋을 화면 오른쪽 절반(x692~1190)에 흩어놨다.
   그 상대 자리를 오른쪽 칸(≈568px) 안에 그대로 옮긴 값이다. */
.pics--step{height:568px; margin-block:0}
.pics--step .pic{position:absolute; width:204px}         /* 답지 실측 204px */
.pics--step .pic:nth-child(1){left:47.7%; top:0;     aspect-ratio:204/204}
.pics--step .pic:nth-child(2){left:10.6%; top:255px; aspect-ratio:204/219}
.pics--step .pic:nth-child(3){left:62.3%; top:364px; aspect-ratio:204/204}
.pics--step .pic__in{top:0; height:100%}
.pics--step img.pic__in{object-fit:contain}

/* ── 갈래 메뉴 버튼 ── 답지는 **좁은 화면에서만** 갈래를 버튼 하나로 접는다.
   390 폭 실측(2026-09-18): 오른쪽 끝 **48×48** 버튼, 누르면 화면을 덮는 판이 열린다.
   넓은 화면에서는 안 보인다 — 머리는 의뢰인이 정한 올리베타 방식 그대로다. */
.menu{display:none; position:relative}
.menu summary{
  list-style:none; display:block; width:48px; height:48px;
  position:relative; cursor:pointer;
}
.menu summary::-webkit-details-marker{display:none}
.menu summary i{
  position:absolute; left:12px; width:24px; height:1.5px; background:var(--ink);
  transition:transform .2s var(--ease-ui);
}
.menu summary i:first-child{top:21px}
.menu summary i:last-child{top:27px}
.menu[open] summary i:first-child{transform:translateY(3px) rotate(45deg)}
.menu[open] summary i:last-child{transform:translateY(-3px) rotate(-45deg)}
.menu__panel{
  position:fixed; left:0; right:0; top:70px; bottom:0; z-index:10;
  background:var(--paper); padding:34px var(--gut) 40px;
  display:flex; flex-direction:column; gap:28px;
  font-size:20px; font-weight:500; letter-spacing:-.02em;
}
.menu__panel a{text-decoration:none}
.menu__panel .menu__tel{margin-top:auto; font-size:17px; font-weight:400; color:#3B4045}

/* ── 하위 장 머리글 ─────────────────────────────────────── */
.page{min-height:360px; padding-top:96px}
.page .col-r{padding-top:188px}   /* 제목 아래로 내린다 (홈 첫 화면과 같은 짜임) */

/* ── 줄 목록 ── 칸 격자를 안 쓴다. 가로줄만 ─────────────── */
.list{margin-top:10px}
.list__row{
  display:grid; grid-template-columns:var(--split) 1fr;
  padding-block:30px; gap:20px;
}
.list__name{font-size:19px; font-weight:500; margin:0}
.list__desc{margin:0; font-size:17px; font-weight:400}

/* ── 작은 주의 한 줄 ───────────────────────────────────── */
.note{font-size:14px; font-weight:400; color:#3B4045; margin:26px 0 0}

/* ── 문의 마무리 ───────────────────────────────────────── */
.call{padding-block:96px}
.call__no{font-size:34px; font-weight:600; letter-spacing:-.02em; text-decoration:none; display:inline-block; margin-top:12px}

/* ── 첫 화면 양옆 세로선 ── 답지 Hero_root_lines ─────────────
   답지는 첫 화면 좌우 끝에 1px 선을 세워 둔다(가운데 선은 끈다).
   구역 높이만큼 위에서 아래로 자란다.                        */
.hero, .page{position:relative}

/* ── 첫 화면 세로선 ── 답지 실측 (2026-09-16)
   답지 1265 폭에서 선은 x29 · x1234 — **다 자란 영상의 좌우 끝과 같은 자리**다.
   ① 제목 자리를 흰 판(z2)이 덮어서 **맨 위에는 선이 없다**
   ② 선은 사진이 시작하는 쪽부터 보인다
   ③ 사진이 화면 폭까지 자라면 **선을 덮어 지운다**            */
.hero-wrap{position:relative; overflow:hidden}
/* 🔴 선은 사진 칸 안에서만 산다 — 위로 삐져나오면 안 된다 (의뢰인 2026-09-16) */
.hero-lines{position:absolute; inset:0; z-index:0; pointer-events:none}
.hero-lines i{
  position:absolute; top:0; width:1px; height:100%;
  background:var(--line); transform-origin:center top;
}
.hero-lines i:first-child{left:29px}     /* 다 자란 사진의 왼쪽 끝 */
.hero-lines i:last-child{right:29px}     /* 오른쪽 끝 */
.hero{z-index:2; background:var(--paper)}
.hero-shot{position:relative; z-index:1}
.hero-shot__frame{position:relative; z-index:1}     /* 사진이 선을 덮는다 */
.hero-shot .pic{background:var(--paper)}

/* ── 첫 화면 사진 ── 답지 Hero 영상 그대로 ──────────────────
   가운데 놓인 사진이 스크롤하면 화면 폭까지 커진다.
   🔴 자리(높이)를 미리 다 자란 크기로 비워둔다 — 안 그러면 아래 글이 밀린다.
   높이는 anim.js 가 clientWidth 로 다시 잡는다(스크롤바 폭 때문에).   */
.hero-shot{overflow:hidden; margin-top:64px; height:calc((100vw - 58px)*.5625)}
.hero-shot__frame{
  width:min(768px, calc(100vw - 128px)); margin:0 auto;
  aspect-ratio:16/9; transform-origin:center top;
}

/* 점 격자 띠 — 답지는 이것을 **움직이지 않는다**. 102px 타일을 깔아둘 뿐이다 */
.dots{height:132px}
.dots>i{
  display:block; height:100%;
  background-image:radial-gradient(var(--ink) 1px, transparent 1px);
  background-size:16px 16px;
  opacity:.32;
}

/* ═══ 움직임 ═══════════════════════════════════════════════
   전부 답지(cosmax.com) 실측값이다. → 답지-움직임.md
   🔴 답지는 **등장을 한 가지만** 쓴다 — 40px 아래에서 올라오며 밝아진다.
      자리를 가르는 것은 속성이 아니라 **늦게 시작하는 시간**이다.
        문단      제목보다 0.3초 늦게
        첫 화면   제목 0.5초 · 문단 1초 늦게
        줄 목록   100ms 씩            (답지 grid)
        사진      200ms 씩            (답지 Asset)
   길이도 답지 그대로 — 투명도 1초 · 자리이동 2초.
   ═════════════════════════════════════════════════════════ */
:root{
  --ease:cubic-bezier(.22,1,.36,1);       /* 답지 등장 (easeOutQuint) */
  --ease-line:cubic-bezier(.65,0,.35,1);  /* 답지 선   (easeInOut)   */
  --ease-ui:ease-in-out;                  /* 답지 링크 .2s */
}

/* ── 등장 — 답지: opacity 1s, translate 2s ───────────────── */
.js-anim h1, .js-anim h2, .js-anim .big,
.js-anim .lede, .js-anim .more, .js-anim .list__row,
.js-anim .fact, .js-anim .org__no, .js-anim .subhead, .js-anim .note,
.js-anim .leader__who, .js-anim .call__no, .js-anim .pic{
  opacity:0; translate:0 40px;
}
.js-anim h1.in, .js-anim h2.in, .js-anim .big.in,
.js-anim .lede.in, .js-anim .more.in, .js-anim .list__row.in,
.js-anim .fact.in, .js-anim .org__no.in, .js-anim .subhead.in, .js-anim .note.in,
.js-anim .leader__who.in, .js-anim .call__no.in, .js-anim .pic.in{
  opacity:1; translate:0 0;
  transition:opacity 1s, translate 2s var(--ease);
}

/* 문단은 제목보다 0.3초 늦다 — 답지 `p{transition-delay:.3s}` */
.js-anim .lede.in, .js-anim .more.in, .js-anim .note.in, .js-anim .leader__who.in{
  transition-delay:.3s;
}
/* 첫 화면만 더 늦다 — 답지 Hero h1 .5s / p 1s */
.js-anim .hero h1.in{transition-delay:.5s}
.js-anim .hero .lede.in{transition-delay:1s}

/* ── 세로 실선 — 위에서 아래로 자란다 ──────────────────────
   답지 LineGraphic: scaleY 0→1 · 1초 · easeInOut · 진행도 0.5 에서 */
.js-anim .col-r::before, .js-anim .hero-lines i{transform:scaleY(0)}
.js-anim .col-r.in::before, .js-anim .hero-lines.in i{
  transform:scaleY(1); transition:transform 1s var(--ease-line);
}

/* ── 호버 ── 답지 Button: 5px 밀리고, 0.3초 뒤에 색이 뒤집힌다 ── */
.btn-line{
  transition:translate .8s var(--ease),
             background-color .8s var(--ease) .3s, color .8s var(--ease) .3s;
}
.btn-line:hover{translate:5px 0; background:var(--ink); color:var(--paper)}

.more::after{transition:transform .2s var(--ease-ui)}
.more:hover::after{transform:translateX(5px)}
.menu summary{transition:background-color .2s var(--ease-ui)}
.menu summary:hover{background:var(--ink)}
.foot__links a, .menu__panel a{transition:color .2s var(--ease-ui)}
.foot__links a:hover, .menu__panel a:hover{color:#6B7075}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  /* 🔴 reduce 에서 내용이 안 보이면 치명적이다 — 시작값을 전부 푼다 */
  .js-anim h1, .js-anim h2, .js-anim .big, .js-anim .lede, .js-anim .more,
  .js-anim .list__row, .js-anim .fact, .js-anim .subhead,
  .js-anim .org__no, .js-anim .note, .js-anim .leader__who,
  .js-anim .call__no, .js-anim .pic{
    opacity:1 !important; translate:0 0 !important;
  }
  .js-anim .col-r::before, .js-anim .sec>*::before, .js-anim .sec::before,
  .js-anim .hero-wrap::before, .js-anim .hero-wrap::after,
  .js-anim .hero-lines i{transform:scaleY(1) !important}
  /* 첫 화면 사진은 커지지 않는다 — 비워둔 자리도 같이 접는다 */
  .hero-shot{height:auto !important}
  .pic__in{transform:none !important}
}


/* ═══ 상세페이지 ═══════════════════════════════════════════
   답지 상세(cosmax our-story · our-innovations) + 토스플레이스 `/composition` 실측
     · 답지: 제목 **78px** (홈 48) · 구역마다 **바탕색이 바뀐다**(흰·베이지·검정)
     · 토스: **두 갈래를 좌우로 나란히** 놓고 같은 항목을 같은 높이에 맞춘다
             묶음마다 회색 소제목 + ✓ 목록, 가로선으로 나눔, 갈래마다 버튼
   ═════════════════════════════════════════════════════════ */
/* 🔴 상세 제목도 홈과 같은 48px 로 둔다 (의뢰인 2026-09-16).
   답지 상세는 78px 이지만, 한글 제목이라 78 은 너무 무겁다 */

/* 바탕이 바뀌는 구역 — 답지가 가장 세게 쓰는 수법 */
.band{padding-block:110px}
.band--beige{background:#F3F0ED}
.band--dark{background:#000; color:#fff}
.band--dark .lede, .band--dark .fact{color:#fff}
.band--dark .check li::before{background:#fff}

/* 두 갈래 나란히 (토스 `/composition`) */
.compare{display:grid; grid-template-columns:1fr 1fr; gap:58px}
.card__label{margin:0 0 10px; font-size:15px; font-weight:400; color:#6B7075}
.band--dark .card__label{color:#9AA0A6}
.card__title{margin:0 0 26px; font-size:32px; font-weight:600; letter-spacing:-.02em; line-height:1.25}
.card__pic{aspect-ratio:3/2; overflow:hidden; position:relative; background:#000; margin-bottom:26px}
.card__pic img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.card__price{margin:0 0 6px; font-size:28px; font-weight:600; letter-spacing:-.02em}
.card__sub{margin:0 0 22px; font-size:15px; color:#6B7075}
.btn-fill{
  display:block; text-align:center; text-decoration:none;
  padding:17px 0; font-size:16px; font-weight:600;
  background:var(--ink); color:var(--paper);
  transition:opacity .2s var(--ease-ui);
}
.btn-fill:hover{opacity:.82}
.band--dark .btn-fill{background:#fff; color:#000}

/* 마무리 구역 — 🔴 큰 제목과 **아래를 맞춘다** · 글은 왼쪽 정렬 (의뢰인 2026-09-17) */
.band--dark .compare{align-items:end}
/* 마무리 큰 제목 — 왼쪽에 크게 (의뢰인 2026-09-17). 인라인이 아니라 여기 둔다 */
.card__title--end{font-size:44px}
.end-cta{display:flex; flex-direction:column; align-items:flex-start; margin-bottom:26px}  /* 제목 글줄 아래와 맞춘다 */
.end-cta .btn-fill{min-width:300px; padding-inline:44px}
.end-cta .card__label{margin:0 0 16px}
.band--dark .more{color:#fff}
.band--dark .more::after{background:#fff}

/* ✓ 목록 — 묶음 소제목 + 항목 */
.group{margin-top:44px; padding-top:26px; border-top:1px solid rgba(0,0,0,.14)}
.band--dark .group{border-top-color:rgba(255,255,255,.22)}
.group__name{margin:0 0 16px; font-size:15px; font-weight:500; color:#6B7075}
.band--dark .group__name{color:#9AA0A6}
.check{list-style:none; margin:0; padding:0}
.check li{position:relative; padding-left:26px; margin-bottom:22px; font-size:17px; line-height:1.45}
.check b{display:block; font-weight:600; margin-bottom:5px}
.check span{display:block; color:#3B4045}
.band--dark .check span{color:#B9BEC3}
.check li::before{
  content:""; position:absolute; left:0; top:9px; width:12px; height:7px;
  background:var(--ink);
  clip-path:polygon(0 3px, 1.5px 1.5px, 4.5px 4.5px, 10.5px 0, 12px 1.5px, 4.5px 7px);
}

/* 다른 길 안내 카드 (토스 회색 카드) */
/* 🔴 검정 바탕 · 흰 글씨 (의뢰인 2026-09-17) */
.aside-card{
  display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center;
  background:#000; color:#fff; padding:52px 58px; margin-top:64px;
}
.aside-card__t{margin:0; font-size:28px; font-weight:600; letter-spacing:-.02em; line-height:1.3}
.aside-card__s{margin:0 0 8px; font-size:16px; color:#9AA0A6}
.aside-card .more{color:#fff}
.aside-card .more::after{background:#fff}


/* ═══ 좁은 화면 ═══════════════════════════════════════════════════
   전부 답지(cosmax.com)를 **390 폭으로 열어** 실측한 값이다. (2026-09-18)

   | | 답지 1265 | 답지 390 |
   |---|---|---|
   | 바깥 여백      | 15px        | **16px**            |
   | 구역 세로 여백 | 64px        | **32px** (딱 반)    |
   | 큰 제목        | 78.5px      | **48px** (61%)      |
   | 중간 제목      | 51 / 28     | 28 / 24             |
   | 본문 17 이하   | 17·14·12    | **그대로**          |
   | 머리 높이      | 76px        | **70px**            |
   | 로고           | 31px        | **28px**            |
   | 갈래           | 글 링크 넷  | **48×48 버튼 하나** |

   🔴 **세로선은 남는다.** 전에 좁은 화면에서 지워버렸는데 답지는 안 지운다.
      한 칸으로 접히면 선이 **덩어리 왼쪽 끝**(x16)으로 옮겨가고
      제목은 선에 붙고 **문단만 16px 들여쓴다**(x32).
   🔴 **계단식 사진도 흩어진 채로 남는다.** 격자로 바꾸지 않는다.
      답지 390: 폭 156.5px(=42%) 셋을 **틈 없이 쌓고** 왼쪽 들여쓰기만 어긋낸다.
   🔴 **첫 화면 사진은 정사각 칸**(폭−30)에서 **높이가 찰 때까지** 커진다.
      좌우로 넘쳐 잘린다. 답지 390: 229×129 → **639×359** (배율 2.79).
      넓은 화면처럼 16:9 를 다 보여주면 390 에서 높이가 187px 밖에 안 된다.
   ════════════════════════════════════════════════════════════════ */
@media (max-width:820px){
  :root{--gut:16px}

  /* ── 머리 ── 답지: 갈래를 오른쪽 끝 48×48 버튼 하나로 접는다 ── */
  .head__row{height:70px; gap:0}
  .logo{height:28px}
  .head__nav, .head__util{display:none}
  .menu{display:block; margin-left:auto; margin-right:-12px}

  /* ── 글자 크기 ── 답지는 **17px 이하를 안 건드린다**.
       78.5→48(61%) · 51→28(55%) · 28→24(86%) 곡선을 우리 값에 옮겼다 */
  h1,h2,.big{font-size:30px}
  .subhead{font-size:21px}
  .card__title{font-size:26px}
  .card__price,.aside-card__t{font-size:24px}
  .call__no,.card__title--end{font-size:28px}

  /* ── 구역 ── 두 칸을 위아래로. 세로선은 덩어리 왼쪽 끝으로 ── */
  .sec,.sec--flip,.foot__grid,.compare{grid-template-columns:1fr}
  .sec--flip{direction:ltr}
  .sec--flip>:first-child{padding-left:0}
  /* 🔴 **글은 선에 닿지 않는다.** 답지 390 잉크 실측: 선 x16 · 제목 글자 x31 · 문단 x32.
     (제목 상자는 x15 인데 안쪽에서 16px 밀어 놓았다 — 눈에 보이는 건 글자다)
     선이 없는 덩어리는 반대로 바깥 여백(x16)에 붙인다 → `.band` 는 그대로 둔다 */
  .sec{position:relative; padding-left:calc(var(--gut) + 16px)}
  /* 🔴 띄우는 건 **안쪽 여백**으로 한다 — 바깥 여백(margin)으로 띄우면
     그 사이만큼 **선이 끊긴다** (의뢰인 2026-09-18 ③) */
  .col-r,.sec--flip .col-r{padding:32px 0 0; margin-top:0}
  /* 사진은 글이 아니다 — 들여쓴 만큼 되돌려 바깥 여백(x16)에 붙인다 */
  .sec>.pic,.sec>.pics,.sec>.col-r>.pic,.sec>.col-r>.pics{margin-left:-16px}

  /* 🔴 **선은 글 옆에만 선다. 사진 옆에는 안 선다** (의뢰인 2026-09-18 ①②)
       05  → 마상욱 사진에서 **끝난다**
       대표 → 최영길 사진 **아래**에서 시작한다
       01  → 계단식 사진에서 끝난다
     그래서 구역 통째가 아니라 **글이 든 칸마다** 세운다. 칸끼리는 맞닿아 이어진다. */
  .col-r::before{display:none}
  .sec>div:not(.pic),.sec>h1,.sec>.col-r{position:relative}
  .sec>div:not(.pic)::before,.sec>h1::before,.sec>.col-r::before{
    content:""; display:block; position:absolute; left:-16px; top:0; width:1px; height:100%;
    background:var(--line); transform-origin:center top;
  }
  .sec>.col-r:has(.pic)::before,.sec>.col-r:has(.pics)::before{content:none}

  /* 🔴 **선은 구역마다 한 군데서 시작한다** (의뢰인 2026-09-18).
     사진이 아예 없는 구역(02·03·04·상세 머리)은 칸이 둘 다 글이라 선이 둘로 갈라졌다 —
     위에서 한 줄, 중간에서 또 한 줄이 내려왔다. 그런 구역은 **구역 통째로 한 줄**로 긋는다.
     (사진이 낀 구역은 글 칸이 하나뿐이라 이미 한 줄이다) */
  .sec:not(.hero):not(:has(.pic)):not(:has(.pics))>*::before{content:none}
  .sec:not(.hero):not(:has(.pic)):not(:has(.pics))::before{
    content:""; position:absolute; left:var(--gut); width:1px;
    top:44px; height:calc(100% - 88px);          /* .org 위아래 여백 44 */
    background:var(--line); transform-origin:center top;
  }
  .sec.page:not(:has(.pic)):not(:has(.pics))::before{top:56px; height:calc(100% - 56px)}
  .js-anim .sec>*::before,.js-anim .sec::before{transform:scaleY(0)}
  .js-anim .sec.in>*::before,.js-anim .sec.in::before{
    transform:scaleY(1); transition:transform 1s var(--ease-line);
  }

  /* ── 세로 여백 ── 답지는 딱 반으로 줄인다 (64 → 32) ── */
  .org{padding-block:44px}
  .org--tall,.org--mid,.org--short,.org--step{min-height:0}
  .leader{padding-block:48px; min-height:0}
  .price,.call{padding-block:48px}
  .band{padding-block:56px}
  .foot{padding-block:48px 36px}
  .page{padding-top:56px; min-height:0}
  .hero .col-r,.page .col-r{padding-top:0}
  .pics{margin-block:26px}

  /* ── 첫 화면 ── 🔴 의뢰인 2026-09-18 ②③
     · 사진은 **벽(양옆 선)에 닿으면** 거기서 커지기를 멈춘다 → 다 자란 폭 = 화면폭−32
     · 선은 제목 옆부터 **사진 칸 아래끝까지 한 줄로** 이어진다 (끊기면 안 된다)
     · 사진이 다 자라면 선을 정확히 덮는다 = **거기서 합쳐진다**
     · 선은 첫 화면에서 끝난다 — **최영길 사진까지 내려가지 않는다** */
  .hero{padding-top:48px; padding-right:calc(var(--gut) + 16px); background:transparent; z-index:auto}
  .hero h1{margin-bottom:0}
  .sec.hero>div::before,.sec.hero>.col-r::before{content:none}  /* 칸마다 세운 선은 끄고 통짜 한 줄로 */
  .hero-lines{display:none}              /* 사진 칸 안쪽 선도 끄고 통짜 한 줄로 */
  .hero-shot{margin-top:32px; height:calc((100vw - 32px)*.5625)}  /* anim.js 가 다시 잡는다 */
  .hero-shot__frame{width:59%}                                    /* 답지 229/390 = 58.7% */
  .hero-wrap::before,.hero-wrap::after{
    content:""; position:absolute; top:48px; height:calc(100% - 48px); width:1px; z-index:0;
    background:var(--line); transform-origin:center top;
  }
  .hero-wrap::before{left:var(--gut)}
  .hero-wrap::after{right:var(--gut)}
  .js-anim .hero-wrap::before,.js-anim .hero-wrap::after{transform:scaleY(0)}
  .js-anim .hero-wrap.in::before,.js-anim .hero-wrap.in::after{
    transform:scaleY(1); transition:transform 1s var(--ease-line);
  }

  /* ── 사진 ── 답지 390 실측 ────────────────────────────────
     두 장 나란히 → 위아래, 폭 가득(356), 틈 32, **비율 그대로**
     세 장 띠     → 위아래, 폭 가득(356), 틈 0, 비율 **356/475**
     계단식       → 틈 없이 쌓고 왼쪽 들여쓰기만 40.2% · 4% · 54.2% */
  .pics--2{grid-template-columns:1fr; gap:32px; width:auto; padding-inline:var(--gut)}
  .pics--3{grid-template-columns:1fr; gap:0; padding-inline:var(--gut)}
  .pics--3 .pic{aspect-ratio:356/475}
  .pics--step{height:auto}
  .pics--step .pic{position:static; width:41.9%; margin:0}
  .pics--step .pic:nth-child(1){margin-left:40.2%}
  .pics--step .pic:nth-child(2){margin-left:4%}
  .pics--step .pic:nth-child(3){margin-left:54.2%}

  /* ── 목록·카드 ── */
  .list__row{grid-template-columns:1fr; gap:8px}
  .compare{gap:48px}
  .aside-card{grid-template-columns:1fr; padding:36px 24px}
  .end-cta .btn-fill{min-width:0; width:100%}
}