@charset "utf-8";

/* =============================== */
/* Elements */
/* =============================== */

.media-write-box button.card-file-delete {
    color: var(--content-font-color);
    background: var(--container-bg-color);
    border: 1px inset var(--content-font-color);
    border-radius: 10px;
    width: 32px;
    min-width: 32px;
    max-width: 32px;
    height: 32px;
    padding: 0;
    flex: 0 0 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.media-write-box input::placeholder {
    color: var(--content-font-color);
    opacity: .6;
}

.media-write-box input#media_card_url,
.media-write-box input#wr_cback {
    width: 200px;
    flex: 1;
}

.media-write-box input#media_card_image {
    width: auto;
}

.media-write-box input#media_cback_image {
    width: auto;
}

.media-write-box a.ui-btn.new_win {
    height: 100%;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.media-write-box .ui-btn,
.media-write-box a .ui-btn {
    color: var(--content-font-color);
    background: var(--container-bg-color);
    border: 1px inset var(--content-font-color);
    font-size: 12px;
    font-weight: bold;
    border-radius: 10px;
    height: 40px;
}

.media-write-box .ui-btn:hover,
.media-write-box a .ui-btn:hover {
    color: var(--content-font-color);
    background: rgb(from var(--content-font-color) r g b / 20%);
    border: 1px inset var(--content-font-color);
}

.media-write-box .btn_confirm .ui-btn:hover,
.media-write-box .btn_confirm .ui-btn:focus {
    filter: none;
    transform: none;
    box-shadow: none;
}

.media-write-box #wr_content {
    min-height: 120px;
    color: var(--content-font-color);
    background: var(--container-bg-color);
    border: 1px solid var(--content-font-color);
    border-radius: 10px;
    text-align: center;
    line-height: 1.5;
    padding: 10px;
}

/* Fonts */

.media-write-box .title-text {
    font-size: 1.2rem;
    font-weight: 600;
    margin-right: 10px;
    color: var(--content-font-color);
    margin-bottom: 5px;
    font-family: var(--f-pre);
}

.media-write-box .info-text {
    color: var(--content-font-color);
    font-size: 13px;
    opacity: .6;
}

/* Areas */

.media-review-write {
    position: relative;
}

.media-review-oneline-editor .ra0-editor-wrapper {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.media-review-oneline-editor .ra0-editor-toolbar {
    max-width: 100%;
    box-sizing: border-box;
    flex-wrap: wrap;
}

.media-review-oneline-editor .ra0-editor-footer {
    max-width: 100%;
    box-sizing: border-box;
}

.media-review-oneline-editor #wr_content_viewer,
.media-review-oneline-editor #wr_content {
    min-height: 250px !important;
    height: 250px !important;
    max-width: 100%;
    box-sizing: border-box;
}

/* Outer box */
.media-write-box {
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-family: 'Pretendard-Regular';
    margin: 0 auto;
    border: 1px solid var(--content-font-color);
    border-radius: 10px;
    padding: 30px;
    background-color: var(--container-bg-color);
    color: var(--content-font-color);
    box-shadow: 0 2px 10px rgb(from var(--black) r g b / 20%);
    width: 900px;
}

.media-write-box .media-flex {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.media-write-box .media-title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    align-items: flex-start;
}

.media-write-box .media-title-split-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    align-items: flex-start;
}

.media-write-box .media-title-row > .wr-subject,
.media-write-box .media-title-split-row > .wr-title-line1,
.media-write-box .media-title-split-row > .wr-title-line2,
.media-write-box .media-title-split-row > .wr-title-kicker,
.media-write-box .media-title-split-row > .wr-subtitle {
    width: 100%;
    min-width: 0;
}

.media-write-box .media-flexS {
    display: flex;
}

.media-write-box .media-flex1 {
    display: flex;
    gap: 10px;
    flex: 1;
}

.media-write-box .frm_input {
    width: 100%;
    background: var(--container-bg-color);
    color: var(--content-font-color);
    border-color: var(--content-font-color);
}

.media-write-box .frm_input::placeholder {
    color: var(--content-font-color);
    font-family: var(--f-pre);
    opacity: 0.7;
}

.media-write-box select {
    height: 30px;
    background: var(--container-bg-color);
    color: var(--content-font-color);
    border-color: var(--content-font-color);
}

.media-write-box .media-option {
    display: flex;
    gap: 10px;
}

.media-write-box .media-info {
    display: flex;
    gap: 10px;
}

.media-write-box .wr-subject {
    flex: 1 1 0;
    min-width: 0;
}

.media-write-box .wr-title-kicker {
    flex: 1 1 0;
    min-width: 0;
}

.media-write-box .wr-title-line1,
.media-write-box .wr-title-line2 {
    flex: 1 1 0;
    min-width: 0;
}

.media-write-box .wr-subtitle,
.media-write-box .media-genre,
.media-write-box .media-rating {
    flex: 1;
    min-width: 0;
}

.media-write-box .form-group-card {
    display: flex;
    gap: 3px;
    align-items: center;
    flex-direction: row;
}

.media-write-box .media-date {
    flex: 1;
    min-width: 0;
}

.media-write-box .media-bgcolor .frm_input, .media-write-box .media-textcolor .frm_input {
    width: calc(100% - 40px);
}

.media-write-box .media-bgcolor,
.media-write-box .media-textcolor {
    flex: 1;
    min-width: 0;
}

.media-write-box .media-foil-options {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.media-write-box .media-foil-group {
    flex: 1;
    min-width: 0;
}

.media-write-box .media-foil-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.media-write-box .media-foil-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    box-sizing: border-box;
    padding: 6px 10px;
    color: var(--content-font-color);
    background: var(--container-bg-color);
    border: 1px solid var(--content-font-color);
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--f-pre);
    font-size: 13px;
    line-height: 1.2;
}

.media-write-box .media-foil-check input {
    margin: 0;
}

.media-write-box .media-foil-check.is-checked,
.media-write-box .media-foil-check:has(input:checked) {
    background: rgb(from var(--content-font-color) r g b / 18%);
}

.media-write-box .media-write-preview {
    margin: 14px 0;
}

.media-write-box .media-write-preview-stage {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: center;
    gap: 10px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.media-write-box .media-write-preview-ticket {
    width: 240px;
    max-width: 100%;
    container-type: inline-size;
    perspective: 400cqw;
}

@media (max-width: 720px) {
    .media-write-box .media-write-preview-stage {
        grid-template-columns: 1fr;
    }

    .media-write-box .media-write-preview-ticket {
        width: min(100%, 320px);
    }
}

.media-write-box .media-write-preview-ticket .media-ticket-container {
    container-type: inline-size;
    position: relative;
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 1 / 2;
    overflow: visible;
    --media-ticket-radius: 3.33cqw;
    --media-ticket-number-width: 34.17cqw;
    --media-ticket-label-width: 22.5cqw;
    --media-ticket-year-width: 17.5cqw;
    --media-ticket-rating-number-width: 17.5cqw;
    --media-ticket-label-x: 3.33cqw;
    --media-ticket-value-x: 31.25cqw;
    border-radius: var(--media-ticket-radius);
    filter: drop-shadow(0 4.17cqw 7.5cqw rgba(33,28,27,.22));
    transform: translateZ(0);
}

.media-write-box .media-bgcolor #tr_bgcolor_picker,
.media-write-box .media-textcolor #tr_txtcolor_picker {
    width: 30px;
}

/* Media review skin overrides */
.media-write-box {
    background: var(--container-bg-color);
    color: var(--content-font-color);
    border: 1px solid var(--content-font-color);
}
.media-write-box .frm_input,
.media-write-box select,
.media-write-box .wr_editor,
.media-write-box .wr_viewer {
    background: var(--container-bg-color);
    color: var(--content-font-color);
    border-color: var(--content-font-color);
}
.media-write-box .title-text {
    color: var(--content-font-color);
}