@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════════════════
   로엔디앤씨 채용 v7 — 본사 홈페이지와 같은 판으로
   ──────────────────────────────────────────────────────────────────────────
   v6(건축 도면 · 청사진 남색)를 버리고 본사 홈페이지(roen.css)의 언어를 그대로
   가져왔습니다. 두 사이트를 나란히 놓았을 때 같은 회사로 보여야 하기 때문입니다.

   본사에서 가져온 장치 다섯:
     ① 섹션 제목 = 영문 초대형 얇은 글씨 + 한글 한 줄
     ② 사진 타일을 여백 없이 붙여 벽처럼 잇는다
     ③ 조건·지표는 어두운 사진 위에 큰 글자로 (표로 만들지 않는다)
     ④ 문의는 좌측 대형 제목 / 우측 구분선 목록 2단
     ⑤ 사진은 스크롤 진입 시 아주 느리게 제자리로

   굵게 키우면 소리를 지르는 것처럼 보이고, 얇게 키우면 무게가 실린다.
   그래서 디스플레이 서체 굵기는 300 이다.

   채용에만 있는 것: 큰 전화번호, 모바일 하단 고정 지원 버튼, 화면 캡처 액자.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --bg:#FFFFFF;
  --tint:#F5F3EE;
  --tint-2:#E9E6DF;
  --dark:#0B0D0E;
  --dark-2:#14181A;
  --dark-3:#1E2326;

  --ink:#14171A;
  --ink-2:#565D63;
  --ink-3:#6D757C;
  --on-dark:#F2F3F4;
  --on-dark-2:#A9B1B7;
  --on-dark-3:#828A90;

  --line:#E3E5E8;
  --line-2:#CFD3D7;
  --line-d:rgba(242,243,244,.13);
  --line-d2:rgba(242,243,244,.26);

  --gold:#8A6B1E;        /* 밝은 면 위 글자 5.1:1 */
  --gold-rule:#B08C31;   /* 밝은 면의 선 */
  --gold-d:#DFC079;      /* 어두운 면 위 8.4:1 */

  --f:"Pretendard Variable",-apple-system,BlinkMacSystemFont,system-ui,"Malgun Gothic",sans-serif;
  --f-en:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --pad:clamp(22px,5vw,72px);
  --maxw:1240px;
  --r:3px;
  --ease:cubic-bezier(.22,1,.36,1);
  --gnb-h:66px;
}
@media (min-width:1024px){ :root{ --gnb-h:80px } }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--bg);color:var(--ink);
  font:400 17px/1.85 var(--f);letter-spacing:-.012em;
  word-break:keep-all;overflow-wrap:anywhere;overflow-x:clip;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0}
li{list-style:none}
[id]{scroll-margin-top:calc(var(--gnb-h) + 10px)}
::selection{background:var(--ink);color:#fff}
h1,h2{margin:0;font-weight:300;letter-spacing:-.045em;line-height:1.18;text-wrap:balance}
h3,h4{margin:0}
:where(a,button,[tabindex]):focus-visible{outline:2px solid var(--gold-rule);outline-offset:3px}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}

.skip{
  position:fixed;left:12px;top:-100px;z-index:200;border-radius:var(--r);
  background:var(--ink);color:#fff;padding:12px 18px;font-weight:700;
  text-decoration:none;transition:top .18s var(--ease);
}
.skip:focus{top:12px}

/* ══ 등장 효과 ════════════════════════════════════════════════════════════ */
.rv,.rv-s>*{opacity:0;transform:translateY(20px)}
.rv.in,.rv-s.in>*{opacity:1;transform:none;transition:opacity .85s var(--ease),transform .85s var(--ease)}
.rv-s.in>*:nth-child(2){transition-delay:.09s}
.rv-s.in>*:nth-child(3){transition-delay:.18s}
.rv-s.in>*:nth-child(4){transition-delay:.27s}
.rv-s.in>*:nth-child(5){transition-delay:.36s}
.rv-s.in>*:nth-child(6){transition-delay:.45s}

.rv-img{overflow:hidden}
.rv-img img{transform:scale(1.09)}
.rv-img.in img{transform:scale(1);transition:transform 1.9s var(--ease)}

@media (prefers-reduced-motion:reduce){
  .rv,.rv-s>*{opacity:1!important;transform:none!important;transition:none!important}
  .rv-img img{transform:none!important;transition:none!important}
}

/* ══ 상단바 ═══════════════════════════════════════════════════════════════ */
.gnb{
  position:fixed;inset:0 0 auto;z-index:90;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s var(--ease);
}
.gnb.solid{background:rgba(255,255,255,.97);border-bottom-color:var(--line)}
.gnb-in{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);
  height:var(--gnb-h);display:flex;align-items:center;gap:16px;
}
.gnb-logo{flex:0 0 auto;display:flex;align-items:center;gap:9px;line-height:0;text-decoration:none}
/* 워드마크는 가로로 아주 길다(7.5:1). 폭 기준으로 잡아야 높이가 맞는다. */
.gnb-logo img{width:118px}
/* 심볼(무지개 R)은 정사각에 가깝다. 워드마크 글자 높이에 맞춰 높이 기준으로 잡는다. */
.gnb-logo .gnb-mark{width:auto;height:22px;margin-right:-2px}
.gnb-logo span{
  font:600 10px/1 var(--f-en);letter-spacing:.16em;color:var(--gold);
  border-left:1px solid var(--line-2);padding-left:9px;
}
.gnb-nav{display:none;gap:0;margin-left:auto;align-items:center}
.gnb-nav a{
  font:600 13px/1 var(--f);letter-spacing:-.01em;
  color:var(--ink-2);text-decoration:none;padding:6px 14px;
  transition:color .2s;white-space:nowrap;position:relative;
}
.gnb-nav a+a::before{
  content:"/";position:absolute;left:-2px;color:var(--line-2);font-weight:400;
}
.gnb-nav a:hover{color:var(--ink)}
.gnb-cta{
  margin-left:auto;flex:0 0 auto;border-radius:var(--r);
  background:var(--ink);color:#fff;text-decoration:none;
  font:700 13px/1 var(--f);letter-spacing:-.01em;padding:13px 19px;white-space:nowrap;
  transition:background .2s var(--ease);
}
.gnb-nav+.gnb-cta{margin-left:22px}
.gnb-cta:hover{background:#000}
.gnb-menu{
  width:42px;height:42px;flex:0 0 auto;padding:0;cursor:pointer;background:none;
  border:1px solid var(--line-2);border-radius:var(--r);display:grid;place-items:center;
}
.gnb-menu i{position:relative;display:block;width:17px;height:1.5px;background:var(--ink);transition:background .2s}
.gnb-menu i::before,.gnb-menu i::after{
  content:"";position:absolute;left:0;width:17px;height:1.5px;background:var(--ink);
  transition:transform .28s var(--ease);
}
.gnb-menu i::before{transform:translateY(-6px)}
.gnb-menu i::after{transform:translateY(6px)}
.gnb.open{background:#fff}
.gnb.open .gnb-menu i{background:transparent}
.gnb.open .gnb-menu i::before{transform:rotate(45deg)}
.gnb.open .gnb-menu i::after{transform:rotate(-45deg)}
.gnb.open .gnb-nav{
  display:grid;position:absolute;left:0;right:0;top:100%;gap:0;margin:0;
  background:#fff;border-bottom:1px solid var(--line);padding:4px var(--pad) 14px;
}
.gnb.open .gnb-nav a{padding:15px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink)}
.gnb.open .gnb-nav a+a::before{display:none}
.gnb.open .gnb-nav a:last-child{border-bottom:0}
@media (min-width:1024px){
  .gnb-nav{display:flex}
  .gnb-menu{display:none}
  .gnb-logo img{width:128px}
}

/* ══ 히어로 — 흰 바탕에 글씨만. 사진은 바로 아래 띠가 받는다 ══════════════ */
.hero{
  position:relative;background:var(--bg);
  min-height:min(90svh,860px);display:grid;align-items:center;
  padding:calc(var(--gnb-h) + clamp(48px,9vh,110px)) 0 clamp(80px,13vh,140px);
}
.hero-in{width:100%}
.hero-en{
  font:300 clamp(2.6rem,9.4vw,7.4rem)/0.98 var(--f-en);
  letter-spacing:-.035em;color:var(--ink);margin:0;
}
.hero-en b{font-weight:300;color:var(--gold)}
.hero-ko{
  margin-top:clamp(22px,3.4vw,38px);
  font-size:clamp(1.05rem,2.4vw,1.7rem);font-weight:300;letter-spacing:-.04em;
  line-height:1.45;color:var(--ink);
}
.hero-sub{
  margin-top:clamp(16px,2vw,22px);display:flex;align-items:center;gap:13px;
  font:600 clamp(11.5px,1.3vw,13px)/1 var(--f);letter-spacing:.09em;color:var(--ink-3);
}
.hero-sub::before{content:"";width:clamp(24px,4vw,44px);height:1px;background:var(--gold-rule);flex:0 0 auto}

/* 본사는 이 원이 히어로와 아래 사진 띠의 경계에 걸친다. 여기는 히어로 다음이
   바로 어두운 판이라 걸치면 검정 위 검정이 되어 사라진다. 그래서 히어로 안에 둔다. */
.hero-scroll{
  position:absolute;z-index:3;left:var(--pad);bottom:clamp(20px,4vh,44px);
  width:clamp(74px,9vw,104px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;text-decoration:none;
  background:var(--ink);color:#fff;
  font:600 10px/1 var(--f-en);letter-spacing:.22em;
  transition:background .25s var(--ease),transform .25s var(--ease);
}
.hero-scroll:hover{background:var(--gold);transform:scale(1.05)}

/* ══ 섹션 제목 — 영문 초대형 + 한글 한 줄 ═════════════════════════════════ */
.sh{margin-bottom:clamp(36px,5vw,64px)}
.sh-en{
  font:300 clamp(2.1rem,7vw,5.2rem)/1 var(--f-en);
  letter-spacing:-.03em;color:var(--ink);margin:0;
}
.sh-ko{
  margin-top:clamp(12px,1.6vw,18px);
  font-size:clamp(13.5px,1.7vw,15.5px);font-weight:600;letter-spacing:.01em;color:var(--ink-2);
}
.sec-dark .sh-en,.cred .sh-en,.sys .sh-en{color:#fff}
.sec-dark .sh-ko,.cred .sh-ko,.sys .sh-ko{color:var(--on-dark-2)}
.sh-mid{text-align:center}

/* ══ 구획 ═════════════════════════════════════════════════════════════════ */
.sec{padding:clamp(92px,14vw,200px) 0}
.sec-tight{padding-bottom:clamp(60px,8vw,110px)}
/* 밝은 판이 두 번 이어질 때만 쓴다. 200+200 을 그대로 두면 사이가 비어 보이고,
   두 섹션이 하나로 뭉개진다. */
.sec-follow{padding-top:clamp(56px,7vw,120px)}
.sec-dark{background:var(--dark);color:var(--on-dark)}

/* ══ 큰 문장 — 페이지에서 가장 큰 글씨 ════════════════════════════════════ */
.say-big{
  font-size:clamp(1.72rem,6.4vw,4.5rem);font-weight:300;line-height:1.26;
  letter-spacing:-.05em;color:var(--ink);text-wrap:balance;
}
.say-big b{color:var(--gold);font-weight:500}
.say-sub{
  margin-top:clamp(36px,5vw,62px);max-width:64ch;display:grid;gap:18px;
  padding-top:clamp(28px,3.4vw,40px);border-top:1px solid var(--line);
}
.say-sub p{font-size:16.5px;line-height:1.95;color:var(--ink-2)}
.say-sub b{color:var(--ink);font-weight:700}

.note{margin-top:clamp(28px,3.4vw,40px);max-width:80ch;font-size:13px;line-height:1.8;color:var(--ink-3)}
.fine{margin-top:clamp(20px,2.4vw,28px);font-size:12.4px;line-height:1.8;color:var(--ink-3)}
.sec-dark .fine,.sys .fine,.cred .fine{color:var(--on-dark-3)}

.btn{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;border-radius:var(--r);
  font-weight:700;font-size:14.6px;padding:15px 26px;white-space:nowrap;border:1px solid transparent;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .14s var(--ease);
}
.btn span{transition:transform .22s var(--ease)}
.btn:hover span{transform:translateX(3px)}
.btn:active{transform:translateY(1px)}
.btn-line{border-color:rgba(242,243,244,.44);color:#fff}
.btn-line:hover{border-color:var(--gold-d);color:var(--gold-d)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:#000}
.btn-inkline{border-color:var(--line-2);color:var(--ink)}
.btn-inkline:hover{border-color:var(--gold-rule);color:var(--gold)}
.btn-gold{background:var(--gold-d);color:#151312}
.btn-gold:hover{background:#EBD08B}

/* ══ TERMS — 어두운 사진 위 모집 조건 ═════════════════════════════════════
   표로 만들면 계약서가 되고, 사진 위에 크게 얹으면 조건이 된다. */
.cred{position:relative;overflow:hidden;background:var(--dark);color:var(--on-dark)}
.cred-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.5) brightness(.42) contrast(1.1);
}
.cred::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,10,11,.72) 0%,rgba(8,10,11,.5) 40%,rgba(8,10,11,.9) 100%);
}
.cred-in{position:relative;z-index:1;padding-block:clamp(92px,14vw,190px)}
.cred-l{
  display:grid;gap:1px;background:var(--line-d);
  border-block:1px solid var(--line-d);
}
.cred-l li{
  background:rgba(11,13,14,.34);backdrop-filter:blur(2px);
  padding:clamp(28px,3.6vw,44px) clamp(20px,2.6vw,32px);
  display:grid;gap:12px;align-content:start;
}
.cd-k{font:600 10.5px/1 var(--f-en);letter-spacing:.14em;color:var(--gold-d)}
.cd-v{
  font-size:clamp(1.45rem,3.1vw,2.05rem);font-weight:300;letter-spacing:-.04em;
  color:#fff;line-height:1.15;
  overflow-wrap:normal;word-break:keep-all;
}
.cd-n{font-size:13px;line-height:1.72;color:var(--on-dark-2)}
.cd-n b{color:#fff;font-weight:600}
@media (min-width:640px){.cred-l{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1060px){.cred-l{grid-template-columns:repeat(4,1fr)}}

/* 조건 아래 — 금액을 적지 않는 이유 */
.cred-say{
  margin-top:clamp(44px,5.4vw,68px);max-width:70ch;
  display:grid;gap:16px;
  padding-left:clamp(18px,2.4vw,28px);border-left:2px solid var(--gold-d);
}
.cred-say p{font-size:16.2px;line-height:1.95;color:var(--on-dark-2)}
.cred-say b{color:#fff;font-weight:700}
.cred-say .big{
  font-size:clamp(1.15rem,2.5vw,1.55rem);font-weight:300;letter-spacing:-.04em;
  line-height:1.5;color:#fff;
}

/* ══ 사진 타일 — 여백 없이 붙인다 ═════════════════════════════════════════ */
/* 본사는 타일을 딱 붙여 벽처럼 잇지만, 여기는 사진 사이를 살짝 띄운다.
   붙이면 여섯 장이 한 덩어리로 보이고, 띄우면 한 장씩 읽힌다. */
.tiles{display:grid;grid-template-columns:1fr;gap:clamp(2px,.22vw,3px)}
.tiles li{position:relative;overflow:hidden;background:var(--dark-2)}
.tiles img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  transform:scale(1.02);transition:transform 1.1s var(--ease),filter 1.1s var(--ease);
  filter:saturate(.92);
}
.tiles li::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,8,9,0) 42%,rgba(6,8,9,.34) 66%,rgba(6,8,9,.78) 100%);
  transition:opacity .6s var(--ease);
}
.tl-b{
  position:absolute;z-index:1;left:0;right:0;bottom:0;
  padding:clamp(18px,2.4vw,28px);
  display:grid;gap:5px;color:#fff;
  transform:translateY(6px);transition:transform .6s var(--ease);
}
.tl-m{font-size:12.4px;font-weight:500;color:rgba(255,255,255,.78);letter-spacing:.01em}
.tl-b b{font-size:clamp(15px,1.7vw,18px);font-weight:700;letter-spacing:-.025em;line-height:1.35}
.tiles li:hover img{transform:scale(1.075);filter:saturate(1)}
.tiles li:hover .tl-b{transform:translateY(0)}

/* ── 지금 분양 중인 현장 ────────────────────────────────────────────────────
   "준비 중"(.tl-soon)이 회색으로 물러나는 칸이라면, 이건 앞으로 나오는 칸이다.
   사진 위에 글자 세 자와 골드 점 하나만 얹는다. 점은 천천히 한 번 번진다 —
   깜빡이면 광고처럼 보이고, 가만히 있으면 지금 일이라는 게 안 읽힌다.
   배경을 흐리는 처리(backdrop-filter)는 쓰지 않는다 — 스크롤이 무거워진다. */
.tl-live-tag{
  position:absolute;z-index:2;
  top:clamp(13px,1.7vw,19px);left:clamp(13px,1.7vw,19px);
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 11px 6px 9px;border-radius:999px;
  background:rgba(8,10,12,.72);border:1px solid rgba(223,192,121,.34);
  font-size:11.5px;font-weight:600;letter-spacing:.01em;color:var(--gold-d);
  pointer-events:none;
}
.tl-live-tag::before{
  content:"";width:6px;height:6px;border-radius:50%;flex:none;background:var(--gold-d);
  animation:tl-live-pulse 2.6s ease-out infinite;
}
@keyframes tl-live-pulse{
  0%{box-shadow:0 0 0 0 rgba(223,192,121,.5)}
  70%{box-shadow:0 0 0 7px rgba(223,192,121,0)}
  100%{box-shadow:0 0 0 0 rgba(223,192,121,0)}
}
@media (prefers-reduced-motion:reduce){.tl-live-tag::before{animation:none}}

@media (hover:none){.tl-b{transform:none}}
@media (min-width:620px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.tiles{grid-template-columns:repeat(3,1fr)}}
.tiles-3{grid-template-columns:1fr}
@media (min-width:620px){.tiles-3{grid-template-columns:repeat(3,1fr)}}
/* 사진 벽이 글 바로 밑에 붙으면 읽던 호흡이 끊긴다. 한 칸 띄운다. */
.wrap + .tiles{margin-top:clamp(48px,6vw,88px)}
.tiles + .wrap > .note{margin-top:clamp(36px,4.4vw,56px)}

/* ══ 해드리는 것 — 순서대로 넉 장 ═════════════════════════════════════════
   사진 띠(.strip)가 한 장으로 숨을 쉬는 자리라면, 이건 같은 폭에 넉 장을 나란히
   놓아 촬영 → 편집 → 홈페이지 → 블로그 순서를 사진으로 먼저 보여 준다.
   바로 아래 글 목록(ASSET 01~04)이 같은 순서를 문장으로 다시 푼다.
   사진을 바꾸려면 <img src> 만 갈아 끼우면 된다(가로:세로 4:5 로 맞춰 두면 안 잘린다). */
.steps{
  display:grid;grid-template-columns:1fr;gap:clamp(2px,.22vw,3px);
  background:var(--dark);
}
.steps li{position:relative;overflow:hidden;background:var(--dark-2)}
.steps img{
  width:100%;aspect-ratio:3/2;object-fit:cover;filter:saturate(.92);
  transform:scale(1.02);transition:transform 1.1s var(--ease),filter 1.1s var(--ease);
}
.steps li::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,8,9,0) 36%,rgba(6,8,9,.44) 63%,rgba(6,8,9,.88) 100%);
}
.steps li:hover img{transform:scale(1.07);filter:saturate(1)}
.st-b{
  position:absolute;z-index:1;left:0;right:0;bottom:0;
  padding:clamp(16px,2.2vw,28px);display:grid;gap:5px;color:#fff;
}
/* 번호는 얇고 크게. 굵게 쓰면 넉 장이 서로 소리를 지른다. */
.st-n{font:300 clamp(1.4rem,2.4vw,2rem)/1 var(--f-en);letter-spacing:-.04em;color:var(--gold-d)}
.st-b b{font-size:clamp(14.6px,1.6vw,17.4px);font-weight:700;letter-spacing:-.025em;line-height:1.35}
.st-b span{font-size:12.6px;line-height:1.6;color:rgba(255,255,255,.78)}
/* 넉 장이 나란히 서면 칸이 좁다. 세로로 세워야 사진이 살고 글자가 앉을 자리가 생긴다. */
@media (min-width:620px){.steps{grid-template-columns:repeat(2,1fr)}.steps img{aspect-ratio:4/5}}
@media (min-width:1040px){.steps{grid-template-columns:repeat(4,1fr)}}

/* ══ 맨 위로 — 본사 홈페이지와 같은 원형 버튼 ══════════════════════════════
   한 화면쯤 내려가면 나타난다. 모바일 하단 고정 지원 버튼(.apply-bar)이
   있는 화면에서는 그 위로 올려 겹치지 않게 한다. */
.to-top{
  position:fixed;z-index:80;right:clamp(16px,3vw,34px);bottom:clamp(16px,3vw,34px);
  width:clamp(56px,6vw,72px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;gap:2px;align-content:center;
  text-decoration:none;background:var(--ink);color:#fff;
  box-shadow:0 6px 24px rgba(0,0,0,.22);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s,background .25s var(--ease);
}
.to-top.on{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--gold)}
.to-top i{
  display:block;width:9px;height:9px;
  border-top:1.6px solid currentColor;border-right:1.6px solid currentColor;
  transform:rotate(-45deg) translate(-1px,1px);
}
.to-top span{font:600 8.5px/1 var(--f-en);letter-spacing:.16em}
/* 900px 아래에서는 하단에 고정 지원 바(.stick)가 깔린다. 그 위로 올려 안 겹치게. */
@media (max-width:899px){.to-top{bottom:calc(clamp(16px,3vw,34px) + 62px)}}
@media (prefers-reduced-motion:reduce){.to-top{transition:opacity .2s}}

/* ══ 사진 띠 — 글자 없이 사진만 ═══════════════════════════════════════════ */
.strip{position:relative;overflow:hidden;background:var(--dark);line-height:0}
.strip img{width:100%;height:clamp(230px,44vw,600px);object-fit:cover}
.strip-tall img{height:clamp(300px,54vw,760px)}

/* ══ SYSTEM — 어두운 판 위 화면 캡처 ══════════════════════════════════════
   캡처는 잘라 쓰면 안 된다. 액자에 넣어 통째로 보여준다. */
.sys{background:var(--dark);color:var(--on-dark);padding:clamp(92px,14vw,190px) 0}
.sys-h{
  font-size:clamp(1.5rem,4.2vw,2.9rem);font-weight:300;line-height:1.3;
  letter-spacing:-.048em;color:#fff;max-width:22ch;
}
.sys-h b{color:var(--gold-d);font-weight:400}
.sys-p{
  margin-top:clamp(26px,3.2vw,38px);max-width:60ch;
  font-size:16.2px;line-height:1.95;color:var(--on-dark-2);
}
.sys-p b{color:#fff;font-weight:700}
.shots{
  margin-top:clamp(40px,5vw,64px);
  display:grid;gap:clamp(16px,2.2vw,26px);
}
@media (min-width:820px){.shots{grid-template-columns:repeat(2,1fr)}}
.shots figure{margin:0;display:grid;gap:14px;align-content:start}
.shots .fr{
  border:1px solid var(--line-d2);background:var(--dark-2);
  padding:clamp(8px,1vw,12px);border-radius:var(--r);overflow:hidden;cursor:zoom-in;
  transition:border-color .2s var(--ease);
}
.shots .fr:hover{border-color:var(--gold-d)}
/* 원본 비율이 서로 다르다(1300×702 · 1300×820). 그대로 두면 두 액자의 키가 달라
   설명 줄까지 어긋난다. 같은 비율 상자에 위 기준으로 담아 높이를 맞춘다.
   잘린 아래쪽은 눌러서 원본 그대로 볼 수 있다. */
.shots img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top center;border-radius:1px}
.shots figcaption{font-size:13.4px;line-height:1.75;color:var(--on-dark-2)}
.shots figcaption b{display:block;color:#fff;font-weight:700;font-size:14.4px;margin-bottom:3px}

/* 이 페이지에 카드는 없다. 강조는 골드 세로선으로만 한다(TERMS 와 같은 장치). */
.callout-d{
  margin-top:clamp(44px,5.4vw,68px);max-width:74ch;
  padding-left:clamp(18px,2.4vw,28px);border-left:2px solid var(--gold-d);
  font-size:16.2px;line-height:1.95;color:var(--on-dark-2);
}
.callout-d b{color:#fff;font-weight:700}

/* ══ CHANNEL — 근거 캡처 ══════════════════════════════════════════════════ */
.proof{
  margin-top:clamp(44px,6vw,80px);
  display:grid;gap:clamp(26px,3.4vw,48px);align-items:start;
}
/* 큰 문장 바로 아래 오는 경우 — say-sub 가 쥐고 있던 윗선을 여기가 대신 받는다.
   글은 전부 오른쪽 칸에 모으고 왼쪽은 근거 캡처만 둔다. */
.proof-top{
  margin-top:clamp(40px,5vw,64px);
  padding-top:clamp(28px,3.4vw,40px);border-top:1px solid var(--line);
}
@media (min-width:900px){.proof{grid-template-columns:minmax(0,.82fr) minmax(0,1fr)}}
.proof figure{margin:0;display:grid;gap:14px}
.proof .fr{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--tint);cursor:zoom-in}
.proof figcaption{font-size:13.4px;line-height:1.78;color:var(--ink-3)}
.proof figcaption b{display:block;color:var(--ink);font-weight:700;font-size:14.6px;margin-bottom:4px}
.proof-side{display:grid;gap:clamp(30px,4.4vw,60px);align-content:start}

/* 왼쪽 캡처가 크다. 글씨를 본문 기본값보다 한 단 올려 사진과 무게를 맞춘다. */
.ps-main{display:grid;gap:clamp(16px,2vw,22px)}
/* 문장 → 버튼 → 주석 세 줄. 붙어 있으면 버튼이 문장에 딸린 각주처럼 보인다. */
.ps-foot{display:grid;gap:clamp(20px,2.4vw,28px);justify-items:start;align-content:start}
.proof-side p{font-size:18.4px;line-height:1.92;color:var(--ink-2)}
.proof-side .lead{font-size:clamp(19px,1.5vw,21.5px);line-height:1.86;color:var(--ink)}
.proof-side b{color:var(--ink);font-weight:700}

/* 주석은 왼쪽 사진 설명 줄과 같은 크기 · 같은 색으로 맞춘다.
   (.proof-side p 가 18.4px 라 이걸 안 걸면 주석이 본문만큼 커진다) */
.proof-side .fine{font-size:13.4px;line-height:1.78;color:var(--ink-3)}

/* 오른쪽 글은 위에서부터 한 덩어리로 흐른다.
   버튼·주석을 사진 아래끝에 맞춰 내려 봤더니(align-self:end) 사진이 글보다 200px 넘게
   길어서 문단 사이가 통째로 비었다. 남는 높이는 글 사이가 아니라 칸 아래에 둔다. */
.ps-foot{margin-top:clamp(4px,1vw,10px)}
@media (min-width:900px){
  /* 캡처가 860:884(거의 정사각)라 칸을 넓게 주면 사진만 글보다 한참 길어진다.
     칸 폭을 줄여 사진 높이를 오른쪽 글 높이에 맞춘다. */
  .proof-top{align-items:start;grid-template-columns:minmax(0,.5fr) minmax(0,1fr)}
  .proof-top .proof-side{align-content:start}
  /* 브랜드 페이지의 인스타 캡처는 글보다 훨씬 길다. 글을 윗선에 붙이면 사진 옆
     아래쪽이 통째로 빈다. 여기서는 글 덩어리를 사진 가운데 높이에 맞춘다. */
  .proof:not(.proof-top){align-items:center}
  .proof:not(.proof-top) .proof-side{align-content:center}
}

/* ══ 수상 ═════════════════════════════════════════════════════════════════ */
/* 인증서가 훨씬 길다. 가운데로 맞추면 왼쪽 글이 허공에 뜬 것처럼 보인다.
   윗선을 맞춰야 둘이 한 묶음으로 읽힌다. */
.award{
  margin-top:clamp(46px,6vw,76px);
  display:grid;gap:clamp(22px,3vw,40px);align-items:stretch;
  padding-top:clamp(30px,3.6vw,44px);border-top:1px solid var(--line);
}
/* 인증서는 이 페이지에서 유일한 '서류' 증거다. 작게 넣으면 장식이 되고,
   크게 넣어야 읽힌다(누르면 더 크게 열린다). */
@media (min-width:760px){.award{grid-template-columns:minmax(0,1fr) clamp(210px,22vw,300px)}}
/* 연도와 제목은 같은 기준선에 놓는다. 가운데로만 맞추면 큰 숫자가 아래로 처져 보인다. */
.aw-l{display:flex;align-items:baseline;gap:clamp(18px,2.4vw,34px)}
/* 인증서가 길어서 왼쪽 아래가 비었다. 주의문구를 그 자리에 넣어 높이를 맞추고,
   수상 표기는 인증서 한가운데 높이에 오게 한다. */
.aw-txt{display:grid;grid-template-rows:1fr auto;gap:clamp(24px,3vw,40px)}
.aw-txt .aw-l{align-self:center}
.aw-txt .note{align-self:end;margin-top:0;max-width:none}
.aw-yr{
  font:300 clamp(2.6rem,7vw,4.4rem)/1 var(--f-en);letter-spacing:-.045em;
  color:var(--gold);flex:0 0 auto;
}
.aw-t{font-size:clamp(1.22rem,2.5vw,1.72rem);font-weight:600;letter-spacing:-.04em;line-height:1.45;color:var(--ink)}
.aw-s{margin-top:11px;font-size:clamp(14.5px,1.2vw,16px);line-height:1.75;color:var(--ink-2)}
.aw-ph{
  margin:0;align-self:start;   /* 왼쪽 칸이 늘어나도 인증서는 제 비율 그대로 */
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  cursor:zoom-in;background:var(--tint);
  transition:border-color .2s var(--ease),transform .25s var(--ease);
}
.aw-ph:hover{border-color:var(--gold-rule);transform:translateY(-2px)}
.aw-cap{
  margin-top:10px;font-size:12px;line-height:1.6;color:var(--ink-3);text-align:center;
}
@media (max-width:759px){.aw-ph{max-width:340px;margin-inline:auto}}

/* ══ APPLY — 좌 대형 제목 / 우 목록 ═══════════════════════════════════════ */
.cc{display:grid;gap:clamp(40px,5vw,72px)}
.cc-l .sh-en{color:#fff;margin-bottom:clamp(24px,3vw,36px)}
.cc-lead{
  font-size:clamp(1.4rem,3.2vw,2.2rem);font-weight:300;line-height:1.3;
  letter-spacing:-.045em;color:#fff;
}
.cc-note{margin-top:clamp(18px,2.2vw,26px);font-size:15.4px;line-height:1.9;color:var(--on-dark-2)}
.cc-note b{color:#fff;font-weight:700}

.ap-num{
  display:inline-block;margin-top:clamp(26px,3.2vw,38px);text-decoration:none;
  font:300 clamp(2rem,6.4vw,3.6rem)/1 var(--f-en);letter-spacing:-.03em;white-space:nowrap;
  color:var(--gold-d);font-variant-numeric:tabular-nums;
  border-bottom:1px solid rgba(223,192,121,.35);padding-bottom:6px;
  transition:color .2s,border-color .2s;
}
.ap-num:hover{color:#fff;border-bottom-color:#fff}
.ap-ctas{margin-top:clamp(22px,2.8vw,32px);display:flex;flex-wrap:wrap;gap:10px}

.cc-r>div{
  display:grid;gap:6px;padding:clamp(16px,2vw,20px) 0;
  border-bottom:1px solid var(--line-d);
}
.cc-r>div:first-child{border-top:1px solid var(--line-d)}
.cc-r dt{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--gold-d)}
.cc-r dd{margin:0;font-size:15.4px;line-height:1.7;color:var(--on-dark)}
.cc-r a{text-decoration:none;border-bottom:1px solid rgba(242,243,244,.3);transition:border-color .2s,color .2s}
.cc-r a:hover{color:var(--gold-d);border-bottom-color:var(--gold-d)}
@media (min-width:900px){
  .cc{grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);align-items:start}
  .cc-r>div{grid-template-columns:112px 1fr;gap:20px;align-items:baseline}
  .cc-r dt{padding-top:3px}
  /* 전화번호는 어떤 폭에서도 한 줄 유지. 2단 구간(900~1240px)은 왼쪽 칸이 379~522px뿐이라 58px 글자(465px 필요)가 두 줄로 깨졌다. 4.9vw = 칸 폭의 안전 상한. */
  .ap-num{font-size:clamp(2rem,4.9vw,3.6rem)}
}

/* ══ 푸터 ═════════════════════════════════════════════════════════════════ */
/* 아래 여백이 큰 것은 하단 고정 지원 버튼이 마지막 줄을 가리지 않게 하기 위함이다.
   버튼이 사라지는 900px 이상에서는 원래 값으로 돌린다. */
.foot{background:#07090A;color:var(--on-dark-2);padding:clamp(52px,6.4vw,84px) 0 108px}
.foot-mark{width:152px;opacity:.9}
.foot-co{margin-top:28px;padding-top:26px;border-top:1px solid var(--line-d);font-size:13.6px;line-height:1.9;color:var(--on-dark-2)}
.foot-co b{color:var(--on-dark);font-size:14.6px;font-weight:700}
.foot-note{margin-top:22px;font-size:12.2px;line-height:1.85;color:var(--on-dark-3);max-width:96ch}
.foot-copy{margin-top:14px;font-size:12.2px;color:var(--on-dark-3)}
@media (min-width:900px){.foot{padding-bottom:clamp(52px,6.4vw,84px)}}

/* ══ 모바일 하단 고정 지원 ════════════════════════════════════════════════
   본사 사이트에는 없다. 여기는 채용이라 전화 거는 것이 목적이다. */
.stick{
  position:fixed;z-index:80;left:0;right:0;bottom:0;
  display:grid;grid-template-columns:1.4fr 1fr;gap:1px;
  background:rgba(255,255,255,.12);
  transform:translateY(105%);transition:transform .34s var(--ease);
  padding-bottom:env(safe-area-inset-bottom);
}
.stick.on{transform:none}
.stick a{
  display:grid;place-items:center;text-decoration:none;
  font-weight:700;font-size:15px;letter-spacing:-.02em;padding:16px 10px;
}
.s-main{background:var(--gold-d);color:#151312}
.s-sub{background:var(--dark);color:#fff}
@media (min-width:900px){.stick{display:none}}

/* ══ 캡처 확대 ════════════════════════════════════════════════════════════ */
#lightbox{
  position:fixed;inset:0;z-index:150;display:none;place-items:center;
  background:rgba(6,8,9,.94);padding:clamp(16px,4vw,48px);cursor:zoom-out;
}
#lightbox.on{display:grid}
#lightbox img{max-width:100%;max-height:88vh;object-fit:contain}
.lb-x{
  position:absolute;top:14px;right:14px;width:44px;height:44px;cursor:pointer;
  background:none;border:1px solid rgba(242,243,244,.34);border-radius:var(--r);
  color:#fff;font-size:22px;line-height:1;
}
.lb-hint{position:absolute;left:0;right:0;bottom:18px;text-align:center;font-size:12.5px;color:var(--on-dark-3)}

/* ══════════════════════════════════════════════════════════════════════════
   brand-v7 전용 — 개인 브랜드 지원 페이지
   같은 판을 그대로 쓰고, 이 페이지에만 필요한 셋만 더한다.
   ① 상단바 되돌아가기  ② 가는 선으로만 나눈 목록 행  ③ 화면 캡처 액자 격자
   여기도 카드(테두리 상자)는 만들지 않는다. 액자는 캡처를 담는 그릇일 뿐이다.
   ══════════════════════════════════════════════════════════════════════════ */
.gnb-back{
  margin-left:auto;display:none;align-items:center;gap:7px;
  font:600 13px/1 var(--f);color:var(--ink-2);text-decoration:none;
  padding:6px 0;transition:color .2s;
}
.gnb-back:hover{color:var(--ink)}
.gnb-back+.gnb-cta{margin-left:22px}
@media (min-width:700px){.gnb-back{display:inline-flex}}

.rows{margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--line)}
.rows li{
  display:grid;gap:12px;
  padding:clamp(26px,3.2vw,40px) 0;border-bottom:1px solid var(--line);
}
@media (min-width:860px){
  .rows li{grid-template-columns:minmax(0,.68fr) minmax(0,1fr);gap:clamp(24px,3vw,52px);align-items:start}
}
.rw-k{font:600 10.5px/1 var(--f-en);letter-spacing:.14em;color:var(--gold);margin-bottom:13px;display:block}
.rw-t{font-size:clamp(1.15rem,2.4vw,1.6rem);font-weight:300;letter-spacing:-.045em;line-height:1.35;color:var(--ink)}
.rw-p{font-size:16.2px;line-height:1.95;color:var(--ink-2)}
.rw-p b{color:var(--ink);font-weight:700}

.frames{margin-top:clamp(36px,4.4vw,60px);display:grid;gap:clamp(16px,2.2vw,26px);grid-template-columns:1fr}
@media (min-width:620px){.frames.two,.frames.four{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.frames.four{grid-template-columns:repeat(4,1fr)}}
.frames figure{margin:0;display:grid;gap:12px;align-content:start}
.frames .fr{
  border:1px solid var(--line);background:var(--tint);border-radius:var(--r);
  overflow:hidden;cursor:zoom-in;padding:clamp(7px,.9vw,11px);
  transition:border-color .2s var(--ease);
}
.frames .fr:hover{border-color:var(--gold-rule)}
.frames .fr img{width:100%;display:block}
/* 넷은 원본 비율이 제각각(1.10 · 1.19 · 1.15 · 0.84)이라 담기만 하면(contain)
   네 장이 서로 다른 크기로 앉는다. 정사각 상자에 꽉 채워 크기를 똑같이 맞춘다.
   위 기준으로 담아 페이지 머리부터 보이게 하고, 눌러서 원본 전체를 볼 수 있다. */
.frames.four .fr img{aspect-ratio:1/1;object-fit:cover;object-position:top center}
.frames.two .fr img{aspect-ratio:5/6;object-fit:cover;object-position:top center}
.frames figcaption{font-size:13.2px;line-height:1.7;color:var(--ink-3)}
.frames figcaption b{display:block;color:var(--ink);font-weight:700;font-size:14.2px;margin-bottom:3px}
.frames-cap{margin-top:clamp(18px,2.2vw,26px);font-size:13.6px;line-height:1.8;color:var(--ink-3)}
.frames-cap b{color:var(--ink);font-weight:700}

/* 어두운 판 위에 얹는 근거 캡처 */
.cred .proof{margin-top:clamp(40px,5vw,64px)}
.cred .proof .fr{border-color:var(--line-d2);background:var(--dark-2)}
.cred .proof figcaption{color:var(--on-dark-2)}
.cred .proof figcaption b{color:#fff}
.cred .proof-side p{color:var(--on-dark-2)}
.cred .proof-side .lead,.cred .proof-side b{color:#fff}
.cred .proof-side .fine{color:var(--on-dark-3)}

@media print{
  .tl-live-tag{display:none!important}
  .gnb,.skip,.hero-scroll,.stick,#lightbox{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .rv,.rv-s>*{opacity:1!important;transform:none!important}
  .rv-img img,.tiles img{transform:none!important}
  .hero{min-height:0;padding:0 0 18pt}
  .cred-bg,.cred::after{display:none}
  .sec,.cred-in,.sys{padding:18pt 0}
  .sec-dark,.cred,.sys,.foot{background:#fff!important;color:#000!important}
  .sh-en,.cd-v,.cc-lead,.sys-h,.ap-num{color:#000!important}
  .sh-ko,.cd-n,.cc-note,.sys-p,.foot-co,.foot-note,.cred-say p{color:#333!important}
  .tiles li::after{display:none}
  .tl-b{position:static;color:#000;padding:8pt 0}
  .tl-m{color:#555}
}