/* 레버홀딩스 홈페이지 — 공통 토큰·바탕·반복 부품(언덕 머리, 마퀴, 섹션 머리, 캡슐 버튼, 등장) */
:root {
  --ivory: #ECE6DA;
  --ivory-deep: #DDD4C4;
  --paper: #F4F0E8;
  --ink: #121212;
  --ink-2: #1B1A19;
  --ink-3: #262523;
  --sub: #6E6A63;
  --sub-dk: #9C968B;
  --line: #CDC4B4;
  --line-dk: #2E2D2A;
  --fran: #E0612E;
  --source: #B22834;
  --fnb: #2E8B57;
  --cast: #2F5DA8;
  --media: #B8862B;
  --jby-ink: #5C0000; --jby: var(--jby-ink);
  --accent: var(--fran);
  --sans: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --gut: clamp(20px, 3.4vw, 56px);
  --wrap: 1320px;
  --hd-h: 84px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
  --tri: polygon(50% 0, 100% 100%, 0 100%);
  --track: -0.035em;
  /* 커서 = 빛나는 원(흰 심 → 주황 → 투명), 링크 위에서 커짐 */
  --cur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23FFFFFF'/%3E%3Cstop offset='.18' stop-color='%23FFF3E8'/%3E%3Cstop offset='.36' stop-color='%23E0612E'/%3E%3Cstop offset='.55' stop-color='%23E0612E' stop-opacity='.38'/%3E%3Cstop offset='1' stop-color='%23E0612E' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='14.0' cy='14.0' r='14.0' fill='url(%23g)'/%3E%3C/svg%3E") 14 14, auto;
  --cur-hand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23FFFFFF'/%3E%3Cstop offset='.18' stop-color='%23FFF3E8'/%3E%3Cstop offset='.36' stop-color='%23E0612E'/%3E%3Cstop offset='.55' stop-color='%23E0612E' stop-opacity='.38'/%3E%3Cstop offset='1' stop-color='%23E0612E' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='20.0' cy='20.0' r='20.0' fill='url(%23g)'/%3E%3C/svg%3E") 20 20, pointer;
  color-scheme: only light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; cursor: var(--cur); }
html.lenis, html.lenis body { height: auto; }
/* 오른쪽 스크롤바: 맥 기본(반투명·숨김) 대신 늘 보이는 진한 막대 — 크롬·사파리는 ::-webkit-scrollbar, 파이어폭스는 scrollbar-color */
html::-webkit-scrollbar { width: 10px; }
html::-webkit-scrollbar-track { background: var(--ink); }
html::-webkit-scrollbar-thumb { background: var(--ivory-deep); border: 2px solid var(--ink); border-radius: 6px; }
html::-webkit-scrollbar-thumb:hover { background: var(--accent); }
@supports not selector(::-webkit-scrollbar) { html { scrollbar-color: var(--ivory-deep) var(--ink); } }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--ink); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.7; word-break: keep-all; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a, button, summary, label, [role="button"], input[type="radio"], input[type="checkbox"] { cursor: var(--cur-hand); }
input, textarea { cursor: text; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
h1, h2, h3 { letter-spacing: var(--track); line-height: 1.22; font-weight: 700; }
svg.logo { display: block; width: 100%; height: auto; color: currentColor; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gut); }
.pg { position: relative; z-index: 2; background: var(--ink); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* 구역 색 — data-tone 으로 머리 글자색도 함께 바뀐다 */
.tone-dk { background: var(--ink); color: var(--ivory); --jby: color-mix(in srgb, var(--jby-ink) 50%, var(--ivory)); }   /* 전배연 적갈색은 어두운 바탕에서 안 보여 밝힌 값 */
.tone-lt { background: var(--ivory); color: var(--ink); }

/* 언덕 머리(홈·하위 페이지 공통): 아이보리 하늘 → 먹색 언덕 */
.hill { position: relative; min-height: 100svh; overflow: hidden; background: var(--ivory); color: var(--ink); isolation: isolate; }
.hill-sky { position: absolute; inset: 0; z-index: -2; background: radial-gradient(120% 70% at 50% 100%, var(--paper) 0%, var(--ivory) 46%, #E4DDCF 100%); }
.hill-land { position: absolute; inset: 0; z-index: -1; }   /* 스크롤 연출은 이 겉 상자만 움직임(안쪽 등장 translate 와 안 겹치게) */
.hill-mound { --top: 66%; position: absolute; left: 50%; top: var(--top); width: max(190vw, 1900px); aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: var(--ink); z-index: -1; box-shadow: 0 -1px 0 0 rgb(255 255 255 / .06) inset; }
.hill-mound::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(closest-side at 50% 3%, rgb(255 255 255 / .08), transparent 70%); }
.hill-shade { position: absolute; left: 50%; translate: -50% 0; width: 44vw; height: 3.2vw; border-radius: 50%; background: radial-gradient(closest-side, rgb(18 18 18 / .22), transparent); filter: blur(6px); z-index: -1; }
.hill-below { position: absolute; left: 0; right: 0; bottom: 0; top: calc(var(--top, 66%) + 9vh); display: grid; align-content: start; justify-items: center; text-align: center; color: var(--ivory); padding-inline: var(--gut); }
.hill-kicker { font-size: 13px; font-weight: 600; letter-spacing: .16em; color: var(--accent); text-transform: uppercase; }
.hill-line { margin-top: 12px; font-size: clamp(24px, 2.6vw, 40px); font-weight: 700; letter-spacing: var(--track); line-height: 1.3; }
.hill-sub { margin-top: 10px; font-size: 15px; font-weight: 300; color: var(--sub-dk); }

/* 마퀴 띠 */
.mq { --speed: 26s; overflow: hidden; white-space: nowrap; padding: 12px 0; font-size: 14px; font-weight: 500; letter-spacing: .04em; color: var(--accent); border-block: 1px solid var(--line-dk); }
.mq-track { display: inline-flex; align-items: center; gap: 22px; animation: mq var(--speed) linear infinite; will-change: transform; }
.mq > .mq-track > span { display: inline-flex; align-items: center; gap: 22px; }
.mq > .mq-track > span::after { content: ""; width: 7px; height: 6px; background: currentColor; clip-path: var(--tri); }
.mq[data-dir="right"] .mq-track { animation-direction: reverse; }
@keyframes mq { to { transform: translateX(calc(var(--mq-shift, 50%) * -1)); } }

/* 섹션 머리: 작은 심볼 + 제목 + 가는 밑선 */
.sh { display: grid; justify-items: center; text-align: center; gap: 10px; }
.sh-sym { width: 40px; color: currentColor; opacity: .9; }
.sh h2 { font-size: clamp(30px, 2.8vw, 40px); }
.sh::after { content: ""; width: min(420px, 70vw); height: 1px; margin-top: 10px; background: linear-gradient(90deg, transparent, currentColor 50%, transparent); opacity: .35; }
.sh-lede { max-width: 640px; margin: 28px auto 0; text-align: center; font-size: 17px; font-weight: 300; line-height: 1.75; }
.tone-dk .sh-lede { color: #CFC9BE; }
.tone-lt .sh-lede { color: var(--sub); }

/* 바뀌는 낱말 한 줄: 「우리는 사장님의 [창업] 파트너입니다」 */
.roll { margin-top: 44px; text-align: center; font-size: clamp(26px, 3.5vw, 51px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.roll-word { display: inline-block; vertical-align: bottom; height: 1.25em; overflow: hidden; color: var(--accent); }
.roll-in { display: block; transition: translate .6s var(--ease), opacity .4s; }
.roll-in.is-out { translate: 0 -100%; opacity: 0; }
.roll-in.is-pre { translate: 0 100%; opacity: 0; transition: none; }

/* 브랜드 이름 칩(흐르는 띠 안) */
.chip { flex: none; padding: 14px 28px; border-radius: 14px; background: #fff; color: var(--c); font-size: 17px; font-weight: 800; letter-spacing: -0.02em; box-shadow: 0 10px 24px -14px rgb(18 18 18 / .35); }

/* 캡슐 버튼(액체 금속 알약 이미지) */
.cap { position: relative; display: inline-grid; place-items: center; width: 168px; aspect-ratio: 480 / 104; background: url(../cta-pill.webp) center / contain no-repeat; color: var(--ink); font-size: 16px; font-weight: 700; letter-spacing: -0.01em; text-shadow: 0 0 2px rgb(255 255 255 / .9); filter: drop-shadow(0 8px 18px rgb(0 0 0 / .28)); transition: scale .5s var(--ease), filter .5s var(--ease); }
.cap:hover { scale: 1.05; filter: drop-shadow(0 12px 26px rgb(0 0 0 / .34)); }
.cap.is-sm { width: 132px; font-size: 14px; }

/* 화살표 알약 링크 */
.pill { display: inline-flex; align-items: center; gap: 4px; }
.pill b { padding: 10px 26px; border-radius: 999px; border: 1px solid currentColor; font-size: 15px; font-weight: 500; transition: background .3s, color .3s; }
.pill i { width: 40px; height: 40px; border-radius: 50%; border: 1px solid currentColor; display: grid; place-items: center; font-style: normal; transition: rotate .5s var(--ease), background .3s, color .3s; }
.pill:hover b, .pill:hover i { background: currentColor; }
.pill:hover b { color: var(--ink); }
.tone-lt .pill:hover b { color: var(--ivory); }
.pill:hover i { rotate: 45deg; }
.pill:hover i::before { color: var(--ink); }
.pill i::before { content: "↗"; font-size: 15px; }
.tone-lt .pill:hover i::before { color: var(--ivory); }

/* 등장: 줄 단위로 아래에서 올라옴(마스크), 요소 단위는 살짝 떠오름 */
.js [data-rv] { opacity: 0; translate: 0 28px; transition: opacity .9s var(--ease) var(--d, 0s), translate 1.1s var(--ease) var(--d, 0s); }
.js [data-rv].is-in { opacity: 1; translate: none; }
.ln { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.ln > span { display: block; }
.js [data-lines] .ln > span { translate: 0 105%; transition: translate 1.1s var(--ease); transition-delay: calc(var(--i, 0) * .09s + var(--d, 0s)); }
.js [data-lines].is-in .ln > span { translate: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-rv], .js [data-lines] .ln > span { opacity: 1; translate: none; transition: none; }
  .mq-track { animation-duration: calc(var(--speed) * 3); }
}
@media (max-width: 760px) {
  :root { --hd-h: 64px; }
  .hill-mound { --top: 62%; width: 320vw; }
  .hill-below { top: calc(62% + 4.5vh); }   /* 모바일 언덕선(62%)에 맞춰 올림 — 브라우저 아래 막대에 안 가리게 */
  .hill-shade { width: 70vw; height: 6vw; }
  .sh-lede { font-size: 15px; }
}

/* 끌 수 있는 띠(site.js): 세로 스크롤은 그대로, 가로는 손으로 */
.is-drag-belt { touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: var(--cur-hand); }
.is-drag-belt .mq-track { animation: none; }
.is-drag-belt img { pointer-events: none; }
/* 브랜드 로고 타일: 종이 바탕 위에 로고, 로고 파일이 없는 곳은 글자 */
/* 칸은 한 크기, 로고는 site.js가 비율별로 같은 넓이가 되게 크기를 매김 */
.lg-tile { flex: none; display: grid; place-items: center; box-sizing: border-box; width: 232px; height: 108px; padding: 18px 28px; border-radius: 20px; background: var(--paper); box-shadow: 0 0 0 1px rgb(18 18 18 / .06), 0 20px 40px -30px rgb(18 18 18 / .4); }
.lg-tile img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.lg-tile.is-type b { font-size: 24px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); }
@media (max-width: 860px) {
  .lg-tile { width: 168px; height: 84px; padding: 14px 20px; border-radius: 16px; }
  .lg-tile.is-type b { font-size: 19px; }
}