/* ═══════════════════════════════════════════════════════════════
   웹디자인 코드생성 — 도구 스타일   (2026-08-26 분리)
   ⭐ 랜딩(`/web-design-code`)과 전체화면 스튜디오(`/web-design-code/studio`)가 **함께** 쓴다.
      그래서 blade 밖 파일이다 — 한쪽만 고쳐 두 화면이 갈리는 일이 없게.
   ⛔ 모든 var(--x) 에 **폴백을 반드시 남길 것** — 스튜디오는 cmshom 레이아웃 밖이라
      디자인 토큰이 없다(폴백이 빠지면 그 화면만 조용히 무스타일).
   ═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
   웹디자인 코드생성 (2026-08-25 · P1 골격)
   ⚠️ 랜딩 상단부(.wd-hero / .wd-why / .wd-ladder)의 **카피·비주얼**은
      솔이 별도 지시서로 다듬는다. 여기 스타일은 «기능이 보이게» 하는 최소선이다.
   ⛔ 도구부(.wd-tool)는 동작과 얽혀 있으니 클래스 이름을 바꾸지 말 것.
   ═══════════════════════════════════════════════════════════════ */
.wd-wrap{max-width:1180px;margin:0 auto;padding:0 20px;}
.wd-hero{padding:64px 0 32px;text-align:center;}
.wd-hero h1{font-size:clamp(28px,4.4vw,44px);font-weight:800;letter-spacing:-.03em;margin:0 0 14px;word-break:keep-all;}
.wd-hero p{font-size:clamp(15px,1.8vw,18px);color:var(--ink-2,#5b616b);margin:0 auto;max-width:680px;word-break:keep-all;line-height:1.75;}
.wd-tags{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:22px;}
.wd-tag{font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:999px;background:var(--accent-2-soft,#E4F1EF);color:var(--accent-2,#0F766E);}

/* ── 도구 ── */
.wd-tool{margin:36px 0 72px;border:1px solid var(--line,#e6e8ec);border-radius:var(--r-lg,8px);background:#fff;box-shadow:var(--shadow-sm,0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.10));overflow:hidden;}
.wd-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 18px;border-bottom:1px solid var(--line,#e6e8ec);background:#fafbfc;}
.wd-bar strong{font-size:14px;}
.wd-bar .wd-spacer{flex:1 1 auto;min-width:0;}
.wd-bal{font-size:13px;color:var(--ink-2,#5b616b);}
.wd-bal b{color:var(--ink,#16181d);}
.wd-body{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:0;}
@media (max-width:900px){.wd-body{grid-template-columns:minmax(0,1fr);}}
.wd-left{padding:18px;border-right:1px solid var(--line,#e6e8ec);min-width:0;}
@media (max-width:900px){.wd-left{border-right:0;border-bottom:1px solid var(--line,#e6e8ec);}}
.wd-right{padding:18px;min-width:0;}
.wd-lbl{display:block;font-size:12.5px;font-weight:700;margin:0 0 6px;color:var(--ink-2,#5b616b);}
.wd-ta{width:100%;min-height:132px;padding:12px;border:1px solid var(--line,#e6e8ec);border-radius:var(--r,4px);font:inherit;font-size:14px;line-height:1.7;resize:vertical;}
.wd-in{width:100%;padding:10px 12px;border:1px solid var(--line,#e6e8ec);border-radius:var(--r,4px);font:inherit;font-size:14px;}
.wd-hint{font-size:12px;color:var(--ink-3,#8a8f98);margin:6px 0 0;line-height:1.6;word-break:keep-all;}
.wd-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:11px 18px;border:0;border-radius:var(--r,4px);background:var(--accent,#E2632A);color:#fff;font:inherit;font-size:14px;font-weight:700;cursor:pointer;}
.wd-btn:hover{background:var(--accent-hover,#C8531D);}
.wd-btn[disabled]{opacity:.5;cursor:not-allowed;}
.wd-btn--ghost{background:#fff;color:var(--ink,#16181d);border:1px solid var(--line,#e6e8ec);}
.wd-btn--ghost:hover{background:#f4f5f7;}
.wd-btn--sm{padding:7px 12px;font-size:12.5px;}
.wd-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;}

.wd-plan{margin-top:18px;}
.wd-plan-hd{font-size:13px;font-weight:700;margin:0 0 4px;}
.wd-plan-sub{font-size:12.5px;color:var(--ink-3,#8a8f98);margin:0 0 12px;word-break:keep-all;line-height:1.6;}
.wd-sec{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border:1px solid var(--line,#e6e8ec);border-radius:var(--r,4px);margin-bottom:8px;background:#fff;}
.wd-sec.is-done{background:var(--accent-2-soft,#E4F1EF);border-color:#bfdcd8;}
.wd-sec-no{flex:none;width:22px;height:22px;border-radius:50%;background:#eef0f3;color:#5b616b;font-size:11.5px;font-weight:800;display:grid;place-items:center;}
.wd-sec.is-done .wd-sec-no{background:var(--accent-2,#0F766E);color:#fff;}
.wd-sec-main{flex:1 1 auto;min-width:0;}
.wd-sec-t{font-size:13.5px;font-weight:700;margin:0 0 2px;word-break:keep-all;}
.wd-sec-d{font-size:12px;color:var(--ink-2,#5b616b);margin:0;line-height:1.55;word-break:keep-all;}
.wd-sec-act{flex:none;}

/* ── 🎨 내 사이트 톤 (P2) ── */
.wd-ref-row{display:flex;gap:8px;align-items:stretch;}
.wd-ref-row .wd-in{flex:1 1 auto;min-width:0;}
.wd-ref-row button{flex:none;white-space:nowrap;}
.wd-tok{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;padding:9px 11px;border:1px solid #bfdcd8;border-radius:var(--r,4px);background:var(--accent-2-soft,#E4F1EF);}
.wd-tok-sw{width:18px;height:18px;border-radius:4px;border:1px solid rgba(0,0,0,.12);flex:none;}
.wd-tok-txt{font-size:12px;color:var(--accent-2,#0F766E);font-weight:600;word-break:keep-all;flex:1 1 auto;min-width:0;}
.wd-tok button{border:0;background:none;font:inherit;font-size:11.5px;color:var(--ink-3,#8a8f98);text-decoration:underline;cursor:pointer;padding:0;flex:none;}

/* ── 🎚 등급 고르기 ── */
.wd-tiers{display:flex;gap:8px;flex-wrap:wrap;}
.wd-tier{flex:1 1 150px;min-width:0;text-align:left;border:1px solid var(--line,#e6e8ec);background:#fff;
  border-radius:var(--r,4px);padding:9px 12px;cursor:pointer;font:inherit;line-height:1.35;}
.wd-tier:hover{background:#f7f8fa;}
.wd-tier.is-on{border-color:var(--accent,#E2632A);background:var(--accent-soft,#FDEDE8);}
.wd-tier b{display:block;font-size:13px;font-weight:800;color:var(--ink,#16181d);}
.wd-tier span{display:block;font-size:11.5px;color:var(--ink-3,#8a8f98);margin-top:1px;word-break:keep-all;}
.wd-tier i{font-style:normal;font-size:12px;font-weight:700;color:var(--accent,#E2632A);}
.wd-tier[disabled]{opacity:.55;cursor:not-allowed;}

/* ── ▶ 두 줄 실행 버튼 (값 위 · 하는 일 아래) ── */
.wd-go{flex-direction:column;gap:1px;line-height:1.25;padding:8px 14px;min-width:88px;}
.wd-go b{font-size:13px;font-weight:800;letter-spacing:-.01em;}
.wd-go i{font-style:normal;font-size:11.5px;font-weight:600;opacity:.92;white-space:nowrap;}

/* ── ⏳ 진행 막대 ── */
.wd-prog{position:relative;height:5px;border-radius:99px;background:#e9ebef;overflow:hidden;margin:9px 0 5px;}
.wd-prog i{position:absolute;inset:0 auto 0 0;width:0;border-radius:99px;background:var(--accent,#E2632A);transition:width .18s linear;}
.wd-prog-t{display:block;font-size:11.5px;color:var(--ink-3,#8a8f98);letter-spacing:-.01em;}

/* ── 🖼 사진 자리 (P2) ── */
.wd-shots{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 0;}
.wd-shot{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line,#e6e8ec);background:#fff;border-radius:999px;padding:4px 10px;font:inherit;font-size:11.5px;cursor:pointer;color:var(--ink-2,#5b616b);}
.wd-shot:hover{background:#f4f5f7;}
.wd-shot[disabled]{opacity:.5;cursor:not-allowed;}
.wd-shot.is-on{background:var(--accent-2,#0F766E);border-color:var(--accent-2,#0F766E);color:#fff;font-weight:700;}

.wd-prev-hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 10px;}
.wd-prev-hd strong{font-size:13px;}
.wd-dev{display:inline-flex;border:1px solid var(--line,#e6e8ec);border-radius:var(--r,4px);overflow:hidden;}
.wd-dev button{border:0;background:#fff;font:inherit;font-size:12px;padding:6px 11px;cursor:pointer;color:var(--ink-2,#5b616b);}
.wd-dev button.is-on{background:var(--ink,#16181d);color:#fff;font-weight:700;}
.wd-stage{border:1px solid var(--line,#e6e8ec);border-radius:var(--r,4px);background:#fbfbfc;padding:12px;display:grid;place-items:start center;overflow:auto;}
.wd-stage iframe{width:100%;max-width:100%;height:560px;border:0;background:#fff;box-shadow:var(--shadow-sm,0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.10));display:block;}
.wd-stage[data-dev="mobile"] iframe{width:390px;max-width:100%;}
.wd-msg{margin-top:12px;font-size:13px;padding:10px 12px;border-radius:var(--r,4px);display:none;word-break:keep-all;line-height:1.6;}
.wd-msg.is-err{display:block;background:#fdf0ec;color:#a33b16;}
.wd-msg.is-ok{display:block;background:var(--accent-2-soft,#E4F1EF);color:var(--accent-2,#0F766E);}
.wd-msg a{color:inherit;font-weight:700;}

/* ── 소개 ── */
.wd-why{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0 0 64px;}
@media (max-width:820px){.wd-why{grid-template-columns:minmax(0,1fr);}}
.wd-why article{padding:22px;border:1px solid var(--line,#e6e8ec);border-radius:var(--r-lg,8px);background:#fff;}
.wd-why h3{font-size:15px;margin:0 0 8px;word-break:keep-all;}
.wd-why p{font-size:13.5px;color:var(--ink-2,#5b616b);margin:0;line-height:1.7;word-break:keep-all;}
.wd-ladder{margin:0 0 72px;padding:22px;border:1px dashed var(--line,#e6e8ec);border-radius:var(--r-lg,8px);text-align:center;}
.wd-ladder p{margin:0 0 12px;font-size:14px;color:var(--ink-2,#5b616b);word-break:keep-all;}

/* ═══ 🖥 전체화면 스튜디오 (`/web-design-code/studio`) ═══
   ⭐ 헤더·푸터가 없는 새 창 전용. 랜딩과 «같은 마크업»을 쓰고 폭·높이만 푼다.
   ⛔ 도구 클래스(.wd-tool 등)를 새로 만들지 말 것 — 두 화면이 갈린다.
   🔴 **막대 높이를 숫자로 넘겨짚지 말 것** — `calc(100vh - 58px)` 로 잡았다가 실제 64px 이라
      6px 이 넘쳐 «딱 맞아야 할 화면»에 세로 스크롤바가 생겼다(2026-08-26 실측). flex 로 푼다. */
body.wd-studio{margin:0;background:#f4f5f7;color:var(--ink,#16181d);
  font-family:'Pretendard','Apple SD Gothic Neo','Malgun Gothic',sans-serif;line-height:1.6;word-break:keep-all;}
body.wd-studio *,body.wd-studio *::before,body.wd-studio *::after{box-sizing:border-box;}
body.wd-studio .wd-wrap{max-width:none;padding:0;}
body.wd-studio .wd-tool{margin:0;border:0;border-radius:0;box-shadow:none;}

/* 데스크톱 = 화면에 «딱» 맞추고 왼쪽 칸 안에서만 스크롤(미리보기가 늘 보이게). */
@media (min-width:901px){
  body.wd-studio .wd-tool{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;}
  body.wd-studio .wd-body{flex:1 1 auto;min-height:0;grid-template-columns:minmax(0,440px) minmax(0,1fr);}
  body.wd-studio .wd-left{overflow-y:auto;min-height:0;}
  body.wd-studio .wd-right{display:flex;flex-direction:column;min-height:0;}
  body.wd-studio .wd-stage{flex:1 1 auto;min-height:0;}
  body.wd-studio .wd-stage iframe{height:100%;min-height:0;}
}
/* ⛔ 모바일은 한 줄로 쌓이므로 «높이를 가두면» 아래가 잘린다 — 최소높이만 준다. */
@media (max-width:900px){
  body.wd-studio .wd-tool{min-height:100vh;}
}

/* 새 창이라 «돌아갈 곳»이 없다 — 맨 위 막대에 사이트로 나가는 길을 둔다(랜딩에선 숨긴다). */
.wd-studio-home{display:none;align-items:center;gap:6px;font-size:12.5px;font-weight:700;
  color:var(--ink-2,#5b616b);text-decoration:none;}
body.wd-studio .wd-studio-home{display:inline-flex;}
.wd-studio-home:hover{color:var(--accent,#E2632A);}