/* 직접 만들기 도우미: 간단 기획(simple.css) 위에 프롬프트 카드만 더해요 */
.chips2{display:flex;flex-wrap:wrap;gap:8px}
.chip2{border:1px solid var(--black);background:var(--white);padding:10px 16px;font-size:15px;border-radius:999px}
.chip2[aria-pressed="true"]{background:var(--black);color:var(--white)}
.chip2[aria-pressed="true"]::before{content:"✓ "}
.colorrow{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.colorrow input[type="color"]{width:56px;height:44px;border:1px solid var(--rule-l);padding:2px;background:var(--white);border-radius:2px}
.inline-note{font-size:14px;color:var(--muted-l)}
.warnbox{background:var(--white);border-left:3px solid var(--red);padding:12px 16px;font-size:14.5px}

/* 결과: 프롬프트 가이드 */
.guide{max-width:960px;padding-block:clamp(40px,8vw,96px) 48px}
.guide h1{font-size:clamp(32px,5vw,60px);font-weight:700;letter-spacing:-.04em;line-height:1.2;margin-top:14px;text-wrap:balance}
.guide .lead{max-width:44ch}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.toc{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--black)}
.toc li{padding:12px 12px 0 0;min-width:0}
.toc li:nth-child(3n+2),.toc li:nth-child(3n+3){padding-left:12px;border-left:1px solid var(--rule-l)}
.toc li:nth-child(n+4){margin-top:12px;border-top:1px solid var(--rule-l)}
.toc a{text-decoration:none;display:flex;flex-direction:column;gap:2px}
.toc .en{font-size:13px;color:var(--muted-l)}
.toc b{font-size:15px}
.toc a:hover b{color:var(--red)}
.tips{margin-top:36px;background:var(--white);border:1px solid var(--rule-l);padding:20px 22px}
.tips h2{font-size:17px;font-weight:700}
.tips ul{margin:10px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:4px;font-size:14.5px}

.pstep{margin-top:56px;padding-top:24px;border-top:1px solid var(--black);scroll-margin-top:72px}
.pstep .num{font-family:var(--en);font-weight:500;font-size:14px;color:var(--muted-l)}
.pstep h2{font-size:clamp(24px,3vw,34px);font-weight:700;letter-spacing:-.03em;margin-top:6px}
.pstep .when{font-size:15px;color:#2b2b2b;margin-top:8px;max-width:60ch}
.howto{margin:16px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:15px}
.prompt{margin-top:18px;background:var(--black);color:var(--white);border-radius:2px}
.prompt-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px 10px 18px;border-bottom:1px solid rgba(255,255,255,.18)}
.prompt-head span{font-family:var(--en);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#bdbdbd}
.copy{font:600 13.5px var(--ko);background:var(--white);color:var(--black);border:0;padding:8px 14px;border-radius:2px}
.copy.done{background:var(--red);color:var(--white)}
.prompt pre{margin:0;padding:18px;white-space:pre-wrap;word-break:keep-all;overflow-wrap:anywhere;font:15px/1.75 var(--ko);max-height:420px;overflow-y:auto}
.after{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
.after div{background:var(--white);border:1px solid var(--rule-l);padding:14px 16px;font-size:14px}
.after b{display:block;font-size:13px;margin-bottom:4px}
.after ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:2px}
.extra{margin-top:12px;font-size:14px}
.extra summary{cursor:pointer;font-weight:600}
.extra .prompt{margin-top:10px}
.handoff{margin-top:64px;border-top:1px solid var(--black);padding-top:24px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.handoff p{font-size:15px;max-width:44ch}

@media (max-width:640px){
  .toc{grid-template-columns:repeat(2,minmax(0,1fr))}
  .toc li:nth-child(n){padding-left:0;border-left:0}
  .toc li:nth-child(2n){padding-left:12px;border-left:1px solid var(--rule-l)}
  .toc li:nth-child(n+3){margin-top:12px;border-top:1px solid var(--rule-l)}
  .after{grid-template-columns:minmax(0,1fr)}
}

/* 브랜드 색 여러 개 */
.colors{display:flex;flex-direction:column;gap:8px}
.crow{display:grid;grid-template-columns:150px 56px minmax(0,1fr) auto;gap:12px;align-items:center;background:var(--white);border:1px solid var(--rule-l);padding:10px 14px}
.crole b{display:block;font-size:15px}
.crole small{display:block;font-size:12.5px;color:var(--muted-l)}
.crow input[type="color"]{width:56px;height:40px;border:1px solid var(--rule-l);padding:2px;background:var(--white);border-radius:2px}
.crow code{font-family:var(--en);font-size:14px}
.crow .x{background:none;border:0;font-size:20px;color:var(--muted-l);padding:0 6px}
.crow .x:hover{color:var(--red)}
.addcolor{align-self:flex-start;background:none;border:1px dashed var(--black);padding:10px 16px;font-size:15px;border-radius:2px}
.addcolor:hover{border-style:solid}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--black);color:var(--white);padding:12px 18px;font-size:14.5px;z-index:30;max-width:calc(100% - 32px)}
@media (max-width:640px){.crow{grid-template-columns:minmax(0,1fr) 56px auto}.crow code{display:none}}

/* 올릴 곳 탭 (Cloudflare / Vercel) */
.tabs{display:flex;gap:0;margin-top:18px;border-bottom:1px solid var(--black)}
.tab{background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-1px;padding:10px 18px;font:600 15px var(--ko);color:var(--muted-l)}
.tab[aria-selected="true"]{color:var(--black);border-bottom-color:var(--red)}
.tab:hover{color:var(--black)}
.tabnote{font-size:14px;color:var(--muted-l);margin-top:10px;max-width:64ch}

/* 알고 있는 정보 + 아직 정하지 않았어요 */
.fact{display:flex;flex-direction:column;gap:6px;background:var(--white);border:1px solid var(--rule-l);padding:14px 16px}
.fact .in{background:var(--light)}
.fact .in:disabled{opacity:.45}
.later{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--muted-l);align-self:flex-start;cursor:pointer}
.later input{width:18px;height:18px;accent-color:var(--black)}