/* vw계산은 px/360(기준가로)*100  / 1rem = 10px */
@import url(./font.css);

* {
    font-family: 'pretendard', 'Noto Sans KR', 'Roboto', Material+Symbols+Outlined, sans-serif !important;
}


/* reset CSS */
html, body, h1, h2, h3, h4, h5, h6, p, blockquote, code, img, dl, dt, dd, ol, ul, li, fieldset, legend, caption {
    margin: 0;
    padding: 0;
    border: 0;
}

div, span, article, section, header, footer, p, ul, li, fieldset, legend, label, a, nav, h1, h2, h3 {
    box-sizing: border-box;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

ol, ul, li {
    list-style: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

img {
    max-width: 100%;
    height: auto;
}

html {
    height: 100%;
    font-size: 62.5%;
    word-wrap: break-word;
    overflow-x: hidden;
}

body {
    font-size: 1.6rem;
    font-size: min(1.4rem);
}

a {
    text-decoration: none;
    cursor: pointer;
}

.blue {
    color: #2F70FE;
}

.yellow {
    color: #FFC700;
}

/* display */
.pc {
    display: none;
}

.mobile {
    display: block;
}

/* 두줄, 세줄 ... 처리 */
.line_clamp2 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    /* 여러 줄 자르기 추가 스타일 */
    white-space: normal;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

button {
    cursor: pointer;
}

/*.btn {display: inline-block; padding:0.6rem 1.5rem;background-color:#F9F9F9;color:#666666;border:0;font-size:1.4rem;box-sizing: border-box;white-space: nowrap;}*/
/*.btn.tab {border:1px solid #EEECEC;}*/
/*.btn:first-child {padding:0.6rem 1.5rem;}*/
/*.btn:last-child {padding:0.6rem 1.5rem;}*/
/*.btn.default {border-radius: 0rem;}*/
/*.btn.detail {border:1px solid #cdcdcd;}*/
/*.btn.active {background-color:#404040;border:1px solid #404040;color:#fff;font-weight: 600;}*/

input {
    flex: 1;
    height: 4.0rem;
    border: 1px solid #CDCDCD;
    font-size: 1.4rem;
    box-sizing: border-box;
    padding: 0 0.8rem;
}

input.search {
    height: 3rem;
    border: 1px solid #CDCDCD;
}

select {
    width: 10rem;
    height: 4.0rem;
    border: 1px solid #CDCDCD;
    border-radius: 0.4rem;
}


/** ------------------------------- 컨텐츠 ------------------------------- **/
.container-main {
    width: 100%;
    height: 100%;
}

.container-main .content {
    position: relative;
    width: 100%;
    max-width: 140rem;
    display: inline-block;
}

.container-main .content .memo-list {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    padding: 1rem 1rem;
}

.container-main .content .memo-list::after {
    display: none;
}

.container-main .content .memo-detail {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    padding: 4rem 2rem;
}

/* 리스트 */
.container-main .content .memo-list > header {
    display: flex;
}

.container-main .content .memo-list > header > .btn-wrap {
    display: flex;
}


.container-main .content .memo-list > header > .input-wrap {
    position: relative;
    display: flex;
    flex: 1;
}

.container-main .content .memo-list > header > .input-wrap > .search-clear {
    position: absolute;
    top: 50%;
    right: 0.4rem;
    transform: translateY(-50%);
    display: none;
    width: 2rem;
    height: 2rem;
    background: url('../img/ic_search_clear.svg') no-repeat center center/contain;
    border: 0;
}

.container-main .content .memo-list > header > .btn-search {
    padding: 0.6rem 1.5rem;
    background-color: #404040;
    color: #fff;
    font-size: 1.4rem;
}

.container-main .content .memo-list > header > .btn-new {
    background-color: #2F70FE;
    color: #fff;
    font-size: 1.4rem;
    margin-left: 1rem;
}

.container-main .content .memo-list > header > .input-wrap > input.search {
    width: 10rem;
}


.container-main .content .memo-list > .store {
    width: 100%;
}

.container-main .content .memo-list > .store .btn-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    margin-top: 2rem;
}

.container-main .content .memo-list > .category {
    width: 100%;
}

.container-main .content .memo-list > .category .btn-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    margin-top: 0.5rem;
}


/*.container-main .content .memo-list > .list-wrap {border-top:1px solid #CDCDCD;padding-top:2rem;padding-right:1rem;margin-top:2rem;}*/
.container-main .content .memo-list > .list-wrap > ul.list > li {
    display: flex;
    padding: 2px 0;
}

.container-main .content .memo-list > .list-wrap > ul.list > li > .category {
    display: flex;
    align-items: center;
    width: 3em;
    border: 1px solid #cdcdcd;
    border-right: 0;
}

.container-main .content .memo-list > .list-wrap > ul.list > li > .category > ul {
    width: 100%;
    text-align: center;
}

.container-main .content .memo-list > .list-wrap > ul.list > li > .category > ul > li {
    font-size: 1rem;
}

.container-main .content .memo-list > .list-wrap > ul.list > li input.title {
    display: flex;
    width: 100%;
    align-items: center;
    border: 1px solid #cdcdcd;
    padding: 0.5rem;
    box-sizing: border-box;
    cursor: pointer;
}

.container-main .content .memo-list > .list-wrap > ul.list > li input.title:focus {
    outline: none !important;
}

.container-main .content .memo-list > .list-wrap > ul.list > li input.title.active {
    border: 1px solid #999;
}

.container-main .content .memo-list > .list-wrap > ul.list > li > button {
    background-color: #F9F9F9;
    border: 1px solid #CDCDCD;
    width: 4rem;
    height: 4rem;
    cursor: pointer;
}

.container-main .content .memo-list > .list-wrap > ul.list > li > div.move {
    /*background-color: #F9F9F9;*/
    /*border: 1px solid #CDCDCD;*/
    width: 4rem;
    height: 4rem;
    /*cursor: pointer;*/
    margin-right: 0.4rem;
    /*background: url('../img/ic_move.svg') no-repeat center center/60%;*/
    font-size: 0;
}

input[type="number"][name="priority"]::-webkit-inner-spin-button,
input[type="number"][name="priority"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[name="priority"] {
    padding: 0;
    text-align: center;
    width: 100%;
    -moz-appearance: textfield;
}

/*.container-main .content .memo-list > .list-wrap > ul.list > li > button.copy {margin-left:0.4rem; background: url('../img/ic_copy.svg') no-repeat center center/60%; font-size: 0;}*/

/* 디테일 */
.container-main .content .memo-detail {
    display: none;
    background-color: #fff;
}

.container-main .content .memo-detail .memo-detail-close {
    display: block;
    margin-left: auto;
    width: 2.2rem;
    height: 2.2rem;
    background: url('../img/ic_search_clear.svg') no-repeat center center/contain;
    border: 0;
    font-size: 0;
}


.container-main .content .memo-detail > header > select {
    margin-right: 0.4rem;
}

.container-main .content .memo-detail > header > select.store {
    width: 6rem;
}

.container-main .content .memo-detail > header > .input-wrap > input.title {
    width: 100%;
}

.container-main .content .memo-detail > header > button.save {
    display: none;
}

.container-main .content .memo-detail > textarea {
    margin-top: 1rem;
    width: 100%;
    height: calc(100vh - 22rem);
    border: 1px solid #cdcdcd;
    box-sizing: border-box;
    padding: 1rem;
}

div.list-wrap {
    /*height: calc(100vh - 100px);*/
    overflow-y: auto;
}

.material-symbols-outlined {
    font-size: 2rem;
    font-variation-settings: 'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 48
}

.toastify {
    min-width: 80%;
}

#memoNew, .addCategory, .move {
    display: none;
}

#storeList, #categoryList {
    margin-top: 4px;
}

#storeList > button {
    margin: 0;
    flex: 1;
    font-size: 1.4rem;
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0.2rem;
}

#categoryList {
    display: flex;
}

#categoryList > .material-symbols-outlined {
    padding: 0 1rem;
}

dl, ol, ul {
    margin: 0;
    padding: 0;
}

.custom-tooltip {
    --bs-tooltip-bg: var(--bs-primary);
    --bs-tooltip-max-width: 300px;
    --bs-tooltip-padding-x: 20px;
    --bs-tooltip-padding-y: 10px;
    --bs-tooltip-arrow-width: 1rem;
    --bs-tooltip-arrow-height: 0.8rem;
    --bs-tooltip-font-size: 1.5rem;
    width: 200px;
}


.tooltip-inner {
    text-align: left;
}

.btn.category {
    height: 30px;
    line-height: 30px;
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
    --bs-btn-font-size: 2rem;
    --bs-btn-active-bg: #198754;
    /*--bs-btn-active-color: #{shade-color(--bd-violet, 20%)};*/
}

.btn.category span {
    margin-top: 0.3rem;
}

#memoListBox > header {
    margin-top: 4px;
}

#btnSearch {
    display: none;
    min-width: 50px;
    font-size: 1.3rem;
    margin-left: 5px;
}

#inputSearch::placeholder {
    color: darkgray;
}

.btn-delete {
    display: none;
}

#symbol_help {
    font-size: 2rem;
}

.empty {
    border: 0;
    background: 0;
    line-height: 1rem;
    padding: 8px;
}

.modal-title {
    font-size: 20px;
    font-weight: bold;
}

.modal-body {
    padding: 0;
}

.modal-body li {
    cursor: pointer;
    padding: 8px 16px;
    margin: 0;
}

.modal-body li:hover {
    background: rgba(0, 0, 180, 0.1);
}


.help-row {
    margin: 8px;
}

.help-row span {
    line-height: 30px;
    font-size: 1.6rem;
}

.help-row span.name {
    font-size: 1.8rem;
    margin-left: 10px;
}


#memoDetailBox {
    margin: 0;
    padding: 8px;
}

#memoDetailClose {
    position: absolute;
    right: 8px;
    padding: 12px;
}

#memoDetailTitle {
    margin-top: 4px;
}

.tools button {
    font-size: 14px;
    margin-top: 4px;
}

.material-symbols-outlined.copy {
    color: #2F70FE;
}
.material-symbols-outlined.download {
    color: #2F70FE;
}

.logo {
    width: auto;
    height: 30px;
}

li.major, li.minor {
    display: none;
}

li.symbol {
    font-size: 1.6rem !important;
}

#password-wrap {
    max-width: 300px;
}

#password-wrap > div {
    min-width: 300px;
    margin-bottom: 10px;
}

#password-wrap * {
    font-size: 1.4rem;
}

#logout {
    color: darkred;
}

/*div.category.favorite {*/
/*    background: #ece1be;*/
/*}*/

button.bookmark {
    background: white !important;
}

button.bookmark > span {
    font-variation-settings:
            'FILL' 0,
            'wght' 100,
            'GRAD' 0,
            'opsz' 40;
    font-size: 3rem;
}

button.bookmark.favorite > span {
    font-variation-settings:
            'FILL' 100,
            'wght' 200,
            'GRAD' 0,
            'opsz' 40;
    color: rgb(255, 212, 0);
    font-size: 3rem;
}

body.pace-running::after {
    content: ' ';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.5); /* 반투명한 흰색 배경 */
    z-index: 9999; /* 프로그래스 바보다 앞에 오도록 높은 z-index 설정 */
    pointer-events: all; /* 마우스 이벤트 차단 */
}

li.symbol>.material-symbols-outlined {
    vertical-align: middle;
}