@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Libre+Barcode+128&family=Noto+Sans+KR&display=swap');

@font-face {
    font-family: 'LeeSeoyun';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2202-2@1.0/LeeSeoyun.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

* {box-sizing: border-box;}

:root {
    --color-default: #eee;
    --color-bak: #333;
    --color-point1: #3c63e6;
    --color-point2: #f8daa3;
    --fail: #ed6868;
    --success: #75a353;
}
#body > .fix-layout {max-width: 700px;}

.chk_all {float: left;}
.bo_fx {margin-bottom: 5em;}

.board-skin-basic {font-family: 'Noto Sans KR';}

.avocado-list   {
    display: block;
    position: relative;
    margin: 0;
}

.avocado-list li    {
    position: relative;
    height: 200px;
    margin: 5em 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    clear: both;
    font-family: 'Noto Sans KR';
}
.avocado-list li.no-data    { text-align: center; line-height: 200px;}
.avocado-list li .td_chk {position: absolute; top: 50%; left: -30px; transform: translateY(-50%);}

.avocado-list li a {position: relative;display: block;width: 100%;height: 100%;color: var(--color-bak);}
.ticket-left {
    position: relative;
    width: 3em;
    height: 100%;
    padding: 1em;
    float: left;
    border-right: 0;
    border-radius: 1em;
    box-sizing: border-box;
    background: #fff;
    z-index: 1;
    border-right: 1px dashed;
}
.arrow {
    position: relative;
    width: 0;
    height: 7em;
    border-left: 1px solid;
    display: block;
    margin: 0 auto;
}
.arrow::before {
    content: '';
    position: absolute;
    left: -.75em;
    bottom: .25em;
    width: .8em;
    height: 0;
    border-top: 1px solid;
    transform: rotate(45deg);
}

.ticket-center {
    position: relative;
    width: calc((100% - 3em) * .7);
    height: 100%;
    margin: 0 -1px;
    padding: 3em 4.5em 2em 2em;
    float: left;
    border-radius: 1em;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    box-sizing: border-box;
    text-shadow: 0 0 2px rgba(0,0,0,.7);
    overflow: hidden;
    backdrop-filter: blur(3px);
    color: var(--color-default);
}
.ticket-center::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: .6;
    mix-blend-mode: screen;
    backdrop-filter: blur(5px);
}
.ticket-center hr.line {width: 100%;height: 0;border-top: 1px solid;margin: 20px 0;}
.ticket-right hr.line {width: 100%;height: 0;border-top: 1px solid;margin: 10px 0;}
.ticket-center > .row {width: 100%; height: 50%;}
.ticket-center > .row:first-of-type {display: flex; align-items: end;}
.ticket-center > .row:last-of-type {
    display: flex;
    justify-content: space-between;
    align-items: start;
    padding-top: 1em;
    box-sizing: border-box;
}

.section {position: relative;display: flex;align-items: center;}
.section strong {
    font-size: 8pt;
    position: absolute;
    top: -1.6em;
}

.ticket-center .section strong + * {line-height: 1.2;}
.ticket-center .sub-section {
    display: flex;
    align-items: start;
    height: 100%;
}

.ticket-center .date {
    position: absolute;
    font: 3.7rem/0 'Libre Barcode 128', cursive;
    right: .3rem;
    bottom: 1.5rem;
    writing-mode: vertical-lr;
    transform: scale(-1);
}

.section.subject {width: 100%;}
.section.subject h1 {font-weight: 400;font-size: 18pt;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
.section.player {
    min-width: 50%;
    max-width: 66%;
    display: flex;
    justify-content: space-between;
    float: left;
    height: 100%;
}
.section.player .sub-section {max-width: 40%;position: relative;}
.section:not(.subject):not(.date) strong + * {display: -webkit-box;text-overflow: ellipsis;width: 100%;overflow: hidden;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.section.player i {font-size: 16pt;}
.section.writer {min-width: 34%;max-width: 50%;}

.ticket-right {
    position: relative;
    width: calc((100% - 3em) * .3);
    height: 100%;
    padding: 1.5em;
    float: left;
    border-radius: 1em;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    box-sizing: border-box;
    background: #fff;
    border-left: 1px dashed;
}
.ticket-right .section {display: block; width: 100%;}
.ticket-right .section strong {width: 100%;}
.ticket-right .section strong {position: static;}

.section.no p {font-size: 16pt; line-height: 1;}
.section.script p {
    position: relative;
    display: -webkit-box;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.section.date {display: block;}
.section.date .sub-section {clear: both;}
.section.date strong {
    position: static;
    float: left;
    width: 3.5em;
    display: inline-block;
}
.section.date p {float: left;}

@media (max-width: 1000px) {
    .board-skin-basic {width: 80%; margin: 0 auto;}

    .ticket-left {display: none;}
    .ticket-center {width: 70%;padding: 1em;height: 100%;}
    .ticket-right {width: 30%;padding: 1em;}
    
    .section {display: block;height: unset !important; padding: 0;}
    
    .section.subject h1 {font-size: 1.2rem;line-height: 1;}
    .section.player {width: 100%;height: 50% !important;}
    .ticket-center .date {display: none;}
    .section.date p {font-size: 8pt;}
}

/******************************************
    글 보기
*******************************************/
.board-viewer {position: relative; margin: 70px 0; font-family: 'Noto Sans KR';}
.board-viewer .subject {
    text-align: center;
    padding-top: 5em;
    margin-bottom: 3em;
}
.board-viewer .subject h1    {
    font-size: 20pt;
    font-weight: 400;
}
.board-viewer .subject p    {padding-top: 1em;}

.board-viewer .info {
    max-width: 70%;
    position: relative;
    padding: 2em;
    background: #fff;
    margin: 60px auto 0;
    box-shadow: 0 0 5px rgba(0,0,0,.3);
    display: none;
    color: var(--color-bak);
}
.board-viewer .info::before {
    content: '';
    position: absolute;
    width: 40px;
    height: 60px;
    top: -20px;
    left: 50%;
    background: rgba(255,255,255,.4);
    border: 1px solid rgba(255,255,255,.7);
    transform: rotate(30deg) translateX(-50%);
}
.board-viewer .info img {border-radius: 7px;}
.board-viewer .info p {padding-top: 2em;}
.board-viewer .info strong {font-family: 'LeeSeoyun'; display: inline-block; width: 4em;}
.board-viewer .info.show {display: block;}

.bo_v_con {overflow: hidden;}

#bo_v_bot {margin-top: 3em;}
.bo_v_nb {float: left;}
.bo_v_com    {float: right;}

/******************************************
    roll20 호환
*******************************************/
.message {
    position: relative;
    font-family: 'Noto Sans KR' !important;
    font-weight: 400 !important;
    font-style: normal !important;
    clear: both;
    background: var(--color-default) !important;
    color: var(--color-bak) !important;
}
.message.desc {
    width: 80%;
    margin: 0 auto;
    background: var(--color-bak) !important;
    color: var(--color-default) !important;
}
.message.emote {
    padding-left: 0 !important;
    padding-right: 0 !important;
    background: transparent !important;
    color: var(--color-bak) !important;
    margin-left: auto;
    margin-right: auto;
}
.message.you {
    width: 60%;
    float: right;
    background: var(--color-point1) !important;
    color: var(--color-default) !important;
}
.message:not(.you):not(.emote):not(.desc) {
    width: 60%;
}
.message:not(.emote):not(.desc) {padding-left: 4em !important;}

.message.first {
    border-top-left-radius: 2em !important;
    border-top-right-radius: 2em !important;
    padding-top: 1.6em !important;
    margin-top: 1.2em;
}
.message.last {
    border-bottom-left-radius: 2em !important;
    border-bottom-right-radius: 2em !important;
    padding-bottom: 1.6em !important;
}
.message.last.you {
    border-bottom-right-radius: 0 !important;
    margin-bottom: 16px;
}
.message.last:not(.you):not(.emote):not(.desc) {
    border-bottom-left-radius: 0 !important;
}

.message .avatar{
    position: absolute;
    top: 12px !important;
    left: 12px !important;
    border-radius: 50%;
    overflow: hidden;
}
.message .avatar img{width:100% !important;}
.message .by {display: block;margin-top: -.3em;left: 0 !important;padding-bottom: .8em;font: 16pt 'LeeSeoyun';}

.message a {
    position: relative !important;
    width: unset !important;
    color: inherit !important;
}
.message a + a {padding-top: .2em !important;}

code {
    font-family: inherit !important;
    background: var(--color-point) !important;
    color: var(--color-default) !important;
    font-style: normal;
    margin: 0 2px;
    font-weight: 600;
}

.sheet-rolltemplate-coc-1{
    max-width: 300px;
    position: relative;
    padding: 2em;
    background: var(--color-point2);
    margin: 0 auto;
    box-shadow: 0 0 5px rgba(0,0,0,.3);
    font-family: 'LeeSeoyun';
}
.sheet-rolltemplate-coc-1::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 30px;
    top: -10px;
    left: 50%;
    background: rgba(255,255,255,.4);
    border: 1px solid rgba(255,255,255,.7);
    transform: rotate(30deg) translateX(-50%);
}
.__se_tbl_ext{width: 100% !important;color: var(--color-bak) !important;border-color: inherit !important;background: none !important;}
.sheet-template_label{width: 90px !important;padding-left: .8em !important;font-weight: 600 !important;font-size: 11pt;border-right: 1px solid !important;}

table caption {display: revert;color: inherit !important;border-color: inherit !important;padding: 5px !important;border-bottom: 0 !important;background: none !important; font-weight: 600 !important;}
table td {border-color: inherit !important;padding: 5px !important;}
table tr:last-of-type {background: none !important;}
table tr:last-of-type td {
    border-color: inherit !important;
    border-bottom: 0 !important;
}

table tr:last-of-type td.sheet-template_value[data-i18n="fail"] {color: var(--fail) !important; background: none !important;}
table tr:last-of-type td.sheet-template_value:not([data-i18n="fail"]) {color: var(--success) !important; background: none !important;}
table td .inlinerollresult {border: 0 solid !important;background: none !important;border-radius: 1em;font-weight: 400 !important;margin: 0 .3em;}

.formula, .rolled {
    display: inline;
    color: inherit !important;
    word-wrap: break-word;
    border: none !important;
    background: none !important;
    padding: 0 !important;
}
.dicegrouping{float: left;}

.dicon{
    display:inline-block !important;
}
.diceroll{
    display: inline-block;
}
.didroll {
    text-shadow: none !important;
    color: inherit !important;
    font-weight: 400 !important;
    font-family: 'LeeSeoyun';
}
.formattedformula {margin: 0 !important;}
.formattedformula + .clear + strong {font-weight: 400;}
.formattedformula + .clear + strong + .rolled {padding-left: 5px !important;font-family: 'LeeSeoyun';}

@media all and (max-width: 1000px) {
    .message.you {width: 80%;}
    .message:not(.you):not(.emote):not(.desc) {width: 80%;}
}

/******************************************
    글쓰기
*******************************************/
.board-write    {  padding: 0 10px; }

.board-write .wr_subject input  { width: 100%; }
.board-write .write-notice  {
    padding: 20px 10px 10px;
    font-size: 11px;
}

.board-write .files { padding-top: 20px; }
.board-write .files input   { width: 100%; }

.theme-form th {width: 80px;}
.theme-form td {padding:0px !important;}