/* 고객 화면 시제품 v1_4 — site.css(모닥 초안 v1_3 그대로) 위에 더하는 꼴만. 누르는 곳 48px · 본문 16px 이상 */
.presets { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0.75rem 0; }
@media (min-width: 640px) { .presets { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .presets { grid-template-columns: repeat(4, 1fr); } }
.opt .small { color: var(--muted); font-size: 1rem; margin: 0.2rem 0 0; }
.opt .quote { display: inline-flex; align-items: center; min-height: 48px; font-weight: 700; }
.billing { margin: 0.5rem 0 0; }
.billing li { margin: 0.2rem 0; }
.billing li, .tt .tn, .opt .small, .opt > p { text-wrap: pretty; }
.preset { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.1rem; min-height: 64px;
  padding: 0.6rem 1rem; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--fg);
  font: inherit; text-align: left; cursor: pointer; }
.preset[aria-pressed="true"] { border: 2px solid var(--accent); }
.preset .pn { font-weight: 700; }
.preset .pv { font-size: 1rem; color: var(--muted); font-variant-numeric: tabular-nums; }
fieldset.tiers { min-width: 0; }
fieldset.tiers > legend { float: left; width: 100%; padding: 0; font-size: 1.1rem; }
fieldset.tiers > legend + * { clear: both; }
.tier { align-items: flex-start; padding: 0.35rem 0; border-top: 1px solid var(--line); }
.tier input { margin-top: 0.2rem; }
.tt { display: flex; flex-direction: column; }
.tt .tn { font-weight: 700; }
.tt .tv { color: var(--muted); font-variant-numeric: tabular-nums; }
.qty.custom { margin: 0.4rem 0 0.2rem; }
.qty.custom label { flex: 1 1 100%; font-weight: 700; }
.pfoot { border-top: 1px solid var(--line); margin-top: 3rem; padding: 1.5rem 0 1rem; color: var(--muted); font-size: 1rem; }
.pfoot p { margin: 0; }
.form input[type="password"], .form input[type="number"] {
  width: 100%; max-width: 28em; min-height: 48px; padding: 0.6rem 0.75rem; font: inherit; color: var(--fg);
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 10px;
}
.form input:disabled { opacity: 1; color: var(--muted); border-style: dashed; }
.who { color: var(--muted); }
.status { border-left: 3px solid var(--accent); padding-left: 0.8rem; font-weight: 700; }
.status:focus { outline: none; }

.rlist { list-style: none; padding: 0; margin: 0.5rem 0; }
.rlist li { border-top: 1px solid var(--line); padding: 0.25rem 0 0.5rem; margin: 0; }
.rlist li:last-child { border-bottom: 1px solid var(--line); }
.rlist a { display: inline-flex; align-items: center; min-height: 48px; font-weight: 700; }
.rlist .note { margin: 0; }

.swot { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0.75rem 0; }
@media (min-width: 640px) { .swot { grid-template-columns: 1fr 1fr; } }
.swot section { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.1rem; }
.swot h3 { margin: 0 0 0.3rem; font-size: 1.15rem; }
.swot p { margin: 0; }

.opt { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 0.9rem 1rem; margin: 0.75rem 0; }
.opt.off { border-style: dashed; }
.optl { display: flex; align-items: center; gap: 0.6rem; min-height: 48px; cursor: pointer; }
.optn { font-weight: 700; margin: 0; }
.opt p { margin: 0.25rem 0; }
.opt .what { color: var(--muted); }
.opt .line { font-weight: 700; }
.opt ul { margin: 0.5rem 0 0; }
.temp { display: inline-block; margin: 0.2rem 0; padding: 0 0.6rem; border: 1.5px solid var(--accent); border-radius: 999px;
  color: var(--accent); font-size: 1rem; font-weight: 700; line-height: 1.6; }
.qty { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.qty .optn { flex: 1 1 100%; }
.form .qty input[type="number"] { width: 5.5rem; text-align: center; }
.step { min-width: 48px; min-height: 48px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface);
  color: var(--fg); font: inherit; font-size: 1.3rem; font-weight: 700; cursor: pointer; }
.spend label { display: block; font-weight: 700; margin: 0.6rem 0 0.3rem; }

.sum { border: 2px solid var(--fg); border-radius: 14px; padding: 1rem 1.1rem; background: var(--surface); }
.sum > h2 { margin-top: 0; }
.sumrow { border-top: 1px solid var(--line); padding: 0.7rem 0; }
.sumh { font-weight: 700; margin: 0 0 0.2rem; }
.sumrow dl { margin: 0; display: grid; grid-template-columns: 1fr; }
.sumrow dl div { display: flex; justify-content: space-between; gap: 1rem; }
.sumrow dt { color: var(--muted); }
.sumrow dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
#sum-n dd.t { color: var(--accent); font-size: 1.3rem; }
@media (min-width: 601px) {
  .sumrow dl { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .sumrow dl div { display: block; }
  .sumrow dd { text-align: left; }
}
.confirm { border: 2px solid var(--accent); border-radius: 14px; padding: 1rem 1.1rem; margin: 1.5rem 0; background: var(--surface); }
.confirm h2 { margin-top: 0; }
.confirm h2:focus { outline: none; }
.btns { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.btn2 { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 1.4rem;
  border: 1.5px solid var(--fg); border-radius: 999px; background: transparent; color: var(--fg); font: inherit;
  font-weight: 700; font-size: 1.05rem; cursor: pointer; }
.pgbox { border: 2px dashed var(--muted); border-radius: 14px; padding: 2rem 1.1rem; text-align: center; background: var(--surface); }
.pgbox .note { margin: 0.5rem auto 0; }

.ex { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0; }
.ex p { flex: 1 1 100%; margin: 0; color: var(--muted); }
.ex button { min-height: 48px; padding: 0.4rem 1rem; border: 1.5px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--fg); font: inherit; text-align: left; cursor: pointer; }