/* CmsHom AI 커머스 제작 — 신청·주문서 (v1) */

.commerce-request{
  --cr-black:#151515;
  --cr-orange:#e8451a;
  --cr-cream:#f6f2e9;
  background:#fff;
  word-break:keep-all;
  overflow-wrap:normal;
}

/* HERO */
.cr-hero{
  padding:132px 0 64px;
  background:var(--ps-paper);
  border-bottom:1px solid var(--ps-line);
}
.cr-hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);
  gap:56px;
  align-items:center;
}
.cr-hero .ps-display{font-size:clamp(34px,4.6vw,58px)}
.cr-hero .ps-lead{margin-top:20px;font-size:clamp(15px,1.4vw,17px)}
.cr-hero__note{
  margin:16px 0 0;
  color:var(--ps-muted);
  font-size:13px;
  line-height:1.7;
}
.cr-hero__note b{color:var(--ps-ink)}
.cr-hero__back{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:22px;
  color:var(--ps-muted);
  font-size:13px;
  font-weight:700;
  border-bottom:1px solid transparent;
}
.cr-hero__back:hover{color:var(--ps-orange);border-bottom-color:currentColor}

.cr-steps{
  padding:26px;
  background:var(--ps-white);
  border:1px solid var(--ps-ink);
  box-shadow:14px 14px 0 var(--ps-band);
}
.cr-steps__head{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding-bottom:14px;
  margin-bottom:14px;
  border-bottom:1px solid var(--ps-line);
  font:700 10px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.09em;
  color:var(--ps-muted);
}
.cr-steps__list{
  margin:0;
  padding:0;
  list-style:none;
  counter-reset:cr-step;
}
.cr-steps__list li{
  display:grid;
  grid-template-columns:30px minmax(0,1fr);
  gap:12px;
  padding:12px 0;
  border-bottom:1px dashed var(--ps-line);
}
.cr-steps__list li:last-child{border-bottom:0;padding-bottom:0}
.cr-steps__list li::before{
  counter-increment:cr-step;
  content:counter(cr-step,decimal-leading-zero);
  font:700 11px ui-monospace,SFMono-Regular,Consolas,monospace;
  color:var(--ps-orange);
  padding-top:2px;
}
.cr-steps__list b{display:block;font-size:14.5px;letter-spacing:-.02em}
.cr-steps__list span{grid-column:2;display:block;margin-top:4px;color:var(--ps-body);font-size:12.5px;line-height:1.6}

/* BODY */
.cr-body{padding:74px 0 110px;background:#fff}
.cr-body__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(288px,332px);
  gap:52px;
  align-items:start;
}

/* FORM */
.cr-form{min-width:0}
.cr-set{
  padding:0 0 34px;
  margin:0 0 34px;
  border:0;
  border-bottom:1px solid var(--ps-line);
}
.cr-set:last-of-type{border-bottom:0;margin-bottom:26px;padding-bottom:0}
.cr-set__legend{
  display:flex;
  align-items:baseline;
  gap:12px;
  padding:0;
  margin-bottom:22px;
  font-size:20px;
  font-weight:760;
  letter-spacing:-.03em;
}
.cr-set__legend i{
  font-style:normal;
  font:700 10px ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.1em;
  color:var(--ps-orange);
}
.cr-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.cr-field{display:flex;flex-direction:column;min-width:0}
.cr-field--wide{grid-column:1/-1}
.cr-label{
  margin-bottom:8px;
  font-size:13.5px;
  font-weight:750;
  letter-spacing:-.01em;
}
.cr-req{color:var(--ps-orange);margin-left:3px}
.cr-opt{
  margin-left:6px;
  font-size:11px;
  font-weight:700;
  color:var(--ps-muted);
  letter-spacing:0;
}
.cr-input,
.cr-textarea,
.cr-select{
  width:100%;
  min-height:48px;
  padding:12px 13px;
  font:inherit;
  font-size:14.5px;
  color:var(--ps-ink);
  background:var(--ps-white);
  border:1px solid var(--ps-line);
  border-radius:0;
  transition:border-color .16s,box-shadow .16s;
}
.cr-textarea{min-height:118px;resize:vertical;line-height:1.7}
.cr-select{
  appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2377736d' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:11px;
  padding-right:36px;
}
.cr-input:focus,
.cr-textarea:focus,
.cr-select:focus{
  outline:none;
  border-color:var(--ps-ink);
  box-shadow:0 0 0 3px rgba(232,69,26,.14);
}
.cr-input.is-bad,
.cr-textarea.is-bad,
.cr-select.is-bad{border-color:var(--ps-orange);box-shadow:0 0 0 3px rgba(232,69,26,.14)}
.cr-help{margin:7px 0 0;color:var(--ps-muted);font-size:12px;line-height:1.6}
.cr-help b{color:var(--ps-ink)}
.cr-input--etc{margin-top:9px}
.cr-input--etc[hidden]{display:none}

/* 선택형 */
.cr-choices{display:flex;flex-wrap:wrap;gap:9px}
.cr-choice{
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:44px;
}
.cr-choice input{
  position:absolute;
  opacity:0;
  width:100%;
  height:100%;
  margin:0;
  cursor:pointer;
}
.cr-choice span{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:44px;
  padding:0 15px;
  background:var(--ps-white);
  border:1px solid var(--ps-line);
  color:var(--ps-body);
  font-size:13.5px;
  font-weight:700;
  transition:border-color .16s,background .16s,color .16s;
}
.cr-choice span::before{
  content:'';
  width:15px;
  height:15px;
  border:1px solid var(--ps-line);
  background:var(--ps-white);
  flex:none;
}
.cr-choice--radio span::before{border-radius:50%}
.cr-choice input:checked + span{
  border-color:var(--ps-ink);
  background:var(--ps-band);
  color:var(--ps-ink);
}
.cr-choice input:checked + span::before{
  border-color:var(--ps-orange);
  background:var(--ps-orange);
  box-shadow:inset 0 0 0 2.5px #fff;
}
.cr-choice input:focus-visible + span{outline:3px solid rgba(232,69,26,.34);outline-offset:2px}
.cr-choice input:hover + span{border-color:var(--ps-muted)}
.cr-choices.is-bad .cr-choice span{border-color:var(--ps-orange)}

/* 참고 URL */
.cr-urls{display:flex;flex-direction:column;gap:9px}

/* 동의·제출 */
.cr-consent{
  padding:20px 22px;
  background:var(--ps-paper);
  border:1px solid var(--ps-line);
}
.cr-consent p{margin:0;color:var(--ps-body);font-size:12.5px;line-height:1.75}
.cr-consent p + p{margin-top:8px}
.cr-consent a{color:var(--ps-ink);border-bottom:1px solid var(--ps-line);font-weight:700}
.cr-consent a:hover{color:var(--ps-orange);border-bottom-color:currentColor}
.cr-consent .form-privacy-policy{margin-bottom:12px}
.cr-consent .form-privacy-title{font-size:13px;font-weight:750;margin-bottom:7px}
.cr-consent .form-privacy-box{
  max-height:150px;
  overflow:auto;
  padding:12px;
  background:var(--ps-white);
  border:1px solid var(--ps-line);
  color:var(--ps-body);
  font-size:12.5px;
  line-height:1.7;
  white-space:pre-line;
}
.cr-consent .form-privacy-consent{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  margin-top:10px;
  font-size:13.5px;
  font-weight:700;
  cursor:pointer;
}
.cr-consent .form-privacy-consent input{width:16px;height:16px;accent-color:var(--ps-orange)}

.cr-msg{display:none;margin-top:16px;padding:13px 15px;font-size:13.5px;line-height:1.6;font-weight:700}
.cr-msg.err{display:block;background:#fdecec;border:1px solid #f3c9c9;color:#c92a2a}
.cr-submit{
  width:100%;
  min-height:56px;
  margin-top:18px;
  font-size:15.5px;
  font-weight:800;
  letter-spacing:-.01em;
}
.cr-submit:disabled{opacity:.62;cursor:progress;transform:none}
.cr-submit-note{margin:12px 0 0;color:var(--ps-muted);font-size:12.5px;line-height:1.65;text-align:center}

/* 완료 */
.cr-done{
  display:none;
  padding:64px 34px;
  text-align:center;
  background:var(--ps-paper);
  border:1px solid var(--ps-ink);
  box-shadow:14px 14px 0 var(--ps-band);
}
.cr-done__mark{
  width:64px;
  height:64px;
  margin:0 auto 22px;
  display:grid;
  place-items:center;
  border:2px solid var(--ps-teal);
  border-radius:50%;
  color:var(--ps-teal);
  font-size:30px;
  line-height:1;
}
.cr-done h2{margin:0 0 12px;font-size:clamp(24px,3vw,32px);letter-spacing:-.04em}
.cr-done p{margin:0 auto;max-width:460px;color:var(--ps-body);font-size:14.5px;line-height:1.8}
.cr-done .ps-actions{justify-content:center;margin-top:30px}

/* RAIL */
.cr-rail{position:sticky;top:98px;display:flex;flex-direction:column;gap:18px}
.cr-card{padding:22px;background:var(--ps-white);border:1px solid var(--ps-line)}
.cr-card--sum{background:var(--ps-band);border-color:var(--ps-ink)}
.cr-card__head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  padding-bottom:12px;
  margin-bottom:14px;
  border-bottom:1px solid var(--ps-line);
  font:700 10px ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.09em;
  color:var(--ps-muted);
}
.cr-card--sum .cr-card__head{border-bottom-color:rgba(23,22,26,.16)}
.cr-sum{margin:0;display:grid;gap:11px}
.cr-sum div{display:grid;grid-template-columns:74px minmax(0,1fr);gap:10px;align-items:start}
.cr-sum dt{font-size:12px;font-weight:750;color:var(--ps-muted)}
.cr-sum dd{margin:0;font-size:13px;font-weight:700;line-height:1.55;letter-spacing:-.01em}
.cr-card h3{margin:0 0 10px;font-size:15px;letter-spacing:-.025em}
.cr-card p{margin:0;color:var(--ps-body);font-size:13px;line-height:1.72}
.cr-card p + p{margin-top:9px}
.cr-card a{color:var(--ps-ink);font-weight:750;border-bottom:1px solid var(--ps-line)}
.cr-card a:hover{color:var(--ps-orange);border-bottom-color:currentColor}

/* 반응형 */
@media (max-width:1080px){
  .cr-body__grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .cr-rail{position:static;flex-direction:row;flex-wrap:wrap}
  .cr-card{flex:1 1 260px}
}
@media (max-width:900px){
  .cr-hero{padding:112px 0 52px}
  .cr-hero__grid{grid-template-columns:minmax(0,1fr);gap:34px}
  .cr-steps{box-shadow:9px 9px 0 var(--ps-band)}
}
@media (max-width:640px){
  .ps-shell{width:min(1180px,calc(100% - 34px))}
  .cr-body{padding:52px 0 78px}
  .cr-grid{grid-template-columns:minmax(0,1fr)}
  .cr-set{padding-bottom:28px;margin-bottom:28px}
  .cr-set__legend{font-size:18px;gap:9px}
  .cr-done{padding:46px 22px;box-shadow:9px 9px 0 var(--ps-band)}
  .cr-rail{flex-direction:column}
}