/* =========================================================
   도움말 라벨 / 툴팁
========================================================= */
.labelWithHelp {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.helpWrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* helpIcon은 button 공통 스타일(width:100%, 노랑 배경) 무시 */
.helpIcon {
    all: unset;
    box-sizing: border-box;

    width: 18px !important;
    height: 18px !important;
    padding: 0 !important;
    flex: 0 0 auto !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 999px !important;
    border: 1px solid var(--line) !important;

    background: var(--acc) !important;
    color: var(--muted) !important;

    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 18px !important;

    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent;
}

.helpIcon:hover {
    border-color: var(--acc) !important;
    box-shadow: var(--focus-ring) !important;
    color: var(--txt) !important;
}

.helpTooltip {
    position: absolute;
    top: 26px;
    left: 0;

    width: min(320px, calc(100vw - 40px));
    padding: 10px 12px;

    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow);

    font-size: 12px;
    line-height: 1.55;
    color: var(--txt);

    display: none;
    z-index: 999;
}

.helpTooltip.show {
    display: block;
}

.helpTooltip::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 10px;

    width: 10px;
    height: 10px;

    background: #fff;
    border-left: 1px solid var(--line);
    border-top: 1px solid var(--line);
    transform: rotate(45deg);
}

.helpTooltip b {
    font-weight: 900;
}

.helpTooltip .muted {
    color: var(--muted);
}

.helpTooltip .hr {
    height: 1px;
    background: var(--line);
    margin: 8px 0;
}

/* =========================================================
   버튼 기본
========================================================= */
button {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;

    border-radius: 14px;
    border: 1px solid var(--line);

    background: var(--acc);
    color: #111111;

    font-size: var(--fs-14);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;

    outline: none;
    cursor: pointer;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease,
        filter 0.18s ease;
}

button:hover {
    filter: none;
}

button:active {
    transform: translateY(0);
}

/* =========================================================
   공통 액션 버튼
========================================================= */
.actionBtn {
    min-height: 46px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* =========================================================
   기본 고스트 버튼
========================================================= */
.ghostBtn {
    background: #fff !important;
    color: var(--txt) !important;
    border: 1px solid var(--line) !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
}

.ghostBtn:hover {
    background: #f9fafb !important;
    border-color: #d0d5dd !important;
    color: var(--txt) !important;
    filter: none !important;
}

/* =========================================================
   1단계: 유틸 버튼
   이미지 선택 / 배경색 선택
========================================================= */
.softActionBtn {
    background: #ffffff !important;
    color: var(--txt) !important;
    border: 1px solid #d0d5dd !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04) !important;
}

.softActionBtn:hover {
    background: #f9fafb !important;
    border-color: #bfc7d4 !important;
    color: var(--txt) !important;
    filter: none !important;
    transform: translateY(-1px);
}

.softActionBtn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03) !important;
}

/* 유틸 버튼 높이 살짝 축소 */
#fileBtn,
#bgPickBtn {
    min-height: 42px;
}

/* =========================================================
   2단계: 보조 핵심 버튼
   시안 추가
========================================================= */
.secondaryActionBtn {
    background: #fff8e8 !important;
    color: var(--txt) !important;
    border: 1px solid #f2d27a !important;
    box-shadow: 0 2px 6px rgba(16, 24, 40, 0.05);
}

.secondaryActionBtn:hover {
    background: #fef1c7 !important;
    border-color: #e9c35d !important;
    color: var(--txt) !important;
    filter: none !important;
    transform: translateY(-1px);
}

.secondaryActionBtn:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(16, 24, 40, 0.04);
}

/* =========================================================
   3단계: 최종 메인 버튼
   시안 확정하기
========================================================= */
.confirmBtn {
    background: #f4c95d !important;
    border: 1px solid #efc24f !important;
    color: #111111 !important;
    box-shadow: 0 4px 10px rgba(244, 201, 93, 0.22);
}

.confirmBtn:hover {
    background: #efc24f !important;
    border-color: #e5b63e !important;
    color: #111111 !important;
    filter: none !important;
    transform: translateY(-1px);
}

.confirmBtn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(244, 201, 93, 0.18);
}

/* =========================================================
   견적 전용 버튼
========================================================= */
.quoteBtn {
    background: #111111;
    border: 1px solid #111111;
    color: #ffffff;
    font-weight: 700;
    border-radius: 14px;
    box-shadow: 0 2px 6px rgba(16, 24, 40, 0.12);
}

.quoteBtn:hover {
    background: #000000;
    border-color: #000000;
    color: #ffffff;
    filter: none;
    transform: translateY(-1px);
}

.quoteBtn:active {
    transform: translateY(0);
}

/* =========================================================
   위험 버튼
========================================================= */
.dangerBtn {
    width: auto;
    padding: 10px 14px;
    min-height: 42px;

    border-radius: 12px;
    font-weight: 700;

    background: #fff;
    color: #b42318;
    border: 1px solid #f0c7c2;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
}

.dangerBtn:hover {
    border-color: #e7a9a2;
    background: #fef3f2;
    color: #b42318;
    filter: none;
}

.dangerBtn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: none;
    transform: none;
    box-shadow: none;
}

/* =========================================================
   미니 버튼
========================================================= */
.miniBtn {
    width: auto;
    min-height: auto;
    padding: 6px 10px;

    font-size: var(--fs-12);
    font-weight: 700;

    border-radius: 10px;
    background: #ffffff;
    color: var(--txt);
    border: 1px solid var(--line);
    box-shadow: none;
}

.miniBtn:hover {
    background: #f9fafb;
    border-color: #d0d5dd;
    color: var(--txt);
    filter: none;
}

/* =========================================================
   버튼 묶음
========================================================= */
.btns {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.btns button {
    flex: 1;
    min-width: 160px;
}

/* =========================================================
   체크라인 / 인라인 옵션
========================================================= */
.inlineCheck {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--txt);
}

/* =========================================================
   뱃지 / 태그 / 텍스트
========================================================= */
.pill {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    font-size: var(--fs-12);
    color: var(--muted);
}

.pill b {
    color: var(--txt);
}

.tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: var(--fs-11);
    color: var(--muted);
    background: #f2f4f7;
}

.hint {
    font-size: var(--fs-12);
    color: var(--muted);
    line-height: 1.6;
}

.warn,
.ok {
    font-size: var(--fs-12);
    margin-top: 8px;
    white-space: pre-line;
}

.warn {
    color: var(--bad);
}

.ok {
    color: var(--ok);
}

.red {
    color: var(--bad);
}

.yellow {
    color: #fdb022;
}

/* =========================================================
   버튼 비활성 상태
========================================================= */
button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
    filter: none !important;
}

/* =========================================================
   주문자 정보 입력 상태 박스
========================================================= */
.formReadyBox {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #fafbfc;
    padding: 14px 16px;
    display: grid;
    gap: 6px;
}

.formReadyTitle {
    font-size: var(--fs-13);
    font-weight: 700;
    color: var(--txt);
}

.formReadyDesc {
    font-size: var(--fs-12);
    color: var(--muted);
    line-height: 1.6;
}

/* =========================================================
   가운데 작업 영역 액션 바
========================================================= */
.editorActionBar {
    margin-top: 14px;
    display: flex;
}

.editorActionBar button {
    width: 100%;
}