/* 라임 크리에이티브 — 2026-09-04
   ★ 흰 바탕 · 포인트는 인디고 하나 (블랙+라임은 폐기, 대표 확정)
   ★ 폰트 Pretendard Variable — onthe.ai 와 같은 것
   ★★ 애니메이션은 **전부 CSS** 다. 자바스크립트를 한 줄도 쓰지 않는다.
      우리가 파는 말이 「AI 크롤러는 JS 를 실행하지 않는다」인데
      정작 우리 홈페이지를 AI 가 못 읽으면 앞뒤가 안 맞는다.
      `animation-timeline: view()` 를 쓰되, 지원하지 않는 브라우저에서는
      **그냥 처음부터 보이게** 두어 글이 사라지지 않게 한다. */

:root{
  --ink:#0A0A0B;          /* onthe.ai 와 같은 먹 */
  --gray:#71717A;         /* 본문 회색 */
  --line:#E4E4E7;
  --bg:#FFFFFF;
  --soft:#F7F7F9;
  /* ★ 2026-09-04 대표 확정 — 포인트는 **밝은 주황** 하나.
     (블랙+라임 → 짙은 초록 → 밝은 주황. 앞의 둘은 대표가 직접 물리셨다.)
     ⚠ 주황은 태생적으로 밝아 흰 바탕 대비가 낮다. 넷을 재 보고 3.56:1 인
       #EA580C 를 골랐다 — 이보다 밝으면(#F97316 은 2.8) 큰 제목조차 흐려진다.
       버튼 글자는 그래서 굵기를 800 으로 올려 읽힘을 보완했다. */
  --point:#EA580C;       /* 밝은 주황 — 흰 바탕 대비 3.56:1 */
  --point-d:#C2410C;     /* 눌렀을 때·hover */
  --point-l:#FFF1E7;     /* 옅은 배경 */
  --point-hi:#FDBA74;    /* 검은 띠 위에서 쓰는 밝은 판 */
}

/* ── 제목 폰트 (Paperlogy 8 ExtraBold) ──────────────
   2026-09-04 대표가 후보 넷 중 직접 고르셨다.
   빌더가 **쓰인 글자만** 남겨 굽는다 → `/paperlogy.woff2`
   ★ 빌더는 이 줄의 파일 이름을 읽어 그대로 저장한다. 폰트를 갈 때는
     여기 이름만 바꾸면 되고, 빌더와 어긋날 수가 없다.
   `swap` 이라 폰트가 늦어도 글은 먼저 보인다. */
@font-face{font-family:"Paperlogy";src:url(/paperlogy.woff2) format("woff2");
           font-weight:100 900;font-style:normal;font-display:swap}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  background:var(--bg); color:var(--ink);
  font-size:16px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.wrap.narrow{max-width:760px}
.center{text-align:center}
b{font-weight:700}
/* ⚠ 밝은 주황은 흰 바탕 대비가 3.56 뿐이다. 본문 크기 강조는 진한 주황으로
   내리고, **큰 제목의 강조만** 밝은 주황을 쓴다(큰 글자는 3:1 이면 읽힌다).
   색을 초록에서 주황으로 바꾸면 이 구분이 새로 필요해진다 — 초록은 8.4 였다. */
em{font-style:normal;color:var(--point-d)}
h1 em,h2 em{color:var(--point)}

/* ── 스크롤 움직임 (CSS 만) ───────────────────
   ★ 2026-09-04 대표 — *"스크롤에 따라 훨씬 더 다양하게 움직이는 것"*
     한 가지 등장만 쓰던 것을 **여섯 가지**로 늘렸다.
     ⚠ 지원하지 않는 브라우저에서는 **처음부터 보이게** 두어 글이 사라지지 않는다.
        이것이 우리가 파는 원칙이다 — 움직임은 장식이고 글이 먼저다. */
.reveal,.rl,.rr,.rz,.rt,.rb{opacity:1;transform:none}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .reveal{opacity:0;transform:translateY(20px);animation:rise .8s ease-out forwards}
    .rl{opacity:0;transform:translateX(-38px);animation:slideL .9s cubic-bezier(.2,.7,.2,1) forwards}
    .rr{opacity:0;transform:translateX(38px);animation:slideR .9s cubic-bezier(.2,.7,.2,1) forwards}
    .rz{opacity:0;transform:scale(.9);animation:zoom .85s cubic-bezier(.2,.8,.25,1) forwards}
    .rt{opacity:0;transform:translateY(26px) rotate(-2.4deg);animation:tilt .9s cubic-bezier(.2,.8,.25,1) forwards}
    .rb{opacity:0;transform:translateY(34px);animation:rise 1s cubic-bezier(.16,1,.3,1) forwards}
    .reveal,.rl,.rr,.rz,.rt,.rb{animation-timeline:view();animation-range:entry 0% entry 58%}
    .d1{animation-delay:.07s}.d2{animation-delay:.14s}
    .d3{animation-delay:.21s}.d4{animation-delay:.28s}

    /* 시차 — 배경 띠가 본문보다 천천히 흐른다 */
    .par{animation:par linear both;animation-timeline:view();animation-range:cover}
    /* 큰 제목은 지나갈 때 살짝 밀린다 */
    h1{animation:drift linear both;animation-timeline:view();animation-range:exit}
    /* 머리 위 진행 막대 */
    .prog{animation:grow linear both;animation-timeline:scroll(root)}
  }
}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes slideL{to{opacity:1;transform:none}}
@keyframes slideR{to{opacity:1;transform:none}}
@keyframes zoom{to{opacity:1;transform:none}}
@keyframes tilt{to{opacity:1;transform:none}}
@keyframes par{from{transform:translateY(26px)}to{transform:translateY(-26px)}}
@keyframes drift{to{transform:translateY(-26px);opacity:.55}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ── 배경 3D — 페이지 전체를 따라온다 ───────── */
#bg3d{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;
      transition:opacity .6s ease}
#bg3d canvas{display:block;width:100%;height:100%}
body>header,body>section,body>footer{position:relative;z-index:1}
/* 글이 읽히도록 각 구역에 흰 막을 깐다 — 3D 는 그 뒤에서 움직인다.
   ⚠ 처음엔 .82 로 깔았더니 **3D 가 통째로 가려졌다.** 글이 읽히는 선에서 최대한 열어 둔다.
     히어로는 첫인상이라 가장 옅게, 글이 빽빽한 구역은 조금 진하게. */
.hero{background-color:rgba(255,255,255,.42)}
.sec{background-color:rgba(255,255,255,.72)}
.band{background-color:rgba(247,247,249,.80)}
.band.dark{background-color:rgba(10,10,11,.94)}

/* ── 머리 진행 막대 ─────────────────────────── */
.prog{position:fixed;top:0;left:0;height:3px;width:100%;z-index:60;
      background:var(--point);transform-origin:0 50%;transform:scaleX(0)}

/* ── 머리 ────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);
     backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:28px;height:62px}
.brand{font-weight:800;font-size:17px;letter-spacing:-.03em;color:var(--ink);text-decoration:none}
.brand span{color:var(--gray);font-weight:600}
.nav-menu{display:flex;gap:22px;margin-left:auto}
.nav-menu a{font-size:14.5px;color:var(--gray);text-decoration:none;transition:color .2s}
.nav-menu a:hover{color:var(--point)}
@media(max-width:840px){.nav-menu{display:none}}

/* ── 버튼 ────────────────────────────────────── */
.btn{display:inline-block;background:var(--point);color:#fff;font-weight:800;font-size:15px;
     letter-spacing:-.02em;padding:13px 24px;border-radius:10px;text-decoration:none;
     transition:transform .18s ease, background .18s ease, box-shadow .18s ease}
.btn:hover{background:var(--point-d);transform:translateY(-2px);box-shadow:0 10px 24px rgba(234,88,12,.26)}
.btn-sm{padding:9px 16px;font-size:14px;margin-left:4px}
.btn-lg{padding:17px 34px;font-size:16.5px}
.btn-ghost{background:transparent;color:var(--point-d);border:1px solid var(--line)}
.btn-ghost:hover{background:var(--point-l);color:var(--point-d);box-shadow:none}

/* ── 히어로 ──────────────────────────────────── */
.hero{position:relative;overflow:hidden;padding:96px 0 84px;background:
  radial-gradient(1100px 420px at 78% -8%, var(--point-l), transparent 62%), var(--bg)}
/* ★ 배경 3D — 오른쪽에 크게 깔되 글 자리(왼쪽)로 갈수록 사라진다.
   칼럼 사이트 히어로와 같은 생각이다. 글이 우선이고 그림은 배경이다. */
#hero3d{position:absolute;inset:0 0 0 auto;width:74%;pointer-events:auto;
  -webkit-mask-image:linear-gradient(100deg,transparent 0%,rgba(0,0,0,.4) 34%,#000 76%);
          mask-image:linear-gradient(100deg,transparent 0%,rgba(0,0,0,.4) 34%,#000 76%)}
#hero3d canvas{display:block;width:100%;height:100%}
.hero .wrap{position:relative;z-index:1}
@media(max-width:760px){#hero3d{width:100%;opacity:.5}}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--point-d);margin-bottom:18px}
h1{font-size:clamp(32px,4.4vw,46px);font-weight:800;letter-spacing:-.035em;line-height:1.26}
@media(min-width:1200px){h1{font-size:50px}}
.lead{margin-top:22px;font-size:17px;color:var(--gray);letter-spacing:-.01em;max-width:620px}
.cta{margin-top:34px;display:flex;gap:10px;flex-wrap:wrap}
.chips{list-style:none;display:flex;gap:8px;flex-wrap:wrap;margin-top:40px}
.chips li{font-size:13px;font-weight:600;color:var(--gray);background:var(--soft);
          border:1px solid var(--line);border-radius:999px;padding:6px 14px}

/* ── 구역 ────────────────────────────────────── */
.sec{padding:88px 0}
.band{padding:88px 0;background:var(--soft);border-block:1px solid var(--line)}
.band.dark{background:var(--ink);border-color:#1C1C1F}
.band.dark h2,.band.dark .s-num{color:#fff}
.band.dark .sub,.band.dark .note{color:#A1A1AA}
.band.dark .eyebrow{color:var(--point-hi)}
h2{font-size:clamp(24px,3.2vw,32px);font-weight:800;letter-spacing:-.025em;line-height:1.34}
.sub{margin-top:16px;font-size:16px;color:var(--gray);letter-spacing:-.01em;max-width:680px}
.note{margin-top:26px;font-size:14.5px;color:var(--gray);letter-spacing:-.01em}

/* ── 고민 카드 ───────────────────────────────── */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 24px;
      transition:transform .2s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(10,10,11,.07)}
.card p{font-size:16.5px;font-weight:700;letter-spacing:-.02em;line-height:1.55}
.card span{display:block;margin-top:10px;font-size:14px;color:var(--gray)}
@media(max-width:860px){.cards3{grid-template-columns:1fr}}

/* ── 단계 ────────────────────────────────────── */
.steps{list-style:none;margin-top:34px;display:grid;gap:12px}
.steps li{display:grid;grid-template-columns:38px 1fr;align-items:start;gap:14px;
          background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:18px 20px}
.steps .n{width:28px;height:28px;border-radius:8px;background:var(--point);color:#fff;
          font-size:13px;font-weight:800;display:grid;place-items:center}
.steps b{font-size:16px;letter-spacing:-.02em;grid-column:2}
/* ⚠ `em` 도 그리드 아이템이라 지정하지 않으면 **다음 줄 38px 칸**으로 떨어져
   글자가 한 자씩 세로로 쪼개진다. 실제로 그렇게 났다. */
.steps em{display:block;margin-top:3px;font-size:14.5px;color:var(--gray);grid-column:2}

/* ── 네 조건 ─────────────────────────────────── */
.four{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:34px}
.four div{background:#141417;border:1px solid #232327;border-radius:12px;padding:20px 18px;
          font-size:14.5px;font-weight:700;color:#fff;letter-spacing:-.02em;line-height:1.5}
.four b{display:block;color:var(--point-hi);font-size:18px;margin-bottom:8px}
.four em{display:block;margin-top:8px;font-size:13px;font-weight:400;color:#71717A}
@media(max-width:860px){.four{grid-template-columns:1fr 1fr}}

/* ── 숫자 ────────────────────────────────────── */
.score{display:flex;align-items:center;gap:20px;margin-top:38px;flex-wrap:wrap}
.s-box{flex:1;min-width:230px;background:#141417;border:1px solid #232327;border-radius:16px;padding:26px 24px}
.s-box.hi{border-color:var(--point);background:linear-gradient(160deg,#33170A,#141417)}
.s-label{font-size:13.5px;color:#A1A1AA;font-weight:600}
.s-num{font-size:56px;font-weight:800;letter-spacing:-.04em;line-height:1.1;margin-top:6px;color:#fff}
.s-num span{font-size:19px;font-weight:700;margin-left:4px;color:#A1A1AA}
.s-num.zero{color:#52525B}
.s-note{margin-top:8px;font-size:13.5px;color:#71717A}
.s-arrow{font-size:26px;color:#3F3F46}
@media(max-width:700px){.s-arrow{display:none}}

/* ── 두 갈래 ─────────────────────────────────── */
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:34px}
.col{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px 26px}
.col.hi{border-color:var(--point);box-shadow:0 0 0 3px var(--point-l)}
.tag{font-size:12.5px;font-weight:700;color:var(--point-d);letter-spacing:.01em}
.col h3{font-size:24px;font-weight:800;letter-spacing:-.03em;margin-top:4px}
.col ul{list-style:none;margin-top:18px;display:grid;gap:14px}
.col li b{display:block;font-size:15.5px;letter-spacing:-.02em}
.col li span{display:block;margin-top:2px;font-size:14px;color:var(--gray)}
@media(max-width:860px){.two{grid-template-columns:1fr}}

/* ── 링크 ────────────────────────────────────── */
.links{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:30px}
.lk{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 22px;
    text-decoration:none;transition:border-color .2s, transform .2s, box-shadow .2s}
.lk:hover{border-color:var(--point);transform:translateY(-2px);box-shadow:0 10px 24px rgba(234,88,12,.12)}
.lk b{display:block;font-size:16px;color:var(--ink);letter-spacing:-.02em}
.lk span{display:block;margin-top:3px;font-size:13.5px;color:var(--point)}
@media(max-width:700px){.links{grid-template-columns:1fr}}

/* ── 원장님이 하실 일 ────────────────────────── */
.doable{margin-top:28px;display:grid;gap:12px}
.doable p{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:baseline;
          background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:18px 22px}
.doable b{font-size:17px;color:var(--point);letter-spacing:-.02em}
.doable span{font-size:15.5px;letter-spacing:-.01em}

/* ── FAQ ─────────────────────────────────────── */
.faq{margin-top:28px;display:grid;gap:10px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:12px;padding:0 22px}
.faq summary{cursor:pointer;list-style:none;padding:18px 0;font-size:16px;font-weight:700;
             letter-spacing:-.02em;position:relative;padding-right:28px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:2px;top:16px;font-size:20px;
                    color:var(--point);font-weight:700;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{padding:0 0 20px;font-size:15px;color:var(--gray);letter-spacing:-.01em}

/* ── 마무리 ──────────────────────────────────── */
.cta-sec{background:radial-gradient(760px 320px at 50% 0%, var(--point-l), transparent 66%)}
.cta-sec .sub{margin-left:auto;margin-right:auto}
.fine{margin-top:16px;font-size:13.5px;color:var(--gray)}

/* ── 발 ──────────────────────────────────────── */
.foot{background:var(--ink);color:#A1A1AA;padding:44px 0;font-size:14px}
.f-brand{font-weight:800;color:#fff;font-size:16px;letter-spacing:-.02em}
.f-line{margin-top:6px}
.f-copy{margin-top:18px;font-size:12.5px;color:#52525B}

/* ── 히어로 AI 답변 카드 ─────────────────────
   ★ 2026-09-04 대표 — *"첫 화면이 임팩트가 부족하다. 시각화 자료가 필요하다"*
     우리 메시지를 한 장으로 말한다 — 환자가 묻고, 우리가 쌓은 글이 근거가 된다.
   ⚠ 움직임은 CSS 뿐이다. 글자는 HTML 에 그대로 있어 AI 도 읽는다.
     타이핑 라이브러리를 쓰면 글이 그 안에 갇혀 크롤러가 못 본다 — 그래서 안 쓴다. */
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:44px;align-items:center}
@media(max-width:940px){.hero-grid{grid-template-columns:1fr;gap:36px}}

.ai-card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  box-shadow:0 22px 60px rgba(10,10,11,.10), 0 2px 8px rgba(10,10,11,.04)}
.ai-bar{display:flex;align-items:center;gap:6px;padding:12px 16px;background:var(--soft);
  border-bottom:1px solid var(--line)}
.ai-bar .dot{width:9px;height:9px;border-radius:50%;background:#D4D4D8;display:inline-block}
.ai-bar span{margin-left:8px;font-size:12.5px;font-weight:700;color:var(--gray);letter-spacing:-.01em}
.ai-body{padding:22px 20px 20px}

/* 질문 — 한 글자씩 쳐 들어간다 */
.ai-q{background:var(--point-l);border-radius:12px 12px 12px 4px;padding:12px 15px;
  font-size:15px;font-weight:600;letter-spacing:-.02em;color:var(--point-d);
  display:inline-block;max-width:100%}
.ai-q .type{display:inline-block;white-space:nowrap;overflow:hidden;vertical-align:bottom;
  border-right:2px solid var(--point)}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .ai-q .type{width:0;animation:typing 2.1s steps(20,end) .5s forwards, caret .7s step-end infinite}
  }
}
@keyframes typing{to{width:100%}}
@keyframes caret{50%{border-color:transparent}}

/* 답변 — 질문이 끝난 뒤 하나씩 올라온다 */
.ai-a{margin-top:16px}
.ai-lead{font-size:14.5px;color:var(--gray);letter-spacing:-.01em}
.ai-list{list-style:none;margin-top:12px;display:grid;gap:8px;counter-reset:n}
.ai-list li{counter-increment:n;display:grid;grid-template-columns:22px 1fr;gap:10px;
  align-items:baseline;padding:11px 13px;border:1px solid var(--line);border-radius:10px;
  background:#fff}
.ai-list li::before{content:counter(n);font-size:12px;font-weight:800;color:var(--gray);
  width:19px;height:19px;border-radius:6px;background:var(--soft);display:grid;place-items:center}
/* ⚠ grid 자식은 **열을 지정하지 않으면 다음 줄 좁은 칸**으로 떨어져 글자가 세로로 쪼개진다.
   앞서 `.steps` 에서 똑같이 겪었다 — grid 안에 자식이 둘 이상이면 매번 지정한다. */
.ai-list li b{font-size:15px;letter-spacing:-.02em;grid-column:2}
.ai-list li span{display:block;margin-top:2px;font-size:12.5px;color:var(--gray);grid-column:2}
.ai-list li.hit{border-color:var(--point);background:var(--point-l);
  box-shadow:0 0 0 3px rgba(234,88,12,.08)}
.ai-list li.hit::before{background:var(--point);color:#fff}
.ai-list li.hit b{color:var(--point-d)}
.ai-src{margin-top:14px;padding-top:13px;border-top:1px dashed var(--line);
  font-size:12.5px;color:var(--gray);letter-spacing:-.01em}
.ai-src b{color:var(--point-d)}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .ai-a{opacity:0;animation:rise .6s ease-out 2.5s forwards}
    .ai-list li{opacity:0;transform:translateY(10px);animation:rise .5s ease-out forwards}
    .ai-list li:nth-child(1){animation-delay:2.9s}
    .ai-list li:nth-child(2){animation-delay:3.1s}
    .ai-list li:nth-child(3){animation-delay:3.3s}
    .ai-src{opacity:0;animation:rise .6s ease-out 3.7s forwards}
    /* 우리 병원 줄만 한 번 더 짚어 준다 */
    .ai-list li.hit{animation:rise .5s ease-out 2.9s forwards, pop 1.1s ease-out 3.9s}
  }
}
@keyframes pop{
  0%,100%{box-shadow:0 0 0 3px rgba(234,88,12,.08)}
  45%{box-shadow:0 0 0 8px rgba(234,88,12,.16)}
}

/* ════════════════════════════════════════════
   더 넣은 효과 — 2026-09-04 대표 *"과할 정도로"*
   ⚠ 전부 CSS 다. 글은 HTML 에 그대로 있다.
   ════════════════════════════════════════════ */

/* ── 아이콘 (Lucide, SVG 를 HTML 에 직접 박음) ── */
.ic,.ic-s,.ic-b,.ic-h,.ic-q{display:inline-block;vertical-align:-.14em;flex:none}
.ic-s{width:16px;height:16px}
.ic-b{width:22px;height:22px;color:var(--point-hi);margin-bottom:10px;display:block;
      transition:transform .35s cubic-bezier(.2,.8,.25,1)}
.ic-h{width:22px;height:22px;color:var(--point);vertical-align:-.16em}
.ic-q{width:26px;height:26px;color:var(--point);opacity:.28;margin-bottom:10px;display:block}
.four div:hover .ic-b{transform:scale(1.18) rotate(-6deg)}
.btn .ic-s{transition:transform .25s ease}
.btn:hover .ic-s{transform:translateX(3px)}
.lk .ic-s{opacity:.55;transition:transform .25s ease,opacity .25s ease}
.lk:hover .ic-s{transform:translateX(4px);opacity:1}

/* ── 숫자 세어 올리기 (JS 없이) ── */
@property --cv{syntax:'<integer>';initial-value:0;inherits:false}
.cnt{counter-reset:c var(--cv)}
.cnt::after{content:counter(c)}
/* ★★ 기본값이 **최종값**이다. 움직임을 끈 분(`prefers-reduced-motion`)이나
   scroll-timeline 을 지원하지 않는 브라우저에서는 애니메이션이 아예 안 도는데,
   기본을 0 으로 두면 그분들 화면에는 **「0편 → 0편」으로 굳는다.**
   이 페이지에서 48 은 장식이 아니라 **우리가 파는 근거 숫자**다. */
.cnt48{--cv:48}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .cnt48{animation:cnt48 1.6s cubic-bezier(.2,.8,.25,1) forwards;
           animation-timeline:view();animation-range:entry 10% entry 70%}
  }
}
@keyframes cnt48{from{--cv:0}to{--cv:48}}

/* ── 마우스를 따라오는 빛무리 (히어로) ── */
.hero{--mx:70%;--my:30%}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(420px 320px at var(--mx) var(--my), rgba(234,88,12,.10), transparent 70%);
  transition:background .25s ease}

/* ── 카드가 마우스 쪽으로 살짝 기운다 ── */
.card,.col,.lk,.s-box,.four div,.ai-card{transform-style:preserve-3d}
.card:hover,.lk:hover{transform:translateY(-4px) rotateX(1.6deg) rotateY(-1.6deg)}
.ai-card{transition:transform .5s cubic-bezier(.2,.8,.25,1),box-shadow .5s ease}
.ai-card:hover{transform:translateY(-6px) rotateX(1.2deg) rotateY(-2deg) scale(1.012);
  box-shadow:0 32px 80px rgba(10,10,11,.14)}

/* ── 흐르는 테두리 (AI 칸) ── */
.col.hi{position:relative}
.col.hi::before{content:"";position:absolute;inset:-1px;border-radius:16px;pointer-events:none;
  background:conic-gradient(from var(--a,0deg), transparent 0 72%, rgba(234,88,12,.55) 82%, transparent 92%);
  animation:spin 5.5s linear infinite;-webkit-mask:
    linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;padding:1.5px}
@property --a{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes spin{to{--a:360deg}}

/* ── 배경 격자 (아주 옅게) ── */
.sec::before,.band::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background-image:linear-gradient(rgba(10,10,11,.028) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(10,10,11,.028) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent);
          mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent)}
.sec,.band{position:relative}
.band.dark::before{background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px)}

/* ── 거래처 흐르는 띠 ── */
.marquee{overflow:hidden;border-block:1px solid var(--line);background:#fff;padding:15px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.mq-in{display:flex;gap:26px;width:max-content;animation:mq 34s linear infinite;
  font-size:14.5px;font-weight:700;color:var(--gray);letter-spacing:-.02em;white-space:nowrap}
.mq-in span:nth-child(even){color:var(--point);opacity:.45}
.marquee:hover .mq-in{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}

/* ── 버튼 반짝임 ── */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.32),transparent);
  transition:left .6s ease}
.btn:hover::after{left:130%}

/* ── 제목에 밑줄이 그어진다 ── */
h2{position:relative;display:inline-block}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    h2::after{content:"";position:absolute;left:0;bottom:-7px;height:3px;width:100%;
      background:var(--point);border-radius:2px;transform-origin:0 50%;transform:scaleX(0);
      animation:uline .8s cubic-bezier(.2,.8,.25,1) .25s forwards;
      animation-timeline:view();animation-range:entry 0% entry 55%}
    .band.dark h2::after{background:var(--point-hi)}
  }
}
@keyframes uline{to{transform:scaleX(1)}}

/* ── FAQ 열릴 때 부드럽게 ── */
.faq details[open] p{animation:rise .35s ease-out}
.faq details{transition:border-color .25s ease, box-shadow .25s ease}
.faq details[open]{border-color:var(--point);box-shadow:0 6px 20px rgba(234,88,12,.08)}

/* ══════════════════════════════════════════════════════════════
   2026-09-04 대표 지시 — 「1부터 5 다 넣어줘」
   ① 관성 스크롤(Lenis) ② 고정 구간 ③ 커서 자석
   ④ 섹션마다 배경색이 서서히 ⑤ 글자 한 자씩 떠오르는 큰 제목
   ★ 다섯 모두 **장식**이다. 글은 HTML 에 그대로 남아 크롤러가 읽는다.
   ══════════════════════════════════════════════════════════════ */

/* ── ① Lenis 가 요구하는 최소 규칙 ──────────────────
   ⚠ 관성 스크롤이 켜지면 `scroll-behavior:smooth` 와 싸워 앵커 이동이 튄다.
      그래서 lenis 가 붙은 동안만 auto 로 되돌린다. */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* ── ③ 커서 자석 ────────────────────────────────────
   ⚠ `transform` 이 아니라 **`translate`** 를 쓴다. `.btn:hover` 가 이미
      `transform:translateY(-2px)` 를 쓰고 있어 같은 속성에 얹으면 둘 중
      하나가 통째로 지워진다. `translate` 는 별개 속성이라 함께 걸린다. */
.mag{translate:var(--mgx,0) var(--mgy,0)}

/* ── ② 고정 구간 — 한 화면이 멈춰 있고 단계만 지나간다 ──
   ★★ sticky 는 **보이는 방식**일 뿐이다. 네 단계 글(<ol>)은 HTML 에 그대로
      있어 스크롤하지 않는 크롤러도 1·2·3·4 를 순서대로 읽는다. */
.stick-wrap{padding:0}
.stick{padding:88px 0}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference) and (min-width:861px){
    .stick-wrap{height:290vh;view-timeline-name:--stk;padding:0}
    .stick{position:sticky;top:0;height:100vh;display:grid;align-content:center;padding:0}
    .steps-stick li{animation:stepon linear both;animation-timeline:--stk;
                    transform-origin:0 50%;will-change:opacity,transform}
    /* 네 단계가 차례로 밝아진다. 겹치는 구간을 두어 딱딱 끊기지 않게 했다. */
    .steps-stick .s1{animation-range:contain  0% contain 28%}
    .steps-stick .s2{animation-range:contain 22% contain 52%}
    .steps-stick .s3{animation-range:contain 44% contain 74%}
    .steps-stick .s4{animation-range:contain 66% contain 100%}
    /* ⚠ 마지막 단계만 **끝까지 켜 둔다.** 다른 단계와 같은 keyframes 를 쓰면
       구간이 끝나는 순간 넷 다 흐려진 채로 화면 밖으로 밀려나간다.
       실제로 그렇게 났다 — 마무리 문장(★ 광고 자리가 없습니다)만 남고
       정작 결론인 4번이 꺼져 있었다. */
    .steps-stick .s4{animation-name:stepon4,stepborder4}
    .steps-stick li b{transition:none}
    /* 제목과 꼬리말은 고정 화면 안에서 먼저·나중에 */
    .stick .note{animation:noteon linear both;animation-timeline:--stk;
                 animation-range:contain 72% contain 92%}
  }
}
@keyframes stepon{
  0%  {opacity:.22;transform:translateY(14px) scale(.985)}
  26% {opacity:1;  transform:none}
  74% {opacity:1;  transform:none}
  100%{opacity:.34;transform:scale(.985)}
}
@keyframes noteon{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* 활성 단계만 초록 테두리 — 위 keyframes 와 같은 타이밍으로 */
.steps-stick li{border-radius:12px}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference) and (min-width:861px){
    .steps-stick li{animation-name:stepon,stepborder}
  }
}
@keyframes stepborder{
  0%{border-color:var(--line);background:var(--soft)}
  26%,74%{border-color:var(--point);background:var(--point-l)}
  100%{border-color:var(--line);background:var(--soft)}
}

/* ── ④ 스크롤에 따라 바탕색이 서서히 옮겨간다 ────────
   흰색에서 아주 옅은 초록으로 갔다가 다시 흰색으로 돌아온다.
   섹션이 반투명이라 이 색이 은은하게 비친다. */
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference){
    body{animation:bgshift linear both;animation-timeline:scroll(root)}
  }
}
@keyframes bgshift{
  0%  {background-color:#FFFFFF}
  28% {background-color:#FFF8F3}
  52% {background-color:#FFF0E4}
  76% {background-color:#FFF8F3}
  100%{background-color:#FFFFFF}
}

/* ── ⑤ 큰 제목이 한 글자씩 떠오른다 ─────────────────
   ⚠ 글자를 `<i>` 로 쪼개는 것은 **빌더**가 한다(build.py). 원본 HTML 은
      평범한 문장이라 문구를 고칠 때 사람이 글자를 셀 일이 없다.
   ⚠ 쪼개도 텍스트 노드는 이어져 있어 크롤러는 「환자는 네이버에서…」로 읽는다. */
.split .ch{display:inline-block;font-style:normal}
@media (prefers-reduced-motion: no-preference){
  .split .ch{opacity:0;animation:chup .62s cubic-bezier(.2,.85,.25,1) forwards;
             animation-delay:calc(var(--i,0) * 26ms)}
}
@keyframes chup{
  /* ⚠ 여기 `rotate` 를 넣지 않는다. 대표가 기울어진 제목을 싫어하신다 (2026-09-04) */
  from{opacity:0;transform:translateY(.42em);filter:blur(3px)}
  to  {opacity:1;transform:none;filter:none}
}
@keyframes stepon4{
  0%  {opacity:.22;transform:translateY(14px) scale(.985)}
  26% {opacity:1;transform:none}
  100%{opacity:1;transform:none}
}
@keyframes stepborder4{
  0%     {border-color:var(--line);background:var(--soft)}
  26%,100%{border-color:var(--point);background:var(--point-l)}
}

/* ══════════════════════════════════════════════════════════════
   2026-09-04 대표 — 「우리 회사 로고가 아예 없다」 · 「대표 문구 폰트가 마음에 안 든다」
   ══════════════════════════════════════════════════════════════ */

/* ── 라임 CI 마크 ────────────────────────────────────
   ★ `<img>` 가 아니라 **mask** 다. 머리(흰 바탕)에선 짙은 초록,
     바닥(검은 띠)에선 흰색으로 **파일 하나를 색만 바꿔** 쓴다.
     로고 파일을 색깔별로 두 벌 관리하면 한쪽만 고쳐지는 일이 반드시 난다.
   ★ 원본은 채용공고 고화질본(2700px)에서 뽑았다. 자산 폴더의 로고는
     120x70 이라 레티나 화면에서 뭉갠다. */
.ci{display:inline-block;vertical-align:-.18em;
    width:calc(var(--ci,20px) * 1.81);height:var(--ci,20px);
    background-color:currentColor;
    -webkit-mask:url(/logo-mark.png) no-repeat center/contain;
            mask:url(/logo-mark.png) no-repeat center/contain}
.brand{display:inline-flex;align-items:center;gap:9px;color:var(--point)}
.brand .ci{--ci:19px;vertical-align:0}
.brand{color:var(--ink)}
.brand .ci{background-color:var(--point)}
/* ★ 로고는 **머리에만** 넣는다 (2026-09-04 대표). 히어로·바닥에서는 뺐다 —
   한 화면에 세 번 나오면 로고가 아니라 무늬가 된다. */

/* ── 제목 전용 폰트 ──────────────────────────────────
   ★ 본문은 Pretendard 그대로 두고 **제목만** Wanted Sans 로 바꾼다.
     대표: *"대표 문구 폰트가 마음에 안 든다"* (2026-09-04)
   ★ 폰트 파일은 빌더가 **이 페이지에 실제로 쓰인 글자만** 남겨 굽는다.
     통짜 649KB 를 첫 화면에서 받게 두면 제목이 늦게 뜬다. */
h1,h2,h3,.s-num,.brand,.f-brand,.eyebrow,.ai-lead,.btn-lg{
  font-family:"Paperlogy","Pretendard Variable",Pretendard,sans-serif}
h1{letter-spacing:-.03em}

/* ⚠ **폰트를 바꿨으면 모바일 크기를 다시 잰다.** 폭이 폰트마다 다르다 —
   Wanted Sans 는 넓어 390px 에서 여백이 0 이었고(29px 로 내렸다),
   Paperlogy 는 좁아 29px 에서 오른쪽이 57px 남았다. 다시 32px 로 올렸다.
   눈으로 짐작하지 말고 첫 줄 오른쪽 여백을 실제로 재서 정한다. */
@media(max-width:430px){h1{font-size:32px;letter-spacing:-.035em}}