/* COMEDI 플랫폼 2판(2026-10-19 작업 X-CO) — 단계형 요청 폼 · 방문 준비 칸 · 견적 별도 항목 표 · 예약 관리 화면. 사이트 변수(cm.css)·U판(u.css) 모양을 그대로 따른다. */

/* 1) 단계형 요청 폼(상담 화면 #inquiry 안) */
.xw [hidden],.xw[hidden]{display:none!important}
.xw{display:flex;flex-direction:column;gap:1.1rem;margin-top:1.2rem}
.xw-top{display:flex;flex-direction:column;gap:.5rem}
.xw-count{font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--rose-ink,#b45a74)}
.xw-bar{height:4px;border-radius:4px;background:var(--line,#e6dfe1);overflow:hidden}
.xw-bar i{display:block;height:100%;width:0;background:var(--rose-ink,#b45a74);transition:width .3s ease}
.xw-screen{display:flex;flex-direction:column;gap:1.2rem;outline:none;min-height:9rem}
.xw-field{display:flex;flex-direction:column;gap:.55rem;min-width:0}
.xw-label{font-size:1.15rem;font-weight:700;line-height:1.35;color:var(--ink,#1d1a22);margin:0}
.xw-help{font-size:.88rem;color:var(--ink-3,#8a8590);margin:0}
.xw-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.xw-opt{font:inherit;text-align:left;padding:.95rem 1.05rem;min-height:52px;border-radius:14px;border:1px solid var(--line,#e6dfe1);background:var(--white,#fff);color:var(--ink,#1d1a22);cursor:pointer;transition:border-color .2s,background-color .2s;overflow-wrap:anywhere}
.xw-opt:hover{border-color:var(--rose-ink,#b45a74)}
.xw-opt:focus-visible,.xw-back:focus-visible,.xw-more:focus-visible,.xw-edit:focus-visible,.xw-rm:focus-visible{outline:3px solid var(--rose-ink,#b45a74);outline-offset:2px}
.xw-opt[aria-checked=true]{border-color:var(--rose-ink,#b45a74);background:var(--pearl,#f7f4f1);box-shadow:inset 0 0 0 1px var(--rose-ink,#b45a74);font-weight:700}
.xw input,.xw select,.xw textarea{font:inherit;width:100%;box-sizing:border-box;padding:.8rem .9rem;border:1px solid var(--line,#e6dfe1);border-radius:12px;background:var(--white,#fff);color:var(--ink,#1d1a22);min-height:48px}
.xw textarea{min-height:7rem;resize:vertical}
.xw-dates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
.xw-more{align-self:flex-start;font:inherit;font-weight:700;font-size:.92rem;background:none;border:0;padding:.3rem 0;color:var(--rose-ink,#b45a74);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.xw-file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.xw-files{display:flex;flex-direction:column;gap:.4rem}
.xw-files li{display:flex;justify-content:space-between;gap:.8rem;align-items:center;padding:.55rem .8rem;border:1px solid var(--line,#e6dfe1);border-radius:10px;font-size:.9rem;overflow-wrap:anywhere}
.xw-rm{font:inherit;font-size:.85rem;background:none;border:0;color:var(--ink-2,#4a4550);cursor:pointer;text-decoration:underline}
.xw-check{display:flex;gap:.65rem;align-items:flex-start;font-size:.92rem;line-height:1.55;color:var(--ink-2,#4a4550)}
.xw-check input{width:1.15rem;height:1.15rem;min-height:0;flex:none;margin-top:.2rem;padding:0}
.xw-nav{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.xw-back{font:inherit;font-weight:700;background:none;border:1px solid var(--line,#e6dfe1);border-radius:999px;padding:.7rem 1.2rem;min-height:44px;color:var(--ink,#1d1a22);cursor:pointer}
.xw-back[hidden]{display:none}
.xw-nav .xw-next{margin-left:auto}
.xw-msg{margin:0;font-size:.92rem;color:var(--ink-2,#4a4550);min-height:1.2em}
.xw-msg[data-state=err]{color:#a3263f}
.xw-sum{border:1px solid var(--line,#e6dfe1);border-radius:14px;padding:.8rem 1rem;background:var(--pearl,#f7f4f1)}
.xw-sum summary{cursor:pointer;font-weight:700}
.xw-sum dl{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);gap:.35rem .9rem;margin-top:.7rem;font-size:.88rem}
.xw-sum dt{color:var(--ink-3,#8a8590)}
.xw-sum dd{margin:0;overflow-wrap:anywhere}
.xw-edit{font:inherit;font-size:.82rem;background:none;border:0;color:var(--rose-ink,#b45a74);cursor:pointer;text-decoration:underline;padding:0}
.xw-resume{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;padding:1rem 1.1rem;border:1px solid var(--line,#e6dfe1);border-radius:14px;background:var(--pearl,#f7f4f1)}
.xw-resume p{flex:1 1 100%;margin:0;font-weight:700}
.xw-done{display:flex;flex-direction:column;gap:.6rem;padding:1.1rem 1.2rem;border-left:4px solid #1f6b46;border-radius:0 14px 14px 0;background:var(--white,#fff)}
.xw-ok{margin:0;font-weight:700;color:#1f6b46}
.xw-ref{margin:0}
.xw-ref a{font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* 2) 방문 준비 칸(시술 상세 04 · 상담 화면) */
.x-visit{display:flex;flex-direction:column;gap:1rem}
.x-visit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
.x-visit-grid li{display:flex;flex-direction:column;gap:.3rem;padding:1rem 1.1rem;border:1px solid var(--line,#e6dfe1);border-radius:14px;background:var(--white,#fff);min-width:0}
.x-visit-grid b{font-size:.98rem}
.x-visit-grid span{font-size:.92rem;line-height:1.6;color:var(--ink-2,#4a4550)}
.x-visit-grid li:last-child:nth-child(odd){grid-column:1/-1}
.relwrap.light .x-visit{margin-bottom:clamp(2rem,4vw,3rem)}

/* 3) 견적 별도 항목 표(시술 상세 05) */
.x-extras{display:flex;flex-direction:column;gap:1rem}
.x-ex-wrap{overflow-x:auto;border:1px solid var(--line,#e6dfe1);border-radius:14px;background:var(--white,#fff)}
.x-ex{width:100%;border-collapse:collapse;font-size:.95rem}
.x-ex th,.x-ex td{padding:.85rem 1rem;border-bottom:1px solid var(--line,#e6dfe1);text-align:left;vertical-align:top}
.x-ex tr:last-child td{border-bottom:0}
.x-ex thead th{font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3,#8a8590);background:var(--pearl,#f7f4f1)}
.x-ex tbody th{font-weight:700;white-space:nowrap;width:14rem}
.x-ex td{color:var(--ink-2,#4a4550);line-height:1.6}
.x-method{display:flex;flex-direction:column;gap:.45rem;padding:1rem 1.2rem;border-radius:var(--r,14px);background:var(--pearl-2,#f2ece8);color:var(--ink-2,#4a4550);font-size:.95rem;line-height:1.65}
.x-method p{margin:0}

/* 4) 예약 관리 화면·요청 페이지 추가분 */
.x-kv{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:.4rem .9rem;margin:1rem 0 0}
.x-kv dt{color:var(--ink-3,#8a8590);font-size:.9rem}
.x-kv dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.u-badge.x-wait{background:#8a6a12}
.u-badge.x-off{background:var(--ink-3,#8a8590)}
.x-note{margin:.9rem 0 0;padding:.7rem .9rem;border-radius:10px;background:var(--pearl,#f7f4f1);color:var(--ink-2,#4a4550);font-size:.92rem}
.x-acts h2{margin-bottom:.8rem}
.x-row{display:flex;flex-wrap:wrap;gap:.6rem}
.x-form{display:flex;flex-direction:column;gap:.9rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line,#e6dfe1)}
.x-form fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:.45rem}
.x-form legend{font-weight:700;margin-bottom:.4rem}
.x-radio{display:flex;gap:.6rem;align-items:center;min-height:40px}
.x-lab{display:flex;flex-direction:column;gap:.35rem;font-weight:600;font-size:.92rem;margin:0}
.x-dates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.x-dates .x-lab{grid-column:1/-1}
.x-form input:not([type=radio]),.x-form select,.x-form textarea{font:inherit;width:100%;box-sizing:border-box;padding:.7rem .8rem;border:1px solid var(--line,#e6dfe1);border-radius:10px;background:var(--white,#fff);min-height:44px}
.x-form .u-btn{align-self:flex-start}
.u-btn.x-danger{background:#a3263f;border-color:#a3263f}
.u-btn.ghost{background:transparent;color:var(--ink,#1d1a22)}
.x-link{display:inline-block;margin-top:.4rem;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.x-prep-list{display:flex;flex-direction:column;gap:.8rem}
.x-prep-list li{display:flex;flex-direction:column;gap:.2rem}
.x-prep-list span{color:var(--ink-2,#4a4550);font-size:.93rem}

@media (max-width:760px){
  .xw-opts,.x-visit-grid{grid-template-columns:minmax(0,1fr)}
  .xw-dates,.x-dates{grid-template-columns:minmax(0,1fr)}
  .xw-sum dl,.x-kv{grid-template-columns:minmax(0,1fr)}
  .xw-sum dt,.x-kv dt{margin-top:.35rem}
  .x-visit-grid li:last-child:nth-child(odd){grid-column:auto}
  .x-ex tbody th{white-space:normal;width:auto}
  .x-ex thead{display:none}
  .x-ex,.x-ex tbody,.x-ex tr,.x-ex th,.x-ex td{display:block;width:auto}
  .x-ex tbody th{padding-bottom:.2rem;border-bottom:0}
  .x-ex td{padding-top:0}
}