/* ����� blazor ����Ʈ ���� css */

html, body {
    font-size: 16px;
    font-family: 'Pretendard Variable','Pretendard', sans-serif !important;
}


/* ������ ���� */

.subtitle {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 20px;
    padding-bottom: 10px;
    height: 40px;
    border-bottom: dashed 1px #555;
}
.subtitle .material-icons {
    font-size: 26px; /* ������ ũ�� */
}

/* ���� ������ ���� */
.mud-main-content {
    background-color: #fafafa !important;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/*�ϴ� �׼� �� ���*/
.dialog-actions-gray {
    background-color: #f8fafc !important;
    border-top: 1px solid #e2e8f0;
}

/* ���� ����! ----------------------------------------------------------------------------------- */
/* [���� ����] MudTooltip #AFFEA0 ���� ���� */

/* 1. ���� ���� (Body) */
/* Owner rule 2026-08-22:
   - Tertiary tooltip (#AFFEA0 light green) = keep light green background + BLACK text.
   - All other tooltips = default dark background + WHITE text.
   This global block is the single source of truth - no per-page color overrides. */
.mud-tooltip {
    color: #ffffff !important;   /* default: dark bubble + white text */
    border-radius: 15px !important;
    padding:10px;
    font-size:14px;
}

/* Arrow (::after) uses border-top-color:inherit -> follows the bubble's border-color,
   which defaults to currentColor (= text color). Pin border-color to each themed
   background so the arrow always matches the bubble, not the text. */
.mud-tooltip.mud-theme-primary   { border-color: var(--mud-palette-primary) !important; }
.mud-tooltip.mud-theme-secondary { border-color: var(--mud-palette-secondary) !important; }
.mud-tooltip.mud-theme-info      { border-color: var(--mud-palette-info) !important; }
.mud-tooltip.mud-theme-success   { border-color: var(--mud-palette-success) !important; }
.mud-tooltip.mud-theme-warning   { border-color: var(--mud-palette-warning) !important; }
.mud-tooltip.mud-theme-error     { border-color: var(--mud-palette-error) !important; }
.mud-tooltip.mud-theme-dark      { border-color: var(--mud-palette-dark) !important; }

/* Tertiary: light green background comes from the theme palette; black text for contrast.
   (The old "darken tertiary bubble to #1e293b" rule is retired, 2026-08-22.) */
.mud-tooltip.mud-theme-tertiary {
    color: #000000 !important;
    border-color: var(--mud-palette-tertiary) !important;   /* arrow matches the light green bubble */
}

.dialog-background {
    background-color: transparent;
}

.dialog-background {
    background-color: transparent;
}

.dialog-background-title {
    background: rgb(from var(--mud-palette-info-lighten) r g b / 50%);
    color: var(--mud-palette-white);
}

.dialog-background-surface {
    padding: 0px;
    margin: 0px;
    background: #fff;
}

.dialog-action {
    background: #fff;
}


.dialog-body {
    display: flex;
    flex-direction: column;
    max-height: 100%;
    overflow-y: auto;
   
}

/* DialogContent�� ���� ���̾ƿ����� �����, ���� ��ũ�� ���� */
.dlg-content-flex {
    display: flex;
    flex-direction: column;
    /* ���̾�α� ȭ�� ���� ����(���ϴ� ������ ����) */
    max-height: 100%; /* �ʿ��ϸ� 85vh, 90vh ������ ���� */
    overflow: hidden; /* ���� dlg-scroll�� ��ũ�� ��� */
}



/* ��� �Ʒ� ���� ��ũ���� �Ͼ�� ���� */
.dlg-scroll {
    padding: 10px 20px 20px 20px;
    flex: 1 1 auto;
    min-height: 0; /* flex �������� ��ҵ� �� �ְ� */
    overflow: auto; /* ���⸸ ��ũ�� */
    overscroll-behavior: contain;
    scrollbar-gutter: stable; /* ����: ��ũ�ѹ� ���� ����(���̾ƿ� ���� ����) */
}

.dialog-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    font-weight: bold;
    font-size: 20px;
    padding: 10px 20px 10px 20px;
    flex-wrap: wrap;
    background-color: #f8fafc;
}

.dialog-title-left {
    display: flex;
    align-items: center;
    height: 100%;
    min-width: 0;
}

.dialog-title-right {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

/* ȭ���� �������� TID�� ���� �ٷ� ������, �������� �ݱ� ��ư�� ������ ���� ���� */
@media (max-width: 720px) {
    .dialog-title {
        row-gap: 6px;
    }

    .dialog-title-right {
        flex-basis: 100%;
        justify-content: space-between;
    }

    .tid-btn {
        max-width: calc(100% - 48px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}




/* ���� �е��� ���� ���ۿ��� */

.mud-dialog-width-full {
    width: calc(100% - 30px) !important;
    ;
}

.mud-input-control-input-container {
    margin-top: 5px !important;
}

.mud-dialog-container {
}
/*  ----------------------------------------------------------------------------------- */


.mud-select {
    flex-grow: 0 !important;
}

.mud-input-control.mud-input-control-margin-normal {
    margin: 0 !important;
}

.mud-select {
    flex-grow: 0 !important;
}

.mud-table-header {
    background-color: #f1f1f1 !important;
}

.mud-table-cell {
    white-space: nowrap !important;
    padding: 0px !important;
}

.mud-simple-table table * tr > th {
    color: #333 !important;
    font-weight: bold !important;
    padding: 10px !important;
    text-align: center !important;
}

.mud-simple-table table * tr > td {
    text-align: center;
    height: 20px !important;
    padding: 10px !important;
}
.mud-input-control.mud-input-control-margin-normal {
    margin: 0 !important;
}

/*  ----------------------------------------------------------------------------------- */

.td_date {
    text-align: center !important;
    min-width: 140px !important;
}

.td_title {
    text-align: left !important;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600 !important;
}

/*  ----------------------------------------------------------------------------------- */
/* �� ������ */
.rz-html-editor.editor-theme {
    display: flex;
    justify-content: center;
    background:#333;
}

.editor-theme .rz-html-editor-content {
    background: #0f0726;
    color: #fff;
    padding: 16px !important;
    font-size: 16px;
    width: 480px !important;
    margin: 0 auto !important; /* ��� ���� */
}


/*  ----------------------------------------------------------------------------------- */

.paging-nav {
    margin-top: 10px;
    display: flex;
    justify-content: center; /* �߾� ���� */
    align-items: stretch;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    /* height: 48px; // �ʿ�� ��ư ���� ���� */
}

.paging-btn {
    flex: 1 1 0; /* ��ư�� �յ� �й�Ǹ�, ȭ�� ���� �°� �ڵ����� �þ */
    min-width: 0; /* �ʹ� ������� �� ���� */
    max-width: 80px; /* (����) ��ư �ִ��� ����. ��ư ���� �� �ʹ� Ŀ���� �� ���� */
    height: 44px; /* (����) ���� ���� */
    padding: 0 4px; /* (����) �¿� ���� ���� */
    box-sizing: border-box;
}

/*  ----------------------------------------------------------------------------------- */

.artist-list-image {
    width: 40px !important;
    height: 40px !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 50% !important;
    background: #f3f3f3 !important;
    box-shadow: 0 0 0 1px #fff, 0 6px 6px rgba(0,0,0,.18), 0 1px 2px rgba(0,0,0,.08) !important;
}

.vote-list-img {
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    width: 100px;
    height: auto;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 2px 6px #0002;
    transition: transform .1s;
}

.banner-list-img {
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    width: 100px;
    height: auto;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 2px 6px #0002;
    transition: transform .1s;
}

.popup-banner-list-img {
    border-radius: 6px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 2px 12px #0002;
    display: inline-flex; /* ������ �ʺ�ŭ�� */
    flex-direction: column;
    height: auto;
    width: 60px;
    transition: transform .1s;
}

    .popup-banner-list-img > img {
        height: auto;
        width: 100%;
        display: block;
        object-fit: contain; /* �ʿ� �� cover�� ���� */
    }
.store-list-img-thumb {
    border-radius: 6px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 2px 12px #0002;
    display: flex;
    flex-direction: column;
    width: 40px;
    height: 40px;
    transition: transform .1s;
}
.store-list-img {
    border-radius: 6px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 2px 12px #0002;
    display: flex;
    flex-direction: column;
    width: 48px;
    height: 48px;
    transition: transform .1s;
}
.jellyplus-list-img {
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    width: 100px;
    height: auto;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 2px 6px #0002;
    transition: transform .1s;
}
/*  ----------------------------------------------------------------------------------- */

.image-preview-img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* ���� ����, ���� ���� */
    display: block;
    overflow: hidden;
    background: #f3f3f3; /* (����) ���� �̹����� �� ��� */
}

.upload-btn:hover {
    border-color: #4093f6;
    color: #4093f6;
}

.upload-btn .plus {
    font-size: 2.7em;
    line-height: 1;
    margin-bottom: 8px;
    font-weight: 400;
}

.upload-btn {
    border-radius: 0 !important;
}


.image-preview-container {
    position: relative;
    overflow: hidden;
    border: 1px dashed #d0d7de;
    border-radius: 12px;
    background: #f8fafc;
    width: 300px; /* �ʿ�� ���� */
    height: 300px; /* �ʿ�� ���� */
}

.image-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.upload-btn {
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    background: #f8fafc;
    width: 300px;
    height: 300px; /* �ʿ�� ���� */
}

    .upload-btn .plus {
        font-size: 36px;
        font-weight: 700;
    }




/*  ----------------------------------------------------------------------------------- */


/* RadzenHtmlEditor ���� ������ */
.ewi-editor .rz-html-editor-content ul,
.ewi-editor .rz-html-editor-content ol,
.ewi-editor .ql-editor ul,
.ewi-editor .ql-editor ol {
    padding-left: 32px; /* ���ϴ� ��ŭ */
    margin-left: 0;
}

/* bullet ��ġ�� �ʹ� ����/�ٱ����̸� �ɼ� */
.ewi-editor .rz-html-editor-content li,
.ewi-editor .ql-editor li {
    list-style-position: outside;
}

/*  ----------------------------------------------------------------------------------- */

/* Blazor reconnect toast (fdr-rc-*) - v5 (2026-08-24, owner-approved design)
   Dark translucent glass card, top-center. Replaces the old red-gradient toast (rev4) -
   visual style only, the reconnection logic/timing is unchanged (see site.js).
   Works with #components-reconnect-modal in App.razor (blazor.web.js UserSpecifiedDisplay mode).
   State classes are attached by blazor.web.js:
     (none) / .components-reconnect-hide                     -> hidden
     .components-reconnect-show|-retrying|-paused            -> glass card (title + status + retry count + reload-now pill + note)
     .components-reconnect-failed|-resume-failed|-rejected   -> same glass card, failed copy + reload pill (no auto reload)
   NOTE: MudBlazor.min.css ships `#components-reconnect-modal { background-color: var(--mud-palette-background) !important; z-index: 9999 !important }`
   and `#components-reconnect-modal button { margin: 40px auto !important; ... }`.
   The !important declarations below counter them (same specificity, app.css loads later).
   Only .fdr-rc-card paints anything; radius + overflow clip live on that same element.
   NO emoji/non-ASCII here (file is CP949 + ASCII append) - emoji/icons live in App.razor markup. */

#components-reconnect-modal {
    display: none;
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 12000 !important; /* counter MudBlazor z-index:9999 !important */
    background: transparent !important; /* counter MudBlazor background-color !important (the square dark box) */
    box-shadow: none !important;
    padding: 0;
    border: 0;
    pointer-events: none; /* clicks pass through outside the card */
    font-family: Pretendard, Roboto, sans-serif;
}

#components-reconnect-modal.components-reconnect-hide {
    display: none;
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-retrying,
#components-reconnect-modal.components-reconnect-paused,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-resume-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: block;
}

/* entry: slight slide-down + fade on first show (not replayed on retrying/failed transitions) */
#components-reconnect-modal.components-reconnect-show {
    animation: fdr-rc-enter 0.25s ease-out;
}

@keyframes fdr-rc-enter {
    from { opacity: 0; transform: translate(-50%, -10px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* the ONLY painted element: dark translucent glass card, radius + clip on the same box */
#components-reconnect-modal .fdr-rc-card {
    pointer-events: auto; /* card itself is interactive */
    overflow: hidden;
    width: 410px;
    max-width: calc(100vw - 32px);
    box-sizing: border-box;
    background: rgba(24, 26, 32, 0.72);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    padding: 26px 26px 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    font-size: 14px;
    line-height: 1.4;
}

/* blur not supported -> fall back to a near-opaque card so text stays legible */
@supports not (backdrop-filter: blur(1px)) {
    #components-reconnect-modal .fdr-rc-card {
        background: rgba(24, 26, 32, 0.93);
    }
}

#components-reconnect-modal .fdr-rc-connecting {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
}

/* title: no spinner/icon, just the headline */
#components-reconnect-modal .fdr-rc-title {
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    letter-spacing: -0.2px;
}

#components-reconnect-modal .fdr-rc-connecting-text {
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.72);
}

/* 3-dot pulse after the connecting text: real 5px circles, opacity 0.25<->1, delay 0/.2s/.4s */
#components-reconnect-modal .fdr-rc-dots {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 4px;
    vertical-align: middle;
}

#components-reconnect-modal .fdr-rc-dots span {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #F09595;
    opacity: 0.25;
    animation: fdr-rc-dot-pulse 1.2s ease-in-out infinite;
}

#components-reconnect-modal .fdr-rc-dots span:nth-child(1) { animation-delay: 0s; }
#components-reconnect-modal .fdr-rc-dots span:nth-child(2) { animation-delay: 0.2s; }
#components-reconnect-modal .fdr-rc-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes fdr-rc-dot-pulse {
    0%, 100% { opacity: 0.25; }
    50%      { opacity: 1; }
}

/* retry count: its own line, muted; current-attempt number stands out, "/ max" stays soft */
#components-reconnect-modal .fdr-rc-attempt {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12.5px;
}

#components-reconnect-modal .fdr-rc-attempt-num,
#components-reconnect-modal #components-reconnect-current-attempt {
    color: #fff;
    font-weight: 500;
    font-size: 13.5px;
}

#components-reconnect-modal .fdr-rc-attempt-sep {
    margin-left: 3px;
    opacity: 0.55;
}

#components-reconnect-modal .fdr-rc-failed {
    display: none;
}

/* warning mode: failed / resume-failed / rejected -> swap content, shake once */
#components-reconnect-modal.components-reconnect-failed .fdr-rc-connecting,
#components-reconnect-modal.components-reconnect-resume-failed .fdr-rc-connecting,
#components-reconnect-modal.components-reconnect-rejected .fdr-rc-connecting {
    display: none;
}

#components-reconnect-modal.components-reconnect-failed .fdr-rc-failed,
#components-reconnect-modal.components-reconnect-resume-failed .fdr-rc-failed,
#components-reconnect-modal.components-reconnect-rejected .fdr-rc-failed {
    display: block;
    text-align: center;
}

#components-reconnect-modal.components-reconnect-failed .fdr-rc-card,
#components-reconnect-modal.components-reconnect-resume-failed .fdr-rc-card,
#components-reconnect-modal.components-reconnect-rejected .fdr-rc-card {
    animation: fdr-rc-shake 0.5s ease 1; /* one shake, no loop */
}

@keyframes fdr-rc-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(5px); }
}

#components-reconnect-modal .fdr-rc-emoji-warn {
    font-size: 14px;
    line-height: 1;
}

#components-reconnect-modal .fdr-rc-failed-title {
    font-weight: 500;
    margin: 0 0 4px;
}

#components-reconnect-modal .fdr-rc-failed-desc {
    margin: 0 0 14px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.72);
}

/* failed-state pill; !important counters MudBlazor `#components-reconnect-modal button { margin:40px auto !important; ... }` */
#components-reconnect-modal .fdr-rc-reload {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto !important;
    height: 34px !important;
    padding: 0 24px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    color: #18181f !important;
    border: none;
    border-radius: 17px !important;
    font-size: 13px !important;
    font-weight: 500;
    line-height: 1.4;
    min-width: 0 !important;
    text-transform: none !important;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

#components-reconnect-modal .fdr-rc-reload:hover {
    background: #fff !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

#components-reconnect-modal .fdr-rc-reload:active {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

#components-reconnect-modal .fdr-rc-reload-icon {
    display: inline-block;
    margin-right: 2px;
    font-weight: 400;
}

/* immediate-reload pill for the connecting/retrying state - pale glass pill, centered
   (not full width). !important counters MudBlazor `#components-reconnect-modal button { margin:40px auto !important; ... }`. */
#components-reconnect-modal .fdr-rc-reload-now {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: auto;
    height: 34px !important;
    margin: 18px 0 0 !important;
    padding: 0 48px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 17px !important;
    font-size: 13px !important;
    font-weight: 500;
    line-height: 1.4;
    min-width: 0 !important;
    text-transform: none !important;
    cursor: pointer;
    box-shadow: none;
    transition: background 0.15s ease;
}

#components-reconnect-modal .fdr-rc-reload-now:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}

#components-reconnect-modal .fdr-rc-reload-now:active {
    background: rgba(255, 255, 255, 0.18) !important;
}

/* note area: no boxed background, just a thin top divider; two left-aligned lines with icons */
#components-reconnect-modal .fdr-rc-note {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}

#components-reconnect-modal .fdr-rc-note-line {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.75);
}

#components-reconnect-modal .fdr-rc-note-icon {
    flex: 0 0 auto;
    margin-top: 2px;
}

#components-reconnect-modal .fdr-rc-note-icon-good {
    color: #9FE1CB;
}

#components-reconnect-modal .fdr-rc-note-icon-warn {
    color: #FAC775;
}

/* positive emphasis (auto-reconnect keeps in-progress work) */
#components-reconnect-modal .fdr-rc-note-good {
    color: #9FE1CB;
    font-weight: 500;
}

/* warning emphasis (manual reload loses unsaved work) */
#components-reconnect-modal .fdr-rc-note-warn {
    color: #FAC775;
    font-weight: 500;
}

/* --- Ops board document flow width (2026-08-26, owner request) ---------------
   Owner: make the editor body width and the detail-view body width identical.

   The same note is rendered in two dialogs and used to flow at different widths,
   so line breaks and image sizes did not match between editing and viewing.
   Both dialog MaxWidth values are owner-fixed (editor Small 600 / detail Medium 960),
   so the dialog width itself must NOT change - only the content width is matched.

   Value comes from the EDITOR side (the narrower one; the wider side comes down to it):
     600 (Small) - 40 (.dlg-scroll padding 20x2) - 15 (scrollbar-gutter:stable)
       = 545   (.ope-form / .ope-note-ed / .ewi-* have no horizontal padding)
     545 - 2  (.rz-html-editor border)              = 543
     543 - 24 (.rz-html-editor-content padding 12x2) = 519
     519 - 15 (editor content's own vertical scrollbar, reserved via scrollbar-gutter)
       = 504px

   Declared here ONCE on :root so the two scoped stylesheets cannot drift apart
   (scoped CSS files cannot share tokens; duplicating the px in both would eventually diverge).

   Referenced by:
     - OpsTaskDetail.razor.css  .otd-note-b { max-width: var(--ope-doc-w) }  <- the side being matched
     - OpsTaskEditor.razor.css  does NOT cap its width on purpose: a max-width on the
       editing surface leaves a dead strip on the right where clicks do not place the caret.
       Instead .rz-html-editor-content uses scrollbar-gutter:stable so the width above is deterministic.

   If a dialog width or any padding above changes, recompute this value.
   NOTE: this file is appended in ASCII only (see App.razor) - do not add emoji or Korean here.
   NOTE: bump the app.css cache buster in App.razor when this file changes. */
:root {
    --ope-doc-w: 504px;
}