@charset "utf-8";

/* 원본 퍼블리싱에 없던 요소만 최소한으로 보충한다.
   layout.css / shop.css 를 건드리지 않기 위해 별도 파일로 뒀다. */

.flash-msg {
    padding: 14px 0;
    font-size: 15px;
    text-align: center;
}
.flash-msg.ok  { background: #eefaf2; color: #1b7a45; }
.flash-msg.err { background: #fdeeee; color: #b42318; }

/* 상품 썸네일이 없을 때의 자리표시 */
.pic .no-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #f4f5f7;
    color: #b9bec7;
    font-size: 13px;
    letter-spacing: -0.02em;
}

/* 폼 에러 */
.field-error {
    display: block;
    margin-top: 6px;
    color: #d92d20;
    font-size: 13px;
    line-height: 1.5;
}

.form-table input[type=text],
.form-table input[type=tel],
.form-table input[type=email],
.form-table input[type=search],
.form-table input[type=number],
.form-table select,
.form-table textarea {
    width: 100%;
    max-width: 420px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid #ddd;
    background: #fff;
    font-size: 15px;
    box-sizing: border-box;
}
.form-table textarea { height: auto; padding: 10px 12px; }

.form-table { width: 100%; border-top: 2px solid #222; }
.form-table th,
.form-table td { padding: 14px 16px; border-bottom: 1px solid #eee; text-align: left; vertical-align: middle; }
.form-table th { width: 160px; background: #fafafa; font-weight: 600; font-size: 15px; }
.form-table .req { color: #e5484d; }

@media (max-width: 720px) {
    .form-table th,
    .form-table td { display: block; width: auto; }
    .form-table th { border-bottom: 0; padding-bottom: 6px; }
    .form-table input[type=text],
    .form-table input[type=tel],
    .form-table input[type=email],
    .form-table select { max-width: none; }
}

/* 견적 마법사 — 실시간 금액 표시 (원본에는 없던 개선분) */
.sell-quote-bar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    padding: 20px 24px;
    background: #1f2d3d;
    color: #fff;
    border-radius: 12px;
}
.sell-quote-bar .model { font-size: 15px; opacity: .75; }
.sell-quote-bar .name  { margin-top: 4px; font-size: 20px; font-weight: 700; }
.sell-quote-bar .amount { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; }
.sell-quote-bar .amount small { font-size: 16px; font-weight: 700; margin-left: 2px; }
.sell-quote-bar .breakdown { font-size: 13px; opacity: .8; text-align: right; line-height: 1.6; }
.sell-quote-bar .breakdown .minus { color: #ffb4b4; }
.sell-quote-bar .breakdown .plus  { color: #a7f3c3; }

@media (max-width: 720px) {
    .sell-quote-bar { flex-direction: column; align-items: flex-start; padding: 16px; }
    .sell-quote-bar .breakdown { text-align: left; }
}

/* 견적 요약 표 */
.quote-summary { width: 100%; margin-top: 20px; border-top: 2px solid #222; }
.quote-summary th,
.quote-summary td { padding: 11px 14px; border-bottom: 1px solid #eee; font-size: 15px; }
.quote-summary th { text-align: left; font-weight: 500; color: #666; }
.quote-summary td { text-align: right; }
.quote-summary .minus { color: #d92d20; }
.quote-summary .plus  { color: #12805c; }
.quote-summary tfoot th,
.quote-summary tfoot td { font-size: 18px; font-weight: 800; color: #111; border-bottom: 2px solid #222; }

/* 진행 상태 바 */
.status-flow { display: flex; gap: 4px; margin: 24px 0 8px; }
.status-flow li { flex: 1; text-align: center; list-style: none; }
.status-flow li .bar { height: 6px; border-radius: 3px; background: #e6e8ec; }
.status-flow li.done .bar { background: #1f6feb; }
.status-flow li p { margin-top: 8px; font-size: 13px; color: #98a2b3; }
.status-flow li.now p { color: #1f6feb; font-weight: 700; }