@charset "utf-8";
/* ══════════════════════════════════════════════════════════════════
   딸깍 메인(index2) — 밝은 면 · 라임 · 검정 / 스크롤로 넘어가는 면
   2026-09-22 전면 개정. 2026-10-12 대표색 교체 — 보라(#4f46e5) → 검정 #0a0a0a + 라임 #c8f000.
   짜임은 그대로 두고 면 색만 갈았다: 베이지 → 밝은 면, 보라 → 라임, 먹 → 검정.

   ── 왜 또 갈아엎었나 ────────────────────────────────────────────
   ① 판 전체를 검정으로 칠해 봤더니 15,000px 이 한 덩이로 읽혔다.
      마디를 가르는 것이 여백뿐이라 "어디서 끝나고 어디서 시작하는지" 가 없었다.
   ② 그래서 **면(패널) 색을 마디마다 바꾼다** — 밝은 면 · 검정 · 라임 셋이 번갈아 온다.
      굴리면 색이 통째로 갈리니까 '마디가 바뀌었다' 가 눈으로 보인다.
   ③ 지그재그 · 들쑥날쑥한 어긋냄은 쓰지 않는다(2026-09-22 지시).
      칸은 자로 잰 듯 **정렬**하고, 달라지는 것은 **색과 등장 방식**이다.

   ── 색을 다루는 법 ─────────────────────────────────────────────
   이름은 뜻으로 둔다: --paper 는 바탕, --ink 는 글자.
   면(.sec--ink · .sec--brand)이 **그 값만 제 가지 안에서 다시 선언**한다.
   그래서 카드 · 선 · 단추 CSS 는 한 벌만 쓰고, 어느 면에 얹히든 알아서 뒤집힌다.
   관리자 화면(.sc)만 index2-scene.css 에서 늘 밝은 값을 쥔다 — 진짜 관리자가 흰 화면이다.

   ── 움직임 ─────────────────────────────────────────────────────
   저절로 도는 것은 띠(.mq · .wg) 뿐이고 나머지는 전부 굴린 만큼만 움직인다.
   등장은 .up 한 갈래로 모으고 방향만 modifier 로 준다(--l · --r · --z).
   모션을 줄이겠다고 한 사람에게는 전부 완성 상태로 보인다.
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* 밝은 면 — 순백이 아니라 한 단 누른 흰색이다. 관리자 화면 캡쳐(흰 바탕)와 색이 겹치면
     그림이 죽어서 바탕이 살짝 가라앉아야 캡쳐가 떠 보인다. 라임 쪽으로 아주 조금 기울였다.
     밝은 면 위 대비(재서 정했다) — --ink 18.3 · --ink-2 8.8 · --ink-3 5.9 · --ink-4 4.0

     **라임(#c8f000)은 밝은 면 위에서 글자색으로 쓰지 않는다** — 대비 1.2 로 안 읽힌다.
     밝은 면의 --brand 는 진한 올리브(#487100, 대비 5.3)다. 제품(anmok)의 --lm-ink 와 같은 값이다.
     라임 그 자체는 면 · 칠 · 빛으로만 쓴다. */
  --paper:   #f6f6f1;
  --paper-2: #ebece3;
  --white:   #ffffff;
  --ink:     #0a0a0a;
  --ink-2:   #45463e;
  --ink-3:   #5f6058;
  --ink-4:   #7a7b72;
  --rule:    #dfe0d6;
  --rule-2:  #c4c5b8;
  --brand:   #487100;
  --brand-2: #5d8a00;
  --brand-50:#f3fbcf;
  --lime:    #c8f000;
  --black:   #0a0a0a;
  --glow:    rgba(200, 240, 0, .42);

  /* 작은 눈금은 고정 — 글자 사이 간격은 화면이 좁다고 줄이면 안 된다 */
  --s1: 4px;  --s2: 8px;   --s3: 12px;  --s4: 16px;  --s5: 20px;  --s6: 24px;
  --s7: 32px; --s8: 40px;  --s9: 48px;
  /* 큰 눈금은 화면 폭을 따라 같이 줄어든다 */
  --s10: clamp(40px, 5.6vw, 64px);
  --s11: clamp(48px, 7vw, 80px);
  --s12: clamp(56px, 8.4vw, 96px);
  --s13: clamp(64px, 10vw, 120px);
  --s14: clamp(72px, 12vw, 160px);
  --s15: clamp(88px, 15vw, 200px);

  --shell: 1280px;
  --ease:     cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --fs-h2:   clamp(24px, min(1.1rem + 3.9vw, 1rem + 4.6svh), 4.4rem);   /* 너비 · 높이 중 작은 쪽을 따른다 */
  --fs-h3:   clamp(1.15rem, 1.02rem + .6vw, 1.5rem);
  --fs-lead: clamp(14px, min(.99rem + .4vw, .7rem + 1.1svh), 1.3125rem);
  --fs-body: clamp(.9375rem, .92rem + .14vw, 1rem);
  --fs-cap:  12px;
}

/* ── 면(패널) ──
   마디마다 이 셋 중 하나를 입는다. 값만 다시 선언하므로 안쪽 CSS 는 손댈 필요가 없다. */
/* 흐린 글자의 밝기는 **눈대중이 아니라 재서** 정한 값이다(2026-09-22, 2026-10-12 다시 잼).
   검정 바탕(#0a0a0a) 위 대비 —
     --ink 17.9 · --ink-2 9.8 · --ink-3 7.8 · --ink-4 5.8 · 라임 15.0
   앞서 --ink-4 가 3.1 이라 비활성 탭 이름과 번호가 거의 안 보였고,
   --rule 이 .13 이라 칩 테두리가 1.4 로 사라졌다. 둘 다 올렸다. */
.sec--ink {
  --paper:   #0a0a0a;
  --paper-2: #151515;
  --white:   #1a1a1a;
  --ink:     #f4f4ee;
  --ink-2:   #b6b7ad;
  --ink-3:   #a2a399;
  --ink-4:   #8a8b82;
  --rule:    rgba(255, 255, 255, .2);
  --rule-2:  rgba(255, 255, 255, .4);
  --brand:   #c8f000;
  --brand-2: #e2ff6b;
  --glow:    rgba(200, 240, 0, .3);
}
/* 라임 면 — 글자는 전부 검정이다. **흰 글자는 라임 위에서 1.3 으로 안 보인다.**
   라임 위 대비 — --ink 15.0 · --ink-2 10.1 · --ink-3 7.3 · --ink-4 5.2 */
.sec--brand {
  --paper:   #c8f000;
  --paper-2: #bce300;
  --white:   #d6f93d;
  --ink:     #0a0a0a;
  --ink-2:   rgba(10, 10, 10, .82);
  --ink-3:   rgba(10, 10, 10, .72);
  --ink-4:   rgba(10, 10, 10, .62);
  --rule:    rgba(10, 10, 10, .18);
  --rule-2:  rgba(10, 10, 10, .5);
  --brand:   #0a0a0a;
  --brand-2: #2f4200;
  --glow:    rgba(255, 255, 255, .5);
}
.sec--ink, .sec--brand, .sec--paper { background: var(--paper); color: var(--ink); }

/* 면이 바뀌는 자리가 보여야 한다 — 뒤 면이 앞 면 위로 **올라탄다**.
   위 모서리를 둥글게 깎고 조금 끌어올린다. 굴리면 다음 장이 덮는 것처럼 읽힌다. */
.sec--lift {
  position: relative; z-index: 1;
  margin-top: calc(var(--s7) * -1);
  border-radius: clamp(20px, 3vw, 40px) clamp(20px, 3vw, 40px) 0 0;
  box-shadow: 0 -24px 60px -30px rgba(10, 10, 10, .45);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
/* 좌우 잠금은 body 하나로 한다 — html 에 걸면 화면이 스크롤 상자가 되어
   붙잡히는 마디(sticky)가 전부 풀린다. 직접 확인했다. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--paper); }
body {
  background: var(--paper); color: var(--ink);
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
               "Malgun Gothic", system-ui, sans-serif;
  font-size: var(--fs-body); line-height: 1.72;
  /* 넘침 방지 — keep-all 만 두면 끊을 데가 없는 긴 말이 칸을 밀어낸다.
     anywhere 를 같이 줘야 '정 안 되면 아무 데서나 끊는다' 가 된다(반응형 규칙 4번). */
  letter-spacing: -.012em; word-break: keep-all; overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
::selection { background: var(--lime); color: var(--black); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
html.smooth { scroll-behavior: auto; }

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--s5); }
@media (min-width: 768px) { .shell { padding-inline: var(--s9); } }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: fixed; left: var(--s4); top: -60px; z-index: 300; padding: var(--s3) var(--s5);
  background: var(--ink); color: var(--paper); font-weight: 700;
}
.skip-link:focus { top: var(--s4); }

/* ══════════════════ 바탕 눈금 ══════════════════
   밝은 판 위에 아주 옅은 눈금 하나. 안의 빛이 화면보다 넓으므로 반드시 잘라 낸다
   (안 자르면 320px 에서 가로 넘침으로 잡힌다 — check_responsive 가 실제로 잡았다). */
.dots {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background-image: radial-gradient(rgba(10, 10, 10, .07) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(120% 68% at 50% 0%, #000 0%, transparent 72%);
  mask-image: radial-gradient(120% 68% at 50% 0%, #000 0%, transparent 72%);
}

/* ══════════════════════════════════════════════════════════════════
   첫 화면 — 안목 로고의 **점이 자라서 판을 덮는다**
   ──────────────────────────────────────────────────────────────────
   마크 안에 박힌 점의 자리는 눈으로 맞춘 값이 아니라 **로고 파일에서 직접 잰 값**이다
   (anmok-brand-800.png 800×145 에서 점의 연결 영역을 찾아 중심을 구했다):
     · 중심  가로 13.4375% · 세로 64.8276%
     · 지름  로고 폭의 3%
   로고를 화면 가운데에 두면 점의 화면 좌표가 로고 폭(--Lw)만으로 정해진다.
     가로 = 50% − Lw × (0.5 − 0.134375) = 50% − Lw × 0.365625
     세로 = 50% + Lh × (0.648276 − 0.5) = 50% + Lw × (145/800) × 0.148276
                                        = 50% + Lw × 0.026875
   그 자리에서 원(clip-path: circle)이 부풀어 라임이 화면을 채운다.
   원이 지나가는 자리에 **검정 로고**가 같은 좌표로 겹쳐 있어, 색만 갈리는 것처럼 보인다.
   2026-10-12 — 바닥을 검정으로 바꿨다. 라임 로고를 밝은 면에 띄우면 1.2 대비라 안 보인다.
   검정 위 라임 로고(대표 이미지와 같은 결) → 라임 판 위 검정 로고로 뒤집힌다.
   새 로고는 옛 파일과 모양이 픽셀 단위로 같아서 아래 점 좌표를 그대로 쓴다.

   전부 CSS 로 돈다 — JS 로 걷으면 스크립트가 못 뜬 날 화면이 영영 가려진다.
   ══════════════════════════════════════════════════════════════════ */
.splash {
  /* ── 박자 ──
     0.00–0.45  라임 로고가 검정 위에 뜬다
     0.50–1.36  점에서 원이 자라 라임으로 채운다(검정 로고가 드러난다)
     1.36–1.78  **한 박자 쉰다** — 드러난 로고를 읽을 틈이다.
                이 사이를 0.1초로 줄여 봤더니 "모션이 너무 빠르다" 는 말을 들었다.
                드러나자마자 찢어지면 무엇이 드러났는지 알 수가 없다.
     1.78–2.66  문이 좌우로 열린다
     2.78       치운다                                                        */
  --Lw: clamp(170px, 32vw, 360px);
  --dx: calc(50% - var(--Lw) * .365625);
  --dy: calc(50% + var(--Lw) * .026875);
  position: fixed; inset: 0; z-index: 2147483000; overflow: hidden; pointer-events: none;   /* 사이트 팝업(9천대)·상담 단추·앱 탭보다 위 — 아래쪽이 가려져 판이 덜 차 보였다(2026-10-19) */
  animation: splashGone 0s 2.78s both;
}
/* 검정 바닥 — 라임이 화면을 다 덮은 뒤에 치운다.
   치우지 않으면 문이 열릴 때 본문이 아니라 이 검정이 드러난다. */
.splash__bg {
  position: absolute; inset: 0; background: var(--black);
  animation: splashFade .16s linear 1.4s both;
}
.splash__logo {
  position: absolute; left: 50%; top: 50%; width: var(--Lw); height: auto;
  transform: translate(-50%, -50%);
  animation: splashLogo 1.72s var(--ease-out) both;
}
.splash__logo img { width: 100%; height: auto; }
/* 라임 판 — 점에서 자란 원이 화면을 채운다(들어올 때).
   바탕색은 문이 열리기 직전에 투명으로 바꾼다. 색은 좌우 반쪽이 쥐고 있고,
   이 칸에 색이 남아 있으면 문이 다 열려도 라임이 그대로 남는다.
   바꾸는 순간에는 문이 아직 닫혀 있어서 눈에 띄지 않는다. */
.splash__fill {
  position: absolute; inset: 0; background: var(--lime);
  animation: splashFill .86s cubic-bezier(.66, 0, .22, 1) .5s both,
             splashClear 0s 1.78s forwards;
}
/* 좌우 반쪽 — 화면 밖으로 빠져나간다.
   **줄어들지 않는다.** 불투명한 덩어리가 본문 위에서 작아지면 넘어가는 것이 아니라
   '창이 닫히는 것' 으로 보인다(직접 찍어 보고 알았다). 밖으로 빼야 넘어간다.

   가운데 검정 로고는 반쪽마다 한 장씩 **화면 기준 같은 자리**에 놓았다.
   왼쪽 반쪽은 제 오른쪽 끝(=화면 한가운데)에, 오른쪽 반쪽은 제 왼쪽 끝에 로고 중심을
   맞추고 반쪽 밖을 잘라 낸다. 붙어 있을 때는 한 장이고, 열리면 반으로 찢어진다. */
.splash__half {
  position: absolute; top: 0; bottom: 0; width: 50%;
  overflow: hidden; background: var(--lime);
  animation-duration: .88s; animation-delay: 1.78s;
  animation-timing-function: cubic-bezier(.66, 0, .2, 1);
  animation-fill-mode: forwards;
}
.splash__half--l { left: 0; box-shadow: 1px 0 0 var(--lime); animation-name: doorL; }
.splash__half--r { right: 0; animation-name: doorR; }
.splash__half .splash__logo {
  left: 100%; animation: none;                 /* 왼쪽 반쪽 — 오른쪽 끝이 화면 한가운데 */
}
.splash__half--r .splash__logo { left: 0; }    /* 오른쪽 반쪽 — 왼쪽 끝이 화면 한가운데 */
/* 라임 로고 — 26%(0.45s)에 다 뜨고, 84%(1.44s)까지 그대로 있다가 사라진다.
   사라지는 동안에는 이미 라임 판이 덮고 있어서 눈에 띄지 않는다. */
@keyframes splashLogo {
  0%       { opacity: 0; transform: translate(-50%, -50%) scale(.93); }
  26%, 84% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100%     { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}
@keyframes splashFill {
  from { clip-path: circle(0px at var(--dx) var(--dy)); }
  to   { clip-path: circle(165vmax at var(--dx) var(--dy)); }
}
@keyframes splashClear { to { background-color: transparent; } }
@keyframes doorL { to { transform: translateX(-101%); } }
@keyframes doorR { to { transform: translateX(101%); } }
@keyframes splashFade { to { opacity: 0; } }
@keyframes splashGone { to { visibility: hidden; } }
html:not(.js) .splash { display: none; }

/* ══════════════════ 따라다니는 동그라미 ══════════════════
   2026-10-16 다시 다듬음(「커서도 세련되게」). 작은 동그라미 하나가 살짝 늦게 미끄러져 따라오고,
   누를 수 있는 것 위에서는 **속이 빈 테**로 부드럽게 커진다. 누르는 순간 살짝 줄어든다.
   색은 면을 따라간다 — 밝은 면 · 라임 면은 검정, 검정 면은 라임(is-dark).
   ⛔ mix-blend-mode: difference 는 라임 위에서 보라로 뒤집혀 쓰지 않는다(보라는 버린 색).
   진짜 커서는 그대로 둔다 — 숨기면 어디를 누르는지 알기 어렵다. */
.cur { display: none; }
@media (hover: hover) and (pointer: fine) {
  .cur {
    display: block; position: fixed; left: 0; top: 0; z-index: 350; --c: #0a0a0a;
    pointer-events: none; opacity: 0; transition: opacity .3s;
  }
  .cur.is-dark { --c: #c8f000; }
  .cur.is-live { opacity: 1; }
  .cur b { display: none; }
  .cur i {
    position: absolute; left: 0; top: 0; display: block; width: 10px; height: 10px;
    border-radius: 50%; background: var(--c); border: 1.5px solid var(--c); translate: -50% -50%;
    transition: width .45s cubic-bezier(.22, 1, .36, 1), height .45s cubic-bezier(.22, 1, .36, 1),
                background-color .3s, border-color .3s, scale .2s;
  }
  .cur.is-hot i { width: 48px; height: 48px; background: transparent; }
  .cur.is-down i { scale: .7; }
}

/* html.pin — 화면 높이가 560px 이상일 때만 붙는다(index2.js). 낮은 화면(가로 폰 등)은 붙잡는 장면 없이 차례로 놓인다(2026-10-16 「최소 높이 보장」) */
/* ══════════════════ 첫 마디 — 사장님을 위한 올인원 서비스 ══════════════════
   입체 안목 심볼(얇은 판 22장을 겹쳐 두께를 낸다) → 정면으로 돌며 가운데로 → 점으로 파고들어 라임이 화면을 덮는다.
   굴린 만큼(index2.js · introDrive)으로만 움직인다. 스크립트가 없으면 글 · 라임 판이 위아래로 그냥 놓인다. */
.intro { position: relative; background: var(--paper); color: var(--ink); }
.intro__stage { position: relative; overflow: hidden; }
/* 첫 화면은 전체 너비(2026-10-16 지시) — 판 폭(1280)에 가두지 않고 화면 양끝 여백만 둔다 */
.intro__copy { position: relative; z-index: 3; padding: calc(64px + 48px) clamp(20px, 5vw, 96px) 40px; }
.intro__eye { display: inline-flex; align-items: center; gap: 10px; font-size: clamp(16px, .8rem + .6vw, 22px); font-weight: 800; color: var(--brand); letter-spacing: -.02em; }
/* 한 줄 전체를 검정 배지 · 라임 글씨로, 그 안의 「올인원」 은 라임 바탕 · 검정 글씨로 한 번 더(2026-10-16) */
/* 글줄을 기준선(baseline)으로 맞춘다 — 가운데 맞춤은 배지 안쪽 여백 때문에 「올인원」 만 위아래로 어긋났다 */
.intro__eye { align-items: baseline; gap: .4em; padding: .3em .95em; border-radius: 999px; background: #0a0a0a; color: var(--lime); line-height: 1.2;
  font-weight: 800; letter-spacing: -.03em; box-shadow: 0 14px 28px -16px rgba(10, 10, 10, .7); }
.intro__eye b { display: inline-block; padding: .2em .6em; line-height: 1.2; border-radius: 999px; background: var(--lime); color: #0a0a0a; font-weight: 900; }
.intro__eye::before { display: none; }
@media (max-width: 479px) { .intro__eye { font-size: 13px; padding: .28em .85em; } }
@media (max-width: 359px) { .intro__eye { font-size: 12px; gap: .3em; } }
/* 첫 화면 제목 — 시원하게 크게(화면 폭 · 높이 둘 다 따른다) */
/* 좁은 화면은 세 줄(홈페이지, / 만들고 끝이 / 아니에요.)을 **왼쪽 2/3 안에** — 오른쪽에 심볼이 선다(2026-10-16).
   PC 는 두 줄(홈페이지, 만들고 / 끝이 아니에요.)로 넓게 */
.intro__t { margin-top: 12px; max-width: 66%; font-size: min(calc((100vw - 40px) * .118), 8vh, 84px); font-weight: 800; line-height: 1.02; letter-spacing: -.06em; word-break: keep-all; }
.intro__t b { color: #0a0a0a; background: linear-gradient(transparent 58%, var(--lime) 58%, var(--lime) 92%, transparent 92%); padding: 0 .04em; }
.intro__s { margin-top: clamp(14px, 2.4vh, 24px); font-size: clamp(15px, .82rem + .5vw, 21px); line-height: 1.55; color: var(--ink-2); word-break: keep-all; }
.intro__s strong { color: var(--ink); font-weight: 800; }
/* 줄이 바뀔 때 위아래 글자 수가 비슷하게(2026-10-16) */
.intro__s, .intro__t2, .flow__d, .multi__s { text-wrap: balance; }
/* 할 수 있는 일 열 가지 — 차례로 이어지는 모션그래픽(2026-10-16).
   아이콘 마디 열 개가 선으로 이어지고(.intro__line) 진행선이 다음 마디까지 차오르면 그 마디가 라임으로 켜지며 아이콘이 그려진다.
   지난 마디는 검정에 라임 아이콘. 아래 판(.intro__now)에 지금 단계가 올라오며 바뀐다. 마디를 눌러 바로 갈 수도 있다.
   마디가 다 안 들어가는 화면은 줄이 옆으로 넘어가며 지금 마디를 가운데에 둔다(--tx · index2.js) */
.intro__steps { --nd: 44px; --ng: 18px; margin-top: clamp(18px, 3vh, 32px); max-width: 640px; }
.intro__rail { position: relative; overflow: hidden; padding: 10px 0; margin: -6px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.intro__steps.is-fit .intro__rail { -webkit-mask-image: none; mask-image: none; }
.intro__can { position: relative; list-style: none; margin: 0; padding: 0 calc(50% - var(--nd) / 2); display: flex; gap: var(--ng); width: max-content;
  transform: translate3d(var(--tx, 0px), 0, 0); transition: transform .8s cubic-bezier(.65, 0, .25, 1); }
.intro__steps.is-fit .intro__can { padding: 0 4px; width: auto; justify-content: space-between; }
.intro__can > li { position: relative; z-index: 1; flex: none; display: flex; flex-direction: column; align-items: center; padding: 4px 3px; }
/* 마디를 잇는 점선 · 차오르는 진행선 */
.intro__can > .intro__line { position: absolute; z-index: 0; left: var(--l0, 0px); width: var(--lw, 0px); top: calc(var(--nd) / 2 + 4px); height: 1px; padding: 0;
  background: rgba(10, 10, 10, .14); }
.intro__line i { position: absolute; inset: 0; background: #0a0a0a; transform-origin: 0 50%; transform: scaleX(0);
  transition: transform .75s cubic-bezier(.65, 0, .25, 1); }
.intro__node { position: relative; display: grid; place-items: center; width: var(--nd); height: var(--nd); padding: 0; border-radius: 14px; cursor: pointer;
  border: 1.5px solid var(--rule-2); background: var(--paper); color: var(--ink-4);
  transition: background-color .35s, border-color .35s, color .35s, transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; }
.intro__node svg { width: 46%; height: 46%; }
.intro__node:hover { border-color: #0a0a0a; color: var(--ink); }
.intro__node:focus-visible { outline: 2px solid #0a0a0a; outline-offset: 3px; }
.intro__can > li.is-done .intro__node { background: #0a0a0a; border-color: #0a0a0a; color: var(--lime); }
.intro__can > li.is-on .intro__node { background: var(--lime); border-color: #0a0a0a; color: #0a0a0a; transform: scale(1.12);
  transition: background-color .35s, border-color .35s, color .35s, transform .5s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s;
  animation: introRing 1.4s .5s ease-out infinite; }
/* 켜지는 마디 — 아이콘이 선으로 그려진다 */
.intro__can > li.is-on .intro__node svg > * { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; animation: introDraw .8s .25s cubic-bezier(.65, 0, .35, 1) forwards; }
@keyframes introDraw { 0% { opacity: 0; } 18% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }   /* 둥근 끝이 점으로 먼저 찍히지 않게 처음엔 숨김 */
@keyframes introRing { 0% { box-shadow: 0 10px 20px -10px rgba(40, 60, 0, .55), 0 0 0 0 rgba(200, 240, 0, .8); }
  100% { box-shadow: 0 10px 20px -10px rgba(40, 60, 0, .55), 0 0 0 12px rgba(200, 240, 0, 0); } }
/* 마디 이름 — 넓은 PC 에서만 마디 아래 */
.intro__nl { display: none; }
/* 지금 단계 판 */
.intro__now { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 12px; row-gap: 2px;
  margin-top: 10px; padding: 12px 0 0; border-top: 1px solid var(--rule); min-height: 64px; }
.intro__nk { grid-row: span 2; font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 13px; color: var(--ink-4); white-space: nowrap; }
.intro__nk b { display: inline-block; font-size: 22px; font-weight: 400; color: #0a0a0a; }
.intro__now strong { font-size: clamp(17px, .9rem + .5vw, 22px); font-weight: 800; letter-spacing: -.04em; line-height: 1.25; }
.intro__now small { font-size: 13.5px; line-height: 1.45; color: var(--ink-3); word-break: keep-all; }
.intro__now.is-swap strong, .intro__now.is-swap small, .intro__now.is-swap .intro__nk b { animation: introUp .55s cubic-bezier(.2, .8, .2, 1) both; }
.intro__now.is-swap small { animation-delay: .08s; }
@keyframes introUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (min-width: 600px) { .intro__steps { --nd: 48px; } }
@media (min-width: 1280px) {
  .intro__steps { --nd: 52px; }
  .intro__steps.is-fit .intro__nl { display: block; position: absolute; top: calc(var(--nd) + 14px); left: 50%; width: 84px; margin-left: -42px; text-align: center;
    font-size: 12.5px; font-weight: 700; line-height: 1.25; letter-spacing: -.03em; color: var(--ink-4); word-break: keep-all; transition: color .35s; }
  .intro__can > li.is-on .intro__nl, .intro__can > li.is-done .intro__nl { color: var(--ink); }
  .intro__steps.is-fit .intro__rail { padding-bottom: 50px; }
}
@media (prefers-reduced-motion: reduce) {
  .intro__can, .intro__line i { transition: none; }
  .intro__can > li.is-on .intro__node { animation: none; }
  .intro__can > li.is-on .intro__node svg > * { animation: none; stroke-dashoffset: 0; }
}
/* 낮고 좁은 화면(예: 320×640) — 설명 한 줄을 빼고 칩을 촘촘히. 첫 화면 안에 단추까지 들게 */
@media (max-width: 479px) and (max-height: 720px) {
  .intro__s { margin-top: 10px; font-size: 14px; line-height: 1.45; }   /* 작은 문구는 늘 보인다(2026-10-16) */
  .intro__t { font-size: min(calc((100vw - 40px) * .118), 7vh); }
  .intro__steps { --nd: 40px; --ng: 14px; margin-top: 10px; }
  .intro__now { min-height: 56px; margin-top: 6px; padding-top: 8px; }
  .intro__now small { font-size: 12.5px; }
  .intro__acts { margin-top: 12px; }
  .intro__go { min-height: 46px; font-size: 14px; }
  .intro__go em { width: 34px; height: 34px; }
}
/* 단추 */
.intro__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: clamp(16px, 3vh, 32px); }
.intro__go { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 6px 0 24px; border-radius: 999px;
  background: #0a0a0a; color: #f4f4ee; font-size: 15.5px; font-weight: 800; letter-spacing: -.02em;
  box-shadow: 0 14px 30px -16px rgba(10, 10, 10, .55); transition: transform .3s var(--ease-out), box-shadow .3s; }
.intro__go em { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--lime); color: #0a0a0a;
  transition: transform .35s var(--ease-out); }
.intro__go em svg { width: 17px; height: 17px; }
.intro__go:hover { transform: translateY(-2px); box-shadow: 0 20px 36px -16px rgba(10, 10, 10, .6); }
.intro__go:hover em { transform: rotate(-45deg); }
.intro__more em { font-style: normal; }
.intro__more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 14px; font-weight: 800; color: var(--ink-2);
  border-bottom: 1.5px solid var(--rule-2); }
.intro__more em { animation: introHint2 1.4s ease-in-out infinite; }
.intro__hint { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; font-size: 13px; font-weight: 700; color: var(--ink-3); }
.intro__hint i { width: 1.5px; height: 28px; background: currentColor; position: relative; overflow: hidden; }
.intro__hint i::after { content: ""; position: absolute; left: 0; top: -40%; width: 100%; height: 40%; background: var(--lime);
  animation: introHint 1.6s ease-in-out infinite; }
@keyframes introHint { to { top: 100%; } }
.intro__mk, .intro__lime { display: none; }
/* 끝 장면(라임 판) */
.intro__end { position: relative; z-index: 3; background: var(--lime); color: #0a0a0a; padding: 64px var(--s5); text-align: center; }
.intro__k { font-size: 14px; font-weight: 800; letter-spacing: -.02em; }
.intro__t2 { margin-top: 10px; font-size: clamp(26px, 1rem + 3.4vw, 60px); font-weight: 800; line-height: 1.15; letter-spacing: -.05em; word-break: keep-all; }
.intro__t2 b { background: #0a0a0a; color: var(--lime); padding: 0 .16em; border-radius: .12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.intro__cards { list-style: none; padding: 0; margin: 28px auto 0; max-width: 980px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; text-align: left; }
.intro__card { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 12px; border-radius: 16px; background: #0a0a0a; color: #f4f4ee; }
.intro__ic { grid-row: span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--lime); color: #0a0a0a; }
.intro__ic svg { width: 19px; height: 19px; }
.intro__card b { font-size: 14.5px; font-weight: 800; letter-spacing: -.03em; }
.intro__card small { font-size: 12px; color: rgba(244, 244, 238, .62); line-height: 1.35; word-break: keep-all; }
@media (min-width: 768px) {
  .intro__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
  .intro__card { padding: 18px; border-radius: 20px; column-gap: 14px; }
  .intro__ic { width: 46px; height: 46px; border-radius: 14px; }
  .intro__ic svg { width: 23px; height: 23px; }
  .intro__card b { font-size: 17px; }
  .intro__card small { font-size: 13px; }
}

/* ── 스크립트가 있을 때 — 붙잡힌 무대 ── */
html.pin .intro { height: 380vh; }   /* 점이 커지는 구간을 길게(2026-10-16 「커지고 작아지는 걸 보기 어렵다」) */
html.pin .intro__stage { position: sticky; top: 0; height: 100vh; height: 100svh; }
html.pin .intro__copy { position: absolute; left: 0; right: 0; top: 0; padding-top: calc(64px + clamp(18px, 3.4vh, 60px));
  opacity: calc(1 - var(--a, 0) * 1.25); transform: translateY(calc(var(--a, 0) * -50px)); }
@media (min-width: 1024px) {
  html.pin .intro__copy { top: calc(50% + 32px); padding-top: 0; padding-bottom: 0; padding-inline: clamp(40px, 5vw, 110px); transform: translateY(calc(-50% - var(--a, 0) * 50px)); }   /* 머리띠 아래 남은 칸의 정가운데 — 위 · 아래 여백이 같게 */
  html.pin .intro__copy > * { max-width: 62%; }
  html.pin .intro__copy > .intro__t { max-width: none; font-size: min(7vw, 12.5vh, 150px); line-height: 1; }
  html.pin .intro__steps { max-width: min(62%, 900px); }
}
/* 입체 심볼 — 판(334×298)을 JS 가 화면 좌표로 옮기고 키운다. 원근의 소실점은 점 자리 */
html.pin .intro__mk { display: block; position: absolute; left: 0; top: 0; z-index: 2; width: 334px; height: 298px;
  transform-origin: 0 0; perspective: 1100px; perspective-origin: 66.5% 64.8%; }
/* 스크립트가 자리를 잡기 전(왼쪽 위 0,0)에는 감춘다 — 늦게 실리는 기기에서 글을 덮었다(2026-10-21) · index2.js introDrive 가 is-ready 를 단다 */
html.pin .intro__mk:not(.is-ready) { visibility: hidden; }
.intro__sh { position: absolute; left: 6%; right: 6%; bottom: -16%; height: 14%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(10, 10, 10, .28), transparent); filter: blur(6px); opacity: calc(1 - var(--a, 0)); }
.mk3d__float { position: absolute; inset: 0; transform-style: preserve-3d; animation: mkFloat 7s ease-in-out infinite; }
/* 떠다님의 크기(--fa)는 가운데로 오는 만큼 0 으로 줄어든다 — 멈출 때 튀지 않게(index2.js) */
/* 굴리기 전에도 스스로 떠다니며 천천히 돌아 두께가 보인다(2026-10-16 「좀 더 움직여 보이게」) — 크기는 --fa(가운데로 오는 만큼 0) */
@keyframes mkFloat {
  0%, 100% { transform: translate3d(0, calc(var(--fa, 1) * -12px), 0) rotateY(calc(var(--fa, 1) * -9deg)) rotateX(calc(var(--fa, 1) * 4deg)) rotateZ(calc(var(--fa, 1) * -1deg)); }
  25% { transform: translate3d(calc(var(--fa, 1) * 6px), 0, 0) rotateY(calc(var(--fa, 1) * 2deg)) rotateX(calc(var(--fa, 1) * -3deg)) rotateZ(0deg); }
  50% { transform: translate3d(0, calc(var(--fa, 1) * 14px), 0) rotateY(calc(var(--fa, 1) * 11deg)) rotateX(calc(var(--fa, 1) * -5deg)) rotateZ(calc(var(--fa, 1) * 1deg)); }
  75% { transform: translate3d(calc(var(--fa, 1) * -6px), 0, 0) rotateY(calc(var(--fa, 1) * 1deg)) rotateX(calc(var(--fa, 1) * 3deg)) rotateZ(0deg); }
}
/* 그림자도 떠오름에 맞춰 숨 쉰다 */
.intro__sh { animation: mkShadow 7s ease-in-out infinite; }
@keyframes mkShadow { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.86); } }
/* 라임 점 — 은은하게 빛이 돈다 */
.mk3d__front use:nth-of-type(2) { animation: mkDot 3.5s ease-in-out infinite; }
@keyframes mkDot { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.18) drop-shadow(0 0 6px rgba(200, 240, 0, .8)); } }
.mk3d { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: 50% 50%;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.mk3d__l { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: translateZ(calc(var(--k) * -1.7px)); backface-visibility: hidden; }
/* 뒤쪽 판 — 파고들기 시작하면 서서히 흐려진 뒤(--bk) 다 흐려지고 나서야 걷는다 */
.mk3d__l:not(.mk3d__front) { opacity: var(--bk, 1); }
.intro__mk.is-flat .mk3d__l:not(.mk3d__front) { display: none; }
.intro__mk.is-flat .mk3d__float { animation: none; }
/* 옆면 — 뒤로 갈수록 짙다. 점 옆면은 짙은 라임 */
.mk3d__f { fill: hsl(60 3% calc(22% - var(--k) * .55%)); }
.mk3d__d { fill: hsl(72 100% calc(34% - var(--k) * .4%)); }
html.pin .intro__lime { display: block; position: absolute; inset: 0; z-index: 3; background: var(--lime);
  clip-path: circle(var(--r, 0px) at var(--dx, 50%) var(--dy, 50%)); opacity: var(--lo, 1); }
html.pin .intro__end { position: absolute; inset: 0; z-index: 4; background: none; padding: 64px var(--s5) 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  opacity: var(--c, 0); visibility: hidden; transform: translateY(calc((1 - var(--c, 0)) * 30px)); }
html.pin .intro.is-end .intro__end { visibility: visible; }
html.pin .intro__card { opacity: clamp(0, calc(var(--c, 0) * 3 - var(--i) * .3), 1);
  transform: translateY(calc((1 - clamp(0, calc(var(--c, 0) * 3 - var(--i) * .3), 1)) * 24px)); }
@media (prefers-reduced-motion: reduce) { .intro__hint i::after, .mk3d__float, .intro__sh, .mk3d__front use { animation: none; } }

/* ══════════════════ 딸깍이 하는 일 여덟 — 라임 면 · 모션그래픽 칸 ══════════════════
   첫 마디 라임 장면을 이어 받는다(위 여백 없이 같은 라임). 칸 안 그림은 CSS 로만 돌고,
   화면에 들어온 칸(.is-on · index2.js)만 움직인다. 크기는 칸 폭 기준(cqw)이라 어느 화면에서나 같은 꼴 */
.can { padding: calc(64px + 40px) 0 clamp(56px, 8vw, 120px); }
/* 「사장님은 본업만 하세요」 와 칸 사이가 멀었다(2026-10-16) — 문구는 무대 위쪽에 두고, 칸은 무대의 빈 아래쪽을 덮으며 올라온다 */
/* 라임이 다 차면 첫 마디 가운데에 문구가 서고(.intro__end), 이 마디가 같은 자리에서 이어 받는다.
   PC: 이 마디가 붙는 순간(.is-live) 문구가 가운데 → 위로 오르고 칸이 아래에서 올라온 뒤 옆으로 넘어간다(index2.js canDrive).
   모바일: 문구는 첫 마디 것만 쓰고, 칸이 그 아래로 바로 붙어 올라온다 */
.can__head { text-align: center; }
.can__head .chap__lead { margin-inline: auto; }
/* 진행 막대 — 문구 아래 가운데(PC 만) */
.can__head .can__prog { margin: clamp(16px, 3vh, 28px) auto 0; }
/* 모든 화면 같은 결(2026-10-16 「모바일도 스크롤 · 터치에 따라 넘어가게」) —
   문구는 이 마디 것 하나만: 라임이 차오를 때부터 화면 가운데에 붙어 있다가 위로 오르고, 칸이 올라온 뒤 옆으로 넘어간다 */
html.pin .can { position: relative; z-index: 6; margin-top: -100vh; margin-top: -100svh; }
html.pin .intro__end { display: none; }
html.pin .can__head, html.pin .can__grid { will-change: transform, opacity; }
/* 첫 마디 끝 문구 — 라임 위 관리자 마디와 같은 꼴 */
.intro__end .chap__t b { background: #0a0a0a; color: var(--lime); padding: 0 .14em; border-radius: .12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.intro__end .chap__lead { margin-inline: auto; color: #2a3500; }
/* 한 줄 — 모바일은 손으로 넘기고, PC 는 굴리는 만큼 옆으로 민다(index2.js canDrive) */
.can__grid { list-style: none; margin: 0; display: flex; gap: 12px; padding: 0 var(--s5) 6px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--s5); scrollbar-width: none; overscroll-behavior-x: contain; }
.can__grid::-webkit-scrollbar { display: none; }
.can__it { flex: 0 0 min(80%, 360px); scroll-snap-align: start; min-width: 0; }
.can__prog { display: none; }
@media (min-width: 600px) { .can__it { flex-basis: min(46%, 380px); } }
/* 붙잡아 두고 옆으로 — 모바일(손가락 가로 밀기도 세로 굴림으로 바꿔 같은 줄을 민다 · index2.js) */
html.pin .can { padding: 0; }
html.pin .can__pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow-x: clip; overflow-y: visible; padding: 64px 0 clamp(24px, 5vh, 56px); }
html.pin .can__grid { overflow: visible; scroll-snap-type: none; width: max-content; padding: 0 var(--s5); touch-action: pan-y; }
html.pin .can__it { flex: 0 0 max(200px, min(74vw, calc((100svh - 400px) * 1.15), 330px)); }
html.pin .can__head { margin-bottom: clamp(16px, 3vh, 28px); padding-inline: var(--s5); }
html.pin .can__prog { display: block; width: min(220px, 50vw); height: 3px; border-radius: 2px; background: rgba(10, 10, 10, .14); overflow: hidden; }
html.pin .can__prog i { display: block; height: 100%; width: 100%; background: #0a0a0a; transform-origin: 0 50%; transform: scaleX(var(--cp, 0)); }
@media (min-width: 600px) { html.pin .can__it { flex-basis: max(220px, min(44vw, calc((100svh - 420px) * 1.15), 360px)); } }
@media (max-width: 1023px) { html.pin .can[style*="--cw"] .can__it { flex-basis: var(--cw); } }
/* 낮은 폰 — 제목을 한 단계 줄여 작은 문구까지 다 보이고 칸이 들어갈 자리를 남긴다 */
@media (max-width: 1023px) and (max-height: 760px) {
  html.pin .can__pin { padding-top: 60px; }
}
@media (min-width: 1024px) {
  .can { padding: 0; }
  .can__pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; overflow-x: clip; overflow-y: visible; padding: 64px 0 clamp(40px, 7vh, 80px); }
  /* 화면 높이에 맞춰 칸 크기를 잡아 아래 여백을 남긴다(2026-10-16 「하단 여백 부족」) */
  .can__it { flex-basis: max(230px, min(24vw, calc((100svh - 540px) * 1.2), 390px)) !important; will-change: transform, opacity; }
  .can__grid { overflow: visible; scroll-snap-type: none; gap: 20px; width: max-content; padding: 0 max(40px, calc((100vw - 1280px) / 2 + 48px)); will-change: transform; }
  .can__it { flex: 0 0 min(28vw, calc((100svh - 300px) * 1.15), 430px); }
  .can__head { margin-bottom: clamp(20px, 3.4vh, 36px); }
  .can__prog { display: block; width: min(320px, 40vw); height: 3px; border-radius: 2px; background: rgba(10, 10, 10, .14); overflow: hidden; }
  .can__prog i { display: block; height: 100%; width: 100%; background: #0a0a0a; transform-origin: 0 50%; transform: scaleX(var(--cp, 0)); }
}
html:not(.pin) .can { height: auto !important; }
/* 낮은 PC 화면(높이 800 이하) — 작은 문구를 접고 칸을 조금 줄여 머리 줄 아래 · 아래 여백을 지킨다 */
@media (min-width: 1024px) and (max-height: 800px) {
  .can__head .chap__lead { display: none; }
  .can__it { flex-basis: max(210px, min(24vw, calc((100svh - 430px) * 1.2), 390px)) !important; }
}
.can__a { position: relative; display: block; padding: 10px 10px 22px; border-radius: 26px; background: #0a0a0a;
  color: #f4f4ee; box-shadow: 0 30px 60px -36px rgba(40, 60, 0, .6); transition: transform .4s var(--ease-out), box-shadow .4s; }
.can__a:hover { transform: translateY(-4px); box-shadow: 0 40px 70px -34px rgba(40, 60, 0, .7); }
.can__t { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin-top: 16px; color: #fff; font-size: clamp(15px, 7.4cqw, 26px); white-space: nowrap;
  font-weight: 800; letter-spacing: -.045em; }
.can__t i { font-family: Georgia, serif; font-style: italic; font-weight: 400; font-size: .6em; color: #c8f000; }
.can__d { display: block; margin-top: 6px; text-align: center; font-size: clamp(13.5px, .78rem + .25vw, 15.5px); line-height: 1.5; color: rgba(244, 244, 238, .86); }
.can__a { container-type: inline-size; }
/* 영상 판 — 영상과 같은 6:5. 칸이 화면에 들어오는 만큼(--v · index2.js) 커지며 올라온다 */
.can__v { margin: 0; border-radius: 18px; overflow: hidden; aspect-ratio: 6 / 5; background: #1a1a1a; }
.can__v video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* ↗ — 영상 판 오른쪽 아래 안쪽(판 높이 = (칸 폭 − 20) × 5/6) */
.can__go { position: absolute; right: 22px; top: calc(10px + (100cqw - 20px) * .8333 - 64px); display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: #c8f000; color: #0a0a0a; transition: transform .35s var(--ease-out); z-index: 2; }
.can__go svg { width: 22px; height: 22px; }
.can__a:hover .can__go { transform: rotate(45deg); }

/* 그림 판 — 칸 폭 기준 크기(cqw). 옅은 흰 판 위에 작은 UI */
.mg { position: relative; overflow: hidden; border-radius: 18px; background: #f7f8f0; aspect-ratio: 16 / 10; container-type: inline-size; }
/* 모바일 한 줄 — 그림 판을 조금 낮게(세로 길이 줄이기) */
@media (max-width: 767px) { .mg { aspect-ratio: 16 / 9; } }
.mg * { box-sizing: border-box; }
.can__it:not(.is-on) .mg, .can__it:not(.is-on) .mg * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .mg, .mg * { animation: none !important; } }
/* 공통 — 들어왔다 머물고 사라짐(5초 한 바퀴, --d 만큼 늦게) */
@keyframes mgIn { 0% { opacity: 0; transform: translateY(14%); } 10%, 82% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
@keyframes mgPop { 0% { opacity: 0; transform: scale(.6); } 12%, 84% { opacity: 1; transform: scale(1); } 95%, 100% { opacity: 0; transform: scale(1); } }

/* 01 홈페이지 제작 — 창 안에 블록이 차례로 내려앉고, 위젯 칩이 날아든다 */
.mgw { position: absolute; left: 14%; right: 14%; top: 12%; bottom: 0; border-radius: 3cqw 3cqw 0 0; background: #fff;
  box-shadow: 0 2cqw 6cqw -2cqw rgba(10, 10, 10, .2); padding: 6cqw 3cqw 0; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2cqw; align-content: start; }
.mgw__bar { position: absolute; left: 3cqw; top: 2cqw; display: flex; gap: 1cqw; }
.mgw__bar i { width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: #dcddd3; }
.mgb { border-radius: 1.6cqw; background: #ecede4; height: 11cqw; animation: mgIn 5s calc(var(--d) * 1s) infinite both; }
.mgb--hero { grid-column: 1 / -1; height: 14cqw; background: linear-gradient(120deg, #0a0a0a, #2a2f12); }
.mgb--a { background: #c8f000; }
.mgchip { position: absolute; left: 6%; top: 48%; padding: 1.6cqw 3cqw; border-radius: 99px; background: #0a0a0a; color: #c8f000; font-size: max(12px, 3.2cqw); font-weight: 800;
  box-shadow: 0 2cqw 4cqw -1.5cqw rgba(10, 10, 10, .4); animation: mgPop 5s calc(var(--d) * 1s) infinite both; }
.mgchip--2 { left: auto; right: 6%; top: 66%; }

/* 02 검색 노출 — 검색어가 쳐지고, 우리 줄이 맨 위로 올라온다 */
.mgs { position: absolute; inset: 12% 12% 0; display: flex; flex-direction: column; gap: 2.4cqw; }
.mgs__q { display: flex; align-items: center; gap: 2cqw; height: 10cqw; padding: 0 3.4cqw; border-radius: 99px; background: #fff; box-shadow: 0 1cqw 4cqw -1cqw rgba(10, 10, 10, .2);
  font-size: max(12px, 3.6cqw); font-weight: 700; }
.mgs__q i { width: 3.4cqw; height: 3.4cqw; border-radius: 50%; border: .6cqw solid #5f6368; flex: none; }
.mgs__q span { display: inline-block; overflow: hidden; white-space: nowrap; border-right: .4cqw solid #0a0a0a; animation: mgType 5s steps(7) infinite; }
@keyframes mgType { 0% { width: 0; } 30%, 100% { width: 7.2em; } }
.mgs__r { display: flex; align-items: center; gap: 2cqw; height: 10cqw; padding: 0 3cqw; border-radius: 2.4cqw; background: #fff; }
.mgs__r b { width: 26%; height: 2cqw; border-radius: 1cqw; background: #dcddd3; }
.mgs__r i { flex: 1; height: 2cqw; border-radius: 1cqw; background: #ecede4; }
.mgs__r--me { order: 3; background: #0a0a0a; color: #fff; animation: mgRank 5s infinite both; }
.mgs__r--me b { width: auto; height: auto; background: none; font-size: max(12px, 3.4cqw); }
.mgs__r--me i { background: #3a3a36; }
.mgs__r--me em { font-style: normal; padding: .8cqw 2cqw; border-radius: 99px; background: #c8f000; color: #0a0a0a; font-size: max(12px, 3cqw); font-weight: 800; }
@keyframes mgRank { 0%, 30% { transform: translateY(0); opacity: 0; } 40% { opacity: 1; } 55%, 90% { transform: translateY(-25cqw); opacity: 1; } 100% { transform: translateY(-25cqw); opacity: 0; } }

/* 03 콘텐츠 자동 발행 — 카드뉴스 한 장에서 SNS 넷으로 차례로 올라간다 */
.mgp { position: absolute; inset: 0; }
.mgp__card { position: absolute; left: 50%; top: 50%; width: 26cqw; aspect-ratio: 4 / 5; transform: translate(-50%, -50%) rotate(-4deg); border-radius: 2.4cqw; overflow: hidden;
  box-shadow: 0 3cqw 6cqw -2cqw rgba(10, 10, 10, .35); animation: mgBob 5s ease-in-out infinite; }
.mgp__card img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes mgBob { 50% { transform: translate(-50%, -54%) rotate(-2deg); } }
.mgp__clock { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); padding: 1.4cqw 3cqw; border-radius: 99px; background: #0a0a0a; color: #c8f000;
  font-size: max(12px, 3cqw); font-weight: 800; white-space: nowrap; }
.mgp__sns { position: absolute; display: grid; place-items: center; width: 11cqw; height: 11cqw; border-radius: 3cqw; color: #fff; font-size: 4.4cqw; font-weight: 900;
  box-shadow: 0 2cqw 4cqw -1.5cqw rgba(10, 10, 10, .35); animation: mgPop 5s calc(1s + var(--d) * 1s) infinite both; }
.mgp__sns::after { content: "\002713"; position: absolute; right: -1.4cqw; top: -1.4cqw; width: 4.6cqw; height: 4.6cqw; border-radius: 50%; background: #c8f000; color: #0a0a0a;
  font-size: 2.8cqw; display: grid; place-items: center; }
.mgp__sns--ig { left: 12%; top: 16%; background: linear-gradient(135deg, #f9ce34, #ee2a7b 55%, #6228d7); }
.mgp__sns--yt { right: 12%; top: 16%; background: #ff0033; }
.mgp__sns--th { left: 16%; bottom: 20%; background: #0a0a0a; }
.mgp__sns--nv { right: 16%; bottom: 20%; background: #03c75a; }

/* 04 광고 — 도넛이 차오르고 가운데 문의 수 */
.mga { position: absolute; inset: 0; display: grid; place-items: center; }
.mga svg { width: 46cqw; height: 46cqw; transform: rotate(-90deg); }
.mga circle { fill: none; stroke-linecap: round; }
.mga__bg { stroke: #e6e8dc; stroke-width: 7; }
.mga__arc { stroke-width: 7; stroke-dasharray: 239; animation: mgArc 5s cubic-bezier(.22, 1, .36, 1) infinite both; }
.mga__arc--1 { stroke: #0a0a0a; --to: 70; }
.mga__arc--2 { stroke: #a6d400; stroke-dasharray: 176; --to: 64; animation-delay: .3s; stroke-width: 6; }
@keyframes mgArc { 0% { stroke-dashoffset: 239; } 45%, 85% { stroke-dashoffset: 72; } 100% { stroke-dashoffset: 239; } }
.mga__arc--2 { animation-name: mgArc2; }
@keyframes mgArc2 { 0% { stroke-dashoffset: 176; } 45%, 85% { stroke-dashoffset: 80; } 100% { stroke-dashoffset: 176; } }
.mga__n { position: absolute; text-align: center; font-size: max(12px, 3.2cqw); font-weight: 700; color: #3d4a10; }
.mga__n b { display: block; font-size: 9cqw; font-weight: 900; color: #0a0a0a; letter-spacing: -.04em; line-height: 1; }
.mga__tag { position: absolute; right: 8%; top: 12%; padding: 1.4cqw 3cqw; border-radius: 99px; background: #0a0a0a; color: #c8f000; font-size: 3cqw; font-weight: 800;
  animation: mgPop 5s .6s infinite both; }

/* 05 견적서 · 계약 서명 — 손 서명이 그려지고 도장이 찍힌다 */
.mgd { position: absolute; inset: 0; }
.mgd__doc { position: absolute; left: 50%; top: 12%; bottom: -8%; width: 52cqw; transform: translateX(-50%) rotate(-2deg); padding: 5cqw; border-radius: 2cqw; background: #fff;
  box-shadow: 0 3cqw 6cqw -2cqw rgba(10, 10, 10, .25); display: flex; flex-direction: column; gap: 2.4cqw; }
.mgd__doc b { font-size: 4cqw; font-weight: 900; letter-spacing: .2em; text-align: center; }
.mgd__doc i { height: 1.8cqw; border-radius: 1cqw; background: #ecede4; }
.mgd__doc i.s { width: 60%; }
.mgd__doc svg { width: 100%; height: 13cqw; margin-top: 1cqw; border-bottom: .4cqw dashed #c4c5b8; overflow: visible; }
.mgd__doc path { fill: none; stroke: #0a0a0a; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 260; animation: mgSig 5s ease-in-out infinite both; }
@keyframes mgSig { 0%, 12% { stroke-dashoffset: 260; } 50%, 88% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 260; } }
.mgd__ok { position: absolute; right: 14%; top: 18%; padding: 1.6cqw 3.2cqw; border-radius: 99px; background: #c8f000; color: #0a0a0a; font-size: 3.4cqw; font-weight: 900;
  box-shadow: 0 2cqw 4cqw -1.5cqw rgba(72, 113, 0, .5); transform: rotate(6deg); animation: mgStamp 5s infinite both; }
@keyframes mgStamp { 0%, 48% { opacity: 0; transform: rotate(6deg) scale(1.6); } 56%, 88% { opacity: 1; transform: rotate(6deg) scale(1); } 100% { opacity: 0; transform: rotate(6deg) scale(1); } }

/* 06 자동 문자 · 알림톡 — 알림 카드에 보낸 수가 굴러 오른다(리틀리 「자동 DM」 결) */
.mgm { position: absolute; inset: 0; display: grid; place-items: center; }
.mgm__n { position: relative; display: flex; align-items: center; gap: 3cqw; width: 64cqw; padding: 4cqw; border-radius: 4cqw; background: #fff;
  box-shadow: 0 3cqw 6cqw -2cqw rgba(10, 10, 10, .22); font-size: max(12px, 4.4cqw); animation: mgBob2 5s ease-in-out infinite; }
@keyframes mgBob2 { 50% { transform: translateY(-1.5cqw); } }
.mgm__n--b { position: absolute; top: 58%; width: 56cqw; opacity: .5; transform: scale(.94); animation: none; font-size: max(12px, 3.8cqw); }
.mgm__ic { display: grid; place-items: center; width: 10cqw; height: 10cqw; border-radius: 3cqw; background: #0a0a0a; flex: none; }
.mgm__ic img { width: 60%; }
.mgm__n b { font-weight: 800; letter-spacing: -.03em; white-space: nowrap; }
.mgm__cnt { position: absolute; right: -2cqw; top: -5cqw; height: 7.4cqw; padding: 0 2.6cqw; border-radius: 2cqw; background: #ff4d4d; color: #fff; font-style: normal;
  font-size: 4cqw; font-weight: 900; overflow: hidden; line-height: 7.4cqw; }
.mgm__cnt i { display: flex; flex-direction: column; font-style: normal; animation: mgCount 5s steps(1) infinite; }
.mgm__cnt s { text-decoration: none; height: 7.4cqw; }
@keyframes mgCount { 0% { transform: translateY(0); } 20% { transform: translateY(-7.4cqw); } 40% { transform: translateY(-14.8cqw); } 60% { transform: translateY(-22.2cqw); } 80%, 100% { transform: translateY(-29.6cqw); } }

/* 07 방문 통계 · 운영 보고 — 추세선이 그려지고 텔레그램 보고가 미끄러져 들어온다 */
.mgt { position: absolute; inset: 0; }
.mgt__line { position: absolute; left: 8%; right: 8%; top: 14%; height: 34%; overflow: visible; }
.mgt__line path { fill: none; stroke: #0a0a0a; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 260; animation: mgSig 5s ease-in-out infinite both; }
.mgt__msg { position: absolute; left: 10%; right: 10%; bottom: 10%; display: flex; align-items: center; gap: 3cqw; padding: 3.4cqw; border-radius: 3.4cqw; background: #fff;
  box-shadow: 0 3cqw 6cqw -2cqw rgba(10, 10, 10, .22); animation: mgSlide 5s cubic-bezier(.22, 1, .36, 1) infinite both; }
@keyframes mgSlide { 0%, 40% { opacity: 0; transform: translateY(40%); } 52%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
.mgt__av { display: grid; place-items: center; width: 9cqw; height: 9cqw; border-radius: 50%; background: #2aabee; color: #fff; font-size: max(12px, 4.4cqw); flex: none; }
.mgt__msg b { display: flex; flex-direction: column; font-size: 3.6cqw; font-weight: 800; }
.mgt__msg small { font-size: 3.2cqw; font-weight: 700; color: #487100; }

/* 08 앱 만들기 — 휴대폰 홈 화면 빈자리에 우리 앱이 통 내려앉는다 */
.mgapp { position: absolute; inset: 0; }
.mgapp__ph { position: absolute; left: 50%; top: 10%; bottom: -12%; width: 40cqw; transform: translateX(-50%); padding: 7cqw 4cqw; border-radius: 6cqw; background: #0a0a0a;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 3cqw; align-content: start; }
.mgapp__ph i { aspect-ratio: 1; border-radius: 2.6cqw; background: #2b2c26; }
.mgapp__me { aspect-ratio: 1; border-radius: 2.6cqw; background: #0a0a0a; border: .5cqw solid #c8f000; display: grid; place-items: center; animation: mgDrop 5s cubic-bezier(.34, 1.56, .64, 1) infinite both; }
.mgapp__me img { width: 62%; }
@keyframes mgDrop { 0%, 20% { opacity: 0; transform: translateY(-160%) scale(.8); } 38%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
.mgapp__ok { position: absolute; right: 12%; top: 22%; padding: 1.4cqw 3cqw; border-radius: 99px; background: #c8f000; color: #0a0a0a; font-size: 3.2cqw; font-weight: 900;
  animation: mgPop 5s 1.8s infinite both; }

/* ══════════════════ 하는 일 자세히 — 한 화면에 하나씩 · 영상 + 굴림 모션 ══════════════════
   칸마다 --v(0→1, 칸이 화면에 들어오는 만큼 · index2.js ftDrive)로 영상 판이 커지며 올라오고, 세부 넷이 차례로 들어온다.
   PC(1200~) 왼쪽 목차는 붙어 따라오며 지금 칸만 밝다. 지금 칸 영상만 돈다 */
.ftw { padding: clamp(56px, 8vw, 120px) 0; }
.can__toc { display: none; }
.can__list { display: grid; gap: clamp(56px, 9vw, 120px); }
.ft { display: grid; gap: 20px; align-items: center; }
.ft__k { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 999px; background: #0a0a0a; color: #f4f4ee;
  font-size: 13px; font-weight: 800; letter-spacing: -.02em; }
.ft__k i { font-family: Georgia, serif; font-style: italic; font-weight: 400; color: #c8f000; }
.ft__t { margin-top: 14px; font-size: clamp(26px, 1rem + 2.6vw, 50px); font-weight: 800; line-height: 1.14; letter-spacing: -.05em; word-break: keep-all; text-wrap: balance; }
.ft__d { margin-top: 12px; font-size: clamp(14px, .82rem + .35vw, 18px); line-height: 1.6; color: var(--ink-2); word-break: keep-all; text-wrap: balance; }
.ft__sub { list-style: none; padding: 0; margin-top: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--rule-2); }
.ft__sub li { padding: 12px 10px 12px 0; border-bottom: 1px solid var(--rule); min-width: 0; }
.ft__sub li:nth-child(odd) { padding-right: 14px; }
.ft__sub b { display: flex; align-items: center; gap: 6px; font-size: clamp(14px, .8rem + .25vw, 16.5px); font-weight: 800; letter-spacing: -.03em; }
.ft__sub b::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #487100; flex: none; }
.ft__sub span { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); word-break: keep-all; }
.ft__go { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 12px; font-size: 14px; font-weight: 800; color: var(--brand);
  border-bottom: 1.5px solid var(--rule-2); }
.ft__go em { font-style: normal; transition: transform .3s var(--ease-out); }
.ft__go:hover em { transform: translateX(4px); }
.ft__media { margin: 0; border-radius: 22px; overflow: hidden; aspect-ratio: 6 / 5; background: var(--paper-2); order: -1;
  box-shadow: 0 40px 80px -46px rgba(10, 10, 10, .5); }
.ft__media video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 굴림 모션 — 스크립트가 있을 때만 */
html.pin .ft__media { transform: translateY(calc((1 - var(--v, 1)) * 70px)) scale(calc(.9 + var(--v, 1) * .1));
  clip-path: inset(calc((1 - var(--v, 1)) * 8%) round 22px); }
html.pin .ft__txt > * { opacity: clamp(0, calc(var(--v, 1) * 4 - .4), 1); transform: translateY(calc((1 - clamp(0, calc(var(--v, 1) * 4 - .4), 1)) * 24px)); }
html.pin .ft__sub li { opacity: clamp(0, calc(var(--v, 1) * 5 - 1 - var(--s) * .3), 1); }
@media (min-width: 900px) {
  .ft { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 4vw, 72px); min-height: 78vh; }
  .ft__media { order: 0; }
}
@media (min-width: 1200px) {
  .can__in { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 40px; }
  .can__toc { display: block; position: sticky; top: 120px; align-self: start; }
  .can__toc p { font-size: 12px; font-weight: 800; letter-spacing: .08em; color: var(--ink-3); margin-bottom: 12px; }
  .can__toc ol { list-style: none; padding: 0; margin: 0; border-left: 1.5px solid var(--rule-2); }
  .can__toc a { display: flex; align-items: baseline; gap: 8px; padding: 8px 0 8px 14px; margin-left: -1.5px; border-left: 1.5px solid transparent;
    font-size: 14px; font-weight: 700; color: var(--ink-4); transition: color .3s, border-color .3s; }
  .can__toc a i { font-family: Georgia, serif; font-style: italic; font-size: 12px; }
  .can__toc a.is-on { color: var(--ink); border-left-color: #0a0a0a; }
  .can__toc a.is-on i { color: #487100; }
}

/* ══════════════════ 「만들고 끝이 아니에요」 — 일곱 단계 ══════════════════
   모바일: 단계 카드가 위아래로(영상은 카드 안 .flow__mfig).
   PC(1024~): 화면을 붙잡고 굴린 만큼 단계가 넘어간다 — 왼쪽 글(지금 단계만), 오른쪽 영상(지금 것만), 위 진행 띠 */
.intro__next { margin-top: 26px; font-size: 14px; font-weight: 800; }
.intro__next i { font-style: normal; display: inline-block; animation: introHint2 1.4s ease-in-out infinite; }
@keyframes introHint2 { 50% { transform: translateY(4px); } }
.flow { position: relative; padding: 56px 0 24px; }
.flow__h { text-align: center; font-size: clamp(26px, 1rem + 3vw, 54px); font-weight: 800; letter-spacing: -.05em; line-height: 1.15; word-break: keep-all; }
.flow__h b { color: var(--brand); }
.flow__bar { display: none; }
.flow__steps { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; }
.flow__st { padding: 18px; border-radius: 20px; background: var(--white); border: 1px solid var(--rule); }
.flow__no { display: inline-flex; align-items: baseline; gap: 8px; font-family: Georgia, "Times New Roman", serif; font-style: italic;
  font-size: 15px; color: var(--ink-3); }
.flow__no em { font-family: inherit; font-style: normal; font-family: Pretendard, system-ui, sans-serif; font-size: 13px; font-weight: 800;
  color: #0a0a0a; background: var(--lime); padding: 3px 10px; border-radius: 999px; letter-spacing: -.02em; }
.flow__t { margin-top: 10px; font-size: clamp(19px, .9rem + 1vw, 24px); font-weight: 800; letter-spacing: -.045em; line-height: 1.25; word-break: keep-all; }
.flow__d { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--ink-2); word-break: keep-all; }
.flow__pts { list-style: none; padding: 0; margin-top: 10px; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.flow__pts li { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.flow__pts li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: #0a0a0a center / 9px no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' fill='none' stroke='%23c8f000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.flow__mfig { margin: 14px 0 0; border-radius: 14px; overflow: hidden; aspect-ratio: 6 / 5; background: var(--paper-2); }
.flow__mfig video, .flow__fig video { display: block; width: 100%; height: 100%; object-fit: cover; }
.flow__media { display: none; }
@media (min-width: 600px) and (max-width: 1023px) {
  .flow__st { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 18px; align-items: start; }
  .flow__st > :not(.flow__mfig) { grid-column: 1; }
  .flow__mfig { grid-column: 2; grid-row: 1 / span 5; margin: 0; }
}
@media (min-width: 1024px) {
  .flow { padding: 0; height: calc(var(--n) * 70vh + 100vh); }
  .flow__stick { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; }
  .flow__in { width: 100%; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto 1fr;
    gap: 28px 56px; padding-top: 80px; padding-bottom: 40px; height: 100%; }
  .flow__head { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 22px; }
  .flow__h { font-size: clamp(30px, 1rem + 2.2vw, 48px); }
  /* 진행 띠 — 지난 단계는 라임 점, 지금 단계는 검정 알약 */
  .flow__bar { list-style: none; padding: 0; margin: 0; display: flex; align-items: center; gap: 6px; }
  .flow__bar li { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 700;
    color: var(--ink-3); transition: background-color .35s, color .35s; white-space: nowrap; }
  .flow__bar li b { font-family: Georgia, serif; font-style: italic; font-weight: 400; font-size: 12px; }
  .flow__bar li.is-done { color: var(--ink); }
  .flow__bar li.is-done b { color: var(--brand); }
  .flow__bar li.is-on { background: #0a0a0a; color: #f4f4ee; }
  .flow__bar li.is-on b { color: var(--lime); }
  .flow__steps { margin: 0; position: relative; align-self: center; display: block; }
  .flow__st { position: absolute; left: 0; right: 0; top: 50%; padding: 0; background: none; border: 0;
    opacity: 0; visibility: hidden; transform: translateY(calc(-50% + 26px)); transition: opacity .45s, transform .6s cubic-bezier(.22, 1, .36, 1), visibility 0s .6s; }
  .flow__st.is-on { opacity: 1; visibility: visible; transform: translateY(-50%); transition-delay: 0s; }
  .flow__st.is-past { transform: translateY(calc(-50% - 26px)); }
  .flow__no { font-size: 20px; }
  .flow__no em { font-size: 14px; }
  .flow__t { margin-top: 16px; font-size: clamp(30px, 1rem + 2vw, 46px); line-height: 1.15; }
  .flow__d { margin-top: 14px; font-size: 17px; line-height: 1.6; }
  .flow__pts { margin-top: 20px; flex-direction: column; gap: 10px; }
  .flow__pts li { font-size: 15px; }
  .flow__pts li::before { width: 18px; height: 18px; background-size: 11px; }
  .flow__mfig { display: none; }
  .flow__media { display: block; position: relative; align-self: center; width: 100%; aspect-ratio: 6 / 5; max-height: calc(100vh - 230px);
    margin-inline: auto; border-radius: 22px; overflow: hidden; background: var(--paper-2);
    box-shadow: 0 40px 80px -40px rgba(10, 10, 10, .45); }
  .flow__fig { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.04); transition: opacity .5s, transform .8s cubic-bezier(.22, 1, .36, 1); }
  .flow__fig.is-on { opacity: 1; transform: none; }
}
html:not(.js) .flow { height: auto; }

/* ══════════════════ 구독 하나로 홈페이지 여러 곳 ══════════════════ */
.multi { padding: clamp(56px, 8vw, 120px) 0; }
.multi__in { display: grid; gap: 32px; align-items: center; }
.multi__eye { display: inline-flex; padding: 6px 12px; border-radius: 999px; background: var(--lime); color: #0a0a0a; font-size: 13px; font-weight: 800; }
.multi__t { margin-top: 14px; word-break: keep-all; }
.multi .chap__t b { color: var(--lime); background: none; padding: 0; }
.multi__s { margin-left: 0; margin-right: 0; text-align: left; word-break: keep-all; }
.multi__pts { list-style: none; padding: 0; margin-top: 18px; display: flex; flex-wrap: wrap; gap: 6px; }
.multi__pts li { padding: 7px 13px; border-radius: 999px; border: 1px solid var(--rule-2); font-size: 13px; font-weight: 700; color: var(--ink-2); }
/* 사이트 세 장 — 계단처럼 겹친 브라우저 창. 이름표는 창 위쪽(다음 창에 가리지 않게) */
.multi__sites { list-style: none; padding: 0; margin: 0; position: relative; aspect-ratio: 1 / .78; }
.multi__site { position: absolute; width: 70%; border-radius: 12px; overflow: hidden; background: #fff;
  box-shadow: 0 30px 60px -26px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .1);
  left: calc(var(--i) * 15%); top: calc(var(--i) * 22%); z-index: calc(var(--i) + 1);
  transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.multi__sites:hover .multi__site { transform: translate(calc((var(--i) - 1) * 10px), calc((var(--i) - 1) * 8px)); }
.multi__bar { display: flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px; background: #f3f3ee; }
.multi__bar i { width: 6px; height: 6px; border-radius: 50%; background: #d6d7cd; }
.multi__bar em { margin-left: 8px; height: 13px; padding: 0 8px; border-radius: 7px; background: #fff; font-style: normal;
  font-size: 8.5px; line-height: 13px; color: #7a7b72; white-space: nowrap; }
.multi__site img { display: block; width: 100%; height: auto; aspect-ratio: 730 / 418; }
.multi__site b { position: absolute; right: 8px; top: 30px; padding: 4px 9px; border-radius: 999px; background: #0a0a0a; color: var(--lime);
  font-size: 11px; font-weight: 800; }
@media (min-width: 768px) {
  .multi__bar { height: 28px; }
  .multi__bar em { font-size: 10px; height: 16px; line-height: 16px; }
  .multi__site b { top: 38px; right: 12px; font-size: 13px; padding: 5px 12px; }
}
@media (min-width: 1024px) {
  .multi__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 64px; }
}

/* ══════════════════ 머리 ══════════════════
   왼쪽은 안목 로고, 가는 세로선, 그리고 만드는 것의 이름(딸깍).
   파는 물건은 딸깍이지만 파는 회사는 안목이다. */
.nav2 {
  position: fixed; inset: 0 0 auto; z-index: 200; height: 64px;
  display: flex; align-items: center; transition: color .35s var(--ease), transform .45s cubic-bezier(.22, 1, .36, 1);
}
/* 아래로 굴리면 위로 숨고, 위로 굴리면 내려온다(2026-10-16 · index2.js) — 메뉴 · 계정 창이 열려 있으면 그대로 */
.nav2.is-hide:not(.is-menu) { transform: translateY(-100%); }
.nav2::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: rgba(246, 246, 241, .82);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  box-shadow: inset 0 -1px 0 var(--rule);
  transition: opacity .3s var(--ease), background .35s var(--ease);
}
.nav2.is-stuck::before { opacity: 1; }
/* 검정 · 라임 면 위를 지날 때는 머리도 같이 뒤집힌다(index2.js 가 표시를 붙인다).
   라임 면에서는 글자가 흰색이 아니라 **검정**이다 — 라임 위 흰 글자는 대비 1.3 이다. */
.nav2.on-ink { color: #f4f4ee; }
.nav2.on-ink::before { background: rgba(10, 10, 10, .8); box-shadow: inset 0 -1px 0 rgba(255,255,255,.14); }
.nav2.on-brand { color: #0a0a0a; }
.nav2.on-brand::before { background: rgba(200, 240, 0, .86); box-shadow: inset 0 -1px 0 rgba(10,10,10,.16); }
.nav2__prog {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  transform: scaleX(var(--read, 0)); transform-origin: left; background: currentColor;
  opacity: 0; transition: opacity .3s var(--ease);
}
.nav2.is-stuck .nav2__prog { opacity: .85; }
.nav2__in { display: flex; align-items: center; gap: var(--s3); width: 100%; }
/* 오른쪽 덩이 — 로그인 · 회원가입(또는 썸네일) · 무료로 시작하기 · 메뉴 단추 */
.nav2__right { display: flex; align-items: center; gap: 6px; margin-left: auto; }
/* PC — 로고 왼쪽 · 메뉴 가운데 · 오른쪽 덩이(2026-10-16 지시). 가운데가 진짜 가운데이도록 세 칸(1fr auto 1fr).
   머리만 폭을 넓혀(최대 1440) 메뉴와 오른쪽 덩이가 부딪히지 않게 */
@media (min-width: 1024px) {   /* 머리는 1024 부터 펼친다 — 900~1023 은 단추가 끼어 시트 메뉴로(2026-10-16) */
  .nav2 .nav2__in { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(12px, 1.4vw, 24px);
    max-width: 1440px; padding-inline: clamp(16px, 2.6vw, 48px); }
  /* 좁은 PC(900~1100 남짓)에서도 글자가 꺾이지 않게 — 한 줄로 묶고 메뉴 사이 · 글자를 화면 폭에 맞춰 줄인다(2026-10-16 지시) */
  .nav2 .nav2__menu { gap: clamp(12px, 1.7vw, 28px); }
  .nav2__gt, .nav2__auth a, .nav2__cta, .nav2__logo { white-space: nowrap; flex: none; }
  .nav2__gt { font-size: clamp(12px, .55rem + .45vw, 13.5px); }
  .nav2__auth a { padding: 0 clamp(8px, .9vw, 12px); font-size: clamp(12px, .55rem + .45vw, 13px); }
  .nav2__cta { font-size: clamp(12px, .55rem + .45vw, 13px); margin-left: clamp(6px, 1vw, 14px); }
  .nav2__logo { justify-self: start; }
  .nav2 .nav2__menu { justify-self: center; margin: 0; }
  .nav2__right { justify-self: end; margin: 0; gap: 4px; }
}
/* 안목 로고 × 딸깍 로고 — 둘 다 그림이다. 높이는 **눈에 같아 보이게** 따로 잡았다.
   딸깍 로고는 위에 '안목 웹빌더' 한 줄이 얹혀 있어서, 같은 픽셀 높이로 맞추면
   글자가 안목 워드마크보다 작아 보인다. 그래서 조금 더 키워 둔다. */
.nav2__logo { display: flex; align-items: center; gap: var(--s3); min-height: 44px; flex: none; }
.nav2__logo img { width: auto; }
.nav2__anmok { height: 19px; }
.nav2__prod { height: 22px; }
/* 로고는 색마다 진짜 파일이 있다(2026-10-12) — filter 로 뒤집지 않는다.
   검정 면에서는 라임 로고, 밝은 면 · 라임 면에서는 검정 로고를 세운다. */
.nav2 .lg--l { display: none; }
.nav2.on-ink .lg--l { display: block; }
.nav2.on-ink .lg--k { display: none; }
.nav2__x {
  font-size: 15px; font-weight: 600; opacity: .62; line-height: 1;
  margin: 0 calc(var(--s2) * -1 + 2px);
}
/* 메뉴 — 묶음(.nav2__g) 마다 이름(.nav2__gt)과 드롭 판(.nav2__dd). 2026-10-16 드롭 메뉴를 더했다 */
.nav2__menu { display: none; gap: var(--s6); margin-left: auto; }
.nav2__g { position: relative; }
.nav2__gt {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; position: relative;
  font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: inherit; opacity: .74;
  background: none; border: 0; padding: 0; cursor: pointer; transition: opacity .2s;
}
.nav2__gt em { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .3s var(--ease); }
.nav2__g:hover .nav2__gt, .nav2__g:focus-within .nav2__gt { opacity: 1; }
/* 드롭 판 — 흰 카드. 항목 = 이름 + 한 줄 설명. 관리자 기능(열 개)은 두 단 */
.nav2__dd { display: none; }
.nav2__ddin a { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px;
  transition: background-color .2s; }
.nav2__ddin a b { font-size: 14px; font-weight: 800; letter-spacing: -.03em; color: #0a0a0a; }
.nav2__ddin a span { font-size: 12px; font-weight: 500; color: #5f6058; letter-spacing: -.02em; line-height: 1.35; }
.nav2__ddin a { line-height: 1.3; }
.nav2__ddin a:hover { background: #f3f4ec; }
.nav2__ddin a:hover b::after { content: " \002192"; color: #487100; }
@media (min-width: 1024px) {
  .nav2__dd {
    display: block; position: absolute; left: 50%; top: 100%; padding-top: 8px;
    opacity: 0; visibility: hidden; transform: translate(-50%, 6px);
    transition: opacity .25s var(--ease), transform .3s var(--ease-out), visibility 0s .3s;
  }
  .nav2__g:hover .nav2__dd, .nav2__g:focus-within .nav2__dd {
    opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s;
  }
  .nav2__g:hover .nav2__gt em, .nav2__g:focus-within .nav2__gt em { transform: translateY(1px) rotate(-135deg); }
  .nav2__ddin { width: 280px; padding: 8px; border-radius: 18px; background: #fff; color: #0a0a0a;
    box-shadow: 0 30px 60px -24px rgba(10, 10, 10, .35), 0 0 0 1px rgba(10, 10, 10, .06); }
  .nav2__dd--wide .nav2__ddin { width: 540px; display: grid; grid-template-columns: 1fr 1fr; }
}
.nav2__cta {
  margin-left: 6px; display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  font-size: 13px; font-weight: 800; letter-spacing: .04em;
  border-bottom: 1.5px solid currentColor; padding-bottom: 2px; white-space: nowrap;
}
.nav2__cta em { font-style: normal; transition: transform .3s var(--ease-out); }
.nav2__cta:hover em { transform: translateX(4px); }
/* 메뉴 단추 — 테 두른 동그라미에 두 줄. 열리면 ×(2026-10-16 「애매하다」 → 다시) */
.nav2__toggle { position: relative; display: block; width: 42px; height: 42px; flex: none; margin-left: 4px;
  border-radius: 50%; border: 1.5px solid currentColor; color: inherit; background: transparent;
  transition: background-color .3s, color .3s, border-color .3s, transform .3s var(--ease-out); }
.nav2__toggle i { position: absolute; left: 50%; top: 50%; width: 16px; height: 1.8px; margin: 0; border-radius: 2px;
  background: currentColor; transition: transform .45s cubic-bezier(.22, 1, .36, 1), width .3s; }
.nav2__toggle i:nth-child(1) { transform: translate(-50%, -4px); }
.nav2__toggle i:nth-child(2) { transform: translate(-50%, 3px); width: 10px; margin-left: -3px; }
.nav2__toggle:hover i:nth-child(2) { width: 16px; margin-left: 0; }
.nav2__toggle[aria-expanded="true"] { background: #c8f000; border-color: #c8f000; color: #0a0a0a; transform: rotate(90deg); }
.nav2__toggle[aria-expanded="true"] i:nth-child(1) { transform: translate(-50%, 0) rotate(45deg); }
.nav2__toggle[aria-expanded="true"] i:nth-child(2) { transform: translate(-50%, 0) rotate(-45deg); width: 16px; margin-left: 0; }
.nav2__mfoot { display: none; }
/* 로그인 · 회원가입(PC) — 로그인 전에만. 로그인 뒤에는 썸네일(.nav2__me). html.is-auth 가 가른다 */
.nav2__auth { display: none; align-items: center; gap: 4px; }
.nav2__auth a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 999px;
  font-size: 13px; font-weight: 700; letter-spacing: .02em; opacity: .78; transition: opacity .2s, background-color .2s; }
.nav2__auth a:hover { opacity: 1; }
.nav2__auth .nav2__join { border: 1.3px solid currentColor; opacity: 1; }
.nav2__me { display: none; position: relative; }
.nav2__av { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 0; padding: 0;
  background: #0a0a0a; color: #c8f000; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer;
  box-shadow: 0 0 0 2px rgba(200, 240, 0, .0); transition: box-shadow .25s; }
.nav2__av:hover, .nav2__av[aria-expanded="true"] { box-shadow: 0 0 0 3px rgba(200, 240, 0, .55); }
.nav2.on-ink .nav2__av { background: #c8f000; color: #0a0a0a; }
.nav2__av--lg { width: 42px; height: 42px; font-size: 16px; cursor: default; }
.nav2__mepop { position: absolute; right: 0; top: calc(100% + 10px); width: 240px; padding: 8px; border-radius: 18px;
  background: #fff; color: #0a0a0a; box-shadow: 0 30px 60px -24px rgba(10, 10, 10, .35), 0 0 0 1px rgba(10, 10, 10, .06);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .25s var(--ease), transform .3s var(--ease-out), visibility 0s .3s; }
.nav2__me.is-open .nav2__mepop { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nav2__mehd { display: flex; align-items: center; gap: 10px; padding: 8px 8px 12px; margin-bottom: 4px; border-bottom: 1px solid #ecece6; }
.nav2__mehd b { display: flex; flex-direction: column; font-size: 14px; font-weight: 800; letter-spacing: -.03em; line-height: 1.3; }
.nav2__mehd small { font-size: 12px; font-weight: 500; color: #7a7b72; }
/* 계정 메뉴 — 맨 위 「내 홈페이지 관리자」 큰 단추, 그 아래 두 묶음(계정 · 소통), 맨 아래 로그아웃 */
.nav2__mepop { width: 260px; }
.nav2__megoto { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin: 4px 0 6px;
  padding: 0 14px; border-radius: 12px; background: #0a0a0a; color: #c8f000; font-size: 14px; font-weight: 800; letter-spacing: -.02em; }
.nav2__megoto em { font-style: normal; transition: transform .25s var(--ease-out); }
.nav2__megoto:hover em { transform: translateX(3px); }
.nav2__megrp { padding: 4px 0; }
.nav2__megrp p { padding: 6px 10px 2px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: #9a9b92; }
.nav2__megrp + .nav2__megrp { border-top: 1px solid #ecece6; }
.nav2__megrp a { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 10px; border-radius: 10px;
  font-size: 13.5px; font-weight: 700; letter-spacing: -.02em; color: #0a0a0a; }
.nav2__megrp a svg { width: 17px; height: 17px; color: #7a7b72; flex: none; }
.nav2__megrp a:hover { background: #f3f4ec; }
.nav2__megrp a:hover svg { color: #487100; }
.nav2__mepop .nav2__meout { display: flex; align-items: center; min-height: 38px; padding: 0 10px; margin-top: 2px;
  border-top: 1px solid #ecece6; font-size: 13px; font-weight: 600; color: #7a7b72; }
.nav2__mepop .nav2__meout:hover { color: #0a0a0a; }
@media (min-width: 1024px) {
  html:not(.is-auth) .nav2__auth { display: flex; }
  html.is-auth .nav2__me { display: block; }
}
/* 모바일 시트 맨 위 계정 줄 */
.nav2__mauth, .nav2__mme { display: none; }

@media (min-width: 1024px) {
  .nav2__menu, .nav2__menu[hidden] { display: flex; }
  .nav2__cta { margin-left: 14px; }
  .nav2__toggle { display: none; }
}
/* 좁은 화면 메뉴 — 머리 아래를 덮는 **검정 시트**(2026-10-16 「더 세련되게」).
   묶음 이름은 크게 + 앞에 번호, 누르면 아코디언으로 하위 항목(두 단). 맨 아래 「무료로 시작하기」 · 메일.
   열릴 때 시트가 위에서 펼쳐지고 줄이 차례로 올라온다. 열린 동안 머리도 검정(.is-menu) */
@media (max-width: 1023px) {
  .nav2__menu {
    position: fixed; inset: 64px 0 0; flex-direction: column; gap: 0; counter-reset: ng;
    padding: 8px var(--s5) calc(24px + env(safe-area-inset-bottom));
    background: #0a0a0a; color: #f4f4ee; overflow-y: auto; overscroll-behavior: contain;
    clip-path: inset(0 0 100% 0); transition: clip-path .5s cubic-bezier(.22, 1, .36, 1);
  }
  .nav2__menu:not([hidden]) { display: flex; }
  .nav2__menu.is-in { clip-path: inset(0 0 0 0); }
  .nav2__g { border-bottom: 1px solid rgba(244, 244, 238, .12); counter-increment: ng;
    opacity: 0; transform: translateY(14px); transition: opacity .4s, transform .5s cubic-bezier(.22, 1, .36, 1); }
  .nav2__menu.is-in .nav2__g { opacity: 1; transform: none; }
  .nav2__menu.is-in .nav2__g:nth-child(2) { transition-delay: .04s; }
  .nav2__menu.is-in .nav2__g:nth-child(3) { transition-delay: .08s; }
  .nav2__menu.is-in .nav2__g:nth-child(4) { transition-delay: .12s; }
  .nav2__menu.is-in .nav2__g:nth-child(5) { transition-delay: .16s; }
  .nav2__gt { width: 100%; min-height: 50px; justify-content: flex-start; gap: 12px; font-size: 18px; font-weight: 800;
    letter-spacing: -.04em; opacity: 1; color: #f4f4ee; }
  .nav2__gt::before { content: counter(ng, decimal-leading-zero); font-family: Georgia, "Times New Roman", serif; font-style: italic;
    font-weight: 400; font-size: 12px; letter-spacing: 0; color: #c8f000; width: 18px; }
  .nav2__gt em { margin-left: auto; width: 7px; height: 7px; }
  .nav2__g.is-open .nav2__gt em { transform: translateY(1px) rotate(-135deg); }
  .nav2__g.is-open .nav2__dd { display: block; padding: 0 0 10px 30px; animation: faqIn .35s var(--ease-out) both; }
  .nav2__ddin { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
  .nav2__ddin a { padding: 6px 0; border-radius: 0; }
  .nav2__ddin a:hover { background: none; }
  .nav2__ddin a b { font-size: 13.5px; color: #f4f4ee; }
  .nav2__ddin a span { font-size: 11px; color: rgba(244, 244, 238, .5); }
  .nav2__ddin a:hover b::after { color: #c8f000; }
  html:not(.is-auth) .nav2__mauth { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 0 12px;
    border-bottom: 1px solid rgba(244, 244, 238, .12); }
  .nav2__mbtn { display: flex; align-items: center; justify-content: center; min-height: 42px; border-radius: 999px;
    border: 1.3px solid rgba(244, 244, 238, .35); font-size: 14px; font-weight: 800; color: #f4f4ee; }
  .nav2__mbtn--on { background: #f4f4ee; border-color: #f4f4ee; color: #0a0a0a; }
  html.is-auth .nav2__mme { display: block; border-bottom: 1px solid rgba(244, 244, 238, .12); }
  .nav2__mmehd { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 54px; padding: 6px 0;
    background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
  .nav2__mmehd .nav2__av { background: #c8f000; color: #0a0a0a; width: 32px; height: 32px; font-size: 13px; flex: none; }
  .nav2__mmehd b { display: flex; flex-direction: column; font-size: 14px; font-weight: 800; letter-spacing: -.03em; line-height: 1.3; color: #f4f4ee; }
  .nav2__mmehd small { font-size: 11.5px; font-weight: 500; color: rgba(244, 244, 238, .55); }
  .nav2__mmehd em { margin-left: auto; width: 8px; height: 8px; border-right: 1.6px solid #f4f4ee; border-bottom: 1.6px solid #f4f4ee;
    transform: translateY(-2px) rotate(45deg); transition: transform .3s var(--ease); }
  .nav2__mme.is-open .nav2__mmehd em { transform: translateY(1px) rotate(-135deg); }
  .nav2__mmelinks { display: none; grid-template-columns: 1fr 1fr; gap: 0 12px; padding: 0 0 10px 42px; }
  .nav2__mme.is-open .nav2__mmelinks { display: grid; animation: faqIn .35s var(--ease-out) both; }
  .nav2__mmelinks a { display: flex; align-items: center; min-height: 34px; font-size: 13px; font-weight: 700; color: #f4f4ee; }
  .nav2__mmelinks .nav2__mmeout { color: rgba(244, 244, 238, .5); font-weight: 600; }
  .nav2__mfoot { display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding-top: 20px;
    opacity: 0; transition: opacity .4s .2s; }
  .nav2__menu.is-in .nav2__mfoot { opacity: 1; }
  .nav2__mcta { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 999px;
    background: #c8f000; color: #0a0a0a; font-size: 15px; font-weight: 800; letter-spacing: -.02em; }
  .nav2__mcta em { font-style: normal; }
  .nav2__mmail { align-self: center; display: inline-flex; align-items: center; min-height: 36px; font-size: 12.5px; font-weight: 700;
    color: rgba(244, 244, 238, .6); }
  /* 메뉴가 열린 동안 머리는 검정 · 라임 로고 */
  .nav2.is-menu { color: #f4f4ee; }
  .nav2.is-menu::before { opacity: 1; background: #0a0a0a; box-shadow: inset 0 -1px 0 rgba(244, 244, 238, .12); }
  .nav2.is-menu .lg--l { display: block; }
  .nav2.is-menu .lg--k { display: none; }
  .nav2.is-menu .nav2__prog { opacity: 0; }
}
@media (max-width: 560px) { .nav2__prod, .nav2__x, .nav2.is-menu .nav2__prod.lg--l, .nav2.on-ink .nav2__prod.lg--l { display: none; } }
/* 메뉴가 열린 동안 머리의 「무료로 시작하기」 는 숨긴다 — 시트 아래 큰 단추와 겹치고, 좁은 화면에서 머리가 넘쳤다 */
@media (max-width: 1023px) { .nav2.is-menu .nav2__cta { visibility: hidden; } }
@media (max-width: 420px) { .nav2__anmok { height: 16px; } .nav2__cta { font-size: 12px; } }

/* ══════════════════ 링크형 단추 ══════════════════ 알약을 쓰지 않는다 */
.lnk {
  display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px;
  font-size: 15px; font-weight: 800; letter-spacing: -.01em;
  border-bottom: 2px solid currentColor; padding-bottom: 3px;
  transition: gap .3s var(--ease-out), border-color .3s, color .3s;
}
.lnk em { font-style: normal; transition: transform .3s var(--ease-out); }
.lnk:hover { gap: var(--s3); }
.lnk:hover em { transform: translateX(3px); }
.lnk--soft { border-bottom-color: var(--rule-2); color: var(--ink-3); }
.lnk--soft:hover { border-bottom-color: currentColor; color: var(--ink); }
.lnk--main { font-size: 16.5px; gap: var(--s3); padding-bottom: 6px; border-bottom-width: 2px; }
.lnk--main em {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid currentColor; font-size: 12px; line-height: 1;
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease-out);
}
.lnk--main:hover em { background: currentColor; color: var(--paper); transform: translateX(2px); }
.lnk--sub { font-size: 14px; color: var(--ink-3); border-bottom-color: transparent; font-weight: 700; padding-bottom: 4px; }
.lnk--sub:hover { color: var(--ink); border-bottom-color: currentColor; }

/* ══════════════════ 표지 ══════════════════
   **영상이 주인공이다**(2026-09-22 지시). 기울이지 않고, 처음부터 크게 놓는다.
   굴리면 폭이 자라 판을 넘는다 — 커지는 방향이라 굴릴수록 더 잘 보인다. */
.cover {
  position: relative; overflow: hidden;
  padding: calc(64px + clamp(16px, 3.2svh, 40px)) 0 clamp(16px, 3svh, 36px);
  min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
}
.cover__glow {
  position: absolute; left: 50%; top: -12%; width: min(1100px, 130vw); aspect-ratio: 1;
  transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(38% 38% at 50% 42%, var(--glow), transparent 68%);
  filter: blur(50px);
}
/* 좁은 화면 — 글이 위, 영상이 아래. 가운데로 모은다 */
.cover__in {
  position: relative; width: 100%;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(18px, 3.4svh, 40px);
  padding-inline: var(--s5);
}
.cover__txt {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: clamp(10px, 2.2svh, 22px); width: 100%; max-width: var(--shell);
}
/* ── 넓은 화면 — 왼쪽 글 · 오른쪽 영상, 영상은 화면 오른쪽 끝까지 ──
   판 안에 가두지 않는다. 가두면 좌우 여백이 똑같아져 흔한 '좌 글 · 우 그림' 이 되는데,
   한쪽을 끝까지 흘리면 판이 비대칭으로 읽힌다.
   왼쪽 글은 .shell 과 같은 자리에서 시작해야 머리띠의 로고와 세로줄이 맞는다. */
@media (min-width: 1024px) {
  /* 영상 칸을 **1fr(남는 만큼)** 으로 둔다. auto 로 두고 영상에 고정 폭을 주면
     네 칸의 합이 화면보다 커져 넘친다(1280px 에서 +38px 이 나왔다). */
  .cover__in {
    display: grid; align-items: center; padding-inline: 0;
    grid-template-columns:
      /* 왼쪽 바깥 여백 — **1fr 로 두면 안 된다.** 남는 자리를 영상과 반씩 나눠 가져
         영상이 377px 로 쪼그라들었다. 판(shell)을 가운데 둘 만큼만 준다. */
      minmax(var(--s9), calc((100% - var(--shell)) / 2))
      minmax(0, calc(var(--shell) * .46))         /* 글 */
      var(--s11)                                  /* 사이 */
      minmax(300px, 1fr);                         /* 영상 — 남는 만큼, 화면 끝까지 */
    gap: 0;
  }
  .cover__txt {
    grid-column: 2; align-items: flex-start; text-align: left; max-width: none;
  }
  .rise { grid-column: 4; margin: 0 0 0 auto; }
}
/* 알약 배지(.cover__eye · .chap__mark · .end__eye)는 전부 뺐다(2026-09-22 지시).
   마디 번호와 이름은 오른쪽 장 이동 레일(.idx)이 들고 있다.

   크기는 폭(vw)과 높이(svh) 중 작은 쪽을 따른다 — 넓고 낮은 화면(1440×720)에서
   폭만 보고 키우면 제목이 커져 아래 영상이 밀려 나간다 */
.cover__t {
  font-size: min(clamp(1.9rem, .85rem + 4.6vw, 4.6rem), 9.2svh);
  font-weight: 800; line-height: 1.12; letter-spacing: -.05em;
}
.cover__t .l { display: block; }
.cover__t .w { display: inline-block; overflow: hidden; vertical-align: bottom; }
.cover__t .w > .i {
  display: inline-block; font-style: normal; transform: translateY(112%);
  transition: transform 1.05s var(--ease-out);
}
.cover__t .l.up { opacity: 1; transform: none; }
.cover__t .l.is-in .w > .i { transform: none; }
.cover__t .hl {
  background: linear-gradient(92deg, var(--brand) 10%, var(--brand-2) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cover__lead {
  max-width: 34ch; margin-inline: auto; color: var(--ink-2);
  font-size: min(var(--fs-lead), 2.6svh); line-height: 1.58; letter-spacing: -.022em;
}
.cover__lead b { color: var(--ink); font-weight: 800; }
.cover__acts {
  display: flex; flex-wrap: wrap; gap: var(--s4) var(--s8);
  align-items: center; justify-content: center; margin-top: clamp(2px, 1svh, 10px);
}
@media (min-width: 1024px) {
  /* 왼쪽 칸은 제 폭이 정해져 있으니 화면 폭을 따라가면 넘친다 — 제 칸에 맞춰 잡는다.
     칸을 넓힌 만큼 글자도 키웠다(2026-09-22 지시: 왼쪽 글이 더 커도 된다). */
  .cover__t { font-size: min(clamp(2rem, .45rem + 3.7vw, 4.5rem), 9.6svh); }
  .cover__lead {
    margin-inline: 0; max-width: 26ch;
    font-size: min(clamp(1.1rem, 1rem + .55vw, 1.45rem), 2.9svh);
  }
  .cover__acts { justify-content: flex-start; gap: var(--s5) var(--s9); }
  .cover__acts .lnk--main { font-size: 17.5px; }
  .cover__acts .lnk--sub { font-size: 15px; }
}

/* ── 굴리면 커지는 화면 ──
   --p 는 0 → 1. index2.js 가 굴린 만큼 넣는다.

   **영상을 자르지 않는다.** 앞서는 폭을 늘리면서 높이는 max-height 로 묶어 뒀는데,
   원본이 4:3(1000×750)인데 화면에는 2.16:1 로 나와 **세로 38%가 날아가고 있었다**.
   넓어질수록 더 잘려서 띠처럼 보였다(2026-09-22 지적).
   이제 칸이 원본 비율을 그대로 쓰고, 크기는 **남는 높이 안에 들어가게** 정한다.

   커지는 일은 폭이 아니라 **scale** 이 한다 — 폭을 늘리면 높이도 같이 늘어
   아래 내용이 굴릴 때마다 밀린다(자리는 그대로 두고 그려지는 크기만 키운다). */
.rise {
  --p: 0;
  --ratio: 4 / 3;                        /* 영상 원본 비율(1000×750) — 절대 자르지 않는다 */
  position: relative; margin: 0 auto;
  /* 좁은 화면 — 글 아래에 놓이므로 남는 높이가 적다 */
  width: min(560px, 92vw, calc((100svh - 430px) * 4 / 3));
}
/* 넓은 화면 — **이 규칙이 기본 .rise 보다 뒤에 있어야 한다.**
   위 표지 격자 블록 안에 넣어 봤더니, 아래 기본 .rise 규칙이 나중에 나와서
   덮어써 버렸다(미디어 쿼리는 특정도를 올려 주지 않는다). 그래서 영상이
   칸(378px)보다 넓은 560px 로 그려져 오른쪽으로 182px 삐져나갔다.

   `100%` 를 같이 걸어 칸보다 커지지 않게 한다.
   4:3 이라 폭을 줄이면 높이가 같이 줄어든다 — "높이를 좀 낮춰 달라"(2026-09-22)는
   곧 폭 상한을 낮추라는 말이다. 860 → 700px. */
@media (min-width: 1024px) {
  .rise { width: min(100%, 700px, calc((100svh - 190px) * 4 / 3)); }
}
/* **영상에는 아무것도 두르지 않는다**(2026-09-22 지시).
   테두리 · 바탕색 · 둥근 모서리 · 그림자 · 뒤에서 번지던 빛을 전부 뺐다.
   칸이 하는 일은 하나뿐이다 — **원본 비율을 쥐고 있는 것**(그래야 안 잘린다).
   뒤에서 번지던 빛(.rise__glow)은 표시 자체를 없앴다. */
.rise__frame {
  aspect-ratio: var(--ratio);
  /* 처음부터 제 크기(1)로 놓고, 굴리면 그보다 커진다.
     작게 시작하면 '커지는 맛'은 있지만 첫 화면에서 그만큼 안 보인다 — 첫인상이 먼저다. */
  transform: scale(calc(1 + var(--p) * .07));
  will-change: transform;
}
@media (min-width: 1024px) {
  /* 커질 때 오른쪽으로만 번지게 기준점을 왼쪽에 둔다 */
  .rise__frame { transform-origin: 0% 50%; }
}
/* 칸이 이미 원본 비율이라 cover 로 채워도 잘리는 데가 없다 */
.rise__frame img, .rise__frame video {
  width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 50%;
}
.rise__cap {
  display: flex; justify-content: center; gap: var(--s4); flex-wrap: wrap;
  padding-top: clamp(10px, 1.8svh, 20px); font-size: 12.5px; color: var(--ink-3);
}
@media (min-width: 1024px) { .rise__cap { justify-content: flex-start; } }
.rise__cap b { color: var(--ink-2); font-weight: 700; }
html:not(.js) .rise { --p: 1; }

/* ══════════════════ 돌아가는 낱말 ══════════════════
   '홈페이지 하나가,' 의 첫 낱말이 명함 · 카드뉴스 · 블로그 … 로 바뀐다.

   ── 좌우로 흔들리지 않게 ──
   앞서는 낱말마다 상자 폭을 바꿨더니, 제목이 가운데 맞춤이라 **글자 수에 따라
   줄 전체가 좌우로 움직였다**(2026-09-22 지적). 이제 **가장 넓은 낱말에 맞춰
   폭을 못 박는다**(JS 가 재서 넣는다). 짧은 낱말은 그 안에서 가운데로 선다.

   ── 한 글자씩 ──
   낱말을 통째로 밀어 올리지 않는다. **글자마다 조금씩 늦게** 올라가고,
   다음 낱말도 글자마다 조금씩 늦게 올라온다(--k 가 몇 번째 글자인지다).
   나가는 무리와 들어오는 무리가 같은 자리에 겹쳐 있어야 이어져 보이므로
   둘 다 상자 안에 절대 위치로 띄워 둔다. */
.roll {
  position: relative; display: inline-block; overflow: hidden;
  vertical-align: top; margin-block: -.115em;
}
/* 글의 맞춤을 그대로 물려받는다. 여기서 가운데로 못 박아 두면, 상자 폭은
   가장 넓은 낱말에 맞춰 고정돼 있으므로 **짧은 낱말이 안쪽으로 들어가 보인다** —
   왼쪽 맞춤인 표지에서 첫 글자의 시작점이 낱말마다 달라진다(2026-09-22 지적). */
.roll__stage {
  position: absolute; left: 0; right: 0; top: 0;
  text-align: inherit; white-space: nowrap;
}
.roll__ch { display: inline-block; overflow: hidden; vertical-align: top; line-height: 1.25; }
/* 글자를 올리고 내리는 일은 **CSS 가 하지 않는다** — index2.js 가 Web Animations 로 건다.
   클래스를 붙였다 떼는 방식으로 해 봤더니 전환이 시작되지 않았다: 칸을 새로 만들어
   붙이고 같은 흐름에서 클래스를 떼면 스타일을 다시 셈하지 않아, 글자가 아래(112%)에
   붙박인 채로 있다가 나중에 다른 일로 셈이 돌 때 툭 하고 제자리로 갔다(직접 재서 봤다).
   Web Animations 는 그런 눈치를 보지 않는다. */
.roll__ch > i { display: inline-block; font-style: normal; line-height: 1.25; }
.roll__ch > i.hl {
  background: linear-gradient(92deg, var(--brand) 10%, var(--brand-2) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* 가장 넓은 낱말이 줄에 안 들어가면 접는다(320px 의 '어플리케이션 하나가,' 가 그렇다).
   폭을 재 보고 JS 가 이 표시를 붙인다 — 화면 폭이 아니라 **글자가 들어가느냐**로 가른다. */
.roll.is-wrap .roll__stage { white-space: normal; }
/* JS 가 재기 전 — 첫 낱말만 보이게(목록이 세로로 쏟아지면 안 된다) */
.roll:not(.is-ready) { height: 1.25em; }
.roll:not(.is-ready) .roll__in i + i { display: none; }
.roll b {
  font-weight: inherit;
  background: linear-gradient(92deg, var(--brand) 10%, var(--brand-2) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ══════════════════ 흐르는 띠 ══════════════════
   이 페이지에서 제 박자로 도는 것은 이 띠와 위젯 띠뿐이다. 손을 얹으면 멈춘다. */
.mq { overflow: hidden; padding: clamp(28px, 4.4vw, 52px) 0; }
.mq__track { display: flex; width: max-content; animation: mqRun 42s linear infinite; }
.mq__track span {
  display: inline-flex; align-items: center; gap: var(--s6); padding-right: var(--s6);
  font-size: clamp(1.1rem, .8rem + 1.5vw, 2.1rem); font-weight: 800;
  letter-spacing: -.035em; white-space: nowrap; color: var(--ink-2);
}
.mq__track em { font-style: normal; color: var(--brand); font-size: .58em; }
.mq:hover .mq__track { animation-play-state: paused; }
@keyframes mqRun { to { transform: translateX(-50%); } }

/* ══════════════════ 장(章) ══════════════════ */
.chap { position: relative; padding: clamp(64px, 9.6vw, 136px) 0 clamp(64px, 9.6vw, 136px); }
.chap__head { position: relative; text-align: center; margin-bottom: var(--s9); }
.chap__aura {
  position: absolute; left: 50%; top: 50%; z-index: 0; pointer-events: none;
  width: min(1100px, 76vw); aspect-ratio: 2.2 / 1; transform: translate(-50%, -55%);
  background: radial-gradient(48% 50% at 50% 50%, var(--glow), transparent 72%);
  filter: blur(34px); opacity: .5;
}
.chap__head > *:not(.chap__aura) { position: relative; z-index: 1; }
.chap__t { font-size: var(--fs-h2); font-weight: 800; line-height: 1.1; letter-spacing: -.045em; }
.chap__t b {
  font-weight: 800;
  background: linear-gradient(92deg, var(--brand) 5%, var(--brand-2) 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sec--brand .chap__t b {
  /* 라임 면에서는 강조를 **검정 띠 위 라임 글자**로 뒤집는다 — 대표 색 둘을 그대로 쓴다 */
  background: var(--black); color: var(--lime); -webkit-text-fill-color: var(--lime);
  padding: 0 .14em; border-radius: .12em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.chap__lead {
  /* 반응형(1024 아래)은 작게 · 행간 좁게 — 모든 마디가 「다양해진 관리자 기능」 과 같은 값(2026-10-16 지시) */
  margin: clamp(10px, min(2.6vw, 1.8svh), 16px) auto 0; font-size: clamp(13px, min(.78rem + .35vw, .6rem + 1svh), 15.5px);   /* 모바일 — 제목과 조금 더 띄움(2026-10-16) */
  color: var(--ink-2); line-height: 1.45; max-width: 52ch;
}
@media (min-width: 1024px) {
  .chap__lead { margin-top: clamp(12px, 2.2svh, 20px); font-size: var(--fs-lead); line-height: 1.5; max-width: 46ch; }
}
.brm { display: inline; }
.brw { display: none; }
@media (min-width: 1024px) { .brm { display: none; } .brw { display: inline; } }

/* 좌우 두 단 머리글 — 여덟 마디가 전부 가운데 정렬이면 넘기는 박자가 똑같아진다 */
.chap__head--split { text-align: center; }
@media (min-width: 1024px) {
  /* 좌우 두 단은 PC 에서만 — 반응형(1024 아래)은 제목 · 문구를 가운데로 모은다(2026-10-16 지시) */
  .chap__head--split { text-align: left; }
  .chap__head--split .chap__lead { margin-left: 0; margin-right: 0; }
  .chap__head--split {
    display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: var(--s6) var(--s10); align-items: end;
  }
  .chap__head--split .chap__lead { max-width: 38ch; padding-bottom: .4em; }
  .chap__head--split .chap__aura { transform: translate(-64%, -40%); }
}

/* ══════════════════ 01 — 정렬된 두 열 격자 ══════════════════
   지그재그를 버렸다(2026-09-22 지시). 칸은 자로 잰 듯 맞추고,
   **등장만** 왼쪽 열 · 오른쪽 열이 번갈아 들어온다. */
/* 오른쪽에서 들어오는 칸(.up--r)은 **들어오기 전에 30px 만큼 판 밖에 있다**.
   그 30px 이 그대로 문서 가로 넘침이 된다(320px 에서 +30px 으로 잡혔다).
   가로만 잘라 낸다 — overflow:hidden 을 쓰면 세로까지 잘려서 손 얹었을 때
   4px 떠오르는 움직임과 그림자가 같이 잘린다. sticky 가 없는 칸이라 안전하다. */
/* 한 줄에 하나씩, 좌우로 번갈아(2026-09-23 지시).
   앞서는 두 칸 격자에 칸 높이를 못 박아 두어서 **여섯 장이 다 잘려** 보였다.
   여기 그림은 전부 세로로 긴 것(0.47~0.67)이라 가로 칸에 맞을 리가 없었다. */
.svc { display: grid; gap: var(--s8); overflow-x: clip; }
.svc__it {
  display: grid; gap: var(--s5); min-width: 0; color: inherit;
  align-items: center;
  /* 들어오기 전 .up--r 이 오른쪽으로 비켜서 있어서 줄이 30px 넘친다.
     세로는 열어 둬야(clip 이라 가능) 뒤에 깔린 큰 번호가 살아 있는다. */
  overflow-x: clip;
}
@media (min-width: 900px) {
  .svc__it { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr); gap: var(--s8); }
  /* 홀수 줄은 그림을 오른쪽으로. **칸 너비까지 같이 뒤집어야** 한다 —
     자리만 옮기면 그림 틀이 줄마다 548px · 596px 로 달라진다(실제로 달랐다) */
  .svc__it--rev { grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); }
  .svc__it--rev .svc__fig { grid-column: 2; grid-row: 1; }
  .svc__it--rev .svc__cap { grid-column: 1; grid-row: 1; }
}

/* 그림 틀 — **세로로 긴** 틀에 contain. 어떤 비례가 와도 한 장이 통째로 들어온다 */
.svc__fig {
  position: relative; display: flex; align-items: center; justify-content: center;
  aspect-ratio: 5 / 4; overflow: hidden; border-radius: 22px;
  background: radial-gradient(120% 100% at 50% 0%, var(--paper-2), var(--paper));
  box-shadow: inset 0 0 0 1px var(--rule);
}
/* 4:5 로 두되 **키를 묶어 둔다** — 안 묶으면 한 줄이 화면을 통째로 먹어서
   여섯 줄에 4,000px 이 넘어간다 */
@media (min-width: 900px) {
  .svc__fig { aspect-ratio: 4 / 5; max-height: min(62svh, 540px); }
}
.svc__fig img {
  position: relative; z-index: 1;
  max-width: 76%; max-height: 82%; width: auto; height: auto; display: block;
  border-radius: 10px;
  box-shadow: 0 30px 60px -26px rgba(10, 10, 10, .55), 0 0 0 1px rgba(10, 10, 10, .08);
  will-change: transform;
}
.svc__cap { position: relative; display: block; min-width: 0; }
/* 글 뒤에 깔리는 큰 번호 — 오른쪽 칸이 휑한 것을 메우고, 굴릴 때 그림과 **반대로**
   밀려서 깊이가 생긴다. 그림 뒤에 두면 그림에 가려 아무것도 안 보였다. */
.svc__ghost {
  position: absolute; right: -.06em; top: -.42em; z-index: -1;
  font-family: Georgia, "Times New Roman", "Nanum Myeongjo", serif;
  font-style: italic; font-variant-numeric: lining-nums;
  font-size: clamp(7rem, 14vw, 13rem); line-height: 1; color: var(--ink);
  opacity: .085; pointer-events: none; user-select: none; will-change: transform;
}
.svc__no {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-family: Georgia, "Times New Roman", "Nanum Myeongjo", serif;
  font-style: italic; font-size: 16px; color: var(--ink-3); font-variant-numeric: lining-nums;
}
.svc__no i { font-style: normal; opacity: .5; }
.svc__t {
  display: block; margin-top: var(--s3);
  font-size: clamp(1.45rem, 1.1rem + 1.5vw, 2.5rem); font-weight: 800;
  letter-spacing: -.045em; line-height: 1.18; transition: color .35s var(--ease);
}
.svc__it:hover .svc__t { color: var(--brand); }
.svc__d {
  display: block; margin-top: var(--s4); max-width: 46ch;
  color: var(--ink-2); font-size: clamp(15px, .9rem + .2vw, 17px); line-height: 1.72;
}
.svc__go {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: var(--s4);
  font-size: 15px; font-weight: 800; color: var(--brand);
  border-bottom: 1.5px solid var(--rule-2); padding-bottom: 2px;
  transition: border-color .3s, gap .3s var(--ease-out);
}
.svc__it:hover .svc__go { border-bottom-color: currentColor; gap: var(--s3); }
.svc__go--soon { color: var(--ink-4); border-bottom-color: transparent; }
.svc__go em { font-style: normal; display: inline-block; transition: transform .3s var(--ease-out); }
.svc__it:hover .svc__go em { transform: translateX(4px); }

/* ══════════════════ 02 — 붙잡아 두고 갈아 끼우는 큰 화면 ══════════════════
   포개지는 카드를 버렸다. 마디가 화면에 붙잡히고, 굴리는 만큼 넉 장이 갈린다.
   왼쪽 목록은 읽는 줄만 또렷하고, 오른쪽 큰 영상이 그 줄의 것으로 바뀐다. */
.swap__rail { position: relative; }
.swap__stick { position: sticky; top: 64px; min-height: min(100svh - 64px, 1100px);
  display: flex; align-items: center; }
.swap__in { width: 100%; display: grid; gap: var(--s7); }
.swap__list { display: grid; gap: var(--s2); }
.swap__row {
  padding: var(--s5) 0; border-top: 1px solid var(--rule);
  transition: opacity .45s var(--ease); opacity: .38;
}
.swap__row:first-child { border-top: 0; }
.swap__row.is-on { opacity: 1; }
/* 12px 아래로 내려가지 않는다 — 반응형 규칙의 최소 글자 크기다 */
.swap__no { font-size: 12px; font-weight: 800; letter-spacing: .14em; color: var(--ink-4); }
.swap__t {
  margin-top: var(--s2); font-size: clamp(1.25rem, 1rem + 1.1vw, 2rem);
  font-weight: 800; letter-spacing: -.04em; line-height: 1.2;
}
.swap__d { margin-top: var(--s3); color: var(--ink-2); font-size: 15px; line-height: 1.68; max-width: 42ch; }
.swap__media { position: relative; width: 100%; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--rule); background: var(--paper-2); aspect-ratio: 16 / 10; }
.swap__fig {
  position: absolute; inset: 0; opacity: 0; transform: scale(1.03);
  transition: opacity .6s var(--ease), transform 1s var(--ease-out);
  display: flex; align-items: center; justify-content: center;
}
.swap__fig.is-on { opacity: 1; transform: none; }
.swap__fig img, .swap__fig video { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) {
  .swap__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s10); align-items: center; }
  .swap__rail { height: 320vh; }
  .swap__row { padding: var(--s5) 0 var(--s5) var(--s5); border-left: 2px solid transparent; }
  .swap__row.is-on { border-left-color: var(--brand); }
  /* 읽고 있지 않은 줄은 **제목만** 남긴다. 넷의 설명을 다 펴 두면 목록이 화면보다 길어져
     붙잡아 둔 보람이 없다(넷째 줄이 화면 밖으로 나간다). */
  .swap__row:not(.is-on) .swap__d { display: none; }
  .swap__row:not(.is-on) .swap__t { font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem); }
}
@media (max-width: 1023px) {
  .swap__rail { height: auto; }
  .swap__stick { position: static; min-height: 0; }
  .swap__in { gap: var(--s6); }
  .swap__media { order: -1; }
  .swap__row { opacity: 1; }
}

/* ══════════════════ 03 — 굴릴수록 포개지는 관리자 목록 ══════════════════
   일곱 묶음이 차례로 쌓인다(sticky). 지나온 칸이 위에 겹쳐 남아서
   '일곱이나 있다' 가 눈에 보인다 — 갈아 끼우면 한 번에 하나만 보여서 그게 안 읽혔다.
   칸 하나는 **왼쪽 화면 · 오른쪽 설명**이다. */
/* 2026-10-15 다시 짬 — 묶음이 열로 늘었고, 「높이를 최대한 덜 먹게 · 작은 화면에서는 구조를 바꿔서라도
   한눈에」(사용자 지시). 바탕(작은 화면)은 **옆으로 넘기는 한 줄**이라 마디 높이가 카드 한 장으로 끝난다.
   1024 이상에서만 예전처럼 포개지는 칸. 번호와 제목은 한 줄로 붙이고 행간 · 크기 · 여백을 바짝 줄였다.
   ⛔ 옛 「767 아래 1:1」 규칙은 뺐다 — 영상이 6:5 라 1:1 이면 좌우가 잘리고, max-width 는 쓰지 않는 규칙이다. */
/* 이 마디는 위아래 여백도 덜 쓴다 */
#admin.chap { padding-block: clamp(48px, 7vw, 104px); }
/* 머리 소개글 — **반응형(1024 아래)에서만** 바짝(2026-10-16 지시). 작게 · 행간 좁게 · 폭 넓혀 줄 수를 줄인다.
   PC 는 다른 마디와 같은 크기 그대로 */
#admin .chap__head { margin-bottom: 0; }

@media (min-width: 1024px) {
  /* 둘째 문장(「회원 · 문서 … 들어 있어요.」)이 한 줄로 서게 폭을 연다 — 46ch 면 「들어 있어요.」 가 떨어진다 */
  #admin .chap__lead, #rail .chap__lead { max-width: none; }
}
.adms {
  display: flex; gap: var(--s3); margin-top: var(--s6);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  margin-inline: calc(var(--s5) * -1); padding: 0 var(--s5) var(--s1);
  scroll-padding-inline: var(--s5); scrollbar-width: none;
}
.adms::-webkit-scrollbar { display: none; }
.admc {
  flex: 0 0 min(86%, 440px); min-width: 0; scroll-snap-align: start;
  position: relative; overflow: hidden; border-radius: 18px;
  border: 1px solid var(--rule); background: var(--white); padding: 10px;
}
/* 600 부터는 한 장 반이 보이게 — 옆에 더 있다는 것이 늘 보인다 */
@media (min-width: 600px) { .admc { flex-basis: min(58%, 460px); } }
@media (min-width: 1024px) {
  .adms { display: block; overflow: visible; margin: var(--s8) 0 0; padding: 0; }
  .admc {
    position: sticky; top: calc(84px + var(--i, 0) * 12px);
    padding: var(--s6); border-radius: 22px;
    display: grid; align-items: center; gap: var(--s7);
    /* 화면이 낮아도 칸이 화면 안에 들게 — 영상 폭을 남는 높이(6:5)로 묶는다 */
    grid-template-columns: minmax(0, min(50%, calc((100vh - 300px) * 1.2))) minmax(0, 1fr);
    box-shadow: 0 -30px 64px -30px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .1);
  }
  .admc + .admc { margin-top: var(--s6); }
}
/* 영상 칸 — 영상과 같은 6:5. 테두리 · 바탕은 두르지 않고 모서리만 둥글린다 */
.fc__card {
  display: block; position: relative; overflow: hidden; margin: 0; width: 100%;
  container-type: inline-size; aspect-ratio: 6 / 5;
  border-radius: clamp(12px, 1.4vw, 16px);
}
.fc__vid { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: inherit; }
/* 설명 — 번호 · 제목이 한 줄, 그 아래 설명 · 칩 · 링크 */
.tabs__note {
  min-width: 0; margin-top: 10px; padding: 0 4px 2px;
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center;
}
.tabs__note > :not(.tabs__no):not(.tabs__t) { grid-column: 1 / -1; }
/* PC 는 번호를 위, 제목을 아래로 나눈다(2026-10-16 지시) — 반응형(1024 아래)에서만 한 줄로 붙인다 */
@media (min-width: 1024px) {
  .tabs__note { margin-top: 0; padding: 0; grid-template-columns: minmax(0, 1fr); }
  /* 번호와 제목 사이 · 번호 안(02 / 10) 간격을 PC 에서 넉넉히(2026-10-16 — 「너무 붙어 있다」) */
  /* 아래쪽 기본 규칙이 나중에 와서 덮으므로 한 단 더 구체적으로 적는다 */
  .tabs__note .tabs__no { gap: 10px; }
  .tabs__note .tabs__t { margin-top: 14px; }
}
.tabs__no {
  display: inline-flex; align-items: baseline; gap: 4px;
  font-family: Georgia, "Times New Roman", "Nanum Myeongjo", serif;
  font-style: italic; font-variant-numeric: lining-nums;
  font-size: clamp(12px, .62rem + .3vw, 15px); color: var(--ink-3);
}
.tabs__no b {
  font-weight: 400; line-height: 1; color: var(--ink);
  font-size: clamp(22px, 1rem + 1.2vw, 38px); letter-spacing: -.01em;
}
.tabs__no i { font-style: normal; opacity: .45; }
.tabs__t {
  margin: 0; min-width: 0; font-size: clamp(1.02rem, .9rem + .7vw, 1.75rem);
  font-weight: 800; letter-spacing: -.04em; line-height: 1.2;
  word-break: keep-all; overflow-wrap: anywhere;
}
.tabs__d {
  margin-top: 6px; color: var(--ink-2); font-size: clamp(13px, .76rem + .2vw, 15px); line-height: 1.5;
  word-break: keep-all; overflow-wrap: anywhere;
}
.tabs__chips { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px; }
/* 테두리는 --rule-2 — 칩은 '칸이 나뉘어 있다' 가 보여야 한다 */
.tabs__chips li {
  padding: 3px 9px; border: 1px solid var(--rule-2); border-radius: 999px;
  font-size: 12px; line-height: 1.4; color: var(--ink-2); white-space: nowrap;
}
.tabs__go {
  display: inline-flex; align-items: center; justify-self: start; gap: 6px; min-height: 40px; margin-top: 2px;
  font-size: 13px; font-weight: 800; color: var(--brand);
  border-bottom: 1.5px solid var(--rule-2); padding-bottom: 2px;
  transition: border-color .3s, gap .3s var(--ease-out);
}
@media (min-width: 1024px) {
  .tabs__d { margin-top: var(--s3); line-height: 1.6; }
  .tabs__chips { margin-top: var(--s3); gap: 6px; }
  .tabs__chips li { padding: 4px 10px; }
  .tabs__go { margin-top: var(--s2); font-size: 14px; }
}
.tabs__go:hover { border-bottom-color: currentColor; gap: var(--s3); }
.tabs__go em { font-style: normal; }
/* 후기 따옴표 — 본문 글꼴(Pretendard)의 것은 각져서 말표시로 안 읽힌다.
   둥근 세리프체로 따로 씌운다(2026-09-23 지시). */
.qm {
  font-family: Georgia, "Times New Roman", "Nanum Myeongjo", serif;
  font-style: normal; font-weight: 400; line-height: 0;
}


/* ══════════════════ 04 — 세 줄이 서로 다르게 흐른다 ══════════════════ */
.wg {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.wg__row { overflow: hidden; padding: var(--s2) 0; }
/* gap 을 쓰면 -50% 가 칸 사이 반 칸만큼 어긋나 한 바퀴마다 툭 끊긴다 — 칸 오른쪽 여백으로 준다 */
.wg__track { display: flex; width: max-content; }
.wg__track > * { margin-right: var(--s4); }
.wg__row--a .wg__track { animation: wgA 78s linear infinite; }
.wg__row--b .wg__track { animation: wgB 94s linear infinite; }
.wg__row--c .wg__track { animation: wgA 112s linear infinite; }
@keyframes wgA { to { transform: translateX(-50%); } }
@keyframes wgB { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.wg:hover .wg__track { animation-play-state: paused; }
.wg__it { flex: 0 0 auto; width: clamp(180px, 20vw, 260px); }
.wg__it img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px;
  background: var(--paper-2); border: 1px solid var(--rule);
}
.wg__it figcaption { padding: var(--s3) 0 0; display: flex; gap: 6px; align-items: baseline; }
.wg__it b { font-size: 13px; font-weight: 700; }
.wg__it span { font-size: 12px; color: var(--ink-3); }
/* 모바일은 두 줄(.wg--m) · 768 부터 세 줄(.wg--d). 같은 위젯을 두 벌로 찍어 폭으로 갈아 끼운다.
   모바일은 칸 사이 · 줄 사이 · 그림과 글 사이를 바짝 붙인다(2026-10-16 지시).
   한 줄에 든 칸이 많아진 만큼 조금 느리게 돌린다. */
.wg--d { display: none; }
.wg--m .wg__row { padding: 4px 0; }
.wg--m .wg__track > * { margin-right: 10px; }
.wg--m .wg__row--a .wg__track { animation-duration: 104s; }
.wg--m .wg__row--b .wg__track { animation-duration: 124s; }
.wg--m .wg__it figcaption { padding-top: 5px; }
@media (min-width: 768px) {
  .wg--m { display: none; }
  .wg--d { display: block; }
}

/* ══════════════════ 05 — 자로 잰 격자 ══════════════════
   어긋내지 않는다. 다섯 칸씩 두 줄로 정렬하고, 굴리면 **차례로 나타난다**. */
/* 모바일(768 아래)은 **두 줄 가로 넘김**(2026-10-16 지시) — 사례가 늘어도 높이는 두 줄 그대로.
   위 위젯 마디가 저절로 흐르는 줄이라, 여기는 손으로 넘기는 박자로 다르게 간다. */
/* 2026-10-16 — 아임웹 테마 목록 결: 분류 탭 + 격자(모바일 한 줄 넘김 · 768~ 3열 · 1024~ 4열) */
.wall__tabs { display: flex; gap: 6px; margin-top: clamp(20px, 3vw, 36px); overflow-x: auto; scrollbar-width: none; }
.wall__tabs::-webkit-scrollbar { display: none; }
.wall__tab { flex: none; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--rule-2); background: #fff; color: var(--ink-2);
  font: inherit; font-size: 14px; font-weight: 700; letter-spacing: -.02em; cursor: pointer; transition: background-color .25s, color .25s, border-color .25s; }
.wall__tab:hover { border-color: #0a0a0a; color: var(--ink); }
.wall__tab.is-on { background: #0a0a0a; border-color: #0a0a0a; color: var(--lime); }
.wall__grid { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  padding: 0 var(--s5) var(--s1); scroll-padding-inline: var(--s5); scrollbar-width: none; margin-top: 16px; }
.wall__grid::-webkit-scrollbar { display: none; }
.wall__it { position: relative; flex: 0 0 min(62%, 300px); scroll-snap-align: start; min-width: 0; margin: 0; }
.wall__it.is-hide { display: none; }
@media (min-width: 768px) {
  .wall__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 16px; overflow: visible; scroll-snap-type: none;
    padding: 0 max(var(--s5), 40px); margin-top: 20px; }
  .wall__tabs { justify-content: center; }
}
@media (min-width: 1024px) { .wall__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px clamp(14px, 1.4vw, 24px); padding-inline: clamp(40px, 4vw, 80px); } }
/* 칸 — 사이트 화면만 딱(감싸는 판 · 주소 줄 · 단추 없이 · 2026-10-16) */
.wall__win { position: relative; display: block; border-radius: 14px; overflow: hidden; border: 1px solid var(--rule); background: #fff; }
.wall__scr { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #fff; container-type: size; }
.wall__scr > img { position: absolute; left: 0; top: 0; width: 100%; height: auto; transition: transform 1.1s cubic-bezier(.65, 0, .35, 1); }
.wall__it:hover .wall__scr > img, .wall__it.is-play .wall__scr > img { transform: translateY(calc(-100% + 100cqh)); transition-duration: 6s; }
/* 휴대폰 — 평소엔 아래에서 살짝, 올리면 다 올라온다 */
.wall__ph { position: absolute; right: 9%; bottom: 0; width: 30%; aspect-ratio: 9 / 19.5; z-index: 2; pointer-events: none; container-type: inline-size;
  transform: translateY(62%); transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.wall__ph > span { position: absolute; inset: 0; display: block; border: clamp(2px, 2.2cqw, 3px) solid #0c0d0f; border-radius: clamp(7px, 9cqw, 12px);   /* 틀 두께 · 둥글기를 폰 폭에 맞춰 얇고 덜 둥글게(2026-10-19 · 옛 4px · 18px) */
  overflow: hidden; background: #fff;
  container-type: size; box-shadow: 0 0 0 1px #4a4b4f, 0 24px 40px -16px rgba(0, 0, 0, .5); }
.wall__ph > span::before { content: ""; position: absolute; left: 50%; top: 4%; width: 34%; height: 4%; transform: translateX(-50%); border-radius: 999px; background: #0c0d0f; z-index: 2; }
.wall__ph img { position: absolute; left: 0; top: 0; width: 100%; height: auto; transition: transform 1.1s cubic-bezier(.65, 0, .35, 1); }
.wall__it:hover .wall__ph, .wall__it.is-play .wall__ph { transform: translateY(-14%); }
.wall__it:hover .wall__ph img, .wall__it.is-play .wall__ph img { transform: translateY(calc(-100% + 100cqh)); transition-duration: 6s; transition-delay: .3s; }
/* 이름 · 태그 */
.wall__it figcaption { padding-top: 12px; }
.wall__it figcaption b { display: block; font-size: 15px; font-weight: 800; letter-spacing: -.03em; }
.wall__it figcaption b small { margin-left: 4px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.wall__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.wall__tags > * { padding: 3px 8px; border-radius: 6px; background: var(--paper-2); font-size: 12px; font-weight: 700; color: var(--ink-3); font-style: normal; }
.wall__tags .wall__hot { background: #0a0a0a; color: var(--lime); }
/* 「템플릿 전체 보기」 — 사례가 늘어도 끝까지 넘기지 않고 바로 갈 수 있게 */
.wall__more { margin-top: var(--s4); text-align: center; }

/* ══════════════════ 06 — 굴리면 밝아지는 인용구 ══════════════════ */
.scrub__wrap { margin-top: var(--s8); }
.scrub {
  margin-inline: auto; max-width: 21ch; text-align: center;
  font-size: clamp(1.4rem, .85rem + 2.3vw, 2.9rem); font-weight: 800;
  line-height: 1.4; letter-spacing: -.042em;
}
.scrub__w { color: var(--ink-4); opacity: .32; transition: opacity .45s var(--ease), color .45s var(--ease); }
.scrub__w.is-lit { color: var(--ink); opacity: 1; }
html:not(.js) .scrub__w { color: var(--ink); opacity: 1; }
.scrub__by {
  /* 모바일은 인용구에 바짝 붙이고 작게(2026-10-16 지시) — 768 부터 예전 값 */
  margin-top: 14px; display: flex; justify-content: center; align-items: baseline; gap: 8px;
}
.scrub__by b { font-weight: 800; font-size: 14px; }
.scrub__by span { font-size: 12px; color: var(--ink-3); }
@media (min-width: 768px) {
  .scrub__by { margin-top: var(--s7); gap: var(--s3); }
  .scrub__by b { font-size: inherit; }
  .scrub__by span { font-size: 13px; }
}
/* 모바일 · 태블릿(900 아래)은 옆으로 넘기는 한 줄(2026-10-16 지시 — 세로로 아홉 장이면 2,100px 이었다) */
.revs {
  display: flex; gap: 10px; margin: var(--s8) calc(var(--s5) * -1) 0; padding: 0 var(--s5) var(--s1);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--s5); scrollbar-width: none;
}
.revs::-webkit-scrollbar { display: none; }
.revs > * { flex: 0 0 min(84%, 360px); min-width: 0; scroll-snap-align: start; }
@media (min-width: 600px) { .revs > * { flex-basis: min(46%, 380px); } }
@media (min-width: 900px) {
  .revs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6);
    margin: var(--s12) 0 0; padding: 0; overflow: visible; scroll-snap-type: none; }
}
.rev {
  /* 모바일은 안쪽 여백 · 행간을 줄인다(2026-10-16 지시) — 900 부터 예전 값 */
  border: 1px solid var(--rule); border-radius: 16px; padding: 16px;
  background: rgba(255, 255, 255, .05);
}
.rev p { color: var(--ink-2); font-size: 14px; line-height: 1.62; }
.rev footer { margin-top: 12px; font-size: 13px; color: var(--ink-4); }
@media (min-width: 900px) {
  .rev { padding: var(--s6); }
  .rev p { font-size: 14.5px; line-height: 1.74; }
  .rev footer { margin-top: var(--s5); }
}
.rev footer b { color: var(--ink); font-weight: 800; }

/* ══════════════════ 07 — 벤토 카드 문답 ══════════════════
   2026-10-16 사용자가 세 안(_tools/make_faq_preview.py) 중 고름. 크기가 다른 카드 격자 —
   1번은 큰 검정 칸(답이 늘 보임), wide 는 가로 두 칸, 하나는 라임. 나머지는 눌러서 그 자리에서 편다.
   PC 4열 · 모바일 2열. 칸 모양과 개수를 맞춰 마지막 줄까지 빈자리가 없다. */
.qa__wrap { display: block; }
.qa .chap__lead { max-width: none; }
/* 같은 줄의 칸은 하나를 열어도 배경 높이가 같이 맞춰진다(stretch · 2026-10-16 지시) */
/* 모바일(600 아래)은 한 줄에 하나씩 깔끔하게(2026-10-16 지시) · 600 부터 2열 · 900 부터 4열 */
.bento { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); grid-auto-flow: dense; align-items: stretch; }
.bc {
  position: relative; min-width: 0; border-radius: 16px; background: var(--white); border: 1px solid var(--rule);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .3s;
}
.bc summary { list-style: none; cursor: pointer; display: block; padding: 16px 44px 16px 16px; min-height: 44px; }
/* 열면 답이 질문 바로 아래에 붙는다(질문과 답 사이를 좁게) */
.bc[open] summary { padding-bottom: 8px; }
.bc summary::-webkit-details-marker { display: none; }
.bc i { display: block; font-family: Georgia, "Times New Roman", "Nanum Myeongjo", serif; font-style: italic;
  font-size: 13px; color: var(--ink-4); }
.bc h3 { margin-top: 8px; font-size: 15px; font-weight: 800; line-height: 1.38; letter-spacing: -.035em;
  word-break: keep-all; overflow-wrap: anywhere; }
.bc p { padding: 0 16px 16px; font-size: 13.5px; line-height: 1.6; color: var(--ink-2);
  word-break: keep-all; overflow-wrap: anywhere; animation: faqIn .4s var(--ease-out) both; }
/* 여닫기 — 오른쪽 위 동그라미 + */
.bc__pl { position: absolute; right: 12px; top: 12px; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--rule-2); transition: transform .35s var(--ease), background-color .3s, border-color .3s; }
.bc__pl::before, .bc__pl::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.6px;
  background: var(--ink-2); transform: translate(-50%, -50%); }
.bc__pl::after { transform: translate(-50%, -50%) rotate(90deg); }
.bc[open] .bc__pl { transform: rotate(45deg); background: var(--ink); border-color: var(--ink); }
.bc[open] .bc__pl::before, .bc[open] .bc__pl::after { background: var(--lime); }
.bc:hover { border-color: var(--rule-2); }
.bc[open] { box-shadow: 0 20px 40px -28px rgba(20, 20, 15, .4); }
/* 큰 칸 — 검정, 답이 늘 보인다 */
.bc--big { background: #0a0a0a; border-color: #0a0a0a; color: #fff; padding: 20px; }
.bc--big i { color: var(--lime); }
.bento .bc--big h3 { font-size: clamp(20px, 1.1rem + 1.2vw, 32px); line-height: 1.25; letter-spacing: -.045em; }
.bc--big p { padding: 0; margin-top: 12px; color: #cfd0c6; font-size: clamp(13.5px, .8rem + .3vw, 16px); }
.bc--wide { }
/* 모바일 한 줄 — 질문과 + 를 가운데 줄에 맞추고 번호는 질문 앞에 */
.bc summary { display: flex; align-items: baseline; gap: 10px; }
.bc summary i { flex: none; }
.bc summary h3 { margin-top: 0; }
.bc__pl { top: 50%; margin-top: -14px; }
.bc[open] .bc__pl { top: 12px; margin-top: 0; }
@media (min-width: 600px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .bc { min-height: 112px; border-radius: 18px; }
  .bc--big, .bc--wide { grid-column: span 2; }
  .bc summary { display: block; }
  .bc summary h3 { margin-top: 8px; }
  .bc__pl, .bc[open] .bc__pl { top: 12px; margin-top: 0; }
}
.bc--lime { background: var(--lime); border-color: var(--lime); color: #0a0a0a; }
.bc--lime i { color: #487100; }
.bc--lime p { color: #2a3a00; }
@media (min-width: 900px) {
  .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .bc { border-radius: 22px; }
  .bc:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -26px rgba(20, 20, 15, .35); }
  .bc { min-height: 124px; }
  .bc summary { padding: 24px 54px 24px 24px; }
  .bc[open] summary { padding-bottom: 10px; }
  .bc h3 { font-size: 18px; }
  .bc p { padding: 0 24px 24px; font-size: 14.5px; }
  .bc__pl { right: 18px; top: 18px; width: 30px; height: 30px; }
  .bc--big { grid-row: span 2; padding: 30px; display: flex; flex-direction: column; justify-content: flex-end; }
  .bc--big p { padding: 0; font-size: 16px; }
}
@keyframes faqIn { from { opacity: 0; transform: translateY(-4px); } }

/* ══════════════════ 맺음 ══════════════════ */
.end { position: relative; overflow: hidden; padding: clamp(64px, 10vw, 150px) 0; }
.end__aurora {
  position: absolute; left: 50%; top: 50%; width: min(1100px, 130vw); aspect-ratio: 1;
  transform: translate(-50%, -50%); pointer-events: none; opacity: .6;
  background: radial-gradient(32% 32% at 36% 38%, rgba(255, 255, 255, .55), transparent 66%),
              radial-gradient(26% 26% at 66% 60%, rgba(240, 255, 160, .55), transparent 68%);
  filter: blur(46px); animation: auroraDrift 18s ease-in-out infinite alternate;
}
@keyframes auroraDrift {
  from { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  to   { transform: translate(-52%, -48%) scale(1.12) rotate(8deg); }
}
.end__in { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; }
.end__t {
  font-size: clamp(2.2rem, 1.1rem + 4.6vw, 5rem); font-weight: 800; letter-spacing: -.05em;
  line-height: 1.06; max-width: 18ch;
}
.end__s { margin-top: var(--s5); color: var(--ink-2); font-size: clamp(14px, .8rem + .4vw, 1.2rem); line-height: 1.55; max-width: 44ch; }
@media (min-width: 1024px) { .end__s { max-width: none; font-size: var(--fs-lead); line-height: 1.62; } }
/* 위 한 줄 「[견적서도] 딸깍 한 번에!」 — 괄호 낱말 여섯이 한 칸에 포개져 차례로 굴러 바뀐다(2s 씩 · 12s 한 바퀴) */
.end__k { display: inline-flex; align-items: center; gap: .35em; margin-bottom: var(--s4);
  font-size: clamp(17px, .9rem + .9vw, 26px); font-weight: 800; letter-spacing: -.04em; }
.end__roll { display: inline-grid; padding: .12em .5em; border-radius: .4em; background: #0a0a0a; color: #c8f000; overflow: hidden; }
.end__roll span { grid-area: 1 / 1; text-align: center; white-space: nowrap; opacity: 0;
  animation: endRoll 12s cubic-bezier(.22, 1, .36, 1) infinite; animation-delay: calc(var(--i) * 2s); }
@keyframes endRoll {
  0% { opacity: 0; transform: translateY(70%); }
  3%, 14% { opacity: 1; transform: none; }
  17%, 100% { opacity: 0; transform: translateY(-70%); }
}
html:not(.js) .end__roll span:first-child { opacity: 1; animation: none; }
/* 기능 칸 두 줄 — 서로 반대로 흐른다. 칸 = 검정 판 라임 아이콘 + 기능 + 한 줄 결과 */
.end__feats { position: relative; margin-top: var(--s7);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.end__row { overflow: hidden; padding: 5px 0; }
.end__track { list-style: none; margin: 0; padding: 0; display: flex; width: max-content; }
.end__track > * { margin-right: 10px; }
.end__row--a .end__track { animation: wgA 90s linear infinite; }
.end__row--b .end__track { animation: wgB 104s linear infinite; }
.end__feats:hover .end__track { animation-play-state: paused; }
/* 칸 — 둥근 알약 · 동그란 아이콘 · 은은한 그림자 · 오른쪽 작은 화살표(2026-10-16 「더 세련되게」) */
.end__ft {
  flex: none; display: flex; align-items: center; gap: 12px; padding: 7px 18px 7px 7px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .72));
  border: 1px solid rgba(10, 10, 10, .06);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 12px 26px -18px rgba(40, 60, 0, .55);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.end__ft:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 18px 34px -18px rgba(40, 60, 0, .6); }
.end__ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: #0a0a0a; color: #c8f000; box-shadow: 0 6px 14px -6px rgba(10, 10, 10, .55); }
.end__ic svg { width: 20px; height: 20px; }
.end__ft b { display: flex; flex-direction: column; gap: 1px; font-size: 14.5px; font-weight: 800; letter-spacing: -.035em;
  line-height: 1.25; white-space: nowrap; color: #0a0a0a; }
.end__ft small { font-size: 12px; font-weight: 600; letter-spacing: -.02em; color: #5f6058; }
.end__ft em { margin-left: 4px; font-style: normal; font-size: 13px; font-weight: 800; color: rgba(10, 10, 10, .28);
  transition: transform .3s var(--ease-out), color .3s; }
.end__ft:hover em { transform: translateX(3px); color: #0a0a0a; }
@media (min-width: 768px) {
  .end__feats { margin-top: var(--s9); }
  .end__row { padding: 7px 0; }
  .end__track > * { margin-right: 14px; }
  .end__ft { padding: 9px 24px 9px 9px; gap: 14px; }
  .end__ic { width: 50px; height: 50px; }
  .end__ic svg { width: 24px; height: 24px; }
  .end__ft b { font-size: 17px; }
  .end__ft small { font-size: 13px; }
}
/* 약속 셋 — 체크 */
.end__ok { list-style: none; padding: 0; margin-top: var(--s6); display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; }
.end__ok li { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
.end__ok li::before {
  content: ""; width: 16px; height: 16px; border-radius: 50%; background: #0a0a0a center / 10px no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' fill='none' stroke='%23c8f000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.end__acts { margin-top: var(--s6); display: flex; flex-wrap: wrap; gap: var(--s4) var(--s8); justify-content: center; align-items: center; }
@media (min-width: 768px) { .end__ok { margin-top: var(--s8); } .end__acts { margin-top: var(--s7); } .end__ok li { font-size: 14.5px; } }

/* ══════════════════ 꼬리 ══════════════════ */
/* 아래 여백을 두지 않는다 — 두면 바닥 로고가 끝선에 닿지 못하고 떠 보인다
   (실제로 48px 이 남아 있었다). 로고 칸(.foot2__sign)이 바닥을 맡는다 */
.foot2 {
  position: relative; background: #0a0a0a; color: rgba(244, 244, 238, .6); padding: 0;
  isolation: isolate;
}
/* 바닥에서 올라오는 라임 빛 — 맺음 마디의 오로라와 같은 결로, 느리게 떠돈다.
   푸터가 그냥 검은 판이면 페이지가 뚝 끊긴 것처럼 보인다. */
.foot2__glow {
  position: absolute; left: 50%; bottom: -34%; z-index: -1;
  width: min(1500px, 128vw); aspect-ratio: 2 / 1; pointer-events: none;
  transform: translateX(-50%);
  background: radial-gradient(42% 52% at 34% 62%, rgba(200, 240, 0, .2), transparent 70%),
              radial-gradient(34% 44% at 70% 48%, rgba(163, 199, 0, .16), transparent 72%);
  filter: blur(62px);
  animation: footGlow 22s ease-in-out infinite alternate;
}
@keyframes footGlow {
  from { transform: translateX(-50%) scale(1); opacity: .8; }
  to   { transform: translateX(-46%) scale(1.14); opacity: 1; }
}
/* 머리와 같은 짝 — 안목 로고 × 딸깍 로고 */
.foot2__lock { display: flex; align-items: center; gap: var(--s3); }
.foot2__lock img { width: auto; opacity: .9; }
/* 머리 로고와 같은 크기(2026-10-16 지시) — 안목 19 · 딸깍 22, 좁으면 머리처럼 안목 16 */
.foot2__lock > img { height: 16px; }
.foot2 .foot2__prod { height: 19px; }
@media (min-width: 480px) { .foot2__lock > img { height: 19px; } .foot2 .foot2__prod { height: 22px; } }
.foot2__x { font-size: 14px; font-weight: 600; opacity: .58; line-height: 1;
  margin: 0 calc(var(--s2) * -1 + 2px); }
/* 2026-10-16 다시 짬 — 카테고리 메뉴 없이 「브랜드 | 시작하기」 한 줄, 그 아래 약관 · 회사 정보.
   모바일은 차례로 쌓되 바짝, PC 는 위 줄을 좌우로 벌린다 */
.foot2__top { display: flex; flex-direction: column; gap: 18px; padding-top: 30px; }
.foot2__brand p { margin-top: 10px; font-size: 12.5px; line-height: 1.6; word-break: keep-all; color: rgba(244, 244, 238, .55); }
.foot2__brand p span { display: block; }
.foot2__brand p span:first-child { color: rgba(244, 244, 238, .82); }
@media (min-width: 360px) { .foot2__brand p span:first-child { white-space: nowrap; } }
.foot2__go { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.foot2__cta { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px 0 20px; border-radius: 999px;
  background: #c8f000; color: #0a0a0a; font-size: 14px; font-weight: 800; letter-spacing: -.02em;
  transition: transform .3s var(--ease-out), box-shadow .3s; }
.foot2__cta em { font-style: normal; transition: transform .3s var(--ease-out); }
.foot2__cta:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(200, 240, 0, .7); }
.foot2__cta:hover em { transform: translateX(3px); }
.foot2__mail { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; font-weight: 700;
  color: rgba(244, 244, 238, .78); border-bottom: 1px solid rgba(244, 244, 238, .25); }
.foot2__mail:hover { color: #f4f4ee; border-color: currentColor; }
.foot2__btm { margin-top: 22px; padding-top: 6px; border-top: 1px solid rgba(244, 244, 238, .14);
  font-size: 12px; color: rgba(244, 244, 238, .42); line-height: 1.6; }
.foot2__legal { display: flex; flex-wrap: wrap; gap: 0 16px; }
.foot2__legal a { display: inline-flex; align-items: center; min-height: 36px; font-size: 12.5px; font-weight: 600; color: rgba(244, 244, 238, .66); }
.foot2__legal a:hover { color: #f4f4ee; }
.foot2__legal li:nth-child(2) a { color: #f4f4ee; font-weight: 800; }
.foot2__note { margin-top: 6px; color: rgba(244, 244, 238, .58); font-size: 12.5px; }
.foot2__note b { color: rgba(244, 244, 238, .82); font-weight: 800; }
.foot2__biz { display: flex; flex-wrap: wrap; gap: 0 12px; margin-top: 4px; }
.foot2__biz li { display: inline-flex; align-items: baseline; gap: 6px; }
.foot2__biz b { font-size: 11px; font-weight: 700; letter-spacing: .02em; color: rgba(244, 244, 238, .34); }
.foot2__copy { margin-top: 8px; color: rgba(244, 244, 238, .34); }
@media (min-width: 900px) {
  .foot2__top { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: var(--s8); padding-top: var(--s10); }
  .foot2__brand p { font-size: 13.5px; }
  .foot2__go { justify-content: flex-end; }
  .foot2__cta { min-height: 50px; padding: 0 22px 0 26px; font-size: 15px; }
  .foot2__btm { margin-top: var(--s8); padding-top: var(--s3); font-size: 12.5px; line-height: 1.7; }
  .foot2__legal a { font-size: 13px; }
  .foot2__biz { gap: 2px var(--s5); }
  .foot2__copy { margin-top: var(--s3); }
}

/* 바닥 로고 — 모바일은 판이 작아 .1 이면 안 보였다(2026-10-16). 더 진하게, 틀 높이는 그림의 2/3 · PC 는 예전 값 */
.foot2__sign { margin-top: 14px; }
.foot2__word { opacity: .22; }
.foot2 .foot2__sign { height: calc(94vw * 298 / 1647 * .7); }
@media (min-width: 900px) {
  .foot2__sign { margin-top: clamp(30px, 4.2vw, 72px); }
  .foot2 .foot2__sign { height: clamp(62px, 11vw, 168px); }
  .foot2__word { opacity: .1; }
}

/* ── 푸터 바닥의 로고 — **크게, 그러나 조용히** ──
   잘라 내기 · 눕히기 · 두께 주기 · 면 뚫고 나오기를 차례로 해 봤는데 전부 과했다.
   로고가 마디를 침범하는 순간 푸터가 구경거리가 되어 버린다.
   지금은 푸터 **안쪽 바닥**에 크게 깔되 아주 옅게 둔다 — 가까이 보면 로고고,
   멀리서는 면의 결이다. 아래는 푸터 끝선이 잘라 준다.

   display:flow-root 는 그대로 둔다 — 자식 여백이 푸터와 상쇄되지 않게 하는 빗장이다. */
.foot2 { position: relative; display: flow-root; overflow: hidden; }
/* 틀 높이가 그림 높이의 2/3 쯤이라 아래가 저절로 잘린다 —
   절반만 남기면 무슨 글자인지 안 읽히고, 다 보이면 잘린 맛이 없다 */
.foot2__sign {
  position: relative; margin-top: clamp(30px, 4.2vw, 72px);
  height: clamp(62px, 11vw, 168px); overflow: hidden;
}
/* 가운데 맞춤에 transform 을 쓰지 않는다 — 굴림 시차(data-par)가 transform 을
   덮어써서 로고가 왼쪽으로 튄다. left/right 0 + 자동 여백이면 안 부딪힌다. */
.foot2__word {
  position: absolute; left: 0; right: 0; top: 0; margin-inline: auto;
  display: block; width: min(1340px, 94vw); height: auto; max-width: none;
  opacity: .1; will-change: transform;
}

/* ══════════════════ 장 이동 레일 ══════════════════
   페이지가 길다. 오른쪽 끝에 여덟 마디를 세우고 지금 읽는 것만 밝힌다.
   이름표는 자리를 차지하지 않게 띄워 둔다 — 흐름에 두면 안 보이는 동안에도
   폭을 먹어서 레일이 화면 밖으로 밀린다. */
.idx { display: none; }
@media (min-width: 1280px) {
  /* 색을 섞어(mix-blend-mode) 대비를 얻으면 색 면에서 엉뚱한 색으로 튄다.
     대신 **지금 화면 가운데에 깔린 면**이 무엇인지 index2.js 가 알려 준다. */
  .idx {
    display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
    position: fixed; right: clamp(12px, 1.6vw, 26px); top: 50%; z-index: 180;
    transform: translateY(-50%);
    --idx-dim: rgba(10, 10, 10, .38);
    --idx-on: #0a0a0a;
  }
  .idx.on-ink { --idx-dim: rgba(255, 255, 255, .45); --idx-on: #c8f000; }
  .idx.on-brand { --idx-dim: rgba(10, 10, 10, .45); --idx-on: #0a0a0a; }
  .idx a {
    position: relative; display: flex; align-items: center; justify-content: flex-end;
    height: 44px; width: 34px; color: var(--idx-dim);
    font-size: 12px; font-weight: 800; letter-spacing: .02em; white-space: nowrap;
  }
  .idx a span {
    position: absolute; right: 40px; top: 50%;
    display: inline-flex; align-items: baseline; gap: 6px;
    opacity: 0; transform: translateY(-50%) translateX(6px);
    transition: opacity .35s var(--ease), transform .35s var(--ease-out);
  }
  .idx a.is-on span, .idx:hover a span, .idx a:focus-visible span { transform: translateY(-50%); }
  .idx a b {
    font-family: Georgia, "Times New Roman", "Nanum Myeongjo", serif;
    font-style: italic; font-weight: 400; font-variant-numeric: lining-nums;
  }
  .idx a i {
    flex: none; width: 18px; height: 1.5px; background: var(--idx-dim);
    transition: width .35s var(--ease-out), background .35s;
  }
  .idx:hover a span { opacity: 1; }
  .idx a:hover, .idx a.is-on { color: var(--idx-on); }
  .idx a:hover i, .idx a:focus-visible i, .idx a.is-on i { width: 32px; background: var(--idx-on); }
  .idx a.is-on span { opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════════
   등장 — 한 갈래로 모으고 방향만 modifier 로 준다
   한 번 나타나면 그대로 둔다(다시 사라지면 어지럽다).
   --i 는 몇 번째로 들어올지다. 줄줄이 한꺼번에 뜨면 '나타났다'가 안 보인다.
   ══════════════════════════════════════════════════════════════════ */
.up { opacity: 0; transform: translateY(26px); }
.up--l { transform: translateX(-30px); }
.up--r { transform: translateX(30px); }
.up--z { transform: scale(.94); }
.js .up {
  transition: opacity .8s var(--ease-out), transform .9s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.up.is-in { opacity: 1; transform: none; }
.up--d1 { --i: 1; }
.up--d2 { --i: 2; }
.up--d3 { --i: 3; }
.w { display: inline-block; overflow: hidden; vertical-align: top; }
.w > i {
  display: inline-block; font-style: normal; transform: translateY(105%);
  transition: transform .9s var(--ease-out);
}
.is-in .w > i { transform: none; }
html:not(.js) .up { opacity: 1; transform: none; }
html:not(.js) .w > i { transform: none; }

/* ══════════════════ 아주 좁은 화면 ══════════════════ */
@media (max-width: 767px) {
  .cover { padding-top: calc(64px + var(--s6)); }
  /* 좁은 화면에서는 글이 더 많은 자리를 가져간다(제목이 두 줄로 접힌다) */
  .rise { width: min(94vw, calc((100svh - 470px) * 4 / 3)); }
  /* 16ch 면 6줄로 길게 늘어진다(2026-10-16 지시) — 폭을 넓히고 글자를 살짝 줄여 한 줄을 길게 */
  .scrub { max-width: 23ch; font-size: clamp(1.18rem, .95rem + 1.15vw, 1.5rem); line-height: 1.45; }
  .chap__head { margin-bottom: var(--s7); }
}
@media (max-width: 520px) {
  .wg__it { width: clamp(150px, 52vw, 200px); }
  .sec--lift { border-radius: 18px 18px 0 0; }
}

/* ══════════════════ 움직임을 줄이겠다고 한 사람에게 ══════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .splash { display: none; }
  .cur { display: none !important; }
  .mq__track, .wg__track, .end__aurora, .end__track, .foot2__glow { animation: none; }
  .end__roll span { animation: none; } .end__roll span:first-child { opacity: 1; }
  .rise { --p: 1 !important; }
  .up, .w > i { opacity: 1 !important; transform: none !important; transition: none !important; }
  .scrub__w { color: var(--ink) !important; opacity: 1 !important; }
  .swap__rail { height: auto !important; }
  .swap__stick { position: static !important; min-height: 0 !important; }
  .swap__row { opacity: 1 !important; }
  .swap__fig { position: relative !important; opacity: 1 !important;
    visibility: visible !important; transform: none !important; }
  .swap__media { aspect-ratio: auto; }
  /* 포개지는 칸도 풀어서 위아래로 늘어놓는다 */
  .admc { position: static !important; }
}

/* ══════════════════ 사장님의 하루 — 굴린 만큼 시각이 넘어가고 휴대폰에 알림이 쌓인다(2026-10-16) ══════════════════
   밝은 면. 화면에 붙어 있는 동안(html.js) --a(지금 몇 번째 · index2.js dayDrive)로만 움직인다.
   스크립트가 없으면 모든 알림이 쌓인 채로 놓인다 */
.day { position: relative; background: var(--paper); color: var(--ink); --a: 5; }
.day__pin { padding: clamp(72px, 10vw, 140px) var(--s5); }
.day__in { max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.day__l { text-align: center; }
.day__l .chap__lead { margin-inline: auto; }
.day .chap__t b { background: #0a0a0a; color: var(--lime); padding: 0 .14em; border-radius: .12em; }
/* 시간 줄(PC) */
.day__line { display: none; list-style: none; padding: 0; margin: 0; }
/* 지금 시각 한 줄(모바일) */
.day__now { display: flex; align-items: baseline; justify-content: center; gap: 12px; margin-top: 14px; font-weight: 800; letter-spacing: -.03em; }
.day__now time { font-size: clamp(28px, 8vw, 40px); font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.day__now span { font-size: 16px; color: var(--ink-2); }
/* 휴대폰 */
.day__r { display: flex; flex-direction: column; align-items: center; gap: 14px; min-height: 0; }
.day__ph { position: relative; width: min(340px, 86vw); aspect-ratio: 9 / 17; padding: 10px; border-radius: 46px; background: #0a0a0a;
  box-shadow: 0 50px 90px -40px rgba(20, 20, 15, .55); }
.day__ph::before { content: ""; position: absolute; left: 50%; top: 20px; width: 84px; height: 22px; margin-left: -42px; border-radius: 11px; background: #0a0a0a; z-index: 3; }
.day__scr { position: relative; height: 100%; border-radius: 37px; overflow: hidden; background: linear-gradient(170deg, #2b2f1d, #11120c 70%); color: #fff; container-type: inline-size; }
.day__clock { position: absolute; left: 0; right: 0; top: 13%; text-align: center; transition: top .6s var(--ease-out); }
.day__clock time { display: block; font-size: 22cqw; font-weight: 300; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.day__clock span { display: block; margin-top: 6px; font-size: max(12px, 4.4cqw); font-weight: 600; color: rgba(255, 255, 255, .7); }
/* 알림 — 새것이 맨 위, 지난 것은 한 칸씩 아래로 */
.day__ns { position: absolute; left: 4cqw; right: 4cqw; top: 46%; list-style: none; padding: 0; margin: 0; --nh: 25cqw; }
.day__n { position: absolute; left: 0; right: 0; top: 0; height: var(--nh); display: flex; align-items: center; gap: 3.4cqw; padding: 0 4cqw; border-radius: 6cqw;
  background: rgba(255, 255, 255, .92); color: #0a0a0a; box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .6);
  transform: translateY(calc((var(--a) - var(--i)) * (var(--nh) + 2.4cqw))) scale(calc(1 - (var(--a) - var(--i)) * .03));
  transition: transform .65s cubic-bezier(.22, 1, .36, 1), opacity .45s; }
.day__n:nth-child(n) { z-index: calc(10 + var(--i)); }
.day__ic { flex: none; display: grid; place-items: center; width: 11cqw; height: 11cqw; border-radius: 3cqw; background: var(--lime); color: #0a0a0a; }
.day__ic svg { width: 62%; height: 62%; }
.day__nb { min-width: 0; flex: 1; }
.day__nb b { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; font-size: max(12px, 4.4cqw); font-weight: 800; letter-spacing: -.04em; line-height: 1.25; }
.day__nb small { flex: none; font-size: max(12px, 3.4cqw); font-weight: 600; color: #6b6b6b; }
.day__nb em { display: block; margin-top: 2px; font-style: normal; font-size: max(12px, 3.8cqw); font-weight: 600; line-height: 1.3; color: #444; word-break: keep-all;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* 아직 오지 않은 알림 — 위에서 숨어 있다가 내려앉는다 */
.day__n.is-wait { opacity: 0; transform: translateY(-30%) scale(.9); }
.day__n.is-new { animation: dayNew .7s cubic-bezier(.22, 1, .36, 1); }
/* 좁은 휴대폰(작은 화면) — 알림은 제목 한 줄만, 칸을 낮게 */
@container (max-width: 250px) {
  .day__ns { --nh: 19cqw; top: 44%; }
  .day__nb em { display: none; }
  .day__nb small { display: none; }
}
@keyframes dayNew { 0% { box-shadow: 0 0 0 0 rgba(200, 240, 0, .9); } 100% { box-shadow: 0 0 0 4cqw rgba(200, 240, 0, 0), 0 10px 24px -14px rgba(0, 0, 0, .6); } }
/* 점 여섯 — 모바일 진행 */
.day__dots { display: flex; gap: 6px; }
.day__dots i { width: 8px; height: 8px; border-radius: 4px; background: var(--rule-2); transition: width .4s, background-color .4s; }
.day__dots i.is-on { width: 22px; background: #0a0a0a; }
.day__dots i.is-done { background: #0a0a0a; }

/* 화면에 붙이기(스크립트가 있을 때) */
html.pin .day { height: 480vh; --a: 0; }
/* 맺음 — 라임 원(--zr · --zx · --zy)이 화면을 덮고 가운데에 문구(--zf) */
.day__fin { display: none; }
.day__zoom { display: none; }
html.pin .day__zoom { display: block; position: absolute; inset: 0; z-index: 8; background: var(--lime); pointer-events: none;
  clip-path: circle(var(--zr, 0px) at var(--zx, 50%) var(--zy, 50%)); }
html.pin .day__fin { display: flex; position: absolute; inset: 0; z-index: 9; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 64px var(--s5) 0; opacity: calc(var(--zf, 0) * (1 - var(--zo, 0))); transform: translateY(calc((1 - var(--zf, 0)) * 26px - var(--zo, 0) * 60px));
  filter: blur(calc(var(--zo, 0) * 6px)); pointer-events: none; }
html.pin .day__fin .chap__t b { background: #0a0a0a; color: var(--lime); padding: 0 .14em; border-radius: .12em; }
html.pin .day__fin .chap__lead { margin-inline: auto; color: #2a3500; }
html.pin .day__pin { position: sticky; top: 0; height: 100vh; height: 100svh; padding: 76px var(--s5) clamp(16px, 3vh, 32px); overflow: hidden; }
html.pin .day__in { position: relative; z-index: 1; height: 100%; gap: clamp(10px, 2vh, 20px); }   /* 알림 z-index 가 라임 덮개 위로 새지 않게 */
html.pin .day__r { flex: 1; }
html.pin .day__ph { width: auto; height: 100%; max-height: 640px; max-width: 86vw; }
html.pin .day__l { position: relative; padding-bottom: 0; }
@media (max-width: 1023px) {
  html.pin .day__l .chap__lead { display: none; }
}
@media (max-width: 1023px) and (min-height: 760px) { html.pin .day__l .chap__lead { display: block; } }
/* 모바일 휴대폰 — 화면 폭에 맞춰 크게(2026-10-16 「글자가 너무 작다」). 높이가 모자라면 아래가 흐려지며 잘린다.
   시계는 작게 위로, 알림은 크게 */
@media (max-width: 1023px) {
  html.pin .day__r { overflow: hidden; align-self: stretch; -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); }
  html.pin .day__ph { flex: none; height: auto; width: min(88vw, 400px); max-width: none; max-height: none; aspect-ratio: 9 / 17; padding: 9px; border-radius: 50px; }
  html.pin .day__scr { border-radius: 42px; }
  html.pin .day__dots { display: none; }
  .day__clock { top: 9%; }
  .day__clock time { font-size: 17cqw; }
  .day__clock span { font-size: max(12px, 4.4cqw); }
  .day__ns { top: 30%; left: 3.5cqw; right: 3.5cqw; --nh: 28cqw; }
  .day__n { gap: 3.6cqw; padding: 0 4.4cqw; border-radius: 6.5cqw; }
  .day__ic { width: 12.5cqw; height: 12.5cqw; border-radius: 3.6cqw; }
  .day__nb b { font-size: 5cqw; }
  .day__nb small { font-size: 3.8cqw; }
  .day__nb em { font-size: 4.3cqw; margin-top: 3px; }
}
/* 낮은 폰 — 시계를 더 줄여 알림 두 장 반이 보이게 */
@media (max-width: 1023px) and (max-height: 700px) {
  .day__clock { top: 7%; }
  .day__clock time { font-size: 13cqw; }
  .day__ns { top: 23%; }
}
@media (min-width: 1024px) {
  .day__in { flex-direction: row; align-items: center; justify-content: center; gap: clamp(48px, 7vw, 120px); }
  .day__l { text-align: left; flex: 0 1 600px; }
  .day__l .chap__lead { margin-inline: 0; }
  .day__now, .day__dots { display: none; }
  .day__line { display: block; margin-top: clamp(20px, 3.4vh, 36px); border-left: 2px solid var(--rule-2); }
  .day__line li { position: relative; display: flex; align-items: baseline; gap: 18px; padding: clamp(6px, 1.1vh, 11px) 0 clamp(6px, 1.1vh, 11px) 26px; color: var(--ink-4);
    font-size: clamp(16px, .8rem + .4vw, 20px); font-weight: 800; letter-spacing: -.03em; transition: color .4s; }
  .day__line li::before { content: ""; position: absolute; left: -7px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--paper);
    border: 2px solid var(--rule-2); transition: background-color .4s, border-color .4s, transform .4s; }
  .day__line time { font-variant-numeric: tabular-nums; font-weight: 900; min-width: 64px; }
  html.pin .day__line li.is-done { color: var(--ink-2); }
  html.pin .day__line li.is-done::before { background: #0a0a0a; border-color: #0a0a0a; }
  html.pin .day__line li.is-on { color: var(--ink); }
  html.pin .day__line li.is-on::before { background: var(--lime); border-color: #0a0a0a; transform: scale(1.5); }
  html.pin .day__line li.is-on span { background: linear-gradient(transparent 55%, var(--lime) 55%); }
  .day__r { flex: 0 0 auto; }
  html.pin .day__r { flex: 0 0 auto; height: 100%; justify-content: center; }
  html.pin .day__ph { height: min(700px, calc(100svh - 140px)); aspect-ratio: 9 / 16; }
}

/* ══════════════════ 영상 칸 셋 마디 — 추가 서비스(라임) · AI 서비스(검정) (2026-10-16) ══════════════════
   PC(1024~) 세 열 · 그 아래는 옆으로 넘기는 한 줄(손가락으로 · 다음 칸이 살짝 보인다). 영상은 화면에 들어온 칸만 돈다(index2.js) */
.pvs { padding: clamp(56px, 8vw, 120px) 0 clamp(64px, 9vw, 140px); }
.pvs__head { text-align: center; }
.pvs .chap__lead { margin-inline: auto; }
.plus .chap__t b { background: #0a0a0a; color: var(--lime); padding: 0 .14em; border-radius: .12em; }
.plus .chap__lead { color: #2a3500; }
.aisvc .chap__t b { background: var(--lime); color: #0a0a0a; padding: 0 .14em; border-radius: .12em; -webkit-text-fill-color: #0a0a0a; }
.pvs__row { list-style: none; margin: clamp(24px, 4vw, 48px) 0 0; display: flex; gap: 12px; padding: 0 var(--s5) 8px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--s5); scrollbar-width: none; overscroll-behavior-x: contain; }
.pvs__row::-webkit-scrollbar { display: none; }
.pv__c { flex: 0 0 min(82%, 380px); scroll-snap-align: start; min-width: 0; display: flex; flex-direction: column; border-radius: 26px; background: #fff; overflow: hidden;
  box-shadow: 0 30px 60px -40px rgba(40, 60, 0, .6); }
.aisvc .pv__c { background: #17181a; box-shadow: none; border: 1px solid rgba(255, 255, 255, .1); }
.pv__v { margin: 10px 10px 0; border-radius: 18px; overflow: hidden; aspect-ratio: 6 / 5; background: #f6f6f1; }
.pv__v video { display: block; width: 100%; height: 100%; object-fit: cover; }
.pv__tx { padding: 16px 20px 22px; }
.pv__c { container-type: inline-size; }
.pv__tx h3 { white-space: nowrap; font-size: clamp(15px, 6.2cqw, 24px); font-weight: 850; letter-spacing: -.04em; line-height: 1.25; }
.pv__tx p { margin-top: 6px; font-size: clamp(13.5px, .78rem + .2vw, 15px); line-height: 1.5; color: var(--ink-2); word-break: keep-all; }
.aisvc .pv__tx h3 { color: #f4f4ee; }
.aisvc .pv__tx p { color: rgba(244, 244, 238, .7); }
.pv__soon { display: inline-block; vertical-align: .18em; margin-left: 6px; padding: 4px 10px; border-radius: 999px; background: #0a0a0a; color: var(--lime); font-size: 12px; font-weight: 800; letter-spacing: -.02em; }
/* 크레딧 안내 */
.aisvc__cr { list-style: none; padding: 0; margin: clamp(14px, 2.4vw, 22px) auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.aisvc__cr li { padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18); font-size: 13px; font-weight: 700; color: rgba(244, 244, 238, .8); }
.aisvc__cr b { color: var(--lime); font-weight: 850; }
@media (min-width: 600px) { .pv__c { flex-basis: min(46%, 400px); } }
@media (min-width: 1024px) {
  .pvs__row { overflow: visible; scroll-snap-type: none; max-width: 1700px; margin-inline: auto; padding: 0 max(var(--s5), 40px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .aisvc__cr li { font-size: 14px; padding: 9px 16px; }
}

/* ══ 추가 서비스 — 「사장님의 하루」 맺음 문구 자리에서 제목이 이어 받는다(2026-10-16) ══
   하루 마디의 마지막 100vh 위로 겹쳐 올라오고(투명), 붙는 순간(.is-live) 라임이 된다.
   제목은 화면 가운데에서 맺음 문구와 맞바뀌고 → 위로 오르며 칸 셋이 차례로 올라온다(index2.js plusDrive) */
html.pin .plus { position: relative; z-index: 6; margin-top: -100vh; margin-top: -100svh; height: 230vh; padding: 0; }
html.pin .plus:not(.is-live) { background: transparent; }
html.pin .plus__pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 64px 0 clamp(16px, 3vh, 32px); overflow: hidden; }
html.pin .plus .pvs__head, html.pin .plus .pv__c { will-change: transform, opacity; }
html.pin .plus .pvs__row { margin-top: clamp(16px, 3vh, 36px); }
html.pin .plus .pv__c { flex-basis: min(82%, 380px, calc((100svh - 330px) * .9)); }
@media (min-width: 600px) { html.pin .plus .pv__c { flex-basis: min(46%, 400px, calc((100svh - 340px) * .9)); } }
@media (min-width: 1024px) { html.pin .plus .pvs__row { max-width: min(1700px, calc((100svh - 330px) * 3.85)); } }   /* 칸 넷(디지털 명함 더함 2026-10-19) — 줄을 넓혀 칸 하나 크기를 셋일 때(1280 줄 · 칸 약 387px)와 같게 · 창이 좁으면 창 폭만큼 */
/* 모바일 다듬기(2026-10-16) — 작은 문구는 늘 보이고, 낮은 화면에서는 칸 설명을 접는다. 칸 폭은 남은 높이에 맞춘다 */
@media (max-width: 1023px) {
  html.pin .plus .pv__c { flex-basis: min(82vw, 380px, calc((100svh - 400px) * 1.2)); }
  .plus .pv__tx { padding: 14px 18px 18px; }
  .plus .pv__tx h3 { font-size: 18px; white-space: nowrap; }
  .plus .pv__tx p { font-size: 13.5px; }   /* 두 줄 자르기(…) 걷음 — 설명이 잘려 보였다(2026-10-19) */
  html.pin .plus .chap__lead { font-size: 13.5px; }
}
@media (max-width: 1023px) and (max-height: 700px) {
  html.pin .plus .pv__c { flex-basis: min(82vw, 380px, calc((100svh - 336px) * 1.2)); }
  html.pin .plus .pv__tx p { display: none; }
}

/* ══════════════════ AI 서비스 — 큰 패널 셋이 굴린 만큼 옆으로(2026-10-16 세 번째) ══════════════════
   밝은 면. 패널은 흰 판 · 얇은 선 · 넉넉한 여백, 라임은 점과 진행선에만. index2.js aisDrive 가 --x(옮긴 거리) · 패널마다 --d(가운데서 떨어진 정도)를 준다 */
.ais { position: relative; background: var(--paper); color: var(--ink); padding: clamp(56px, 8vw, 120px) 0; }
.ais__head { max-width: 1280px; margin: 0 auto; padding: 0 var(--s5); text-align: center; }
.ais .chap__t b { background: #0a0a0a; color: var(--lime); -webkit-text-fill-color: var(--lime); padding: 0 .14em; border-radius: .12em; }
.ais .chap__lead { margin-inline: auto; }
.ais__note { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12.5px; font-weight: 700; letter-spacing: -.02em; color: var(--ink-3); }
.ais__note i { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 3px rgba(200, 240, 0, .25); }
.ais__count { display: none; }
.ais__vp { margin-top: clamp(18px, 3vw, 36px); }
.ais__track { list-style: none; margin: 0; padding: 0 var(--s5); display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.ais__track::-webkit-scrollbar { display: none; }
.ais__p { flex: 0 0 min(86%, 420px); scroll-snap-align: center; display: flex; flex-direction: column; border-radius: 28px; background: #fff; border: 1px solid var(--rule);
  box-shadow: 0 1px 2px rgba(16, 17, 20, .04), 0 30px 70px -44px rgba(16, 17, 20, .35); overflow: hidden; }
.ais__pt { order: 2; padding: 16px 20px 20px; }
.ais__no { font-family: Georgia, serif; font-style: italic; font-size: 13px; color: var(--brand); }
.ais__pt h3 { margin-top: 2px; font-size: clamp(20px, 1rem + .6vw, 26px); font-weight: 800; letter-spacing: -.045em; }
.ais__pd { margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--ink-2); word-break: keep-all; }
.ais__pf { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; }
.ais__pf li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; letter-spacing: -.03em; color: var(--ink); }
.ais__pf li::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 3px rgba(200, 240, 0, .25); }
.ais__pc { display: inline-block; margin-top: 12px; padding: 5px 10px; border-radius: 999px; background: var(--paper); font-size: 12px; font-weight: 700; color: var(--ink-3); }
.ais__pv { order: 1; margin: 8px 8px 0; border-radius: 22px; overflow: hidden; aspect-ratio: 6 / 5; background: #f4f4ef; }
.ais__pv video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 붙이기 · 옆으로(스크립트가 있을 때) */
html.pin .ais { height: var(--ah, 300vh); padding: 0; }
html.pin .ais__pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 72px 0 clamp(36px, 7vh, 80px); overflow: hidden; }
html.pin .ais__track { overflow: visible; scroll-snap-type: none; width: max-content; transform: translate3d(calc(var(--x, 0) * -1px), 0, 0); will-change: transform; }
html.pin .ais__p { transform: scale(calc(1 - var(--d, 0) * .07)); opacity: calc(1 - var(--d, 0) * .5); transition: none; will-change: transform, opacity; }
html.pin .ais__p { flex-basis: min(86vw, 420px, calc((100svh - 370px) * 1.02)); }
@media (max-width: 1023px) and (max-height: 760px) { html.pin .ais .chap__lead { display: none; } html.pin .ais__pf { display: none; } }
@media (max-width: 1023px) and (max-height: 640px) { html.pin .ais__pd { display: none; } }
/* 휴대폰 · 태블릿 — 번호(01)와 제목을 한 줄에, 높이 가운데 맞춤(2026-10-19) */
@media (max-width: 1023px) { .ais__pt { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: center; } .ais__pt > * { grid-column: 1 / -1; } .ais__pt > .ais__no { grid-column: 1; line-height: 1; } .ais__pt > h3 { grid-column: 2; margin-top: 0; } .ais__pt > .ais__pc { justify-self: start; } }
@media (min-width: 600px) and (max-width: 1023px) { html.pin .ais__p { flex-basis: min(72vw, 520px, calc((100svh - 400px) * 1.02)); } }
@media (min-width: 1024px) {
  .ais__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); align-items: start; gap: 40px; text-align: left; padding: 0 max(var(--s5), 40px); }
  .ais__hr { padding-top: .35em; }   /* 제목 첫 줄과 소개글 첫 줄의 윗선을 맞춘다 */
  .ais .chap__lead { margin: 0; max-width: none; }
  .ais__note { margin-top: 14px; font-size: 13.5px; }
  .ais__count { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-variant-numeric: tabular-nums; }
  .ais__count b { font-size: 22px; font-weight: 900; letter-spacing: -.03em; }
  .ais__count span { font-size: 14px; font-weight: 700; color: var(--ink-3); }
  .ais__count em { flex: 1; height: 2px; border-radius: 2px; background: var(--rule-2); overflow: hidden; }
  .ais__count em i { display: block; height: 100%; background: #0a0a0a; transform-origin: 0 50%; transform: scaleX(var(--ap, 0)); }
  .ais__track { padding: 0 max(var(--s5), calc((100vw - 1200px) / 2)); gap: 24px; }
  .ais__p { flex-direction: row; align-items: stretch; flex-basis: min(1200px, calc(100vw - 80px)); }
  html.pin .ais__p { flex-basis: min(1200px, calc(100vw - 80px), calc((100svh - 430px) * 1.2 + 440px)); }
  .ais__pt { order: 1; flex: 0 0 clamp(360px, 34%, 440px); display: flex; flex-direction: column; justify-content: center; padding: clamp(24px, 3.4vw, 52px); }
  .ais__no { font-size: 16px; }
  .ais__pt h3 { margin-top: 6px; font-size: clamp(28px, 1.2rem + 1.4vw, 44px); }
  .ais__pd { margin-top: 12px; font-size: clamp(15px, .8rem + .3vw, 17px); }
  .ais__pf { margin-top: clamp(16px, 2.4vh, 26px); gap: 10px; }
  .ais__pf li { font-size: 15.5px; }
  .ais__pc { margin-top: clamp(16px, 2.4vh, 24px); align-self: flex-start; font-size: 13px; padding: 7px 12px; }
  .ais__pv { order: 2; flex: 1; margin: 12px; aspect-ratio: 6 / 5; }
}
@media (min-width: 1024px) and (max-height: 760px) { .ais .chap__lead { display: none; } .ais__pf li:nth-child(3) { display: none; } }
html.pin .ais__vp { overflow-x: clip; overflow-y: visible; }   /* 옆으로 긴 트랙을 잘라 둔다(패널은 굴림으로 넘어간다) */
html.pin .ais[style*="--pw"] .ais__p { flex-basis: var(--pw) !important; }   /* 남은 높이에 맞춘 폭(index2.js aisSize) */
/* 낮은 폰(높이 600 이하) — 열 칸의 두 줄 설명을 접어 제목 · 작은 문구 · 칸이 다 들어오게 */
@media (max-width: 1023px) and (max-height: 600px) { html.pin .can__d { display: none; } }
/* 낮은 PC(높이 640 이하) — AI 패널의 핵심 줄 · 크레딧 줄을 접는다 */
@media (min-width: 1024px) and (max-height: 640px) { .ais__pf, .ais__pc { display: none; } .ais__pd { margin-top: 8px; } }
/* ══ 모바일 — 추가 서비스 · 관리자 기능 칸 줄도 굴린 만큼 옆으로(2026-10-16 「스크롤 · 터치해도 안 넘어간다」) ══
   .is-hpin(index2.js hpin) 일 때 줄은 손 스크롤 대신 transform 으로 움직이고, 손가락 가로 밀기는 세로 굴림으로 바꾼다 */
@media (max-width: 1023px) {
  html.pin .is-hpin .pvs__row, html.pin .is-hpin .adms { overflow: visible; scroll-snap-type: none; width: max-content; max-width: none; transform: translate3d(calc(var(--hx, 0) * -1px), 0, 0); will-change: transform; touch-action: pan-y; }
  html.pin #admin.is-hpin { padding-block: 0; }
  html.pin #admin.is-hpin > .shell { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: 64px; padding-bottom: clamp(20px, 4vh, 40px); overflow-x: clip; }
  html.pin #admin.is-hpin .adms { margin-inline: 0; margin-top: clamp(14px, 2.4vh, 24px); padding: 0; }
  html.pin #admin.is-hpin .admc { flex-basis: var(--hw, min(86vw, 440px)); }
  html.pin .plus__pin { overflow-x: clip; }
}
/* 모바일 첫 화면 — 화면 높이(100%) 기준 세로 가운데(머리띠 64px 아래 남은 칸의 가운데 · 2026-10-16) */
@media (max-width: 1023px) {
  html.pin .intro__copy { top: calc(50% + 32px); padding-top: 0; padding-bottom: 0; transform: translateY(calc(-50% - var(--a, 0) * 50px)); }
}
/* 모바일 AI 패널 — 폭을 넓게, 사이를 좁게, 옆 패널은 덜 줄인다 */
@media (max-width: 1023px) {
  html.pin .ais__track { gap: 10px; }
  html.pin .ais__p { transform: scale(calc(1 - var(--d, 0) * .04)); opacity: calc(1 - var(--d, 0) * .35); }
  html.pin .ais__pf { display: none; }
  .ais__pt { padding: 14px 18px 18px; }
  .ais__pd { margin-top: 4px; font-size: 13.5px; }
  .ais__pc { margin-top: 10px; }
}
/* 낮은 PC(높이 800 이하) 첫 화면 — 제목 · 배지 · 문구 · 단계 · 단추가 머리띠 아래 남은 높이에 다 들어오게 높이 기준으로 줄인다 */
@media (min-width: 1024px) and (max-height: 800px) {
  html.pin .intro__copy > .intro__t { font-size: min(7vw, 10.4vh, 150px); }
  html.pin .intro__eye { font-size: clamp(13px, 2.5vh, 22px); }
  html.pin .intro__s { margin-top: 1.6vh; font-size: clamp(14px, 2.5vh, 21px); }
  html.pin .intro__steps { margin-top: 2vh; --nd: clamp(38px, 6.4vh, 52px); }
  html.pin .intro__acts { margin-top: 2.2vh; }
  html.pin .intro__go { min-height: 46px; }
}
@media (min-width: 1024px) { .pvs__row { width: 100%; box-sizing: border-box; } }   /* 칸이 container 라 내용 폭이 0 — 줄 폭을 정해 둔다 */
@media (min-width: 1024px) and (max-height: 680px) { html.pin .intro__copy > .intro__t { font-size: min(7vw, 9.6vh, 150px); } html.pin .intro__steps { margin-top: 1.4vh; } }
/* PC 단계 줄 — 열 개가 폭 안에 다 들게(사이는 space-between 이 나눈다) */
.intro__steps.is-fit .intro__can { gap: 4px; }
@media (min-width: 1024px) and (max-width: 1279px) { html .intro__steps { --nd: 40px !important; } }
/* 양 끝 이름표 — 줄을 안으로 들이지 않고, 첫 이름표는 왼쪽 · 마지막은 오른쪽에 맞춰 잘리지 않게 */
@media (min-width: 1280px) {
  .intro__steps.is-fit .intro__can > li:nth-child(2) .intro__nl { left: 0; margin-left: 0; text-align: left; }
  .intro__steps.is-fit .intro__can > li:last-child .intro__nl { left: auto; right: 0; margin-left: 0; text-align: right; }
}
/* 배지 「사장님을 위한 올인원 …」 과 큰 제목 사이를 띄운다(2026-10-16) */
.intro__t { margin-top: clamp(16px, 2.4vh, 26px); }
@media (min-width: 1024px) { html.pin .intro__copy > .intro__t { margin-top: clamp(18px, 3.2vh, 34px); } }
/* ══ 구축사례 — 화면에 붙잡고 굴린 만큼 옆으로(PC 한 화면 4장 · 2026-10-16 「전체 화면에서 4개씩」) ══ */
html.pin #rail.is-hpin { padding-block: 0; }
html.pin #rail.is-hpin .wall__pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow-x: clip;
  padding: 64px 0 clamp(20px, 4vh, 44px); }
html.pin #rail.is-hpin .wall__vp { overflow-x: clip; }
html.pin #rail.is-hpin .wall__grid { display: flex; width: max-content; max-width: none; overflow: visible; scroll-snap-type: none; gap: 20px; margin-inline: 0;
  padding: 0 max(var(--s5), 40px); transform: translate3d(calc(var(--hx, 0) * -1px), 0, 0); will-change: transform; touch-action: pan-y; }
html.pin #rail.is-hpin .wall__it { flex: 0 0 var(--hw, min(84vw, 420px)); }
@media (min-width: 1024px) { html.pin #rail.is-hpin .wall__it { flex-basis: var(--hw, calc((100vw - 80px - 60px) / 4)); } }
html.pin #rail.is-hpin .wall__more { margin-top: clamp(12px, 2.4vh, 24px); }
.dev__pc { overflow: clip; overflow-clip-margin: 12%; }   /* 받침이 화면보다 넓게 — 판 안에서만 */
/* 마우스가 없는 기기 — 휴대폰은 처음부터 올라와 있다 */
@media (hover: none) { .wall__ph { transform: translateY(-14%); } }
/* 「본업에 집중하세요」 칸 — 위 · 좌우 안쪽 여백 5px, 둥글기 없음(2026-10-17) */
.can__a { padding: 5px 5px 22px; border-radius: 0; }
.can__v { border-radius: 0; }
.can__go { top: calc(5px + (100cqw - 10px) * .8333 - 64px); }
/* 마우스 없는 기기 — 누르면 붙는 hover 로 칸이 떠올라 테두리 굵기가 어긋나 보였다(2026-10-19) · 떠오름 없음 */
@media (hover: none) { .can__a:hover { transform: none; box-shadow: 0 30px 60px -36px rgba(40, 60, 0, .6); } }
/* 추가 서비스 칸 — 위 · 좌우 안쪽 여백 5px, 둥글기 없음(2026-10-17) */
.pv__c { border-radius: 0; }
.pv__v { margin: 5px 5px 0; border-radius: 0; }

/* ══════════════════ 2026-10-19 더한 마디 — B 예약(#booking) ══════════════════
   보통 마디(chap · sec--lift · .up) — 붙잡지 않는다. 휴대폰 위아래 여백은 서버 site.css 의 손가락 화면 구획이 맞춘다.
   오른쪽은 영상 한 편 — 화면에 들어오면 돈다(index2.js 추가 서비스 · AI 서비스 칸과 같은 관찰자). */

/* B — 왼쪽 세 줄(아이콘 · 제목 · 한 줄) · 오른쪽 영상(6:5 · _motion BookingFlow)
   영상 바탕 = 이 면의 라임(#c8f000)이라 칸에 배경 · 둥글기 · 그림자를 두지 않는다(그림처럼). 마디 아래 여백 0 — 영상 속 휴대폰이 마디 끝에 걸친다 */
#booking.chap { padding-bottom: 0; }
.bkg { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: end; }
.bkg__tx { align-self: center; width: 100%; max-width: 520px; margin-inline: auto; }
.bkg__ls { list-style: none; border-top: 1.5px solid rgba(10, 10, 10, .16); }
.bkg__r { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; padding: 18px 0; border-bottom: 1.5px solid rgba(10, 10, 10, .16); text-align: left; }
.bkg__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: #0a0a0a; color: #c8f000; }
.bkg__ic svg { width: 22px; height: 22px; }
.bkg__rt b { display: block; font-size: 18px; font-weight: 850; letter-spacing: -.04em; line-height: 1.3; }
.bkg__rt span { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.55; color: rgba(10, 10, 10, .78); word-break: keep-all; }
.bkg__more { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.bkg__more span { padding: 6px 11px; border-radius: 999px; border: 1.5px solid rgba(10, 10, 10, .55); font-size: 13px; font-weight: 700; letter-spacing: -.03em; white-space: nowrap; }
@media (min-width: 600px) { .bkg__more span { padding: 7px 13px; font-size: 13.5px; } }
.bkg__v { margin: 0 auto; width: 100%; max-width: 640px; aspect-ratio: 6 / 5; background: #c8f000; }
.bkg__v video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 휴대폰(600 아래) — 정사각형 휴대폰용 영상을 화면 양끝까지(영상 바탕이 면과 같은 라임이라 끝이 곧 화면 끝) · 넓은 화면은 6:5 */
.bkg__v--m { display: none; }
@media (max-width: 599px) {
  .bkg__v--pc { display: none; }
  .bkg__v--m { display: block; width: 100vw; max-width: none; margin-inline: calc(50% - 50vw); aspect-ratio: 1 / 1; }
}
@media (min-width: 1024px) {
  .bkg { grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); gap: 48px; }
  .bkg__tx { margin: 0 0 clamp(48px, 7vw, 110px); }
  .bkg__r { padding: 22px 0; }
  .bkg__rt b { font-size: 21px; }
  .bkg__rt span { font-size: 15.5px; }
  .bkg__v { max-width: none; }
}

/* ══════════════════ 2026-10-21 AI 사무실(#office) — AI 서비스 바로 아래 · 보통 마디 ══════════════════ */
/* 왼쪽 영상(6:5 · 바탕이 이 면과 같은 검정이라 틀 없이) · 오른쪽 직원 탭과 그 직원 칸 */
.aof { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
.aof__v { margin: 0 auto; width: 100%; max-width: 640px; aspect-ratio: 6 / 5; border-radius: 24px; overflow: hidden; background: #0a0a0a; }
.aof__v video { display: block; width: 100%; height: 100%; object-fit: cover; }
.aof__box { display: grid; gap: 16px; min-width: 0; text-align: left; }
/* 직원 탭 — 얼굴 + 이름 · 한 줄 좌우 슬라이드(밀기 · 마우스 끌기 · 화살표) · 끝이 남으면 가장자리가 흐려진다 */
.aof__sl { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; }
.aof__tabs { flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; overscroll-behavior-x: contain; scrollbar-width: none; padding: 2px; cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.aof__tabs.is-start { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); }
.aof__tabs.is-end { -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px); mask-image: linear-gradient(90deg, transparent, #000 24px); }
.aof__tabs.is-start.is-end { -webkit-mask-image: none; mask-image: none; }
.aof__tabs.is-drag { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.aof__tab { scroll-snap-align: start; }
.aof__nav { flex: none; display: none; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--rule-2); background: #151515; color: var(--ink); cursor: pointer; }
.aof__nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.aof__nav:hover:not(:disabled) { background: var(--lime); border-color: var(--lime); color: #0a0a0a; }
.aof__nav:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.aof__nav:disabled { opacity: .3; cursor: default; }
.aof__tabs::-webkit-scrollbar { display: none; }
.aof__tab { flex: none; display: flex; align-items: center; gap: 7px; height: 44px; padding: 0 14px 0 5px; border-radius: 999px; border: 1px solid var(--rule); background: #151515; color: var(--ink-2); font: inherit; font-size: 14px; font-weight: 700; letter-spacing: -.03em; cursor: pointer; text-align: left; }
.aof__tab:hover { border-color: var(--rule-2); color: var(--ink); }
.aof__tab:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.aof__tab.is-on { background: var(--lime); border-color: var(--lime); color: #0a0a0a; }
.aof__fc { flex: none; display: grid; place-items: end center; width: 34px; height: 34px; border-radius: 50%; background: #23272e; overflow: hidden; }
.aof__tab.is-on .aof__fc { background: #0a0a0a; }
.aof__sp { display: block; width: 100%; height: 100%; background: #e9e1d2 url(/html/ddalkkak/assets/img/ai/ai-office-staff.webp) no-repeat; background-size: 2629.348% auto; }
/* 직원 칸 — 얼굴 · 이름 · 한 줄 · 맡은 메뉴 · 저절로 하는 일 · 부탁 예시 */
.aof__pan { padding: 22px; border-radius: 22px; background: #151515; border: 1px solid var(--rule); animation: aofIn .35s cubic-bezier(.22, 1, .36, 1); }
.aof__pan[hidden] { display: none; }
.aof__who { display: flex; align-items: center; gap: 14px; }
.aof__fc--lg { width: 64px; height: 64px; border-radius: 18px; }
.aof [data-ag="ddal"] .aof__sp { background-position: 1.676% 31.526%; }
.aof [data-ag="gaon"] .aof__sp { background-position: 8.896% 31.526%; }
.aof [data-ag="mir"] .aof__sp { background-position: 16.201% 31.526%; }
.aof [data-ag="sori"] .aof__sp { background-position: 23.936% 31.426%; }
.aof [data-ag="maru"] .aof__sp { background-position: 31.328% 31.426%; }
.aof [data-ag="daon"] .aof__sp { background-position: 38.462% 31.426%; }
.aof [data-ag="byeol"] .aof__sp { background-position: 45.466% 32.028%; }
.aof [data-ag="hangyeol"] .aof__sp { background-position: 53.545% 32.028%; }
.aof [data-ag="nuri"] .aof__sp { background-position: 61.538% 31.124%; }
.aof [data-ag="haram"] .aof__sp { background-position: 68.973% 31.124%; }
.aof [data-ag="dodam"] .aof__sp { background-position: 76.107% 31.124%; }
.aof [data-ag="yena"] .aof__sp { background-position: 83.240% 31.124%; }
.aof [data-ag="raon"] .aof__sp { background-position: 90.632% 31.124%; }
.aof [data-ag="hanbit"] .aof__sp { background-position: 98.238% 31.526%; }
.aof__who p { display: grid; gap: 2px; text-align: left; }
.aof__who b { font-size: 24px; font-weight: 850; letter-spacing: -.045em; color: var(--ink); }
.aof__who span { font-size: 14px; font-weight: 700; color: var(--lime); }
.aof__desc { margin-top: 16px; font-size: 16px; line-height: 1.65; color: var(--ink-2); word-break: keep-all; text-align: left; }
.aof__dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--rule); }
.aof__dl dt { font-size: 12.5px; font-weight: 800; color: var(--ink-4); text-align: left; }
.aof__dl dd { margin: 0 0 10px; font-size: 15px; line-height: 1.6; color: var(--ink); word-break: keep-all; text-align: left; }
.aof__dl dd:last-child { margin-bottom: 0; }
.aof__keys { display: flex; flex-wrap: wrap; gap: 6px; }
.aof__keys span { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--rule-2); font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.aof__ask { display: inline-block; padding: 10px 16px; border-radius: 18px 18px 18px 6px; background: #0a0a0a; border: 1px solid var(--rule); font-weight: 700; color: var(--ink); quotes: "「" "」"; }
.aof__pts { list-style: none; display: grid; gap: 8px; }
.aof__pts li { display: grid; gap: 2px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--rule); text-align: left; }
.aof__pts b { font-size: 15px; font-weight: 800; color: var(--lime); }
.aof__pts span { font-size: 14px; line-height: 1.55; color: var(--ink-2); word-break: keep-all; }
@keyframes aofIn { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .aof__pan { animation: none; } }
/* 직원 색 — 관리자 ai_office.css [data-ag] 와 같은 값(머리 · 옷 · 살 · 소품) */
/* 휴대폰(600 아래) — 탭과 직원 칸을 줄인다: 얼굴 · 글자 · 여백을 작게, 칸 이름은 왼쪽 좁은 열로 */
@media (max-width: 599px) {
  .aof__box { gap: 12px; }
  .aof__tabs { gap: 4px; }
  .aof__tab { gap: 5px; height: 34px; padding: 0 11px 0 3px; font-size: 13px; }
  .aof__tab .aof__fc { width: 28px; height: 28px; }
  .aof__pan { padding: 16px; border-radius: 18px; }
  .aof__who { gap: 10px; }
  .aof__fc--lg { width: 46px; height: 46px; border-radius: 14px; }
  .aof__who b { font-size: 19px; }
  .aof__who span { font-size: 12.5px; }
  .aof__desc { margin-top: 10px; font-size: 14px; line-height: 1.55; }
  .aof__dl { grid-template-columns: 74px minmax(0, 1fr); gap: 8px 10px; margin-top: 12px; padding-top: 12px; }
  .aof__dl dt { padding-top: 3px; font-size: 11.5px; }
  .aof__dl dd { margin: 0; font-size: 13.5px; line-height: 1.5; }
  .aof__keys { gap: 4px; }
  .aof__keys span { padding: 3px 8px; font-size: 12px; }
  .aof__ask { padding: 7px 12px; border-radius: 14px 14px 14px 5px; font-size: 13.5px; }
}
@media (min-width: 600px) {
  .aof__nav { display: grid; }
  .aof__dl { grid-template-columns: 112px minmax(0, 1fr); gap: 12px 16px; }
  .aof__dl dd { margin: 0; }
  .aof__pts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .aof { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 40px; }
  .aof__v { max-width: none; position: sticky; top: 96px; }
  .aof__pan { padding: 26px 28px; }
}