/*
    ── 라이트 팔레트 ─────────────────────────────────────────────────────────
    캡처된 제품 화면이 흰 바탕이다. 껍데기를 밝게 맞춰야 캡처가 '떠 보이지' 않고
    종이 위에 앉은 것처럼 읽힌다. 회색은 순회색 대신 화면의 초록 쪽으로 아주 살짝
    기울여 고른 값이다 — 순회색은 '아무 생각 없이 고른 색'으로 보인다.
  */
  :root{
    --bg:#f4f6f9; --panel:#ffffff; --panel2:#f8fafc;
    --line:#dfe5ee; --line2:#eef2f7;
    --txt:#16202f; --txt2:#3b4a61; --dim:#61708a; --faint:#8391a8;
    --accent:#0d9273; --accent-ink:#04543f; --accent-bg:#e8f7f1;
    --amber:#b45309; --amber-bg:#fdf5e7; --amber-line:#f0d9a8;
    --blue:#2563eb; --violet:#7c5cf0;
    --shadow:0 1px 2px rgba(16,32,55,.05), 0 10px 30px rgba(16,32,55,.07);
    --shadow-lg:0 2px 6px rgba(16,32,55,.06), 0 24px 60px rgba(16,32,55,.12);
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--txt);
    font-family:'Pretendard','Malgun Gothic',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    -webkit-font-smoothing:antialiased}
  .wrap{max-width:1760px;margin:0 auto;padding:18px 20px 44px}

  header{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:10px}
  .brand{font-size:19px;font-weight:800;letter-spacing:-.3px}
  .brand span{color:var(--accent)}
  .sub{color:var(--dim);font-size:13px;margin-top:2px}
  .badge{padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;
    background:var(--accent-bg);color:var(--accent-ink);border:1px solid #bfe6d8}
  .badge.warn{background:var(--amber-bg);color:var(--amber);border-color:var(--amber-line)}

  /* 진행 띠 + 진행률 */
  .stages{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 6px}
  .stg{padding:6px 11px;border-radius:8px;font-size:12px;font-weight:600;
    background:var(--panel);border:1px solid var(--line);color:var(--dim);white-space:nowrap;
    transition:background .3s,border-color .3s,color .3s}
  .stg.on{background:var(--accent);border-color:var(--accent);color:#fff}
  .stg.done{color:var(--accent-ink);border-color:#bfe6d8;background:var(--accent-bg)}
  .stages.alldone .stg{color:var(--accent-ink);border-color:#bfe6d8;background:var(--accent-bg)}
  .bar{height:3px;background:var(--line);border-radius:999px;overflow:hidden;margin:0 0 13px}
  .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#38bdf8,var(--accent));
    border-radius:999px;transition:width .5s cubic-bezier(.22,.61,.36,1)}

  .main{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
  /* 노트북(1280) 에서도 설명이 함께 보여야 한다 — 시연은 대개 노트북에서 한다. */
  @media (max-width:1080px){ .main{grid-template-columns:minmax(0,1fr)} }

  /* ── 무대: 웹 화면 + 폰이 나란히. 주인공 쪽이 커진다 ─────────────────── */
  .stagearea{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:14px;align-items:start;
    transition:grid-template-columns .55s cubic-bezier(.22,.61,.36,1)}
  .stagearea.appfocus{grid-template-columns:minmax(0,1fr) 400px}
  @media (max-width:820px){ .stagearea,.stagearea.appfocus{grid-template-columns:minmax(0,1fr)} }

  .screen{position:relative;background:#fff;border:1px solid var(--line);border-radius:12px;
    overflow:hidden;box-shadow:var(--shadow-lg);transition:opacity .45s,filter .45s}
  /*
    긴 화면(ESG 리포트 등)은 여기서 잘리고, 대신 안쪽이 천천히 스크롤되며 끝까지 보인다.
    한계를 안 두면 그림이 화면을 넘겨 시연 중에 사람이 마우스로 스크롤해야 한다.
  */
  .frame{position:relative;overflow:hidden;max-height:clamp(420px,72vh,1000px)}
  .scroller{position:relative;transform:translateY(0)}
  .screen img{display:block;width:100%;height:auto}
  .ghost{position:absolute;left:0;top:0;width:100%;height:auto;opacity:0;
    transition:opacity .45s ease-out;z-index:2;pointer-events:none}
  .layer{position:absolute;inset:0;pointer-events:none;z-index:3}

  /* 아래에 더 있다는 표시 — 잘린 게 아니라 이어진다는 신호 */
  .more{position:absolute;left:0;right:0;bottom:0;height:56px;z-index:4;pointer-events:none;
    background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.92));
    display:flex;align-items:flex-end;justify-content:center;padding-bottom:7px;
    font-size:11px;font-weight:700;color:var(--dim);opacity:0;transition:opacity .3s}
  .more.show{opacity:1}

  /* 주인공이 아닌 쪽은 물러난다 — 어디를 봐야 하는지 헷갈리지 않게 */
  .dim{opacity:.45;filter:saturate(.5) contrast(.96)}

  /* 표면 라벨은 화면 **밖** 위쪽에 둔다. 안에 두면 실제 화면 내용을 가린다. */
  .surfhead{display:flex;align-items:center;gap:8px;margin:0 0 7px;height:18px}
  .surfhead .tag{font-size:11px;font-weight:800;letter-spacing:.2px;padding:2px 9px;border-radius:999px;
    background:var(--panel);border:1px solid var(--line);color:var(--dim);transition:all .3s}
  .surfhead .tag.hot{color:#fff;background:var(--accent);border-color:var(--accent)}
  .surfhead .lead{font-size:11.5px;color:var(--faint)}

  /* 가상 시나리오 표기 — 캡처만 잘라 써도 남도록 화면 안 모서리에 */
  .mark{position:absolute;right:9px;bottom:8px;z-index:5;font-size:10px;font-weight:700;
    padding:3px 8px;border-radius:6px;background:rgba(255,255,255,.88);color:var(--dim);
    border:1px solid var(--line);letter-spacing:.2px}
  /* 폰은 좁아서 같은 자리에 두면 하단 탭바를 덮는다 — 위쪽 모서리로 옮기고 더 작게. */
  .phone .mark{right:6px;bottom:auto;top:6px;font-size:8.5px;padding:2px 6px}

  /* 폰 — 화면만 두면 웹 축소판처럼 보인다. 테두리를 줘서 '폰' 임을 알린다. */
  .phone{position:relative;border-radius:26px;padding:9px 8px 12px;background:#e9edf4;
    border:1px solid var(--line);box-shadow:var(--shadow-lg);transition:opacity .45s,filter .45s}
  .phone .notch{width:78px;height:5px;border-radius:3px;background:#c6cedb;margin:0 auto 8px}
  .phone .inner{position:relative;border-radius:16px;overflow:hidden;background:#fff;
    max-height:clamp(360px,64vh,900px)}
  .phone img{display:block;width:100%;height:auto}
  .phone .none{padding:30px 16px;text-align:center;color:var(--dim);font-size:12px;line-height:1.75}
  /* 폰이 주인공일 때 한 번 반짝 — 폰에서 무언가 일어났다는 신호 */
  .phone.hit{animation:hit 1.1s ease-out}
  @keyframes hit{0%{box-shadow:var(--shadow-lg),0 0 0 0 rgba(124,92,240,.45)}
    100%{box-shadow:var(--shadow-lg),0 0 0 20px rgba(124,92,240,0)}}

  /* 마우스 커서 */
  .cursor{position:absolute;width:24px;height:24px;z-index:6;opacity:0;
    transform-origin:2px 2px;transition:opacity .3s}
  .cursor.show{opacity:1}
  .cursor.moving{transition:left var(--mv,.62s) cubic-bezier(.33,.02,.2,1),
    top var(--mv,.62s) cubic-bezier(.33,.02,.2,1), opacity .3s, transform .14s}
  .cursor.press{transform:scale(.82)}
  .ring{position:absolute;width:36px;height:36px;border-radius:50%;border:2.5px solid var(--accent);
    z-index:5;opacity:0;transform:translate(-50%,-50%) scale(.35)}
  /* ── 풀버전 문서 뷰어 ─────────────────────────────────────────────────
     PDF 를 <iframe>·<embed> 로 끼울 수 없다 — 사이트 CSP 가 frame-src·object-src 를
     'none' 으로 막는다. img-src 에는 data: 가 열려 있어 **페이지를 이미지로 보여 준다.** */
  .docs{margin:16px 0 4px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center}
  .docsHint{width:100%;text-align:center;font-size:13px;color:var(--muted);margin-bottom:2px}
  .doc-btn{padding:10px 16px;border:1px solid var(--line);border-radius:10px;background:#fff;
    color:var(--ink);font-size:14px;font-weight:700;cursor:pointer}
  .doc-btn:hover{border-color:var(--accent);color:var(--accent)}
  #docmodal{position:fixed;inset:0;z-index:50;display:none}
  #docmodal.show{display:block}
  .doc-dim{position:absolute;inset:0;background:rgba(15,23,42,.62)}
  .doc-panel{position:absolute;left:50%;top:3vh;transform:translateX(-50%);
    width:min(880px,94vw);height:94vh;background:#fff;border-radius:14px;overflow:hidden;
    display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(15,23,42,.35)}
  .doc-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);flex:0 0 auto}
  .doc-head b{font-size:15px}
  .doc-head span{font-size:12px;color:var(--muted);flex:1 1 auto}
  .doc-head a{font-size:13px;font-weight:700;color:var(--accent);text-decoration:none;
    border:1px solid var(--line);border-radius:8px;padding:6px 10px;white-space:nowrap;flex:0 0 auto}
  .doc-head button{border:0;background:transparent;font-size:18px;line-height:1;cursor:pointer;color:var(--muted);padding:4px 6px}
  .doc-body{flex:1 1 auto;overflow:auto;background:#eef1f5;padding:14px;text-align:center}
  .doc-body img{max-width:100%;height:auto;border-radius:6px;box-shadow:0 6px 20px rgba(15,23,42,.16)}

  .ring.pop{animation:pop .6s ease-out}
  @keyframes pop{0%{opacity:.95;transform:translate(-50%,-50%) scale(.35)}
    100%{opacity:0;transform:translate(-50%,-50%) scale(1.55)}}
  /* 가리키기 — 누르는 것이 아니라 "여기를 보라". 원(클릭)과 달리 대상 크기의 사각이다. */
  .ring.look{animation:look 1.5s cubic-bezier(.2,.8,.3,1) forwards;
    border-width:2px;background:rgba(37,99,235,.07)}
  @keyframes look{0%{opacity:0;transform:translate(-50%,-50%) scale(1.18)}
    18%{opacity:1;transform:translate(-50%,-50%) scale(1)}
    72%{opacity:1;transform:translate(-50%,-50%) scale(1)}
    100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}

  /* 입력칸 — 차례가 온 칸만 파랗게 */
  .field{position:absolute;z-index:4;display:flex;align-items:center;overflow:hidden;
    padding:0 10px;color:#0f172a;background:#fff;border:1.5px solid #cbd5e1;border-radius:8px;
    transition:border-color .2s,box-shadow .2s}
  .field.on{border-color:var(--blue);border-width:2px;box-shadow:0 0 0 3px rgba(37,99,235,.16)}
  .field .caret{display:inline-block;width:1.6px;background:#0f172a;margin-left:1px;opacity:0}
  .field.on .caret{opacity:1;animation:blink .95s step-end infinite}
  @keyframes blink{50%{opacity:0}}

  /* 무엇을 눌렀는지 자막 — 클릭이 결과 없이 끝나지 않게 */
  .toast{position:absolute;left:50%;bottom:16px;transform:translate(-50%,10px);z-index:7;
    padding:8px 15px;border-radius:999px;font-size:13px;font-weight:700;
    background:var(--accent);border:1px solid var(--accent);color:#fff;
    box-shadow:0 6px 20px rgba(13,146,115,.3);
    opacity:0;transition:opacity .3s,transform .3s;white-space:nowrap;max-width:90%;overflow:hidden;
    text-overflow:ellipsis}
  .toast.show{opacity:1;transform:translate(-50%,0)}

  /* 기관 전환 — 무대 전체를 덮는다(한쪽만 덮으면 전환처럼 안 보인다) */
  .handoff{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
    background:rgba(244,246,249,.95);opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s;
    z-index:40;pointer-events:none;backdrop-filter:blur(2px)}
  .handoff.show{opacity:1;visibility:visible}
  .handoff .arrow{font-size:13px;color:var(--dim);margin-bottom:12px;letter-spacing:1px;text-align:center}
  .handoff .to{font-size:38px;font-weight:800;text-align:center;letter-spacing:-.5px}
  .handoff .who{margin-top:10px;color:var(--dim);font-size:14.5px;text-align:center}

  /* ── 표지 / 마무리 ──────────────────────────────────────────────────── */
  .board{display:none;background:var(--panel);border:1px solid var(--line);border-radius:14px;
    padding:34px 34px 30px;box-shadow:var(--shadow)}
  .board.on{display:block}
  .board h2{margin:0 0 6px;font-size:27px;font-weight:800;letter-spacing:-.5px;line-height:1.3}
  .board .lede{color:var(--txt2);font-size:14.5px;line-height:1.85;margin:0 0 20px;max-width:70ch}
  /* 가상 표기 — 이름 바로 옆에 붙되 본문을 덮지 않게 작고 흐리게. 눈에는 띄어야 한다. */
  .fic{font-size:11px;color:var(--warn,#f59e0b);vertical-align:super;margin-left:2px;letter-spacing:.02em;white-space:nowrap}
  .flow{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 20px}
  .flow div{flex:1 1 150px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:12px 13px}
  .flow b{display:block;font-size:12px;color:var(--accent-ink);margin-bottom:5px;letter-spacing:.3px}
  .flow span{font-size:12.5px;color:var(--txt2);line-height:1.65}
  .cast{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 18px}
  .cast div{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 13px;
    display:flex;align-items:center;gap:9px;font-size:12.5px}
  .cast i{width:9px;height:9px;border-radius:50%;flex:none;font-style:normal}
  .cast b{font-weight:700}
  .cast span{color:var(--dim)}
  .rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:0 0 18px}
  .rows div{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:13px 15px}
  .rows b{display:block;font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.5px}
  .rows span{font-size:12px;color:var(--dim)}
  .board .warnbox{background:var(--amber-bg);border:1px solid var(--amber-line);
    border-radius:10px;padding:13px 15px;font-size:12.5px;line-height:1.8;color:#7c4a10}
  .board .warnbox b{color:#5c3608}
  .startbtn{margin-top:20px}

  /* ── 우측 패널 ──────────────────────────────────────────────────────── */
  .side{position:sticky;top:18px;display:flex;flex-direction:column;gap:11px}
  .card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 15px;
    box-shadow:var(--shadow)}
  .actor{display:flex;align-items:center;gap:10px}
  .dot{width:10px;height:10px;border-radius:50%;flex:none}
  .actor .nm{font-weight:800;font-size:14px}
  .actor .wh{color:var(--dim);font-size:11.5px;margin-top:2px}
  .from{margin:11px 0 0;font-size:12px;line-height:1.7;color:var(--dim);
    padding-left:10px;border-left:2px solid var(--line)}
  .from b{color:var(--txt2);font-weight:700}
  .ttl{font-size:16px;font-weight:800;margin:11px 0 8px;line-height:1.4;letter-spacing:-.2px}
  .watch{background:var(--accent-bg);border:1px solid #bfe6d8;border-radius:9px;
    padding:9px 11px;font-size:12.5px;line-height:1.7;color:#0a5a44;margin:0 0 10px}
  .watch b{color:#04402f}
  .watch em{font-style:normal;color:var(--accent);font-weight:800;margin-right:5px}
  .cap{font-size:12.8px;line-height:1.85;color:var(--txt2)}
  .cap b{color:var(--txt)}
  .terms{margin-top:11px;padding-top:10px;border-top:1px dashed var(--line)}
  .terms dt{font-size:11.5px;font-weight:800;color:var(--accent-ink);margin-top:7px}
  .terms dt:first-child{margin-top:0}
  .terms dd{margin:2px 0 0;font-size:11.5px;line-height:1.7;color:var(--dim)}

  .ctrl{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  button{font-family:inherit;font-size:13px;font-weight:700;padding:9px 14px;border-radius:9px;
    border:1px solid var(--line);background:var(--panel);color:var(--txt);cursor:pointer;
    transition:border-color .2s,background .2s}
  button:hover:not(:disabled){border-color:#c2ccdb;background:var(--panel2)}
  button.pri{background:var(--accent);border-color:var(--accent);color:#fff}
  button.pri:hover:not(:disabled){background:#0b7d63;border-color:#0b7d63}
  button:disabled{opacity:.4;cursor:default}
  button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
  .pos{color:var(--dim);font-size:12px;font-variant-numeric:tabular-nums;margin-left:auto}
  .keys{margin-top:9px;font-size:11px;color:var(--faint);line-height:1.8}
  .keys kbd{display:inline-block;padding:1px 6px;border-radius:4px;background:var(--panel2);
    border:1px solid var(--line);font-family:inherit;font-size:10.5px;color:var(--txt2)}
  .note{font-size:11.5px;color:var(--dim);line-height:1.75}
  .note b{color:var(--txt2)}
  .kv{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:5px 0;
    border-bottom:1px dashed var(--line)}
  .kv:last-of-type{border-bottom:0}
  /* 값(990,720원 등)은 낱말 가운데서 줄을 바꾸지 않는다 — 긴 이름 옆에서 칸이 모자라면 이름 쪽이 줄을 바꾼다
     (굴림 등 넓은 글꼴에서 '원'만 아랫줄로 떨어졌다). nowrap 이 아니라 keep-all 이라 글자를 크게 키운 폰에서는
     띄어쓰기 자리에서 줄을 바꿔 카드 밖으로 넘치지 않는다. */
  .kv b{font-variant-numeric:tabular-nums;word-break:keep-all}
  /* 긴 이름·식은 덩어리째 다음 줄로(<wbr> 자리) — 괄호 안이나 낱말 가운데가 갈라지지 않게.
     덩어리가 칸보다 넓을 때만(글자를 크게 키운 폰) 그 안의 띄어쓰기에서 나눈다. */
  .nw{display:inline-block;max-width:100%;word-break:keep-all}
  footer{margin-top:20px;color:var(--faint);font-size:11.5px;line-height:1.85}
  footer b{color:var(--dim)}

  /* ── 상시 링크(홈 · ImpactOn 회원가입) — 머리말 오른쪽. 좁은 화면에서는 다음 줄로 내려가 오른쪽에 붙는다 ── */
  .exits{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
  .exits a{display:inline-flex;align-items:center;gap:5px;min-height:38px;padding:0 15px;border-radius:9px;
    font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap;
    background:var(--panel);border:1px solid #c2ccdb;color:var(--txt);transition:border-color .2s,background .2s}
  .exits a:hover{border-color:var(--accent);color:var(--accent-ink)}
  /* ImpactOn 은 홈 상단 메뉴와 같은 잉크색(흰 글자 대비 16:1) — 어디서 보든 같은 서비스는 같은 색 */
  .exits a.pri{background:#0E1F2E;border-color:#0E1F2E;color:#fff}
  .exits a.pri:hover{background:#21364B;border-color:#21364B;color:#fff}
  .exits a:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
  @media (max-width:767.98px){ .exits a{min-height:44px;font-size:14px} }
  /* 화면 읽기 프로그램용 덧말(눈에는 안 보임) — ImpactOn 회원가입이 다른 사이트로 간다는 안내 */
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

  @media (prefers-reduced-motion:reduce){
    *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  }