:root{
    --bg:#f4f6fa;
    --bg-soft:#fbfcfe;
    --panel:#ffffff;
    --panel-2:#f2f4f8;
    --line:#e2e6ee;
    --line-soft:#eef1f6;
    --text:#151a23;
    --muted:#5f6b7f;
    --dim:#98a2b3;
    --accent:#065da4;
    --accent-dim:#065da414;
    --ok:#0f9d58;
    --ok-dim:#0f9d5814;
    --ok-glow:#0f9d5833;
    --warn:#b45309;
    --err:#d92d20;
    --accent-glow:#065da433;
    /* 입력칸·후보칸처럼 패널보다 더 파인 곳 */
    --sunken:#ffffff;
    --r:16px;
    --ease:cubic-bezier(.16,1,.3,1);
    --shadow:0 1px 2px rgba(16,24,40,.05), 0 8px 24px -14px rgba(16,24,40,.18);
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{
    margin:0;
    background:
      radial-gradient(1000px 500px at 50% -240px, #dfe6ff88, transparent 70%),
      var(--bg);
    color:var(--text);
    font-family:"Pretendard",-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI","Malgun Gothic",sans-serif;
    font-size:16px; line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }

  /* ---------- 헤더 ---------- */
  header{
    padding:26px 24px 22px;
    border-bottom:1px solid var(--line);
    background:linear-gradient(180deg,#ffffff,#ffffff00);
  }
  header .wrap{max-width:1280px; margin:0 auto}
  h1{
    margin:0; font-size:22px; font-weight:700; letter-spacing:-.02em;
    display:flex; align-items:center; gap:10px;
  }
  h1::before{
    content:""; width:5px; height:22px; border-radius:3px;
    background:linear-gradient(180deg,var(--accent),#8b5cf6);
    box-shadow:0 0 14px var(--accent-glow);
  }
  main{max-width:1280px; margin:0 auto; padding:26px 24px 80px; display:grid; gap:16px}

  /* ---------- 패널 ---------- */
  .panel{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:var(--r);
    padding:22px;
    box-shadow:var(--shadow);
  }
  .panel h2{
    margin:0 0 16px; font-size:16px; font-weight:700;
    letter-spacing:.08em; text-transform:uppercase; color:var(--dim);
  }

  /* ---------- 사용 방법 영상 ---------- */
  .videoWrap{position:relative; width:100%; padding-top:56.25%; border-radius:12px; overflow:hidden; background:#000}
  .videoWrap iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

  /* ---------- 폼 ---------- */
  label{display:block; font-size:16px; color:var(--muted); margin-bottom:7px; font-weight:500}
  input[type=text],input[type=email],input[type=password],input[type=number],select{
    width:100%; background:var(--sunken); border:1px solid var(--line); color:var(--text);
    border-radius:10px; padding:11px 13px; font-size:16px; font-family:inherit;
    transition:border-color .15s, box-shadow .15s;
  }
  input:focus,select:focus{
    outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim);
  }
  input:disabled,select:disabled{background:var(--panel-2); color:var(--dim)}
  select{cursor:pointer}

  /* ---------- 버튼 ---------- */
  button{
    background:linear-gradient(180deg,#1b7cc4,var(--accent));
    color:#fff; border:0; border-radius:12px;
    padding:10px 16px; font-size:16px; font-weight:600; font-family:inherit;
    cursor:pointer; transition:filter .15s, transform .2s var(--ease), box-shadow .2s var(--ease);
    box-shadow:0 1px 2px rgba(16,24,40,.12), 0 1px 0 #ffffff33 inset, 0 6px 18px -8px var(--accent-glow);
  }
  button:hover:not(:disabled){filter:brightness(1.08); transform:translateY(-1px); box-shadow:0 1px 2px rgba(16,24,40,.12), 0 1px 0 #ffffff33 inset, 0 10px 24px -8px var(--accent-glow)}
  button:active:not(:disabled){transform:translateY(1px)}
  button:disabled{opacity:.4; cursor:not-allowed; box-shadow:none; filter:grayscale(.7)}
  button.ghost{
    background:#fff; color:var(--text);
    border:1px solid var(--line); box-shadow:0 1px 2px rgba(16,24,40,.04);
  }
  button.ghost:hover:not(:disabled){background:var(--panel-2); border-color:#cfd6e4; box-shadow:0 1px 2px rgba(16,24,40,.04)}
  button.ok{
    background:linear-gradient(180deg,#17b163,var(--ok)); color:#fff;
    box-shadow:0 1px 2px rgba(16,24,40,.12), 0 1px 0 #ffffff33 inset, 0 6px 18px -8px var(--ok-glow);
  }
  button.ok:hover:not(:disabled){box-shadow:0 1px 2px rgba(16,24,40,.12), 0 1px 0 #ffffff33 inset, 0 10px 24px -8px var(--ok-glow)}
  .btns{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px}
  #s2 .btns{justify-content:center; margin-top:42px; margin-bottom:126px}
  #s3 .btns{justify-content:center; margin:0}
  #connCheck, #run{font-size:19px; font-weight:700; padding:12px 12px; width:386px}
  #s4 .btns #dl, #s4 .btns #dlRaw{padding:18px 12px; font-size:19px; font-weight:700}
  #confirmArea{font-size:19px; font-weight:700}
  #clearMask, #newImg{font-size:19px}
  label[for="ncand"], label[for="targetText"]{font-size:16px; color:var(--dim); font-weight:400}
  #targetText::placeholder{color:#c1c7d1}
  #ncand{
    font-size:18px; font-weight:500; padding-right:44px;
    appearance:none; -webkit-appearance:none; -moz-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%235f6b7f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 18px center;
  }

  /* ---------- 단계 ---------- */
  .step{
    border:1px solid var(--line); border-radius:14px;
    padding:14px 16px; margin-bottom:10px; background:var(--bg-soft);
    transition:opacity .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
  }
  .stepHead{
    display:flex; align-items:center; gap:13px;
    font-size:28px; font-weight:600; letter-spacing:-.01em;
  }
  .stepHead .num{
    width:50px; height:50px; border-radius:50%;
    background:transparent; color:#333; border:2px solid #333;
    display:grid; place-items:center; font-size:25px; font-weight:700; flex:none; box-sizing:border-box;
    transition:background .2s, color .2s, border-color .2s;
  }
  .stepBody{margin-top:56px}

  .step.locked{opacity:.45}
  .step.locked .stepBody{pointer-events:none; user-select:none; filter:saturate(.3)}
  .step.locked .stepHead::after{content:""}

  .step.open{border-color:#b9c4ff; background:#fbfcff; box-shadow:0 8px 24px -16px var(--accent-glow)}
  .step.open .num{background:#b4cc80; color:#fff; border-color:#b4cc80}
  #s4.step.done .num{background:#b4cc80; color:#fff; border-color:#b4cc80}

  .step.done{border-color:#b9c9e4; background:#fbfdff}
  .step.done .tick::after{
    content:"완료"; color:#065da4; font-size:16px; font-weight:600;
    background:#065da414; padding:2px 8px; border-radius:99px;
  }

  /* ---------- 업로드 ---------- */
  #drop{
    border:1.5px dashed #cfd6e4; border-radius:14px; padding:34px 20px;
    text-align:center; color:var(--muted); cursor:pointer; font-size:16px;
    background:var(--sunken); transition:.2s var(--ease);
  }
  #drop:hover{border-color:var(--accent); color:var(--text); background:#fbfcff}
  #drop.hot{border-color:var(--accent); background:var(--accent-dim); color:var(--text)}
  #drop small{color:var(--dim); font-size:16px}

  #cv{
    display:none; margin:0 auto; border-radius:10px; cursor:crosshair;
    touch-action:none; max-width:100%; max-height:32vh; width:auto; height:auto;
    border:1px solid var(--line);
  }

  /* ---------- 후보 ---------- */
  .cands{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
  .cand{
    border:1.5px solid var(--line); border-radius:14px; padding:10px; cursor:pointer;
    text-align:center; min-height:118px; background:var(--sunken);
    display:grid; place-content:center; gap:6px;
    transition:border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
  }
  .cand:hover{border-color:#b9c4ff; transform:translateY(-3px); box-shadow:var(--shadow)}
  .cand.sel{border-color:var(--ok); background:var(--ok-dim); box-shadow:0 0 0 3px #0f9d5820}
  .cand img{max-width:100%; max-height:16vh; border-radius:6px}
  .cand .cap{font-size:16px; color:var(--muted)}
  .cands.wide .cand img{max-height:24vh}          /* 긴(가로형) 로고: 3분할 유지, 미리보기만 조금 더 높게 */

  /* ---------- 결과 (투명 배경 체크무늬) ---------- */
  .checker{
    background-color:var(--sunken);
    background-image:
      linear-gradient(45deg,#eceff4 25%,transparent 25%),
      linear-gradient(-45deg,#eceff4 25%,transparent 25%),
      linear-gradient(45deg,transparent 75%,#eceff4 75%),
      linear-gradient(-45deg,transparent 75%,#eceff4 75%);
    background-size:18px 18px;
    background-position:0 0,0 9px,9px -9px,-9px 0;
    border:1px solid var(--line);
    border-radius:12px; padding:14px; text-align:center; min-height:120px;
    display:grid; place-content:center;
  }
  .checker img,.checker svg{max-width:100%; max-height:22vh}
  #maskPreview{min-height:0; display:block; padding:10px}
  #maskPreview img{width:100%; height:auto; max-height:none; display:block; border-radius:6px}

  /* ---------- 색상 칩 ---------- */
  .swatches{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px}
  .sw{border:1px solid var(--line); border-radius:10px; overflow:hidden; width:112px; background:var(--sunken)}
  .sw .chip{height:56px; border-bottom:1px solid var(--line)}
  .sw .meta{padding:8px 9px; font-size:16px}
  .sw .meta b{
    display:block; font-size:16px; letter-spacing:.02em;
    font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;
  }
  .sw .meta span{color:var(--muted)}

  /* ---------- 표 ---------- */
  .kv{font-size:16px; margin:0; padding:0; list-style:none}
  .kv li{
    padding:10px 0; border-bottom:1px solid var(--line-soft);
    display:flex; gap:14px; align-items:flex-start;
  }
  .kv li:last-child{border:0; padding-bottom:0}
  .kv b{color:var(--muted); font-weight:500; min-width:88px; flex:none}

  /* ---------- 기타 ---------- */
  #status{font-size:16px; min-height:20px; margin-top:12px; max-height:28vh; overflow:auto}
  #status:empty{margin:0; min-height:0}
  .err{color:var(--err)} .warn{color:var(--warn)} .ok{color:var(--ok)}
  code{
    font-family:ui-monospace,"Cascadia Mono",Consolas,monospace; font-size:16px;
    background:var(--panel-2); border:1px solid var(--line);
    padding:1px 6px; border-radius:5px; color:var(--muted);
  }
  pre{
    background:#fbfcfe; border:1px solid var(--line); border-radius:10px; padding:14px;
    font-size:16px; line-height:1.65; overflow:auto; max-height:220px; color:var(--muted);
    font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;
  }
  details{margin-top:14px}
  details summary{cursor:pointer; font-size:16px; color:var(--dim); user-select:none; padding:6px 0}
  details summary:hover{color:var(--muted)}
  .hint{font-size:16px; color:var(--muted); margin-top:9px; line-height:1.6}
  .hint b{color:var(--text); font-weight:600}
  .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;
  }

  .slider{
    display:flex; align-items:center; gap:12px; margin-top:12px;
    font-size:16px; color:var(--muted);
  }
  /* 지나온 만큼 색이 차오른다. --p 는 JS 가 값에 맞춰 넣어준다. */
  .slider input[type=range]{
    flex:1; -webkit-appearance:none; appearance:none;
    height:6px; border-radius:99px; outline:none; cursor:pointer;
    background-color:#dfe4ee;
    background-image:linear-gradient(90deg,#4560e8 0%,#8b5cf6 55%,#ec4899 100%);
    background-repeat:no-repeat;
    background-size:var(--p,0%) 100%;
    transition:background-size .05s linear;
  }
  .slider input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none; appearance:none;
    width:18px; height:18px; border-radius:50%; cursor:pointer;
    background:#fff; border:3px solid var(--accent);
    box-shadow:0 1px 5px rgba(16,24,40,.3);
    transition:transform .1s, border-color .15s;
  }
  .slider input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.12)}
  .slider input[type=range]:active::-webkit-slider-thumb{transform:scale(1.2)}
  .slider input[type=range]::-moz-range-thumb{
    width:18px; height:18px; border-radius:50%; cursor:pointer;
    background:#fff; border:3px solid var(--accent); box-shadow:0 1px 5px rgba(16,24,40,.3);
  }

  ::-webkit-scrollbar{width:10px; height:10px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{background:#d3d9e4; border-radius:99px; border:2px solid var(--bg)}
  ::-webkit-scrollbar-thumb:hover{background:#b9c1d1}

  @media(max-width:900px){
    .cands{grid-template-columns:1fr}
    main{padding:20px 16px 60px}
  }

  /* ---------- 2026 redesign v3: 세로 1단 흐름 + 4단계 가로 스테퍼 ---------- */
  body{
    background:#f8f9fc;
    color:#111827;
  }
  header{
    padding:26px 28px;
    background:rgba(255,255,255,.94);
    border-bottom:1px solid #e8eaf0;
  }
  header .wrap{
    max-width:1280px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
  }
  .brand{display:flex;align-items:center;gap:18px;min-width:0}
  .brandMark{height:40px;width:auto;flex:none;cursor:pointer}
  h1{font-size:36px;line-height:1.25;display:block}
  h1::before{display:none}
  #historyBtn,#restart{position:static!important;padding:10px 16px!important;border-radius:10px}
  .headerBtns{display:flex; align-items:center; gap:8px}
  #logoutBtn{background:none; border:none; box-shadow:none; color:var(--muted); padding:4px 2px!important; font-weight:500}
  #logoutBtn:hover{background:none; border:none; color:var(--muted); text-decoration:underline}

  main{
    max-width:1280px;
    padding:32px 28px 72px;
    display:block;
  }
  #historyPanel{margin-bottom:18px}
  .panel{
    padding:24px;
    border-color:#e4e7ee;
    border-radius:16px;
    box-shadow:0 2px 6px rgba(16,24,40,.03),0 16px 36px -26px rgba(16,24,40,.2);
  }
  .panel h2{
    margin:0 0 20px;
    color:#202636;
    font-size:16px;
    line-height:1.4;
    font-weight:700;
    letter-spacing:-.015em;
    text-transform:none;
  }

  /* 세 단계를 세로로 쌓는 컨테이너. 그리드 아이템(.step)은 기본적으로 내용(캔버스·이미지)의
     실제 픽셀 크기만큼 넓어지려 하므로(grid blowout), min-width:0 으로 막아 max-width 지정이 지켜지게 한다. */
  .stack{display:grid; gap:18px}
  .step{
    margin:0;
    padding:22px;
    background:#fff;
    border-color:#e4e7ee;
    border-radius:16px;
    box-shadow:0 2px 6px rgba(16,24,40,.03),0 16px 36px -26px rgba(16,24,40,.2);
    min-width:0;
    transition:opacity .2s,background .2s,border-color .2s;
  }
  .step.open,.step.done{box-shadow:0 2px 6px rgba(16,24,40,.03),0 16px 36px -26px rgba(16,24,40,.2)}
  .step.open{background:#fff;border-color:#dcd8ff}
  .step.done{background:#fff;border-color:#e4e7ee}
  .step.locked{opacity:.5;background:#fbfbfd}
  .step.locked .stepBody{pointer-events:none;user-select:none}

  #s2:has(.err){border-color:#ffc9d8;background:#fffafb}
  #drop{padding:44px 20px;border-radius:14px;background:#fafbfe}
  /* width:100%+object-fit:contain 로 두면 캔버스 박스와 실제 그려지는 그림 크기가 달라져
     (레터박스) 드래그 좌표 계산(pt())이 어긋난다 — 그래서 width/height 는 auto 로 두고
     max-height 로만 높이를 제한한다 (base 규칙의 width:auto;height:auto;max-width:100% 그대로 사용). */
  #cv{border-radius:12px;max-height:440px;background:#f2f4f8;min-width:0}
  #s1 .btns{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
  #s1 .btns button{width:100%;padding:11px 12px!important}
  #s1 .btns #clearMask,#s1 .btns #newImg,#s1 .btns #confirmArea{display:block}
  .hint{color:#747d91;line-height:1.7}

  button{border-radius:10px;background:linear-gradient(135deg,#1b7cc4,#065da4)}
  button.ghost{background:#fff;border-color:#dfe3eb}
  button.ok{background:linear-gradient(135deg,#6849f4,#4b2dea)}
  select,input[type=text],input[type=email],input[type=password],input[type=number]{border-radius:10px}

  #s4 .cands{gap:12px;margin-bottom:20px}
  .cand{
    min-height:150px;
    padding:14px;
    border:1px solid #e0e4ec;
    border-radius:14px;
    background:#fff;
    min-width:0;
  }
  .cand:hover{transform:translateY(-2px)}
  .cand.sel{border:2px solid #5b3cf0;background:#fff;box-shadow:0 0 0 3px rgba(91,60,240,.08)}
  .cand img{max-height:110px}

  .checker{
    min-height:300px;
    border-radius:14px;
    background-color:#fff;
    background-image:linear-gradient(45deg,#f0f2f6 25%,transparent 25%),linear-gradient(-45deg,#f0f2f6 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f0f2f6 75%),linear-gradient(-45deg,transparent 75%,#f0f2f6 75%);
    background-size:16px 16px;
    background-position:0 0,0 8px,8px -8px,-8px 0;
  }
  .checker img,.checker svg{max-height:270px}
  #s4 .slider{margin:20px 0 0}
  #s4 .btns{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
  #s4 .btns button{width:100%;padding:13px 16px}

  @media(max-width:820px){
    header{padding:20px 18px}
    .brand{gap:13px}
    .brandMark{height:34px}
    h1{font-size:30px}
    main{padding:20px 16px 52px}
    #s4 .cands{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
    .cand{min-height:120px;padding:10px}
    .cand img{max-height:80px}
    .checker{min-height:240px}
  }
  @media(max-width:580px){
    header .wrap{align-items:flex-start}
    .brandMark{height:30px}
    h1{font-size:27px}
    #historyBtn,#restart{padding:8px 10px!important;font-size:16px}
    .panel,.step{padding:18px;border-radius:14px}
    #s4 .cands{grid-template-columns:1fr}
    .cand{min-height:130px}
    #s4 .btns,#s1 .btns{grid-template-columns:1fr}
  }