/**
 * @id: dialog
 * Figma alert-box (2111:373) + Components Preview showcase
 *
 * alert-box — w 300 · pt 28 · px 20 · pb 20 · radius 20
 *   txt / 400 — message
 *   btn-wrap(oneBtn|twoBtn) — pt 28 · gap 12
 *     button — h 48 · radius 100 · smTxt/500
 *     secondary rgba(0,0,0,.15) · primary var(--primary) 흰 글자
 *
 * ---- Skin tokens (사이트 차별화) ----
 * Preview: /components/#cp-dialog-skin
 * :root / .dialog 에서 --dialog* · --dialog-panel-bg 만 덮기
 * (로그인 폼형은 #cp-auth-skin · --auth-* )
 */

.dialog {
    --dialog-panel-bg: #fff;
    --dialog-panel-radius: var(--dialogRadius);
    --dialog-panel-pad-x: var(--dialogPadX);
    --dialog-panel-pad-y: var(--dialogPadY);
    --dialog-btn-primary-bg: var(--primary);
    --dialog-btn-primary-color: #fff;
    --dialog-btn-secondary-bg: rgba(0, 0, 0, 0.15);
    --dialog-btn-secondary-color: var(--txtBlack1);
    --dialog-btn-secondary-border: transparent;
}

/* ---- Components Preview layout ---- */
.dialog-demo {
    width: 100%;
    max-width: var(--in);
    margin: 0 auto;
    padding: 4rem var(--inPd);
    box-sizing: border-box;
}

.dialog-demo__block + .dialog-demo__block {
    margin-top: 5.6rem;
    padding-top: 5.6rem;
    border-top: 1px solid var(--borderColor1);
}

.dialog-demo__triggers-label {
    margin: 3.2rem 0 0.8rem;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--txtGray1, #71717a);
}

.dialog-demo__grid {
    display: grid;
    gap: var(--mainBoxPd);
}

.dialog-demo__grid--alert {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dialog-demo__grid--form {
    /* 폼형 모달은 폭이 넓어서(--dialogWForm) auto-fit으로 여러 열을 잡으면
       열이 좁아져 실제 크기보다 작게 보임 — 한 줄에 하나씩, 항상 실제 크기로 표시 */
    grid-template-columns: 1fr;
    justify-items: center;
}

.dialog-demo__cell {
    min-width: 0;
}

.dialog-demo__stage {
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    border-radius: var(--radius);
    background: var(--dialogOverlay);
}

.dialog-demo__stage--alert {
    min-height: 22rem;
    padding: 3.2rem 2rem;
}

.dialog-demo__stage--form {
    align-items: flex-start;
    min-height: 0;
    padding: 3.2rem 2rem;
}

.dialog-demo__panel {
    pointer-events: none;
    box-sizing: border-box;
    animation: none;
}

.dialog-demo__stage--form .dialog-demo__panel {
    width: min(var(--dialogWForm), 100%);
    max-width: var(--dialogWForm);
}

.dialog-demo__triggers {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 0.8rem;
}

.dialog-demo__trigger {
    min-height: 4.4rem;
    padding: 1rem 1.4rem;
    border: 1px solid var(--borderColor1);
    border-radius: var(--btnRadius);
    font-size: var(--smTxt);
    font-weight: 600;
    line-height: var(--txtLine);
    color: var(--txtBlack1);
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.dialog-demo__trigger:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 4%, #fff);
}

@media screen and (max-width: 768px) {
    .dialog-demo {
        padding: 3.2rem var(--inPd);
    }

    .dialog-demo__block + .dialog-demo__block {
        margin-top: 4rem;
        padding-top: 4rem;
    }

    .dialog-demo__grid--alert {
        grid-template-columns: 1fr;
    }

    .dialog-demo__stage--alert {
        min-height: 18rem;
        padding: 2.4rem 1.6rem;
    }

    .dialog-demo__stage--form {
        padding: 2.4rem 1.6rem;
    }

    .dialog-demo__triggers {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---- Figma alert-box (live + preview) ---- */
.alert-box.dialog__panel--sm,
.dialog__panel--sm.alert-box {
    box-sizing: border-box;
    width: min(var(--dialogW), 100%);
    max-width: var(--dialogW);
    padding: var(--dialogPadY) var(--dialogPadX) var(--dialogPadB, var(--dialogPadY));
    border-radius: var(--dialog-panel-radius, var(--dialogRadius));
    background: var(--dialog-panel-bg, #fff);
    text-align: center;
    box-shadow: var(--dialogShadow);
}

.alert-box .dialog__message,
.alert-box .txt.dialog__message {
    margin: 0;
    font-size: var(--dialogMsgSize);
    font-weight: 400;
    line-height: var(--txtLine);
    color: var(--txtBlack1);
    white-space: pre-line;
}

.alert-box .dialog__head {
    margin: 0;
}

.alert-box .btn-wrap,
.alert-box .dialog__actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: var(--dialogBtnGap);
    width: 100%;
    padding-top: var(--dialogContentBtnGap);
    margin: 0;
}

.alert-box .btn-wrap .dialog__btn,
.alert-box .dialog__actions .dialog__btn {
    box-sizing: border-box;
    flex: 1 0 0;
    height: var(--dialogBtnH);
    min-height: var(--dialogBtnH);
    padding: 0 var(--dialogBtnPadX);
    border: 0;
    border-radius: 100px;
    font-size: var(--dialogBtnFontSize);
    font-weight: var(--dialogBtnFontWeight);
    line-height: var(--txtLine);
    cursor: pointer;
}

/* oneBtn — Figma w full */
.alert-box .btn-wrap--oneBtn .dialog__btn:only-child,
.alert-box .dialog__actions.btn-wrap--oneBtn .dialog__btn:only-child,
.alert-box .dialog__actions .dialog__btn:only-child {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
}

/* twoBtn — Figma flex 1 · gap 12 */
.alert-box .btn-wrap--twoBtn .dialog__btn,
.alert-box .dialog__actions.btn-wrap--twoBtn .dialog__btn {
    flex: 1 0 0;
    width: auto;
    min-width: 0;
}

.alert-box .dialog__btn--primary,
.alert-box .dialog__btn--danger {
    border: 0;
    background: var(--dialog-btn-primary-bg, var(--dialogBtnPrimary));
    color: var(--dialog-btn-primary-color, #fff);
}

.alert-box .dialog__btn--secondary {
    border: 0;
    background: var(--dialog-btn-secondary-bg, rgba(0, 0, 0, 0.15));
    color: var(--dialog-btn-secondary-color, var(--txtBlack1));
}

/* ============================================
   Preview — #cp-dialog-skin
   ============================================ */

.dialog-skin-demo {
    max-width: 960px;
}

.dialog-skin-demo__intro {
    margin: 0 0 1.6rem;
    font-size: var(--smTxt);
    line-height: var(--txtLine);
    color: var(--txtGray1);
}

.dialog-skin-demo__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem;
}

.dialog-skin-demo__cell {
    margin: 0;
    padding: 1.2rem;
    border: 1px dashed rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    background: #fafafa;
}

.dialog-skin-demo__label {
    margin: 0 0 0.8rem;
    font-size: var(--tinyTxt);
    font-weight: 600;
    color: var(--txtGray1);
}

.dialog-skin-demo__label code {
    font-weight: 500;
    color: var(--txtBlack1);
}

.dialog-skin-demo__overlay {
    height: 72px;
    border-radius: 10px;
    background: var(--dialogOverlay);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.dialog-skin-demo__panel-chip {
    min-height: 88px;
    border-radius: var(--dialog-panel-radius, var(--dialogRadius));
    background: var(--dialog-panel-bg, #fff);
    box-shadow: var(--dialogShadow);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.dialog-skin-demo__btns {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dialogBtnGap);
    justify-content: center;
}

.dialog-skin-demo__assemble {
    margin-top: 2rem;
    padding-top: 1.6rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.dialog-skin-demo__stage {
    display: flex;
    justify-content: center;
    padding: 2.4rem 1.2rem;
    border-radius: 16px;
    background: var(--dialogOverlay);
}

.dialog-skin-demo--accent {
    --dialogOverlay: rgba(17, 17, 17, 0.55);
    --dialog-panel-bg: #111;
    --dialog-panel-radius: 24px;
    --dialogBtnPrimary: #3182F6;
    --dialog-btn-primary-bg: #3182F6;
    --dialog-btn-primary-color: #fff;
    --dialog-btn-secondary-bg: transparent;
    --dialog-btn-secondary-color: #fff;
    --dialog-btn-secondary-border: rgba(255, 255, 255, 0.45);
}

.dialog-skin-demo--accent .dialog__panel--sm .dialog__message {
    color: #fff;
}

@media (max-width: 768px) {
    .dialog-skin-demo__grid {
        grid-template-columns: 1fr;
    }
}