/* ── 말꼬리 디자인 토큰 (실제 앱에서 추출) ── */
  /* ── 말꼬리 변수 브릿지: 말꼬리 테마(라이트/다크·시스템/명시)를 그대로 따름 ── */
  :root{
    /* ── 말꼬리 라이트 토큰 (styles.css와 동일) ── */
    --bg:#eeeeef;--surface:#ffffff;--raise:#fafafb;--field:#ffffff;
    --ink:#16161a;--ink-2:#56565e;--ink-3:#676771;--ink-4:#6a6a74; /* ink-3 AA 상향(2026-07-18 H-1, 본게임과 동일값) */
    --hair:#e7e7ea;--hair-2:#d9d9de;
    --primary:#16161a;--primary-ink:#ffffff;--primary-hover:#2a2a30;
    --focus:rgba(22,22,26,.13);
    --good:#12744b;--danger:#bd3831;--danger-soft:#fbeae9; /* good·danger AA 상향(H-1) */
    --sh-card:0 1px 2px rgba(17,17,19,.04),0 8px 30px rgba(17,17,19,.05);
    --sh-pop:0 16px 50px rgba(17,17,19,.2);
    --r1:12px;--r2:16px;--r3:20px;--pill:999px;
    --ease:cubic-bezier(.22,.61,.36,1);--ease-out:cubic-bezier(.16,1,.3,1);
    /* ── 연구소 변수 (말꼬리 이름 매핑 + 전용) 라이트 ── */
    --ink2:var(--ink-2);--ink3:var(--ink-3);--ink4:var(--ink-4);--hair2:var(--hair-2);
    --p-bg:var(--primary);--p-ink:var(--primary-ink);
    --soft:#f2f2f4;--good-bg:#e8f5ee;--danger-bg:var(--danger-soft);--warn:#8f5e10;--warn-bg:#fbf1dc; /* warn AA 상향(H-1): 3.14→4.8 */
    --warm-bg:#fdf6e3;--warm-br:#f0e4bf;--warm-ink:#8a6d1c;
    --sh:var(--sh-card);
  }
  /* 다크 토큰 (말꼬리 styles.css와 동일 값) */
  :root[data-theme='dark']{
    color-scheme:dark;
    --bg:#0a0a0b;--surface:#161618;--raise:#1c1c1f;--field:#1c1c1f;
    --ink:#f3f3f5;--ink-2:#aeaeb6;--ink-3:#84848c;--ink-4:#7e7e88;
    --hair:#262629;--hair-2:#34343a;
    --primary:#f3f3f5;--primary-ink:#161618;--primary-hover:#e2e2e6;
    --focus:rgba(243,243,245,.14);
    --good:#34c98a;--danger:#f06a63;--danger-soft:#2e1d1c;
    --sh-card:0 1px 2px rgba(0,0,0,.4),0 8px 30px rgba(0,0,0,.4);
    --sh-pop:0 16px 50px rgba(0,0,0,.6);
    --soft:#222226;--good-bg:#122a20;--danger-bg:#2e1d1c;--warn:#e0a93a;--warn-bg:#332810;
    --warm-bg:#221d10;--warm-br:#3a3220;--warm-ink:#d9b968;
  }
  /* 시스템 다크 (테마 미지정 시에만) — 말꼬리의 :root:not([data-theme]) 대응 */
  @media (prefers-color-scheme:dark){
    :root:not([data-theme]){
      color-scheme:dark;
      --bg:#0a0a0b;--surface:#161618;--raise:#1c1c1f;--field:#1c1c1f;
      --ink:#f3f3f5;--ink-2:#aeaeb6;--ink-3:#84848c;--ink-4:#7e7e88;
      --hair:#262629;--hair-2:#34343a;
      --primary:#f3f3f5;--primary-ink:#161618;--primary-hover:#e2e2e6;
      --focus:rgba(243,243,245,.14);
      --good:#34c98a;--danger:#f06a63;--danger-soft:#2e1d1c;
      --sh-card:0 1px 2px rgba(0,0,0,.4),0 8px 30px rgba(0,0,0,.4);
      --sh-pop:0 16px 50px rgba(0,0,0,.6);
      --soft:#222226;--good-bg:#122a20;--danger-bg:#2e1d1c;--warn:#e0a93a;--warn-bg:#332810;
      --warm-bg:#221d10;--warm-br:#3a3220;--warm-ink:#d9b968;
    }
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--bg);color:var(--ink);
    font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
    -webkit-font-smoothing:antialiased;transition:background .3s ease,color .3s ease;letter-spacing:-.01em}

  /* ── 상단 바 (셸 공통) ── */
  .top{display:flex;align-items:center;gap:4px;padding:14px 20px;background:var(--surface);
    border-bottom:1px solid var(--hair);transition:background .3s,border-color .3s;position:sticky;top:0;z-index:10}
  .brand{font-size:16px;font-weight:700;letter-spacing:-.03em;margin-right:auto;display:flex;align-items:baseline;gap:8px;cursor:pointer}
  .brand small{font-size:12px;font-weight:500;color:var(--ink3)}
  .ico{width:36px;height:36px;border-radius:var(--r1);display:flex;align-items:center;justify-content:center;
    text-decoration:none;
    color:var(--ink2);cursor:pointer;border:none;background:transparent;
    transition:background .18s,color .18s,transform .12s var(--ease)}
  .ico:hover{background:var(--soft);color:var(--ink)}
  .ico:active{transform:scale(.92)}
  .ico.active{background:var(--p-bg);color:var(--p-ink)}
  .ico svg{width:19px;height:19px}

  /* ── 스테이지 (라우터가 채움) ── */
  /* 화면 크기에 따라 유연하게: 모바일은 꽉, FHD 이상은 넓게, 초대형은 상한 */
  .stage{width:min(92vw, clamp(560px, 62vw, 1080px));margin:0 auto;padding:26px 20px 60px;position:relative;min-height:70vh}
  /* QHD 이상에서는 상한을 더 높여 좌우 여백이 과하지 않게 */
  @media (min-width:1800px){ .stage{width:min(90vw, 1360px)} }

  /* ── 런치패드 ── */
  .pad-head{display:flex;align-items:baseline;gap:10px;margin-bottom:18px}
  .pad-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  .pad-card{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r2);padding:18px 16px;
    cursor:pointer;position:relative;opacity:0;transform:translateY(10px);
    transition:transform .2s var(--ease),box-shadow .2s,border-color .2s,background .3s,opacity .3s}
  .pad-card.in{opacity:1;transform:none}
  .pad-card:hover{transform:translateY(-3px);box-shadow:var(--sh);border-color:var(--hair2)}
  .pad-card:active{transform:translateY(-1px) scale(.99)}
  .pad-card.disabled{cursor:default}
  .pad-card.disabled:hover{transform:none;box-shadow:none;border-color:var(--hair)}
  .pad-ico{width:40px;height:40px;margin-bottom:14px;border-radius:var(--r1);display:flex;align-items:center;
    justify-content:center;transition:transform .22s cubic-bezier(.34,1.4,.5,1),background .3s}
  .pad-card:hover:not(.disabled) .pad-ico{transform:scale(1.08) rotate(-3deg)}
  .pad-ico.dark{background:var(--p-bg);color:var(--p-ink)}
  .pad-ico.soft{background:var(--soft);color:var(--ink2)}
  .pad-ico svg{width:21px;height:21px}
  .pad-t{font-size:15px;font-weight:700;color:var(--ink);margin:0;letter-spacing:-.02em}
  .pad-d{font-size:12.5px;color:var(--ink3);margin:4px 0 0;line-height:1.45}
  .pad-soon{position:absolute;top:14px;right:14px;font-size:10.5px;font-weight:600;color:var(--ink4);
    padding:3px 8px;border-radius:999px;background:var(--soft)}
  .pad-arrow{position:absolute;top:16px;right:16px;color:var(--hair2);opacity:0;transform:translateX(-4px);
    transition:opacity .2s,transform .2s}
  .pad-arrow svg{width:16px;height:16px}
  .pad-card:hover:not(.disabled) .pad-arrow{opacity:1;transform:none}
  .pad-status{display:flex;align-items:center;gap:8px;margin-top:16px;padding:11px 15px;background:var(--surface);
    border:1px solid var(--hair);border-radius:999px;transition:background .3s,border-color .3s}
  .pad-dot{width:7px;height:7px;border-radius:50%;background:var(--good);flex-shrink:0}
  .pad-dot.loading{background:var(--ink4);animation:pulse 1.2s ease-in-out infinite}
  @keyframes pulse{50%{opacity:.35}}
  /* 보조 도구 스트립 (모아보기·개념) — 3개 주 도구와 분리 */
  .pad-more{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
  .pad-more-item{flex:1 1 220px;display:flex;align-items:center;gap:10px;text-align:left;
    padding:11px 14px;border:1px solid var(--hair);border-radius:var(--r2);background:var(--surface);
    cursor:pointer;font-family:inherit;transition:border-color .15s,background .3s,transform .12s var(--ease)}
  .pad-more-item:hover{border-color:var(--hair2);background:var(--raise)}
  .pad-more-item:active{transform:translateY(-1px) scale(.99)}
  .pad-more-ico{display:flex;color:var(--ink3);flex-shrink:0}
  .pad-more-ico svg{width:18px;height:18px}
  .pad-more-t{font-size:13.5px;font-weight:700;color:var(--ink)}
  .pad-more-d{font-size:12px;color:var(--ink3);margin-left:auto;text-align:right}
  /* 인라인 규칙 바 (issue 8) — 런치패드에서 바로 규칙 변경 */
  .pad-rules{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:16px;
    padding:12px 15px;background:var(--surface);border:1px solid var(--hair);border-radius:var(--r2);
    transition:opacity .2s,background .3s,border-color .3s}
  .pad-rules.busy{opacity:.55;pointer-events:none}
  .pad-rule-grp{display:flex;align-items:center;gap:8px;min-width:0}
  .pad-rule-lbl{font-size:11.5px;font-weight:600;color:var(--ink3);white-space:nowrap}
  .pad-rule-seg{display:inline-flex;background:var(--soft);border-radius:999px;padding:2px}
  .pad-rule-seg button{border:none;background:transparent;color:var(--ink2);cursor:pointer;
    font-family:inherit;font-size:12.5px;font-weight:600;padding:4px 11px;border-radius:999px;
    transition:background .15s,color .15s}
  .pad-rule-seg button.on{background:var(--p-bg);color:var(--p-ink)}
  .pad-rule-seg button:not(.on):hover{color:var(--ink)}
  .pad-rule-tog{border:1px solid var(--hair2);background:transparent;color:var(--ink3);cursor:pointer;
    font-family:inherit;font-size:12.5px;font-weight:600;padding:5px 12px;border-radius:999px;
    transition:background .15s,color .15s,border-color .15s}
  .pad-rule-tog.on{background:var(--p-bg);color:var(--p-ink);border-color:var(--p-bg)}
  .pad-rule-tog:not(.on):hover{border-color:var(--ink3);color:var(--ink)}

  /* ── 화면 전환 ── */
  .view{position:absolute;inset:0;padding:26px 20px 60px;opacity:0;transform:translateX(18px) scale(.994);
    transition:opacity .28s var(--ease-out),transform .34s var(--ease-out);pointer-events:none}
  .view.show{opacity:1;transform:none;pointer-events:auto}
  .view-home{position:relative;inset:auto;padding:0;transform:translateY(-6px) scale(.985)}
  .view-home.show{transform:none}
  .view-home.behind{opacity:0;transform:translateY(-4px) scale(.99);pointer-events:none;position:absolute;inset:0;padding:0 20px}
  .back{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink2);background:transparent;
    border:none;cursor:pointer;padding:0;margin-bottom:16px;font-family:inherit;transition:color .15s}
  .back:hover{color:var(--ink)}
  .back svg{width:15px;height:15px}

  /* ── 섹션 진입 연출 (issue 12): 도구를 열면 본문 콘텐츠가 살짝 떠오르며 순차 등장 ── */
  @keyframes labReveal{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
  .view.show .tool-body>*{animation:labReveal .42s var(--ease-out) both}
  .view.show .tool-body>*:nth-child(1){animation-delay:.06s}
  .view.show .tool-body>*:nth-child(2){animation-delay:.11s}
  .view.show .tool-body>*:nth-child(3){animation-delay:.16s}
  .view.show .tool-body>*:nth-child(4){animation-delay:.21s}
  .view.show .tool-body>*:nth-child(5){animation-delay:.26s}
  .view.show .tool-body>*:nth-child(n+6){animation-delay:.3s}
  /* 비동기로 로드되는 결과 컨테이너도 동일하게 부드럽게 등장
     (자체 .show 트랜지션이 있는 .dict-result/.set-result는 제외 — 이중 애니 방지) */
  .dict-losewhy,.fp-found,.fp-plan{
    animation:labReveal .38s var(--ease-out) both}
  /* 판정 그룹이 여러 개면 살짝 스태거 */
  .dict-sec{animation:labReveal .34s var(--ease-out) both}
  .dict-sec:nth-child(2){animation-delay:.05s}
  .dict-sec:nth-child(3){animation-delay:.1s}
  .dict-sec:nth-child(n+4){animation-delay:.14s}

  /* ── 공통 컴포넌트 (도구들이 사용) ── */
  .spinner{width:18px;height:18px;border:2px solid var(--hair2);border-top-color:var(--ink3);border-radius:50%;
    display:inline-block;animation:spin .7s linear infinite;vertical-align:-3px}
  @keyframes spin{to{transform:rotate(360deg)}}
  .placeholder{text-align:center;padding:70px 0;color:var(--ink4)}
  .placeholder .ph-ico{width:52px;height:52px;border-radius:var(--r2);background:var(--soft);color:var(--ink3);
    display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
  .placeholder .ph-ico svg{width:24px;height:24px}
  .placeholder p{margin:0;font-size:14px;color:var(--ink3)}
  .placeholder small{font-size:12.5px;color:var(--ink4)}

  /* ── 화면 크기별 반응형 (로비처럼 유연하게) ── */
  /* 태블릿~좁은 데스크톱: 여백·카드 살짝 확대 */
  @media (min-width:700px){
    .stage{padding:34px 28px 70px}
    .pad-grid{gap:16px}
    .pad-card{padding:22px 20px}
    .pad-ico{width:44px;height:44px;margin-bottom:16px}
    .pad-ico svg{width:23px;height:23px}
    .pad-t{font-size:16px}
    .pad-d{font-size:13px}
  }
  /* FHD급: 런치패드 넉넉하게, 카드 크게 */
  @media (min-width:1200px){
    .stage{padding:44px 36px 80px}
    .pad-head{margin-bottom:24px}
    .pad-grid{gap:20px}
    .pad-card{padding:28px 24px;border-radius:var(--r3)}
    .pad-ico{width:52px;height:52px;margin-bottom:20px}
    .pad-ico svg{width:27px;height:27px}
    .pad-t{font-size:18px}
    .pad-d{font-size:14px;margin-top:6px}
    .pad-status{margin-top:22px;padding:14px 20px}
  }
  /* QHD 이상: 최대 폭 안에서 더 여유롭게 */
  @media (min-width:1800px){
    .stage{padding:56px 44px 90px}
    .pad-grid{gap:24px}
    .pad-card{padding:34px 28px}
    .pad-ico{width:58px;height:58px}
    .pad-ico svg{width:30px;height:30px}
    .pad-t{font-size:20px}
    .pad-d{font-size:15px}
  }
  /* 세로로 여유 있는 큰 화면: 런치패드를 살짝 위로(너무 중앙 아니게) */
  @media (min-width:1200px) and (min-height:900px){
    .view-home{transform:translateY(-2vh) scale(1)}
  }

  @media (max-width:480px){.pad-grid{grid-template-columns:repeat(2,1fr)}}
  @media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}} /* 의사요소 포함 — 본게임 styles.css와 동일 커버리지 */
  /* 터치 지연·더블탭 줌 방지(L-2) — 본게임과 동일 */
  button, a, input, select, textarea, [role="button"] { touch-action: manipulation; }

  /* ── 접근성(M-3): 스크린리더 전용 제목 + 스킵 링크 (포커스 시에만 보임) ── */
  .lz-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .lz-skip{position:absolute;left:8px;top:-48px;z-index:100;padding:10px 16px;border-radius:var(--r1);
    background:var(--primary);color:var(--primary-ink);font-weight:700;text-decoration:none;transition:top .15s}
  .lz-skip:focus-visible{top:8px}

  /* ── 다크 앰비언트(3단계): 상단 무채색 광원 — 팔레트 무변, 순수 무드 레이어 ── */
  :root[data-theme='dark'] body{background:radial-gradient(1100px 700px at 30% -12%, rgba(255,255,255,.035), transparent 62%) var(--bg)}
  @media (prefers-color-scheme:dark){
    :root:not([data-theme]) body{background:radial-gradient(1100px 700px at 30% -12%, rgba(255,255,255,.035), transparent 62%) var(--bg)}
  }