/* ═══════════════════════════════════════════════════════════════
   웹디자인 코드생성 — 도구 스타일   (2026-08-26 분리)
   ⭐ 랜딩(`/web-design-code`)과 전체화면 스튜디오(`/web-design-code/studio`)가 **함께** 쓴다.
      그래서 blade 밖 파일이다 — 한쪽만 고쳐 두 화면이 갈리는 일이 없게.
   ⛔ 모든 var(--x) 에 **폴백을 반드시 남길 것** — 스튜디오는 cmshom 레이아웃 밖이라
      디자인 토큰이 없다(폴백이 빠지면 그 화면만 조용히 무스타일).
   ═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
   웹디자인 코드생성 (2026-08-27 · White Editorial 완성)
   ⛔ 도구부(.wd-tool)는 동작과 얽혀 있으니 클래스 이름을 바꾸지 말 것.
   ═══════════════════════════════════════════════════════════════ */
.wd-wrap{max-width:1180px;margin:0 auto;padding:0 20px;
  /* 🔤 흐린 글자 정본 (2026-08-27 실측) — 옛 `var(--ink-3,#8a8f98)` 은 흰 바탕에서 대비 3.25,
     색 띠 위에서는 2.80 이라 기준(4.5)에 못 미쳤다. 18곳이 이 색이었고 하필
     「이 확인은 무료입니다」·「읽은 뒤 지웁니다」 같은 «안심시키는 문장»이 여기 실려 있었다.
     ⛔ 레이아웃 토큰(`--ink-3`)에 기대지 않는다 — 스튜디오는 레이아웃 밖이라 토큰이 없고,
        나중에 레이아웃이 그 토큰을 정의하면 랜딩만 조용히 옛 색으로 되돌아간다. */
  --wd-dim:#5f646c;}

/* 🔴 `hidden` 을 되살린다 (2026-08-27 · 실측 사고 수리).
   이 파일의 `.wd-tok{display:flex}` 류가 HTML `hidden`(UA 의 display:none)을 이겨서
   **hidden 을 붙인 4개 중 3개가 그대로 보이고 있었다** — 넣은 적 없는 「쓰지 않기」 상자 2개와,
   「만든 것이 없으면 숨긴다」고 주석까지 달아 둔 「코드빌더로 직접편집」 버튼(눌리면 422).
   ⛔ 이 한 줄을 지우면 그 셋이 다시 나온다. */
[hidden]{display:none!important;}
.wd-hero{display:grid;grid-template-columns:minmax(0,1fr) 260px;column-gap:72px;row-gap:40px;padding:88px 0 40px;border-bottom:1px solid #dcdad5;}
.wd-hero-copy{max-width:760px;}
.wd-kicker{font-size:12px!important;font-weight:800!important;letter-spacing:.13em!important;color:#52565d!important;text-transform:uppercase;margin:0 0 22px!important;}
.wd-hero h1{font-size:clamp(36px,5.2vw,64px);font-weight:760;letter-spacing:-.045em;line-height:1.08;margin:0 0 24px;word-break:keep-all;}
.wd-hero-copy>p:last-child{font-size:clamp(16px,1.7vw,19px);color:var(--ink-2,#5b616b);margin:0;max-width:690px;word-break:keep-all;line-height:1.75;}
.wd-free-note{align-self:end;border-top:3px solid #C0501B;padding:18px 0 2px;}
.wd-free-note>span{display:block;font-size:11px;font-weight:800;letter-spacing:.12em;color:#686b71;margin-bottom:16px;}
.wd-free-note strong{display:block;font-size:22px;letter-spacing:-.025em;color:#A54213;margin-bottom:8px;}
.wd-free-note p{font-size:13px;color:var(--ink-2,#5b616b);line-height:1.65;margin:0;word-break:keep-all;}
.wd-tags{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start;padding-top:20px;border-top:1px solid #eceae6;}
.wd-tag{font-size:12px;font-weight:650;padding:7px 10px;border:1px solid #dedcd7;border-radius:2px;background:#f7f6f3;color:#42464d;}
.wd-tag--free{border-color:#d69a7d;background:#fff7f2;color:#93400f;}
@media (max-width:760px){
  .wd-hero{grid-template-columns:minmax(0,1fr);gap:28px;padding:60px 0 30px;}
  .wd-free-note{max-width:280px;}
  .wd-tags{grid-column:1;}
}

/* ── 🖥 스튜디오로 보내는 자리 (2026-08-27 사장님 지시) ──────────────────
   랜딩은 «파는 화면»이라 도구가 없다 — 위·아래 두 곳에서 스튜디오로 보낸다.
   ⛔ 두 곳인 이유 = 다 읽고 내려온 사람이 «되돌아 올라가지» 않게. 하나만 남기지 말 것. */
.wd-cta{margin:28px 0 0;text-align:center;}
.wd-cta--end{margin:8px 0 72px;padding-top:32px;border-top:1px solid var(--line,#e6e8ec);}
.wd-btn--go{padding:15px 30px;font-size:16px;border-radius:var(--r,4px);}
.wd-cta-sub{font-size:12.5px;color:var(--wd-dim,#5f646c);margin:10px 0 0;word-break:keep-all;}

/* ── 📖 사용방법 ── */
.wd-how{margin:56px 0 0;}
.wd-how h2{font-size:clamp(20px,2.6vw,26px);font-weight:800;letter-spacing:-.02em;margin:0 0 8px;text-align:center;word-break:keep-all;}
.wd-how-lead{font-size:14px;color:var(--wd-dim,#5f646c);margin:0 0 26px;text-align:center;word-break:keep-all;}
.wd-steps{list-style:none;counter-reset:wdstep;margin:0;padding:0;max-width:760px;margin-inline:auto;}
.wd-steps>li{counter-increment:wdstep;position:relative;padding:0 0 22px 52px;}
.wd-steps>li::before{content:counter(wdstep);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;
  background:#C0501B;color:#fff;font-size:14px;font-weight:800;display:grid;place-items:center;}
/* 마지막 칸은 이어지는 선을 그리지 않는다(끝난 것을 끝난 것처럼 보이게). */
.wd-steps>li:not(:last-child)::after{content:"";position:absolute;left:15px;top:36px;bottom:6px;width:2px;background:var(--line,#e6e8ec);}
.wd-step-t{display:block;font-size:15px;font-weight:800;margin:5px 0 6px;word-break:keep-all;}
.wd-steps p{font-size:13.5px;line-height:1.75;margin:0 0 6px;color:var(--ink-2,#5b616b);word-break:keep-all;}
.wd-step-x{font-size:12.5px;color:var(--wd-dim,#5f646c);}
@media (max-width:520px){
  .wd-steps>li{padding-left:44px;}
  .wd-steps>li::before{width:28px;height:28px;font-size:13px;}
  .wd-steps>li:not(:last-child)::after{left:13px;top:32px;}
}

/* ── 도구 ── */
.wd-tool{margin:28px 0 96px;border:1px solid #d9d8d4;border-radius:3px;background:#fff;box-shadow:0 18px 45px rgba(23,27,33,.07);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:#f7f6f3;}
.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(--wd-dim,#5f646c);margin:6px 0 0;line-height:1.6;word-break:keep-all;}
/* 🟠 주 버튼 — 색을 «명시»한다 (2026-08-27 실측).
   옛 `var(--accent,#E2632A)` 는 두 가지 문제가 있었다:
   ① **두 화면 색이 달랐다** — 랜딩은 레이아웃 토큰 `#E8451A`, 스튜디오는 폴백 `#E2632A`.
   ② **둘 다 흰 글씨 대비가 기준 미달**(3.98 / 3.47 · 기준 4.5). 이 버튼이 24곳,
      즉 「설계서 만들기」·「N원 코딩 시작」 같은 **돈을 쓰는 버튼 전부**가 여기 해당했다.
   ⇒ 같은 계열에서 한 단계만 깊게 내려 4.80 을 확보하고 두 화면을 하나로 맞춘다.
   ⛔ 토큰으로 되돌리지 말 것 — 되돌리면 위 두 문제가 같이 돌아온다. */
.wd-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:11px 18px;border:0;border-radius:var(--r,4px);background:#C0501B;color:#fff;font:inherit;font-size:14px;font-weight:700;cursor:pointer;}
.wd-btn:hover{background:#A54213;}
.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:22px;padding-top:16px;border-top:2px solid #20242a;}
.wd-plan-hd{font-size:17px;font-weight:800;letter-spacing:-.02em;margin:0 0 4px;}
.wd-plan-sub{font-size:12.5px;color:var(--wd-dim,#5f646c);margin:0 0 16px;word-break:keep-all;line-height:1.6;}
.wd-sec{display:flex;align-items:flex-start;gap:12px;padding:14px 4px;border:0;border-bottom:1px solid #e3e1dc;border-radius:0;margin:0;background:#fff;}
.wd-sec.is-busy{background:#fff9f5;}
.wd-sec.is-done{background:#f0f7f5;border-color:#c7dad6;}
.wd-sec-no{flex:none;width:24px;height:24px;border-radius:2px;border:1px solid #c9cbd0;background:#fff;color:#555a62;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(--wd-dim,#5f646c);text-decoration:underline;cursor:pointer;padding:0;flex:none;}

/* ── 🗑 지우기 — «되돌릴 수 없다»가 보이게 ── */
.wd-btn--danger{color:#a33b16;border-color:#f0cfc4;}
.wd-btn--danger:hover{background:#fdf0ec;border-color:#e0a08a;}

/* ── 🎚 등급 고르기 ── */
.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(--wd-dim,#5f646c);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(--wd-dim,#5f646c);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 #cfd2d6;border-radius:7px;background:#e7e8ea;padding:0 10px 10px;display:flex;flex-direction:column;align-items:center;overflow:auto;}
.wd-stage-chrome{width:100%;min-height:34px;display:flex;align-items:center;gap:12px;padding:0 2px;color:#585d64;font-size:10.5px;font-weight:650;letter-spacing:.02em;}
.wd-stage-dots{display:inline-flex;gap:5px;}
.wd-stage-dots i{display:block;width:7px;height:7px;border-radius:50%;background:#a8abb0;}
.wd-stage-dots i:nth-child(2){background:#bbb6aa;}
.wd-stage-dots i:nth-child(3){background:#8fa69f;}
.wd-stage iframe{flex:none;width:100%;max-width:100%;height:560px;border:0;background:#fff;box-shadow:0 1px 4px rgba(16,24,40,.13);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:2px;display:none;word-break:keep-all;line-height:1.6;}
.wd-msg:not(:empty){display:block;border-left:3px solid #6b7280;background:#f2f3f5;color:#343940;}
.wd-msg.is-err{display:block;border-left-color:#a33b16;background:#fdf0ec;color:#8e3010;}
.wd-msg.is-ok{display:block;border-left-color:#0F766E;background:var(--accent-2-soft,#E4F1EF);color:#0b6159;}
.wd-msg a{color:inherit;font-weight:700;}

/* ── 소개 · 실제 생성 예시 ── */
.wd-section-head{display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;align-items:start;margin-bottom:24px;}
.wd-section-head p,.wd-examples-head>div>p,.wd-ladder>div>p{margin:4px 0 0;font-size:11px;font-weight:800;letter-spacing:.12em;color:#666a71;}
.wd-section-head h2,.wd-examples-head h2,.wd-ladder h2{font-size:clamp(25px,3vw,38px);line-height:1.25;letter-spacing:-.035em;margin:0;word-break:keep-all;}
.wd-why{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0 0 112px;border-top:1px solid #cac8c2;border-bottom:1px solid #cac8c2;}
.wd-why article{padding:28px 26px 32px;border-right:1px solid #dedcd7;background:#fff;}
.wd-why article:last-child{border-right:0;}
.wd-why article>span{display:block;font-size:11px;font-weight:800;color:#686c73;margin-bottom:32px;}
.wd-why h3{font-size:17px;margin:0 0 10px;word-break:keep-all;}
.wd-why p{font-size:13.5px;color:var(--ink-2,#5b616b);margin:0;line-height:1.75;word-break:keep-all;}
.wd-examples{margin:0 0 118px;}
.wd-examples-head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(260px,.7fr);gap:48px;align-items:end;padding-bottom:24px;border-bottom:1px solid #cac8c2;margin-bottom:42px;}
.wd-examples-head>p{font-size:13px;color:var(--ink-2,#5b616b);line-height:1.75;margin:0;word-break:keep-all;}
/* 🖼 예시 갤러리 안내 — 두 번째 줄이 「사진 자리」 설명이다(2026-08-27). */
.wd-examples-note{font-size:13px;color:var(--ink-2,#5b616b);line-height:1.75;margin:0;word-break:keep-all;}
.wd-examples-note--ph{margin-top:10px;padding-top:10px;border-top:1px dashed #cac8c2;color:var(--wd-dim,#5f646c);}
.wd-examples-note--ph b{color:var(--ink,#16181d);}
.wd-examples-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:72px 28px;}
.wd-example{grid-column:span 5;min-width:0;}
.wd-example:nth-child(4n+1),.wd-example:nth-child(4n+4){grid-column:span 7;}
.wd-example figure{margin:0 0 18px;border:1px solid #d8d6d1;background:#f1f1ef;overflow:hidden;}
.wd-example img{display:block;width:100%;height:auto;}
.wd-example-meta{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:baseline;padding-bottom:12px;border-bottom:1px solid #dedcd7;}
.wd-example-meta>span:first-child{font-size:10.5px;font-weight:800;color:#686c73;}
.wd-example h3{font-size:18px;letter-spacing:-.02em;margin:0;}
.wd-example-count{font-size:11.5px;font-weight:700;color:#555a62;white-space:nowrap;}
.wd-example-label{font-size:10.5px;font-weight:800;letter-spacing:.08em;color:#686c73;margin:15px 0 6px;}
.wd-example-prompt{font-size:13px;color:var(--ink-2,#5b616b);line-height:1.75;margin:0;word-break:keep-all;}
.wd-ladder{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:end;margin:0 0 88px;padding:34px 0;border-top:1px solid #20242a;border-bottom:1px solid #cac8c2;}
.wd-ladder h2{max-width:700px;font-size:clamp(23px,2.7vw,34px);margin-top:10px;}
.wd-ladder nav{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
@media (max-width:820px){
  .wd-section-head{grid-template-columns:minmax(0,1fr);gap:8px;}
  .wd-why{grid-template-columns:minmax(0,1fr);}
  .wd-why article{border-right:0;border-bottom:1px solid #dedcd7;}
  .wd-why article:last-child{border-bottom:0;}
  .wd-examples-head,.wd-ladder{grid-template-columns:minmax(0,1fr);gap:20px;}
  .wd-examples-grid{grid-template-columns:minmax(0,1fr);gap:54px;}
  .wd-example,.wd-example:nth-child(4n+1),.wd-example:nth-child(4n+4){grid-column:1;}
  .wd-ladder nav{justify-content:flex-start;}
}

/* ═══ 🖥 전체화면 스튜디오 (`/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{flex:1 1 auto;height:auto;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);}
/* 🔙 「소개·요금」 — 스튜디오에서만 보인다(랜딩엔 그 페이지 자체가 있으니 불필요). */
.wd-studio-back{display:none;font-size:12px;color:var(--wd-dim,#5f646c);text-decoration:underline;}
body.wd-studio .wd-studio-back{display:inline;}
.wd-studio-back:hover{color:var(--ink,#16181d);}

/* 📎 자료 첨부 (P3 · 2026-08-26) — ⛔ var() 는 전부 폴백을 둔다(스튜디오엔 디자인 토큰이 없다). */
.wd-src-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.wd-src-row .wd-hint{flex:1 1 auto;min-width:0;}
.wd-src{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;padding:9px 11px;border:1px solid #ddd6c6;border-radius:var(--r,4px);background:var(--accent-soft,#F7F2E8);}
.wd-src-ic{flex:none;font-size:13px;line-height:1;}
.wd-src-txt{font-size:12px;color:var(--ink-2,#5b616b);font-weight:600;word-break:keep-all;flex:1 1 auto;min-width:0;}
.wd-src button{border:0;background:none;font:inherit;font-size:11.5px;color:var(--wd-dim,#5f646c);text-decoration:underline;cursor:pointer;padding:0;flex:none;}

/* 💬 협의 — 「이렇게 고쳐 주세요」 (P3 · 2026-08-26).
   설계서와 «만들기 버튼» 사이에 둔다 — 돈을 쓰기 «전»에 고치는 자리라는 뜻이 위치로 보여야 한다. */
.wd-refine{margin:14px 0 0;padding:13px 0 0;border-top:1px dashed var(--line,#e6e8ec);}

/* ✏️ 「수정하기」 칸 — 사장님 지시로 «좀 더 크게»(2026-08-26). */
.wd-ta--fix{min-height:84px;font-size:13.5px;}
.wd-row--fix{margin-top:10px;}
.wd-row--fix .wd-btn{min-width:132px;justify-content:center;}

/* 🎨 「코드빌더로 직접편집」 — **블루톤**(사장님 지시 2026-08-26).
   ⭐ 주황(만들기)·초록(완료)과 겹치지 않는 색이라야 «다른 종류의 일»로 읽힌다.
   ⛔ `var(--accent)` 를 쓰지 말 것 — 그러면 「수정하기」와 같은 색이 되어 구분이 사라진다. */
.wd-btn--edit{background:#1D4ED8;}
.wd-btn--edit:hover{background:#1E40AF;}

/* ── 🖥 설계서를 «보이는 자리»에 둔다 (2026-08-27 · 실측 수리) ──────────────
   문제: 9초 기다려 나온 설계서(1,208px)가 좌측 칼럼 **866px 아래**에 생겨
         화면에 **3%만** 보였고, 그동안 오른쪽 **69%** 는 「아직 만든 섹션이
         없습니다」 빈 상자였다. 손님이 «돈 낼지» 정하는 바로 그 순간에
         정작 볼 것이 화면 밖에 있었다.
   처방: 아직 만든 섹션이 없으면 JS 가 설계서를 오른쪽 넓은 자리로 옮기고
         (`.wd-right[data-plan]`), 미리보기 틀은 그동안 감춘다 —
         그 틀은 «만든 뒤»에야 쓸모가 있다. 하나라도 만들면 되돌린다.
   ⛔ 모바일(1단)에서는 옮기지 않는다(순서만 나빠진다) → JS 가 스크롤로 데려간다. */
.wd-right[data-plan] .wd-prev-hd,
.wd-right[data-plan] .wd-stage{display:none;}
.wd-right[data-plan] .wd-plan{margin-top:0;max-width:760px;}