/* ===== 복구: svc-genbg ===== */

  #services .svcbg{
    position:absolute; inset:0; z-index:0; pointer-events:none;
    width:100%; height:100%; display:block;
    filter:blur(1.5px) saturate(108%);
    opacity:0; transition:opacity 1.2s cubic-bezier(.16,1,.3,1);
  }
  body[data-svcbg="gen"] #services .svcbg{opacity:1}

  #services .svcscrim{
    position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0;
    transition:opacity 1.2s cubic-bezier(.16,1,.3,1);
    background:
      radial-gradient(112% 78% at 50% 46%, rgba(4,4,5,.14) 0%, rgba(4,4,5,.50) 58%, rgba(4,4,5,.86) 100%),
      linear-gradient(180deg, rgba(4,4,5,.68) 0%, rgba(4,4,5,.16) 34%, rgba(4,4,5,.22) 66%, rgba(4,4,5,.76) 100%);
  }
  body[data-svcbg="gen"] #services .svcscrim{opacity:1}

  body[data-svcbg="gen"] #services .fog{opacity:.10 !important}
  body[data-svcbg="gen"] #services .orb{opacity:0 !important}
  body[data-svcbg="gen"] #services .svcw__word{
    opacity:.62; text-shadow:0 2px 34px rgba(0,0,0,.66);
  }
  body[data-svcbg="gen"] #services .svcw:hover .svcw__word,
  body[data-svcbg="gen"] #services .svcw:focus .svcw__word,
  body[data-svcbg="gen"] #services .svcw.is-on .svcw__word{opacity:1}
  body[data-svcbg="gen"] #services .svcw__tags i{
    background:rgba(4,4,5,.52); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  }

  #svcToggle{
    position:fixed; left:50%; bottom:20px; translate:-50% 0; z-index:900;
    display:flex; border:1px solid rgba(236,232,225,.16); border-radius:99px;
    background:rgba(6,6,8,.78); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    overflow:hidden; opacity:0; pointer-events:none; transition:opacity .45s ease;
  }
  #svcToggle.show{opacity:1; pointer-events:auto}
  #svcToggle button{
    font-family:"Space Mono",monospace; font-size:10.5px; letter-spacing:.11em;
    text-transform:uppercase; padding:9px 17px; background:transparent;
    color:rgba(236,232,225,.6); border:0; cursor:pointer; transition:background .22s,color .22s;
  }
  #svcToggle button[aria-pressed="true"]{background:#ff6a2f; color:#160b03}
  #svcToggle button:focus-visible{outline:2px solid #ff6a2f; outline-offset:2px}


/* ===== 복구: bgfx ===== */

/* =========================================================
   섹션 배경 시스템 — "측정된 빛"
   밝은 면에는 빛을 더할 수 없으므로 구조로 깊이를 만든다.
   각 배경은 그 섹션의 내용을 아주 낮은 대비로 그린 다이어그램이다.
   ========================================================= */

.bgfx{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bgfx > *{position:absolute;display:block}

/* 공통 그레인 — 크림 바탕의 밋밋함과 그라디언트 밴딩을 함께 없앤다 */
.bgfx .g-grain{
  inset:-2%;opacity:.55;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.30'/%3E%3C/svg%3E");
}
.sect[data-tone="dark"] .bgfx .g-grain,
.sect[data-tone="accent"] .bgfx .g-grain{mix-blend-mode:overlay;opacity:.28}

/* 공통 광원 — 아주 느리게 도는 큰 빛. 정지 화면에서 숨을 만든다 */
.bgfx .g-sweep{
  width:150%;height:150%;left:-25%;top:-25%;
  background:radial-gradient(45% 38% at 50% 50%, rgba(255,255,255,.60), transparent 70%);
  animation:bgSweep 46s ease-in-out infinite alternate;will-change:transform;
}
.sect[data-tone="dark"] .bgfx .g-sweep{background:radial-gradient(42% 34% at 50% 50%, rgba(255,138,80,.10), transparent 72%)}
.sect[data-tone="accent"] .bgfx .g-sweep{background:radial-gradient(46% 40% at 50% 50%, rgba(255,255,255,.20), transparent 70%)}
@keyframes bgSweep{
  0%  {transform:translate3d(-9%,-5%,0) scale(1)}
  100%{transform:translate3d(10%,7%,0) scale(1.14)}
}

/* ---------- 02 STUDIO — 축적된 시간의 지층 ---------- */
/* 아래로 갈수록 촘촘해지는 선. 나이테처럼 13년이 쌓인 단면. */
.bgfx[data-fx="studio"] .s-far{
  inset:0;
  background:repeating-linear-gradient(to bottom, transparent 0 54px, var(--line-2) 54px 55px);
  -webkit-mask-image:linear-gradient(to bottom, transparent 6%, #000 46%);
          mask-image:linear-gradient(to bottom, transparent 6%, #000 46%);
}
.bgfx[data-fx="studio"] .s-near{
  inset:0;
  background:repeating-linear-gradient(to bottom, transparent 0 18px, var(--line-2) 18px 19px);
  -webkit-mask-image:linear-gradient(to bottom, transparent 52%, #000 100%);
          mask-image:linear-gradient(to bottom, transparent 52%, #000 100%);
  opacity:.8;
}
/* 시간축 눈금 — 좌측 가장자리에 아주 옅게 */
.bgfx[data-fx="studio"] .s-ticks{
  left:0;top:0;bottom:0;width:46px;
  background:repeating-linear-gradient(to bottom, var(--line-2) 0 1px, transparent 1px 26px);
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
          mask-image:linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
}
.bgfx[data-fx="studio"] .s-mark{
  left:0;width:96px;height:1px;background:var(--accent);opacity:.30;
  top:64%;animation:studioMark 18s ease-in-out infinite alternate;
}
@keyframes studioMark{0%{top:66%;width:70px}100%{top:34%;width:132px}}

/* ---------- 03 WORK — 카드가 놓이는 무대 ---------- */
/* 소실점으로 물러나는 바닥 격자. 떠 있던 카드에 지면을 준다. */
.bgfx[data-fx="work"] .w-floor{
  left:-30%;right:-30%;bottom:-16%;height:78%;
  background:
    repeating-linear-gradient(to right, var(--line-2) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(to bottom, var(--line-2) 0 1px, transparent 1px 88px);
  transform:perspective(680px) rotateX(74deg);
  transform-origin:bottom center;
  -webkit-mask-image:linear-gradient(to top, #000 4%, transparent 78%);
          mask-image:linear-gradient(to top, #000 4%, transparent 78%);
  animation:workFloor 40s linear infinite;
}
@keyframes workFloor{to{background-position:0 88px, 0 88px}}
/* 지평선 */
.bgfx[data-fx="work"] .w-horizon{
  left:0;right:0;top:36%;height:1px;
  background:linear-gradient(to right, transparent, var(--line-2) 18%, var(--line-2) 82%, transparent);
}
.bgfx[data-fx="work"] .w-glow{
  left:50%;top:36%;width:56%;height:34%;translate:-50% -50%;
  background:radial-gradient(ellipse at center, rgba(255,106,47,.10), transparent 68%);
}

/* ---------- 05 PRICING — 네 단의 사다리 ---------- */
/* 배경 자체가 19 / 90 / 200 / 400 의 계단이다. */
.bgfx[data-fx="pricing"] .p-steps{
  inset:0;display:grid;grid-template-columns:repeat(4,1fr);align-items:end;
  padding:0 6%;gap:2.2%;
}
.bgfx[data-fx="pricing"] .p-steps i{
  display:block;width:100%;border-radius:2px 2px 0 0;
  background:linear-gradient(to top, var(--line-2), transparent 88%);
  border-top:1px solid var(--line-2);
}
.bgfx[data-fx="pricing"] .p-steps i:nth-child(1){height:26%}
.bgfx[data-fx="pricing"] .p-steps i:nth-child(2){height:44%}
.bgfx[data-fx="pricing"] .p-steps i:nth-child(3){height:64%}
.bgfx[data-fx="pricing"] .p-steps i:nth-child(4){height:86%;border-top-color:rgba(255,106,47,.34)}
.bgfx[data-fx="pricing"] .p-rule{
  left:0;right:0;bottom:0;height:1px;background:var(--line);opacity:.5;
}

/* ---------- 06 PROCESS — 상담에서 인계까지 흐르는 선 ---------- */
.bgfx[data-fx="process"] .r-path{inset:0;width:100%;height:100%}
.bgfx[data-fx="process"] .r-path svg{width:100%;height:100%;display:block}
.bgfx[data-fx="process"] .r-path .trace{
  fill:none;stroke:var(--line-2);stroke-width:1.4;
}
.bgfx[data-fx="process"] .r-path .runner{
  fill:none;stroke:var(--accent);stroke-width:1.6;opacity:.42;
  stroke-dasharray:160 1200;stroke-linecap:round;
  animation:procRun 14s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes procRun{0%{stroke-dashoffset:1360}100%{stroke-dashoffset:0}}
.bgfx[data-fx="process"] .r-path .node{fill:var(--line-2)}

/* ---------- 07 PROOF — 숫자의 밀도 ---------- */
/* 오렌지 그라디언트 위에 데이터가 쌓인 결을 얹는다. */
.bgfx[data-fx="proof"] .f-dots{
  inset:-4%;
  background-image:radial-gradient(rgba(255,255,255,.30) 1px, transparent 1.4px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(84% 70% at 50% 34%, #000 8%, transparent 78%);
          mask-image:radial-gradient(84% 70% at 50% 34%, #000 8%, transparent 78%);
  opacity:.5;animation:proofDrift 34s linear infinite;
}
@keyframes proofDrift{to{background-position:26px 26px}}
.bgfx[data-fx="proof"] .f-bars{
  left:0;right:0;bottom:0;height:44%;
  background:repeating-linear-gradient(to right, rgba(255,255,255,.10) 0 2px, transparent 2px 46px);
  -webkit-mask-image:linear-gradient(to top, #000, transparent 86%);
          mask-image:linear-gradient(to top, #000, transparent 86%);
}
.bgfx[data-fx="proof"] .f-arc{
  left:50%;top:112%;width:150%;aspect-ratio:1;translate:-50% -50%;
  border-radius:50%;border:1px solid rgba(255,255,255,.14);
}

/* 활성 섹션에서만 애니메이션을 돌린다 */
.sect:not(.is-active) .bgfx *{animation-play-state:paused !important}
@media (prefers-reduced-motion:reduce){ .bgfx *{animation:none !important} }


/* ===== 복구: bgfx-tune ===== */

/* ---- WORK: 바닥 격자를 실제로 보이게 ---- */
.bgfx[data-fx="work"] .w-floor{
  bottom:-22%;height:88%;
  background:
    repeating-linear-gradient(to right,  var(--line) 0 1px, transparent 1px 76px),
    repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 76px);
  transform:perspective(560px) rotateX(76deg);
  -webkit-mask-image:linear-gradient(to top, #000 0%, rgba(0,0,0,.55) 46%, transparent 92%);
          mask-image:linear-gradient(to top, #000 0%, rgba(0,0,0,.55) 46%, transparent 92%);
  opacity:.85;
}
@keyframes workFloor{to{background-position:0 76px, 0 76px}}
.bgfx[data-fx="work"] .w-horizon{
  top:34%;
  background:linear-gradient(to right, transparent, var(--line) 14%, var(--line) 86%, transparent);
  opacity:.9;
}
.bgfx[data-fx="work"] .w-glow{
  top:34%;width:64%;height:42%;
  background:radial-gradient(ellipse at center, rgba(255,106,47,.16), transparent 66%);
}

/* ---- STUDIO: 지층을 조금 더 또렷하게 ---- */
.bgfx[data-fx="studio"] .s-far{
  background:repeating-linear-gradient(to bottom, transparent 0 54px, var(--line) 54px 55px);
  opacity:.55;
}
.bgfx[data-fx="studio"] .s-near{
  background:repeating-linear-gradient(to bottom, transparent 0 18px, var(--line) 18px 19px);
  opacity:.42;
}
.bgfx[data-fx="studio"] .s-ticks{width:58px;opacity:.7;
  background:repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 26px);}
.bgfx[data-fx="studio"] .s-mark{opacity:.45;height:2px}

/* ---- PROCESS: 경로를 또렷하게 ---- */
.bgfx[data-fx="process"] .r-path .trace{stroke:var(--line);stroke-width:1.6;opacity:.75}
.bgfx[data-fx="process"] .r-path .runner{stroke-width:2.2;opacity:.55}
.bgfx[data-fx="process"] .r-path .node{fill:var(--line)}

/* ---- PRICING: 계단 대비 소폭 상향 ---- */
.bgfx[data-fx="pricing"] .p-steps i{
  background:linear-gradient(to top, var(--line-2), transparent 84%);
  border-top:1px solid var(--line);
}

/* =========================================================
   원본 버그 수정 — 주황 섹션에서 nav·카운터가 청록으로 반전
   .nav{mix-blend-mode:difference} 가 #c9481a 위에서 시안을 만든다.
   ========================================================= */
body.tone-accent .nav,
body.tone-accent .counter{mix-blend-mode:normal}
body.tone-accent .nav,
body.tone-accent .nav a,
body.tone-accent .nav span,
body.tone-accent .counter{color:#fff}
body.tone-accent .nav__menu-ico i{background:#fff}


/* ===== 복구: foot-patch ===== */

  .foot__social{display:flex;align-items:center;gap:14px;margin:0}
  .foot__social a{
    display:inline-flex;align-items:center;justify-content:center;
    width:34px;height:34px;border-radius:50%;
    border:1px solid var(--line);color:var(--sub);
    transition:color .3s var(--ease,cubic-bezier(.16,1,.3,1)),
               border-color .3s var(--ease,cubic-bezier(.16,1,.3,1)),
               background .3s var(--ease,cubic-bezier(.16,1,.3,1)),
               transform .3s var(--ease,cubic-bezier(.16,1,.3,1));
  }
  .foot__social a svg{width:16px;height:16px;fill:currentColor;display:block}
  .foot__social a:hover{
    color:#fff;border-color:var(--accent);background:var(--accent);
    transform:translateY(-2px);
  }
  .foot__social a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}


/* ===== proof-patch.txt ===== */
/* ===== 07 PROOF — 레퍼런스 구조: 강한 피사체 + 거대 타이포 + 부유 지표카드 ===== */
  #proof .pf{position:absolute;inset:0;z-index:2;display:grid;
             grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr auto;isolation:isolate;
             gap:clamp(8px,1.6vh,22px);align-content:stretch;
             padding:clamp(26px,4.2vh,52px) 0 clamp(26px,4.2vh,50px)}

  /* 상단 우측 설명 블록 */
  #proof .pf__intro{grid-column:2;grid-row:1;justify-self:end;max-width:38ch;text-align:left;position:relative;z-index:3}
  #proof .pf__intro p{margin:0;color:#fff;font-size:clamp(13px,1.05vw,15.5px);line-height:1.72;opacity:.96;
    text-shadow:0 2px 18px rgba(30,8,0,.55)}
  #proof .pf__keys{margin:10px 0 0;display:flex;flex-wrap:wrap;gap:6px 14px}
  #proof .pf__keys i{font-style:normal;font-size:clamp(11px,.9vw,13px);color:rgba(255,255,255,.80);letter-spacing:.01em;
    text-shadow:0 2px 14px rgba(30,8,0,.6)}

  /* 3D 오브제 */
  #proof .wrap{position:relative;height:100%}
  /* transform은 [data-in] 등장 애니메이션이 쓰므로, 세로 중앙은 top 계산으로 잡는다 */
  #proof .pf__obj{position:absolute;right:-5%;top:calc(50% - min(44vh,415px));
                  width:min(88vh,830px);aspect-ratio:1;pointer-events:none;z-index:1}
  #proof .pf__obj canvas{width:100%;height:100%;display:block}
  #proof .pf__obj::after{content:"";position:absolute;inset:-16%;z-index:-1;border-radius:50%;
    background:radial-gradient(circle,rgba(0,0,0,.30),transparent 66%);filter:blur(26px)}

  /* 거대 타이포 */
  #proof .pf__head{grid-column:1;grid-row:3;align-self:end;position:relative;z-index:3}
  #proof .pf__display{margin:0;font-family:var(--kr);font-weight:700;color:#fff;
    letter-spacing:-.04em;line-height:1.0;
    font-size:clamp(40px,min(8.4vw,13vh),132px);
    text-shadow:0 10px 60px rgba(70,14,0,.42),0 2px 14px rgba(70,14,0,.22)}
  #proof .pf__sub{margin:clamp(10px,1.4vh,18px) 0 0;color:rgba(255,255,255,.82);
    font-size:clamp(12.5px,1vw,15px);max-width:34ch;line-height:1.6;white-space:nowrap}
  @media (min-width:901px){/* 좌하단 섹션 카운터(07/08)와 겹치지 않도록 들여쓴다 */
    #proof .pf__sub{padding-left:76px}}

  /* CTA 필 */
  #proof .pf__cta{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(14px,2vh,24px);
    padding:14px 26px;border-radius:999px;background:#fff;color:#1a0f0a;text-decoration:none;
    font-family:var(--kr);font-weight:600;font-size:clamp(13px,1vw,15px);letter-spacing:-.01em;
    box-shadow:0 16px 40px -16px rgba(60,14,0,.55);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
  #proof .pf__cta:hover{transform:translateY(-2px);box-shadow:0 22px 52px -16px rgba(60,14,0,.65)}
  #proof .pf__cta svg{width:14px;height:14px;flex:none}

  /* 부유 지표 카드 */
  #proof .pf__cards{grid-column:2;grid-row:3;align-self:end;justify-self:end;z-index:3;
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(8px,1vw,14px);width:min(100%,420px)}
  #proof .pf__card{
    background:rgba(255,255,255,.90);border-radius:14px;padding:clamp(12px,1.5vw,20px) clamp(12px,1.6vw,22px);
    box-shadow:0 18px 44px -18px rgba(60,14,0,.5), inset 0 1px 0 rgba(255,255,255,.9);
    animation:pfFloat 7s ease-in-out infinite alternate;
  }
  #proof .pf__card:nth-child(2){animation-duration:8.4s;animation-delay:-1.2s}
  #proof .pf__card:nth-child(3){animation-duration:9.1s;animation-delay:-2.4s}
  #proof .pf__card:nth-child(4){animation-duration:7.8s;animation-delay:-3.1s}
  @keyframes pfFloat{from{transform:translateY(0)}to{transform:translateY(-9px)}}
  #proof .pf__n{display:flex;align-items:baseline;gap:2px;
    font-family:var(--display);font-weight:500;color:#171012;letter-spacing:-.035em;
    font-size:clamp(26px,3.1vw,44px);line-height:1;font-variant-numeric:tabular-nums}
  #proof .pf__n em{font-style:normal;font-size:.46em;font-weight:500;letter-spacing:-.01em}
  #proof .pf__k{margin:7px 0 0;font-size:clamp(11px,.86vw,13px);color:#6b5c55;line-height:1.5}

  /* 라벨 */
  #proof .pf__label{grid-column:1;grid-row:1;align-self:start;margin:0}

  /* 등장 */
  #proof .pf [data-in]{opacity:0;transform:translateY(22px);
    transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
  #proof.is-active .pf [data-in]{opacity:1;transform:none}
  #proof.is-active .pf__intro[data-in]{transition-delay:.10s}
  #proof.is-active .pf__obj[data-in]{transition-delay:.16s}
  #proof.is-active .pf__head[data-in]{transition-delay:.26s}
  #proof.is-active .pf__card:nth-child(1){transition-delay:.42s}
  #proof.is-active .pf__card:nth-child(2){transition-delay:.50s}
  #proof.is-active .pf__card:nth-child(3){transition-delay:.58s}
  #proof.is-active .pf__card:nth-child(4){transition-delay:.66s}

  @media (max-width:900px){
    #proof .pf{grid-template-columns:1fr;grid-template-rows:auto auto 1fr auto}
    #proof .pf__cta{margin-top:16px}
    #proof .pf__intro,#proof .pf__head,#proof .pf__cards,#proof .pf__label{grid-column:1}
    #proof .pf__intro{justify-self:start;grid-row:2;margin-top:14px}
    #proof .pf__obj{position:absolute;right:-26%;top:calc(50% - min(28vh,250px));width:min(56vh,500px);opacity:.85}
    #proof .pf__head{grid-row:4;max-width:none}
    #proof .pf__cards{grid-row:5;justify-self:start;width:100%;margin-top:14px}
    #proof .pf__sub{display:none}
  }
  @media (prefers-reduced-motion:reduce){#proof .pf__card{animation:none}}

/* ===== lightfix.css ===== */
/* =========================================================
   02 STUDIO · 03 WORK · 05 PRICING · 06 PROCESS
   배경 중성화 + 글자 선명도 (A안)
   측정 근거:
     #ff6a2f on #f3f0ea = 2.51:1   (WCAG AA 4.5 미달)
     #ff6a2f on #e4e1da = 2.19:1   (WCAG AA 4.5 미달)
     #B23C0E on #F2F1EF = 5.25:1   OK
     #A83309 on #E6E5E2 = 5.30:1   OK
   ========================================================= */

/* ---- 1) 배경에서 누런기 제거 : hue 45° 베이지 → 중성 종이 ---- */
.sect[data-tone="light"]{
  --bg:#F2F1EF; --bg-2:#E9E8E5; --text:#0E1015; --sub:#4E5058;
  --accent:#B23C0E; --accent-2:#D4611F;
  --line:rgba(14,16,21,.15); --line-2:rgba(14,16,21,.07);
  --card:rgba(255,255,255,.80); --card-hover:#fff; --stroke:rgba(14,16,21,.13);
}
.sect[data-tone="mist"]{
  --bg:#E6E5E2; --bg-2:#F4F2EE; --text:#0E1015; --sub:#4E5058;
  --accent:#A83309; --accent-2:#C9541A;
  --line:rgba(14,16,21,.17); --line-2:rgba(14,16,21,.08);
  --card:rgba(255,255,255,.72); --card-hover:#fff; --stroke:rgba(14,16,21,.14);
}

/* ---- 2) 밝은 면에서는 안티앨리어싱 해제 : 획 두께 회복 ----
   전역 -webkit-font-smoothing:antialiased(style.css 33행)는
   다크 배경엔 유리하지만 밝은 배경 + 어두운 글자에서는 획을 깎는다. */
.sect[data-tone="light"], .sect[data-tone="mist"],
.sect[data-tone="light"] *, .sect[data-tone="mist"] *{
  -webkit-font-smoothing:auto;
  -moz-osx-font-smoothing:auto;
}

/* ---- 3) 큰 글자 무게 보강 ---- */
.sect[data-tone="light"] .h-display,
.sect[data-tone="mist"]  .h-display{font-weight:500}
.sect[data-tone="light"] .statement,
.sect[data-tone="mist"]  .statement{font-weight:600}
.sect[data-tone="light"] .statement em.dim,
.sect[data-tone="mist"]  .statement em.dim{color:#4A4C55}   /* 7.5:1 */

/* ---- 4) 배경 이펙트가 면을 탁하게 만들던 부분 정리 ----
   그레인이 multiply로 .55, 광원 흰빛이 .60이라 밝은 면이 얼룩지고
   글자 주변 대비가 떨어졌다. 질감은 남기고 세기만 낮춘다. */
.sect[data-tone="light"] .bgfx .g-grain,
.sect[data-tone="mist"]  .bgfx .g-grain{opacity:.24}
.sect[data-tone="light"] .bgfx .g-sweep,
.sect[data-tone="mist"]  .bgfx .g-sweep{
  background:radial-gradient(45% 38% at 50% 50%, rgba(255,255,255,.32), transparent 72%);
}

/* ---- 5) 가격 패널이 배경에 묻히던 문제 (면 색 문제라 함께 처리) ---- */
#pricing .price{border:1px solid rgba(14,16,21,.06)}
#pricing .price--hot{box-shadow:0 10px 30px -18px rgba(40,20,8,.45)}

/* ===== work-patch.txt ===== */
/* =========================================================
   03 WORK — 원안(대각선 부채꼴 배치) + 실제 데모 사이트 캡처
   카드는 스크롤에 따라 한 장씩 제자리에 놓인다.
   ========================================================= */
#work .wk__stage{position:absolute;inset:0;z-index:1;
  display:flex;align-items:center;justify-content:center;
  perspective:1500px;perspective-origin:50% 45%}

#work .wk__card{position:absolute;width:clamp(268px,33vw,560px);
  transform:var(--tf);transform-style:preserve-3d;
  transition:transform .72s var(--ease),filter .72s var(--ease);
  cursor:pointer;outline:none;filter:drop-shadow(0 30px 50px rgba(0,0,0,.32))}
/* 좌상단 → 우하단 대각선. 원안의 흐름을 유지하되 라벨이 가리지 않도록 간격을 넓혔다 */
#work .wk__card[data-i="0"]{--tf:translate3d(-79%,-31%,-250px) rotateY(26deg) rotateZ(-4deg) scale(.72);z-index:1}
#work .wk__card[data-i="1"]{--tf:translate3d(-27%,-4%,-90px)   rotateY(12deg) rotateZ(-2deg) scale(.88);z-index:2}
#work .wk__card[data-i="2"]{--tf:translate3d(20%,16%,0px)      rotateY(-6deg) rotateZ(1deg)  scale(1.00);z-index:3}
#work .wk__card[data-i="3"]{--tf:translate3d(64%,31%,-170px)   rotateY(-22deg) rotateZ(3deg) scale(.80);z-index:4}

/* 등장 전 / 후 */
/* 등장은 처음 안대로 — 화면 오른쪽 바깥에서 대각선으로 날아 들어와 제자리에 놓인다 */
#work .wk__in{position:relative;display:block;
  opacity:0;transform:translate3d(190px,86px,0) scale(1.07) rotate(2.2deg);
  transition:opacity .58s var(--ease),transform .86s var(--ease),filter .6s var(--ease)}
#work .wk__card.in .wk__in{opacity:1;transform:none}
#work .wk__card.in:not(.cur) .wk__in{filter:brightness(.84) saturate(.88)}
#work .wk__card:not(.in){pointer-events:none}

/* 올라온 카드를 앞으로 */
#work .wk__card.in:hover,#work .wk__card.in:focus-visible{
  transform:translate3d(0,0,150px) rotateY(0deg) rotateZ(0deg) scale(1.05);
  z-index:9;filter:drop-shadow(0 44px 74px rgba(0,0,0,.46))}
#work .wk__card.in:hover .wk__in,#work .wk__card.in:focus-visible .wk__in{filter:none}

/* 창 */
#work .wk__frame{position:relative;aspect-ratio:16/11;border-radius:8px;overflow:hidden;
  background:#0d0e12;border:1px solid rgba(255,255,255,.12)}
#work .wk__bar{position:absolute;left:0;right:0;top:0;height:9%;display:flex;align-items:center;gap:5px;
  padding:0 62px 0 11px;background:#171a21;border-bottom:1px solid rgba(255,255,255,.07);z-index:2}
#work .wk__bar i{width:4.5px;height:4.5px;border-radius:50%;background:rgba(255,255,255,.22);flex:none}
#work .wk__bar u{flex:1;height:56%;margin-left:7px;border-radius:5px;background:rgba(255,255,255,.07);
  text-decoration:none;display:flex;align-items:center;padding:0 7px;overflow:hidden;
  font-family:var(--mono);font-size:clamp(5.5px,.52vw,8px);letter-spacing:.04em;color:rgba(255,255,255,.42)}
#work .wk__shot{position:absolute;left:0;right:0;top:9%;bottom:0;z-index:1}
#work .wk__shot img{width:100%;height:100%;display:block;object-fit:cover}

/* 원안의 스크림 + 정보 */
#work .wk__label{position:absolute;inset:0;z-index:3;
  display:flex;flex-direction:column;justify-content:flex-end;gap:5px;
  padding:clamp(12px,1.5vw,22px);
  background:linear-gradient(0deg,rgba(6,7,10,.90) 0%,rgba(6,7,10,.40) 40%,transparent 70%)}
#work .wk__kicker{font-family:var(--mono);font-size:clamp(8px,.74vw,10.5px);letter-spacing:.16em;color:rgba(255,255,255,.82)}
#work .wk__type{font-family:var(--display);font-weight:700;font-size:clamp(13px,1.52vw,22px);
  line-height:1.04;letter-spacing:-.02em;color:#fff;white-space:nowrap}
#work .wk__rule{height:1px;width:100%;background:rgba(255,255,255,.36)}
#work .wk__meta{font-family:var(--mono);font-size:clamp(8px,.74vw,10.5px);letter-spacing:.1em;color:rgba(255,255,255,.78)}
#work .wk__badge{position:absolute;top:calc(4.5% - 8px);right:11px;z-index:4;
  font-family:var(--mono);font-size:clamp(7px,.62vw,9px);letter-spacing:.14em;
  border:1px solid rgba(255,255,255,.28);border-radius:20px;padding:2.5px 8px;
  color:rgba(255,255,255,.88);background:rgba(255,255,255,.08)}

/* 진행 표시 — 좌상단에 얇게 */
#work .wk__steps{position:absolute;left:var(--pad);top:calc(var(--pad) + 62px);z-index:6;
  display:flex;align-items:center;gap:13px}
#work .wk__dots{display:flex;gap:6px}
#work .wk__dots button{width:22px;height:3px;border:0;border-radius:2px;padding:0;cursor:pointer;
  background:var(--line);transition:background .4s var(--ease),width .4s var(--ease)}
#work .wk__dots button.on{background:var(--accent);width:34px}
#work .wk__count{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--sub)}
#work .wk__hint{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--sub);opacity:.7}

@media (max-width:1100px){
  #work .wk__card{width:min(78vw,430px)}
  #work .wk__card[data-i="0"]{--tf:translate3d(-34%,-46%,-220px) rotateY(16deg) rotateZ(-3deg) scale(.76)}
  #work .wk__card[data-i="1"]{--tf:translate3d(-12%,-16%,-90px)  rotateY(8deg)  rotateZ(-1deg) scale(.9)}
  #work .wk__card[data-i="2"]{--tf:translate3d(10%,14%,0)        rotateY(-6deg) rotateZ(1deg)  scale(1)}
  #work .wk__card[data-i="3"]{--tf:translate3d(30%,42%,-150px)   rotateY(-14deg) rotateZ(2deg) scale(.84)}
  #work .wk__hint{display:none}
}
@media (prefers-reduced-motion:reduce){
  #work .wk__in{transition:opacity .3s linear}
}

/* ===== studio-patch.txt ===== */
/* =========================================================
     02 STUDIO — 주장 하나 + 근거 셋 구조로 정리
     원문은 그대로 두고 배치와 위계만 바꾼다.
     ========================================================= */
  #studio .st2{display:flex;flex-direction:column;gap:clamp(12px,2vh,28px)}

  /* 주장 — 반복을 걷어낸 한 문장 */
  #studio .st2__claim{margin:0;font-family:var(--kr);font-weight:600;
    font-size:clamp(22px,min(4.4vw,5.4vh),68px);line-height:1.16;letter-spacing:-.035em;
    color:var(--text)}
  #studio .st2__claim em{font-style:normal;color:var(--accent)}

  /* 근거 셋 — 같은 좌측 기준선, 같은 형식 */
  #studio .st2__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(18px,2.6vw,56px)}
  #studio .st2__item{border-top:1px solid var(--line);padding-top:clamp(11px,1.6vh,18px)}
  #studio .st2__no{display:block;font-family:var(--mono);font-size:clamp(9.5px,.76vw,11px);
    letter-spacing:.18em;color:var(--accent);margin-bottom:clamp(6px,.9vh,10px)}
  #studio .st2__t{margin:0 0 clamp(6px,1vh,11px);font-size:clamp(14px,min(1.7vw,2.2vh),20px);
    font-weight:600;letter-spacing:-.02em;color:var(--text);line-height:1.3}
  #studio .st2__d{margin:0;font-size:clamp(12px,min(1.35vw,1.85vh),15.5px);
    color:var(--sub);line-height:1.68;max-width:52ch}
  #studio .st2__d strong{color:var(--text);font-weight:600}

  /* 세 번째 근거는 아래 스택이 증거다 — 같은 형식의 머리를 붙인다 */
  #studio .st2__third{border-top:1px solid var(--line);padding-top:clamp(11px,1.6vh,18px)}
  #studio .st2__third .st2__t{margin-bottom:clamp(9px,1.3vh,15px)}
  #studio .stack{margin:0;row-gap:clamp(10px,1.6vh,20px)}
  #studio .stack__row{gap:clamp(4px,.5vw,7px)}

  @media (max-width:860px){
    #studio .st2__grid{grid-template-columns:1fr;gap:clamp(14px,2.4vh,22px)}
    #studio .st2__claim{max-width:none}
  }

/* ===== process-patch.txt ===== */
/* =========================================================
     06 PROCESS — 굴곡 곡선을 걷어내고 흐르는 다이어그램으로
     상담·견적 → 배포·인계, 6단계가 색이 차오르며 순서대로 켜진다.
     ========================================================= */

  /* 기존 배경 곡선 제거 */
  #process .bgfx[data-fx="process"] .r-path{display:none}

  #process .pc{position:relative;width:100%;
    margin-top:clamp(20px,5.2vh,64px);
    padding:clamp(88px,14.6vh,152px) 0 clamp(58px,9.2vh,98px)}

  /* 축 */
  #process .pc__line{position:relative;height:2px;border-radius:2px}
  #process .pc__line::before{content:"";position:absolute;inset:0;border-radius:2px;opacity:.22;
    background:linear-gradient(90deg,#355F76,#26707C 20%,#3A7256 40%,#86682B 62%,#A85622 82%,#B23C0E)}
  #process .pc__fill{position:absolute;left:0;top:-1px;bottom:-1px;width:0;border-radius:2px;
    filter:saturate(1.15);
    background:linear-gradient(90deg,#355F76,#26707C 20%,#3A7256 40%,#86682B 62%,#A85622 82%,#B23C0E);
    transition:width .78s cubic-bezier(.16,1,.3,1)}
  #process .pc__head{position:absolute;top:50%;width:9px;height:9px;border-radius:50%;
    transform:translate(-50%,-50%);background:#B23C0E;left:0;
    box-shadow:0 0 0 5px rgba(178,60,14,.16);opacity:0;
    transition:left .78s cubic-bezier(.16,1,.3,1),opacity .4s ease}
  #process .pc.is-on .pc__head{opacity:1}

  /* 마디 */
  #process .pc__n{position:absolute;left:var(--x);top:0;transform:translate(-50%,-50%);
    width:0;height:0}
  #process .pc__dot{position:relative;display:flex;align-items:center;justify-content:center;
    width:clamp(34px,3.4vw,44px);aspect-ratio:1;margin:0;padding:0;cursor:pointer;
    transform:translate(-50%,0);left:50%;margin-top:calc(clamp(34px,3.4vw,44px) / -2);
    border-radius:50%;border:1.5px solid color-mix(in srgb, var(--c) 42%, transparent);
    background:#FBFAF9;
    font-family:var(--mono);font-size:clamp(10px,.85vw,12px);letter-spacing:.06em;
    color:color-mix(in srgb, var(--c) 82%, #6b6b72);
    transition:background .5s var(--ease),border-color .5s var(--ease),
               color .5s var(--ease),box-shadow .5s var(--ease),transform .5s var(--ease)}
  #process .pc__n.on .pc__dot{background:var(--c);border-color:var(--c);color:#fff;
    box-shadow:0 0 0 6px color-mix(in srgb, var(--c) 16%, transparent),
               0 10px 22px -10px color-mix(in srgb, var(--c) 70%, transparent);
    transform:translate(-50%,0) scale(1.1)}
  #process .pc__n.done .pc__dot{border-color:var(--c);color:var(--c);
    background:color-mix(in srgb, var(--c) 10%, #FBFAF9)}

  /* 마디 ↔ 카드 연결선 */
  #process .pc__tick{position:absolute;left:50%;width:1px;
    background:color-mix(in srgb, var(--c) 34%, transparent);transform:translateX(-50%);
    transition:background .5s var(--ease),height .5s var(--ease)}
  #process .pc__n.on .pc__tick,#process .pc__n.done .pc__tick{background:var(--c)}

  /* 카드 */
  #process .pc__card{position:absolute;left:50%;transform:translateX(-50%);
    width:clamp(148px,15.4vw,214px);text-align:left;
    opacity:.74;transition:opacity .5s var(--ease),transform .55s var(--ease)}
  #process .pc__n.on .pc__card,#process .pc__n.done .pc__card{opacity:1}
  #process .pc__n.on .pc__card{transform:translateX(-50%) translateY(var(--lift,0))}
  #process .pc__k{display:block;font-family:var(--mono);font-size:clamp(9px,.72vw,10.5px);
    letter-spacing:.18em;color:color-mix(in srgb, var(--c) 62%, #6b6b72);
    margin-bottom:6px;transition:color .5s var(--ease)}
  #process .pc__n.on .pc__k,#process .pc__n.done .pc__k{color:var(--c)}
  #process .pc__t{margin:0 0 7px;font-size:clamp(13.5px,min(1.5vw,2vh),19px);font-weight:600;
    letter-spacing:-.02em;line-height:1.25;color:var(--text)}
  #process .pc__d{margin:0;font-size:clamp(11px,min(1.1vw,1.5vh),13.5px);
    color:var(--sub);line-height:1.6}

  /* 홀수는 위, 짝수는 아래 */
  #process .pc__n:nth-child(odd)  .pc__card{bottom:calc(clamp(34px,3.4vw,44px) / 2 + clamp(30px,4.4vh,48px))}
  #process .pc__n:nth-child(odd)  .pc__tick{bottom:calc(clamp(34px,3.4vw,44px) / 2);height:clamp(28px,4.2vh,46px)}
  #process .pc__n:nth-child(odd)  .pc__card{--lift:-4px}
  #process .pc__n:nth-child(even) .pc__card{top:calc(clamp(34px,3.4vw,44px) / 2 + clamp(30px,4.4vh,48px))}
  #process .pc__n:nth-child(even) .pc__tick{top:calc(clamp(34px,3.4vw,44px) / 2);height:clamp(28px,4.2vh,46px)}
  #process .pc__n:nth-child(even) .pc__card{--lift:4px}


  @media (max-width:1000px){
    #process .pc{padding:0;margin-top:clamp(12px,2.4vh,26px)}
    #process .pc__line{position:absolute;left:17px;top:6px;bottom:6px;width:2px;height:auto}
    #process .pc__line::before{background:linear-gradient(180deg,#355F76,#26707C 20%,#3A7256 40%,#86682B 62%,#A85622 82%,#B23C0E)}
    #process .pc__fill{width:2px;height:0;top:0;bottom:auto;
      background:linear-gradient(180deg,#355F76,#26707C 20%,#3A7256 40%,#86682B 62%,#A85622 82%,#B23C0E);
      transition:height .78s cubic-bezier(.16,1,.3,1)}
    #process .pc__head{display:none}
    #process .pc__nodes{display:flex;flex-direction:column;gap:clamp(12px,2.2vh,22px)}
    #process .pc__n{position:relative;left:auto;top:auto;transform:none;width:auto;height:auto;
      display:flex;align-items:flex-start;gap:14px}
    #process .pc__dot{position:static;transform:none;left:auto;margin:0;flex:none;
      width:34px;height:34px}
    #process .pc__n.on .pc__dot{transform:scale(1.06)}
    #process .pc__tick{display:none}
    #process .pc__card{position:static;transform:none;width:auto;flex:1}
    #process .pc__n.on .pc__card{transform:none}
  }
  @media (prefers-reduced-motion:reduce){
    #process .pc__n{opacity:1}
    #process .pc__card{opacity:1}
  }

/* ===== pricing-patch.txt ===== */
/* =========================================================
     05 PRICING — 박스는 그대로, 색 사다리와 모션을 얹는다
     티어가 올라갈수록 브랜드 오렌지가 깊어진다.
     ========================================================= */

  /* 축 — 06 PROCESS와 같은 언어 */
  #pricing .pz__axis{position:relative;height:2px;border-radius:2px;
    margin:clamp(10px,2.2vh,26px) 0 clamp(24px,3.6vh,40px)}
  #pricing .pz__axis::before{content:"";position:absolute;inset:0;border-radius:2px;opacity:.24;
    background:linear-gradient(90deg,#B23C0E,#A8410F 34%,#8E3A12 68%,#6E2409)}
  #pricing .pz__fill{position:absolute;left:0;top:-1px;bottom:-1px;width:0;border-radius:2px;
    background:linear-gradient(90deg,#B23C0E,#A8410F 34%,#8E3A12 68%,#6E2409);
    transition:width .78s cubic-bezier(.16,1,.3,1)}
  #pricing .pz__n{position:absolute;left:var(--x);top:50%;transform:translate(-50%,-50%);
    width:clamp(22px,2vw,26px);aspect-ratio:1;border-radius:50%;cursor:pointer;padding:0;
    border:1.5px solid color-mix(in srgb, var(--c) 40%, transparent);background:#FBFAF9;
    font-family:var(--mono);font-size:clamp(8px,.66vw,9.5px);color:var(--sub);
    display:flex;align-items:center;justify-content:center;
    transition:background .5s var(--ease),border-color .5s var(--ease),
               color .5s var(--ease),box-shadow .5s var(--ease),transform .5s var(--ease)}
  #pricing .pz__n.done{border-color:var(--c);color:var(--c);
    background:color-mix(in srgb, var(--c) 12%, #FBFAF9)}
  #pricing .pz__n.on{background:var(--c);border-color:var(--c);color:#fff;
    transform:translate(-50%,-50%) scale(1.18);
    box-shadow:0 0 0 6px color-mix(in srgb, var(--c) 16%, transparent)}

  /* 박스 — 기존 형태 유지, 색과 들림만 추가 */
  #pricing .price{overflow:hidden;
    transition:background .45s var(--ease),transform .55s var(--ease),box-shadow .55s var(--ease)}
  #pricing .price--hot::before{display:none}          /* 기존 2px 띠는 통합 띠로 대체 */
  #pricing .pz__bar{position:absolute;left:0;top:0;height:3px;width:0;z-index:2;
    background:var(--c);transition:width .7s cubic-bezier(.16,1,.3,1),opacity .5s var(--ease);opacity:.42}
  #pricing .price.done .pz__bar{width:100%;opacity:.5}
  #pricing .price.on   .pz__bar{width:100%;opacity:1}
  #pricing .price.on{transform:translateY(-6px);
    box-shadow:0 22px 44px -22px color-mix(in srgb, var(--c) 62%, transparent);
    background:var(--card-hover,#fff);z-index:3}
  #pricing .price.on .price__num em{color:var(--c);transition:color .5s var(--ease)}
  #pricing .price.on .price__name{color:var(--c);transition:color .5s var(--ease)}

  /* 규모 막대 — 페이지 수를 그대로 눈금으로 */
  #pricing .pz__meter{margin-top:auto;padding-top:clamp(10px,1.6vh,16px);
    display:flex;align-items:center;gap:9px}
  #pricing .pz__track{flex:1;height:4px;border-radius:3px;background:rgba(14,16,21,.09);overflow:hidden}
  #pricing .pz__val{display:block;height:100%;width:0;border-radius:3px;background:var(--c);
    transition:width .8s cubic-bezier(.16,1,.3,1)}
  #pricing .price.done .pz__val,#pricing .price.on .pz__val{width:var(--w)}
  #pricing .pz__cap{font-family:var(--mono);font-size:clamp(8px,.66vw,9.5px);letter-spacing:.12em;
    color:var(--sub);white-space:nowrap;transition:color .5s var(--ease)}
  #pricing .price.on .pz__cap{color:var(--c)}

  @media (max-width:900px){
    #pricing .pz__axis{display:none}
    #pricing .price.on{transform:none}
  }
  @media (prefers-reduced-motion:reduce){
    #pricing .price.on{transform:none}
  }

/* ===== marquee-patch.txt ===== */
/* =========================================================
     02 STUDIO 하단 띠 — 오픈마켓 로고를 제작·AI 도구로 교체
     24×24 정사각 자산이라 마크가 작게 읽히는 것만 한 단계 키운다.
     ========================================================= */

/* ===== marquee-color.txt ===== */
/* =========================================================
     하단 띠 — 진짜 브랜드 로고 24개, 한 소스(theSVG Color)로 통일
     로고마다 가로세로 비가 달라서(0.67 ~ 1.60) 높이를 맞추면 폭이 제각각이 된다.
     그래서 모두 같은 정사각 칸에 넣고 그 안에서 비율대로 맞춘다.
     ========================================================= */
  #studio .mq__logo{
    --box: clamp(30px, min(3.9vw, 5.2vh), 46px);
    width:var(--box);height:var(--box);
    display:inline-flex;align-items:center;justify-content:center;flex:none;
    transition:transform .3s var(--ease)}
  #studio .mq__logo svg{
    width:auto;height:auto;max-width:100%;max-height:100%;
    opacity:.95;transition:opacity .3s var(--ease)}
  #studio .mq__logo:hover{transform:scale(1.1)}
  #studio .mq__logo:hover svg{opacity:1}

  /* 흰 글리프 로고는 원래 어두운 배경 위에 쓰는 자산이라 칩을 깐다 */
  #studio .mq__logo[data-chip]{
    background:#17191F;border-radius:calc(var(--box) * .24);
    padding:calc(var(--box) * .17);box-sizing:border-box}

  #studio .mq__logo img{width:auto;height:auto;max-width:100%;max-height:100%;
    opacity:.95;display:block;transition:opacity .3s var(--ease)}
  #studio .mq__logo:hover img{opacity:1}
  /* 가로형 워드마크 로고(Cafe24, imweb)는 정사각에 넣으면 글자가 뭉개진다.
     높이는 같게 두고 폭만 넓힌다. */
  #studio .mq__logo[data-wide]{width:auto;max-width:calc(var(--box) * 2.6);padding:0 2px}

  /* 워드마크도 같은 높이 안에서 */
  #studio .mq__word{white-space:nowrap;font-size:clamp(15px,min(2.15vw,2.9vh),27px);
    display:inline-flex;align-items:center}

/* ===== fs-patch.txt ===== */
/* 전체화면 토글 — 섹션 여백(72px) 바깥 구석에 두어 어떤 페이지와도 겹치지 않는다 */
  #fsBtn{position:fixed;right:12px;bottom:12px;z-index:900;
    display:inline-flex;align-items:center;gap:7px;cursor:pointer;
    font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
    padding:7px 12px;border-radius:20px;border:1px solid rgba(140,140,150,.34);
    background:rgba(128,128,132,.14);color:inherit;
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    opacity:.42;transition:opacity .35s var(--ease),border-color .35s var(--ease)}
  #fsBtn:hover{opacity:1;border-color:var(--accent)}
  #fsBtn svg{width:11px;height:11px;flex:none}
  body.tone-light #fsBtn{color:#0e1015}
  body:not(.tone-light) #fsBtn{color:#ece8e1}
  @media (max-width:900px){#fsBtn{right:8px;bottom:8px;font-size:9px;padding:6px 10px}}

/* ===== tour-patch.txt ===== */
/* 우측 하단 컨트롤 묶음 — 자동재생 + 전체화면 */
  #hud{position:fixed;right:12px;bottom:12px;z-index:900;display:flex;align-items:center;gap:8px}
  #hud > *{position:static !important;right:auto !important;bottom:auto !important}
  #tourBtn{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
    font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
    padding:7px 12px;border-radius:20px;border:1px solid rgba(140,140,150,.34);
    background:rgba(128,128,132,.14);color:inherit;
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    opacity:.42;transition:opacity .35s var(--ease),border-color .35s var(--ease)}
  #tourBtn:hover{opacity:1;border-color:var(--accent)}
  #tourBtn.on{opacity:1;border-color:var(--accent);color:var(--accent)}
  #tourBtn svg{width:10px;height:10px;flex:none}
  body.tone-light #hud{color:#0e1015}
  body:not(.tone-light) #hud{color:#ece8e1}
  /* 진행 막대 — 지금 몇 번째 페이지를 보고 있는지 */
  #tourBar{position:fixed;left:0;top:0;height:2px;width:0;z-index:901;
    background:var(--accent);opacity:0;transition:width .4s linear,opacity .4s ease}
  #tourBar.on{opacity:.85}
  @media (max-width:900px){#hud{right:8px;bottom:8px}#tourBtn{font-size:9px;padding:6px 10px}}

/* ===== fit-patch.txt ===== */
/* =========================================================
     높이가 지정되지 않은 iframe(기본 150px)에 들어가도 찌부러지지 않게.
     이 사이트는 position:fixed로 화면을 채우는 구조라, 담기는 틀이 짧으면
     전부 그 높이로 눌린다. 문서 자체에 최소 높이를 주고,
     fixed를 absolute로 바꿔 뷰포트가 아니라 문서를 기준으로 잡게 한다.
     ========================================================= */
  html, body{height:100%;min-height:640px}
  body{position:relative;overflow:hidden}

  main,
  .preloader,
  .nav,
  .menu,
  .talk,
  .rail,
  .counter,
  #hero3d,
  #hud,
  #tourBar{position:absolute !important}

  main{inset:0;min-height:640px}
  .sect{min-height:640px}

  /* 화면이 아주 낮을 때는 세로 여백을 줄여 내용이 살아남게 */
  @media (max-height:700px){
    .sect{padding-top:calc(var(--pad) + 46px);padding-bottom:calc(var(--pad) * .8)}
  }