/* =========================
   Common UI for Carrier Forms
   ========================= */

:root {
    --c-ink: #222;
    --c-muted: #666;
    --c-line: #d9d9d9;
    --c-soft: #f7f7f7;
    --c-bg: #fff;
    /* carrier theme vars (override in sk/kt/lg) */
    --c-accent: #333;
    --c-accent-weak: #f2f2f2;
    --c-radius: 12px;
    --c-card-radius: 10px;
}

.carrier {
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans KR", Arial, sans-serif;
    color: var(--c-ink);
}

    .carrier .muted {
        color: var(--c-muted);
    }

    .carrier .money {
        font-variant-numeric: tabular-nums;
    }

    /* ===== Top Bar ===== */
    .carrier .c-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        padding: 14px 16px 10px;
    }

    .carrier .c-brand {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .carrier .c-logo-box {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        display: grid;
        place-items: center;
        font-weight: 900;
        color: #fff;
        background: var(--c-accent);
    }

    .carrier .c-title {
        margin: 0;
        font-size: 18px;
        line-height: 1.2;
        font-weight: 900;
        letter-spacing: -.2px;
    }

    .carrier .c-sub {
        margin-top: 4px;
        font-size: 12px;
        color: var(--c-muted);
    }

    .carrier .c-meta {
        text-align: right;
        font-size: 12px;
        color: var(--c-muted);
    }

        .carrier .c-meta .row {
            margin-bottom: 6px;
        }

    /* ===== Support Pills ===== */
    .carrier .c-support {
        display: flex;
        justify-content: flex-end;
        gap: 12px;
        padding: 0 16px 10px;
        flex-wrap: wrap;
    }

    .carrier .c-pill {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 6px 10px;
        border: 1px solid var(--c-line);
        border-radius: 999px;
        background: #fff;
        color: #333;
        user-select: none;
        font-size: 12px;
    }

        .carrier .c-pill input {
            accent-color: var(--c-accent);
        }

    /* ===== Section Frame ===== */
    .carrier .c-box {
        border: 2px solid var(--c-accent);
        border-radius: var(--c-radius);
        padding: 12px;
        margin: 10px 0;
        position: relative;
        background: var(--c-bg);
    }

    .carrier .c-box-title {
        position: absolute;
        top: -11px;
        left: 12px;
        background: var(--c-bg);
        padding: 0 10px;
        font-weight: 900;
        font-size: 13px;
        color: var(--c-accent);
        letter-spacing: -.2px;
    }

    /* ===== Layout Grids ===== */
    .carrier .c-grid-3 {
        display: grid;
        grid-template-columns: 1.2fr 1fr 1fr;
        gap: 12px;
    }

    .carrier .c-service-3 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 12px;
    }

    .carrier .c-detail-grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1.25fr;
        gap: 12px;
        align-items: start;
    }

    .carrier .c-bottom-grid {
        display: grid;
        grid-template-columns: 1.35fr .65fr;
        gap: 12px;
        align-items: start;
    }

    /* ===== Card ===== */
    .carrier .c-card {
        border: 1px solid var(--c-line);
        border-radius: var(--c-card-radius);
        padding: 10px;
        background: #fff;
    }

    .carrier .c-card-title {
        font-weight: 900;
        font-size: 13px;
        margin-bottom: 10px;
    }

    /* ===== Form ===== */
    .carrier .c-form {
        display: grid;
        gap: 8px;
    }

    .carrier .c-row {
        display: grid;
        grid-template-columns: 92px 1fr;
        gap: 8px;
        align-items: center;
    }

    .carrier .c-row-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .carrier .c-label {
        font-size: 12px;
        font-weight: 800;
        color: #333;
    }

        .carrier .c-label.small {
            font-weight: 800;
            color: #444;
            margin-bottom: 6px;
        }

    .carrier .c-input,
    .carrier .c-select,
    .carrier .c-textarea {
        width: 100%;
        border: 1px solid var(--c-line);
        border-radius: 8px;
        padding: 9px 10px;
        font-size: 13px;
        outline: none;
        background: #fff;
    }

    .carrier .c-textarea {
        min-height: 120px;
        resize: vertical;
    }

        .carrier .c-input:focus,
        .carrier .c-select:focus,
        .carrier .c-textarea:focus {
            border-color: var(--c-accent);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 18%, transparent);
        }

    /* ===== Segmented Buttons (radio) ===== */
    .carrier .c-seg {
        display: flex;
        border: 1px solid var(--c-line);
        border-radius: 10px;
        overflow: hidden;
        background: #fff;
    }

        .carrier .c-seg input {
            display: none;
        }

        .carrier .c-seg label {
            padding: 8px 10px;
            font-size: 12px;
            cursor: pointer;
            border-right: 1px solid var(--c-line);
            user-select: none;
            color: #333;
            white-space: nowrap;
        }

            .carrier .c-seg label:last-child {
                border-right: none;
            }

            /* 체크 상태 표현은 ASP:RadioButton 특성상
   서버에서 label에 .is-on 클래스를 붙이는 방식이 안정적 */
            .carrier .c-seg label.is-on {
                background: var(--c-accent);
                color: #fff;
                border-right-color: transparent;
            }

    /* ===== Services ===== */
    .carrier .c-service {
        border: 1px solid var(--c-line);
        border-radius: 10px;
        padding: 10px;
        background: #fff;
        min-height: 92px;
    }

    .carrier .c-service-title {
        font-weight: 900;
        font-size: 13px;
        margin-bottom: 8px;
    }

    /* ===== Sum/Pay Boxes ===== */
    .carrier .c-sum {
        text-align: right;
        border-top: 1px dashed var(--c-line);
        padding-top: 10px;
        min-width: 220px;
    }

        .carrier .c-sum .amt {
            font-size: 18px;
            font-weight: 900;
            color: var(--c-accent);
            margin-top: 3px;
        }

    .carrier .c-paybox {
        border: 1px solid var(--c-line);
        border-radius: 10px;
        padding: 10px;
        background: #fff;
        margin-bottom: 10px;
    }

        .carrier .c-paybox.subtle {
            background: linear-gradient(180deg, #fff, #fafafa);
        }

    .carrier .c-paylabel {
        font-size: 12px;
        font-weight: 900;
        color: #333;
    }

    .carrier .c-paycalc,
    .carrier .c-payvat {
        font-size: 12px;
        color: var(--c-muted);
    }

    .carrier .c-paybig {
        margin-top: 6px;
        font-size: 22px;
        font-weight: 900;
        color: var(--c-accent);
        text-align: right;
    }

        .carrier .c-paybig.gray {
            color: #999;
        }

    /* ===== Lines List ===== */
    .carrier .c-lines {
        border: 1px solid var(--c-line);
        border-radius: 10px;
        overflow: hidden;
    }

    .carrier .c-line {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        padding: 8px 10px;
        border-bottom: 1px solid #eee;
        font-size: 12px;
    }

        .carrier .c-line:last-child {
            border-bottom: none;
        }

        .carrier .c-line.emph {
            background: var(--c-accent-weak);
            font-weight: 900;
        }

    /* ===== Notes / Memo ===== */
    .carrier .c-notes,
    .carrier .c-memo {
        border: 1px solid var(--c-line);
        border-radius: 10px;
        padding: 10px;
        background: #fff;
    }

    .carrier .c-notes-title,
    .carrier .c-memo-title {
        font-weight: 900;
        font-size: 13px;
        margin-bottom: 8px;
    }

    .carrier .c-notes-list {
        margin: 0;
        padding-left: 18px;
        font-size: 12px;
        color: #333;
        line-height: 1.55;
    }

    .carrier .c-sign {
        display: flex;
        gap: 18px;
        justify-content: flex-end;
        align-items: center;
        margin-top: 12px;
        flex-wrap: wrap;
        font-size: 12px;
    }

    .carrier .c-sign-item {
        display: flex;
        gap: 8px;
        align-items: center;
    }

    .carrier .c-sign-line {
        display: inline-block;
        width: 140px;
        border-bottom: 1px solid #888;
        height: 16px;
    }

/* ===== Responsive ===== */
@media (max-width: 980px) {
    .carrier .c-grid-3 {
        grid-template-columns: 1fr;
    }

    .carrier .c-service-3 {
        grid-template-columns: 1fr;
    }

    .carrier .c-detail-grid {
        grid-template-columns: 1fr;
    }

    .carrier .c-bottom-grid {
        grid-template-columns: 1fr;
    }

    .carrier .c-support {
        justify-content: flex-start;
    }

    .carrier .c-meta {
        text-align: left;
    }
}