/* ══════════════════════════════════════════════════════════════
   고객관점 새 판 — 공통 키트 (2026-10-10)
   톤 = PPT 「성장의 3원칙」 · 「각 잡고 덤비면 할 수 있다」
   판 3색: 크림 / 따뜻한 검정 / 주황.  토큰을 새로 만들지 말 것.
   Copyright (c) 2026 고객관점. All rights reserved.
   ══════════════════════════════════════════════════════════════ */
:root{
  /* 판 */
  --cream:#FAF2E6; --cream2:#FDF9F3; --sand:#EFE3D1; --sand2:#E4D4BE;
  --ink:#15110D;   --ink2:#211913;   --ink3:#2E241C;
  --or:#F4661E;    --or2:#F59A5E;    --or3:#FBD9C0;  --orT:#AE4318;  /* orT = 크림 위 작은 주황 글씨 */
  /* 글자 — 크림 위 */
  --t1:#1C1611; --t2:#5B4D42; --t3:#7A6A5B;
  /* 글자 — 검정 위 */
  --l1:#F6ECDF; --l2:#BCAB9A; --l3:#978878;
  /* 그림 — 사람 기호 */
  --pk:#6B5546; --pk2:#D2C5B5;
  --line:rgba(28,22,17,.12); --lineL:rgba(246,236,223,.11);
  --sh:0 16px 36px -18px rgba(80,44,16,.30),0 2px 6px -2px rgba(80,44,16,.08);
  --shD:0 22px 44px -20px rgba(21,17,13,.55);
  --r:20px; --r2:14px; --r3:10px;
  --W:1240px; --Wr:760px; --gut:clamp(20px,9vw,140px); /* 2026-10-11 사장님: 요즘 랜딩처럼 가운데로 모으고 양옆 여백 넓게 */
  --nav:64px;
  --sans:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo',system-ui,sans-serif;
  --serif:'Noto Serif KR','Nanum Myeongjo','AppleMyungjo',serif;
  --e:cubic-bezier(.22,1,.36,1); --spring:cubic-bezier(.34,1.5,.64,1);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
@media (max-width:620px){:root{--gut:22px}}
[hidden]{display:none!important}
html{scrollbar-gutter:stable;-webkit-text-size-adjust:100%;background:var(--ink)}
body{font-family:var(--sans);background:var(--ink);color:var(--l1);line-height:1.6;
  -webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:break-word;padding-top:var(--nav)}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
svg{display:block}

/* ── 판(구역) ── */
.sec{position:relative;padding:clamp(76px,10vw,132px) 0;overflow:hidden}
.sec.tight{padding:clamp(56px,7vw,88px) 0}
.cream{background:var(--cream);color:var(--t1)}
.ink{background:var(--ink);color:var(--l1)}
.orange{background:var(--or);color:var(--ink)}
.sand{background:var(--sand);color:var(--t1)}
/* 검정 판 위 주황 빛(PPT 표지) */
.ink.glow::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 70% at var(--gx,70%) var(--gy,40%),rgba(244,102,30,.20),transparent 62%)}
/* 아래에서 주황이 밝아오는 판(PPT 「해도 뜨기 전이 가장 어둡다」) */
.ink.dawn::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;pointer-events:none;
  background:linear-gradient(to bottom,transparent,rgba(244,102,30,.16) 55%,rgba(244,102,30,.42))}
.sec>.wrap{position:relative;z-index:1}
.wrap{max-width:var(--W);margin:0 auto;padding:0 var(--gut)}
.read{max-width:var(--Wr)}
.center{text-align:center}.center .read{margin-left:auto;margin-right:auto}

/* ── 글자 ── */
.kicker{display:inline-block;font:800 13px/1.2 var(--sans);letter-spacing:.24em;color:var(--orT);margin-bottom:18px}
.ink .kicker{color:var(--or)} .orange .kicker{color:var(--ink)}
.kicker.bar::before{content:"";display:block;width:46px;height:4px;border-radius:2px;background:var(--or);margin-bottom:22px}
.orange .kicker.bar::before{background:var(--ink)}
.center .kicker.bar::before{margin-left:auto;margin-right:auto}
.t-hero{font:900 clamp(40px,6.6vw,86px)/1.12 var(--sans);letter-spacing:-.04em}
.t-big{font:900 clamp(32px,4.9vw,62px)/1.18 var(--sans);letter-spacing:-.035em}
.t-sec{font:900 clamp(30px,4.3vw,54px)/1.25 var(--serif);letter-spacing:-.025em}
.t-sub{font:800 clamp(21px,2.3vw,28px)/1.38 var(--sans);letter-spacing:-.025em}
.t-card{font:800 clamp(18px,1.7vw,21px)/1.42 var(--sans);letter-spacing:-.02em}
.t-num{font-family:var(--serif);font-weight:900;letter-spacing:-.03em;line-height:.95}
.lead{font-size:clamp(16px,1.45vw,19px);line-height:1.8;color:var(--t2);margin-top:22px}
.ink .lead{color:var(--l2)} .orange .lead{color:rgba(21,17,13,.78)}
.small{font-size:13.5px;line-height:1.6;color:var(--t3)} .ink .small{color:var(--l3)}
.o{color:var(--or);font-style:normal}
.cream .o.dk,.sand .o.dk{color:var(--orT)}
b,strong{font-weight:800}
.ink b{color:var(--l1)}
.hl{background:linear-gradient(transparent 62%,rgba(244,102,30,.28) 62%);padding:0 .08em}

/* ── 단추 ── */
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.center .btns{justify-content:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 28px;border-radius:999px;
  font:800 16px/1 var(--sans);letter-spacing:-.01em;transition:transform .25s var(--e),box-shadow .25s var(--e),background .25s}
.btn:hover{transform:translateY(-2px)} .btn:active{transform:scale(.97)}
.btn.or{background:var(--or);color:var(--ink);box-shadow:0 10px 26px -12px rgba(244,102,30,.8)}
.btn.dark{background:var(--ink);color:var(--cream)}
.btn.light{background:var(--cream);color:var(--ink)}
.btn.line{box-shadow:inset 0 0 0 1.5px currentColor}
.btn .ar{transition:transform .25s var(--e)} .btn:hover .ar{transform:translateX(4px)}
/* PPT 아래쪽 검정 알약(한 줄 요약) */
.pill{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:999px;background:var(--ink);color:var(--cream);
  font:800 15px/1.2 var(--sans);letter-spacing:-.01em}
.ink .pill{background:var(--or);color:var(--ink)}
.pill .o{color:var(--or)} .ink .pill .o{color:var(--ink);font-weight:900;text-decoration:underline 2px;text-underline-offset:3px}
.tag{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;font:800 13px/1 var(--sans);
  background:var(--or3);color:var(--orT)}
.ink .tag{background:rgba(244,102,30,.16);color:var(--or2)}
.tag .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.tag.off{background:var(--sand);color:var(--t2)} .ink .tag.off{background:rgba(246,236,223,.08);color:var(--l2)}

/* ── 카드 ── */
.card{position:relative;background:var(--cream2);border-radius:var(--r);box-shadow:var(--sh);padding:clamp(22px,2.4vw,32px);color:var(--t1)}
.card.dark{background:var(--ink);color:var(--l1);box-shadow:var(--shD)}
.card.sandc{background:var(--sand);box-shadow:none}
.ink .card{background:var(--ink2);box-shadow:none;border:1px solid var(--lineL);color:var(--l1)}
.ink .card.hot{background:var(--or);color:var(--ink);border-color:transparent}
.card .num{font:900 14px/1 var(--serif);color:var(--orT);letter-spacing:.04em;margin-bottom:14px}
.ink .card .num{color:var(--or)}
.card .num.big{font-size:clamp(40px,4vw,56px);margin-bottom:10px}
.card p{color:var(--t2);font-size:15px;line-height:1.7;margin-top:8px}
.ink .card p,.card.dark p{color:var(--l2)}
.card.hot p{color:rgba(21,17,13,.75)}
.grid{display:grid;gap:clamp(14px,1.6vw,22px)}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.g3,.g4{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* 구역 꼬리표(PPT 쪽 번호 줄) */
.secfoot{display:flex;justify-content:space-between;align-items:center;margin-top:clamp(48px,6vw,80px);
  font:700 13px/1 var(--sans);letter-spacing:.06em;color:var(--t3)}
.ink .secfoot{color:var(--l3)} .orange .secfoot{color:rgba(21,17,13,.6)}

/* ── 사진 ── */
.photo{border-radius:var(--r);overflow:hidden;background:var(--ink2);box-shadow:var(--sh)}
.photo img{width:100%;height:100%;object-fit:cover}
.ink .photo{box-shadow:var(--shD)}
.cap{margin-top:12px;font-size:13px;color:var(--t3);text-align:center} .ink .cap{color:var(--l3)}
/* 폰 틀 — 캡처·DM */
.phone{position:relative;border-radius:30px;padding:9px;background:#0E0B09;box-shadow:0 30px 60px -28px rgba(21,17,13,.65),inset 0 0 0 1.5px rgba(255,255,255,.06)}
.phone img{border-radius:22px;width:100%}
.vchip{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border-radius:999px;background:var(--or);color:var(--ink);
  font:900 14px/1 var(--sans);letter-spacing:-.02em;box-shadow:0 8px 18px -8px rgba(244,102,30,.9)}
.vchip svg{width:12px;height:12px}

/* ── 위 메뉴 ── */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--nav);background:rgba(21,17,13,.9);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--lineL)}
.nav .wrap{height:100%;display:flex;align-items:center;gap:28px}
.logo{display:flex;align-items:center;gap:10px;min-height:44px;font:900 19px/1 var(--sans);letter-spacing:-.04em;color:var(--l1);flex-shrink:0}
.logo i{width:30px;height:30px;border-radius:9px;background:var(--or);color:var(--ink);display:grid;place-items:center;
  font:900 15px/1 var(--sans);font-style:normal;letter-spacing:0}
.menu{display:flex;align-items:center;gap:4px;margin-left:auto}
.menu a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:10px;font:700 15px/1 var(--sans);color:var(--l2);transition:color .2s,background .2s}
.menu a:hover{color:var(--l1);background:rgba(246,236,223,.06)}
.menu a[aria-current="page"]{color:var(--l1)}
.menu a[aria-current="page"]::after{content:"";position:absolute;left:50%;bottom:2px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--or)}
.nav .btn{min-height:44px;padding:0 18px;font-size:14.5px}
@media (max-width:900px){
  :root{--nav:114px}
  .nav .wrap{flex-wrap:wrap;gap:0;align-content:flex-start}
  .nav .wrap>.logo{height:58px}
  .nav .wrap>.btn{margin-left:auto;margin-top:9px}
  .menu{order:3;width:calc(100% + 2*var(--gut));margin:0 calc(-1*var(--gut));padding:0 var(--gut) 6px;overflow-x:auto;scrollbar-width:none;gap:2px}
  .menu::-webkit-scrollbar{display:none}
  .menu a{flex-shrink:0;padding:10px 13px;font-size:15px}
}

/* ── 아래 꼬리 ── */
.foot{background:#0E0B08;color:var(--l3);padding:56px 0 calc(48px + env(safe-area-inset-bottom));font-size:13.5px}
.foot .wrap{display:flex;flex-wrap:wrap;gap:28px 48px;justify-content:space-between}
.foot .logo{margin-bottom:12px}
.foot nav{display:flex;flex-wrap:wrap;align-items:flex-start;gap:0 22px}
.foot nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--l2);font-weight:700}
.foot nav a:hover{color:var(--l1)}

/* ── 질문 ── */
.faq{display:grid;gap:12px}
.faq details{background:var(--cream2);border-radius:var(--r2);box-shadow:var(--sh)}
.faq summary{list-style:none;cursor:pointer;display:flex;gap:14px;align-items:center;padding:20px 22px;font:800 17px/1.45 var(--sans);letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";font:900 18px/1 var(--serif);color:var(--orT)}
.faq summary::after{content:"";margin-left:auto;width:12px;height:12px;border-right:2.5px solid var(--t3);border-bottom:2.5px solid var(--t3);transform:rotate(45deg) translate(-3px,-3px);transition:transform .3s var(--e);flex-shrink:0}
.faq details[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.faq .a{padding:0 22px 22px 54px;color:var(--t2);font-size:15.5px;line-height:1.75}

/* ── 흐르는 레일 ── */
.rail{overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent)}
.rail-track{display:flex;gap:12px;width:max-content;animation:rail var(--dur,80s) linear infinite;animation-play-state:paused}
.rail.run .rail-track{animation-play-state:running}
.rail:hover .rail-track{animation-play-state:paused}
.rail.rev .rail-track{animation-direction:reverse}
@keyframes rail{to{transform:translateX(-50%)}}
.rcard{position:relative;flex-shrink:0;width:124px;aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:var(--ink2)}
.rcard img{width:100%;height:100%;object-fit:cover}
.rcard::after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(to top,rgba(14,11,8,.92),transparent)}
.rcard b{position:absolute;left:9px;bottom:9px;z-index:1;font:900 14.5px/1 var(--sans);letter-spacing:-.02em;color:#fff}
.rcard b::before{content:"▶ ";font-size:10px;color:var(--or)}
@media (max-width:620px){.rcard{width:104px}}

/* ── 등장 모션 (기본 세트) ── */
html.js .rv{opacity:0;transform:translateY(26px);filter:blur(6px);
  transition:opacity .8s var(--e) var(--d,0s),transform .9s var(--e) var(--d,0s),filter .8s var(--e) var(--d,0s)}
html.js .rv.in{opacity:1;transform:none;filter:none}
html.js .rv.pop{transform:scale(.86)} html.js .rv.pop.in{transform:none;transition-timing-function:var(--spring)}
/* 그림 장면은 .scene.play 가 붙을 때 움직인다 — 장면별 규칙은 각 페이지 <style> 에 */
[data-scene].reset,[data-scene].reset *{transition:none!important;animation:none!important}

/* 사람 기호(PPT 03) — fill 은 currentColor */
.pp{width:30px;height:48px;color:var(--pk)}
.cream .pp,.sand .pp{color:var(--pk2)}
.pp.or{color:var(--or)!important}

@media (prefers-reduced-motion:reduce){
  html.js .rv{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .rail-track{animation:none!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* 주황 판·주황 카드 안의 굵은 글씨는 검정 그대로 (2026-10-10 홈에서 발견) */
.ink .card.hot b,.orange b{color:inherit}

/* ── 사람 무리 장면 (공통 부품, 2026-10-11) ──
   <div class="cw scene" data-scene data-crowd="10" data-run="7" data-say="하고 싶다…" data-hot="진짜 하는 중"></div>
   말풍선이 차례로 뜨고 → 한 사람만 주황으로 켜져 팔다리를 흔들며 깃발까지 달려 나간다(한 번, 끝에서 멈춤) */
.cw{position:relative;height:clamp(170px,17vw,210px);margin-top:clamp(36px,4vw,56px);--w:clamp(26px,3.2vw,42px)}
.cw-ground{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--lineL)}
.cream .cw-ground,.sand .cw-ground{background:var(--line)}
.cw-row{position:absolute;left:0;right:12%;bottom:2px;display:flex;align-items:flex-end}
.cw-p{position:relative;flex:1;display:flex;justify-content:center}
.cw-p svg{width:var(--w);height:auto;color:#5B4D42}
.cream .cw-p svg,.sand .cw-p svg{color:#CDBEAB}
.cw-b{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%);white-space:nowrap;padding:7px 11px;border-radius:12px;
  background:rgba(246,236,223,.08);border:1px solid var(--lineL);font:800 12.5px/1 var(--sans);color:var(--l2);
  transition:opacity .35s ease calc(.15s + var(--k)*.09s),transform .5s var(--spring) calc(.15s + var(--k)*.09s)}
.cw-p:nth-child(even) .cw-b{bottom:calc(100% + 46px)}
.cream .cw-b,.sand .cw-b{background:var(--cream2);border-color:var(--line);color:var(--t2);box-shadow:var(--sh)}
html.js .cw-p .cw-b{opacity:0;transform:translate(-50%,10px) scale(.8)}
html .cw.play .cw-p .cw-b{opacity:1;transform:translateX(-50%)}
.cw-run{position:absolute;bottom:2px;left:var(--from);width:calc(var(--w)*1.9);transform:translateX(-50%);color:var(--or);z-index:2;
  transition:left 2.5s cubic-bezier(.45,0,.25,1) 1.7s}
html .cw.play .cw-run{left:calc(100% - var(--w)*2.4)}
.cw-run::before{content:"";position:absolute;left:50%;top:50%;width:170%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(244,102,30,.28),transparent 68%);transition:opacity .5s ease 1.2s}
html.js .cw-run::before{opacity:0} html .cw.play .cw-run::before{opacity:1}
.cw-run svg{position:relative;width:100%;height:auto;overflow:visible}
.cw-run .hot{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);white-space:nowrap;padding:9px 14px;border-radius:999px;
  background:var(--or);color:var(--ink);font:900 13.5px/1 var(--sans);transition:opacity .35s ease 1.25s,transform .5s var(--spring) 1.25s}
html.js .cw-run .hot{opacity:0;transform:translate(-50%,8px) scale(.8)}
html .cw.play .cw-run .hot{opacity:1;transform:translateX(-50%)}
/* 켜지기 전에는 회색 사람 */
.cw-run .bodyc{transition:fill .3s ease 1.2s,stroke .3s ease 1.2s}
html.js .cw-run .bodyc{fill:#5B4D42;stroke:#5B4D42}
html.js .cream .cw-run .bodyc,html.js .sand .cw-run .bodyc{fill:#CDBEAB;stroke:#CDBEAB}
html .cw.play .cw-run .bodyc{fill:var(--or);stroke:var(--or)}
.cw-run .bodyc.ln{fill:none}
html .cw.play .cw-run .bodyc.ln{fill:none}
/* 달리기 팔다리 — 7번 흔들고 멈춤 */
.cw-run .la,.cw-run .lb{transform-box:view-box;transform-origin:36px 56px}
.cw-run .aa,.cw-run .ab{transform-box:view-box;transform-origin:42px 31px}
html .cw.play .cw-run .la{animation:cwSw .36s ease-in-out 1.7s 7 alternate both}
html .cw.play .cw-run .lb{animation:cwSw .36s ease-in-out 1.7s 7 alternate-reverse both}
html .cw.play .cw-run .aa{animation:cwSw .36s ease-in-out 1.7s 7 alternate-reverse both}
html .cw.play .cw-run .ab{animation:cwSw .36s ease-in-out 1.7s 7 alternate both}
html .cw.play .cw-run .bob{animation:cwBob .18s ease-in-out 1.7s 14 alternate both}
@keyframes cwSw{from{transform:rotate(-26deg)}to{transform:rotate(26deg)}}
@keyframes cwBob{from{transform:translateY(0)}to{transform:translateY(-3px)}}
.cw-trail{position:absolute;bottom:9px;left:var(--from);height:3px;width:0;background:repeating-linear-gradient(90deg,var(--or) 0 8px,transparent 8px 14px);
  transition:width 2.5s cubic-bezier(.45,0,.25,1) 1.7s;opacity:.7}
html .cw.play .cw-trail{width:calc(100% - var(--from) - var(--w)*2.4)}
.cw-flag{position:absolute;right:0;bottom:2px;width:calc(var(--w)*.9);transform-origin:0 100%;transition:transform .5s var(--spring) 3.9s}
html.js .cw-flag{transform:scale(0)}
html .cw.play .cw-flag{transform:none}
.cw-cap{margin-top:22px;font:800 clamp(16px,1.6vw,19px)/1.5 var(--sans);letter-spacing:-.02em}
.cw-cap .o{font-weight:900}
@media (max-width:620px){
  .cw{--w:22px;height:132px}
  .cw-row{right:20%}
  .cw-b{font-size:13px;padding:6px 8px}
  .cw-p .cw-b{display:none}
  .cw-p:nth-child(1) .cw-b,.cw-p:nth-child(4) .cw-b,.cw-p:nth-child(7) .cw-b{display:block}
  .cw-p:nth-child(4) .cw-b{bottom:calc(100% + 44px)}
  .cw-run .hot{font-size:13px;padding:7px 10px}
}
.cw-run .bodyc{fill:var(--or);stroke:var(--or)}
.cw-run .ln{fill:none!important}

/* 구간 번호 표(배열 짜기용 · 배포 전 body 의 data-secno 를 빼면 사라짐) */
.secno{position:absolute;left:14px;top:14px;z-index:6;padding:9px 13px;border-radius:10px;background:#2E9E62;color:#fff;
  font:900 15px/1 var(--sans);letter-spacing:-.01em;box-shadow:0 8px 20px -8px rgba(0,0,0,.55);pointer-events:none}

/* 로고 아이콘 = 무대 화면의 「고객 / 관점」 (2026-10-11 사장님 지정) — 글자 «고»는 숨기고 그림으로 */
.logo i{width:40px;height:40px;border-radius:11px;background:#15110D url(/img/logo-mark-96.png) center/cover no-repeat;font-size:0;color:transparent;
  box-shadow:0 0 0 1px rgba(232,118,58,.35),0 6px 16px -8px rgba(244,102,30,.6)}
.foot .logo i{width:44px;height:44px}