@charset "utf-8";

:root {
    --sign-opacity: 1;
    --social-transform: translateY(0);
    --user-transform: translate(-50%);
    --lb-dsp: block;
    --loading-gif: url('images/loading.webp');
}

#app a { color: #2196F3; border-radius: 0.4rem; margin-right: 0.3rem; font-size: 1.3rem; text-decoration: none; font-weight: 600; }
#app a::before { font-family: 'icomoon'; content: "\e915"; position: relative; bottom: -1px; right: -2px; text-decoration: none; }
.no-transition * { transition: none !important; }
a:hover, a:active { color: #013ba7; }
p, h1, h2, h3, h4, h5, h6 { margin-block-start: .5em; margin-block-end: .5em; }
main { margin-top: 2rem !important; }
html, body { width: 100%; height: 100%; margin: 0 auto; background-color: var(--BACKGROUND_COLOR); font-size: 12px; }
#menu { display: none; transition: opacity .3s ease; }
header, aside, main, footer { box-sizing: border-box; opacity: 1; }
.hidden { display: none !important; }
.opacity0 { opacity: 0; }
.opacity1 { opacity: 1; }

@media (max-width:880px) {
    :root { --max-width: 40rem; --item-max-width: 35rem; --item-max-margin: 0; --setting-display: flex; }
    #menu { display: flex; }
    header, aside, main, footer, #tools { max-width: var(--max-width); }
    header, main, #tools, footer { margin: 0 auto; }
    .date2 { display: none; }
    .editor, .post { margin: 1.5rem 0 !important; }
}
@media (max-width:480px) {
    header, aside, main, footer, #tools { max-width: 100%; }
}

@media screen and (min-width:881px) {
    :root { --max-width: 65rem; --item-max-width: 80%; --item-max-margin: 3%; }
    #app { font-size: 14px; max-width: var(--max-width); justify-content: center; justify-content: space-around; display: flex; margin: 0 auto; }
    header, aside, main { max-width: 30rem; }
    .upper { width: 28rem; }
    .lower { width: 34rem; margin-top: 2rem; }
    main { margin-top: 0rem !important; text-align: left; max-width: 34rem; }
    .FIX, .post { break-inside: avoid; margin-bottom: 1.5rem !important; flex: 1; }
    header { position: fixed; top: 2rem; width: 28rem; }
    .avatar { width: 5rem !important; height: 5rem !important; }
    .userinfo { font-size: .9rem; }
    .post, .editor { width: 34.5rem; }
    .editor { margin-bottom: 1.5rem; }
    .date, .current { display: none; }
    .date>button { margin-left: 0; }
    .mybutton:hover { background-color: #00000010; }
    .calendar-grid { background: #f7f7f7; padding: 1px; }
    .pccalendar { background: white; }
    #menu { display: none; }
    .date2 { display: inline; }
}

@media screen and (min-width:1240px) {
    :root { --max-width: 101rem; --setting-colum: 2; --setting-display: block; }
    #app { max-width: var(--max-width); }
    .upper { width: 30rem; position: sticky; top: 0px; }
    .lower { flex: 1; }
    main { max-width: 100%; column-count: 2; gap: 1.6rem; display: flex; }
}

@media screen and (min-width:1600px) {
    :root { --max-width: 126rem; }
    #app { max-width: var(--max-width); }
    main { column-count: 3; gap: 1.6rem; }
    .post, .editor { width: 31rem; }
}

::-webkit-scrollbar { display: none; }
html { scrollbar-width: none; }

.topbar { z-index: 99; text-align: right; background: var(--CARD_COLOR); padding: .7rem .6rem; }
.topbar>button { padding: .8rem; font-size: 1.4rem; margin: 0 .2rem; min-height: 3rem; }

.userinfo { position: relative; aspect-ratio: 5/3; overflow: hidden; }
.user { position: absolute; z-index: 2; color: white; text-align: center; bottom: 1%; left: 50%; transform: var(--user-transform); width: 100%; }
.user h2 button::before { display: block; font-size: 1.4rem; }
.user p { opacity: var(--sign-opacity); transition: opacity .4s ease-in-out; }
.avatar { position: relative; margin: auto; width: 6.5rem; height: 6.5rem; overflow: hidden; border-radius: 50%; border: .15rem solid white; user-select: none; -moz-user-select: none; -webkit-user-select: none; }
.social { margin: 1rem; user-select: none; -moz-user-select: none; -webkit-user-select: none; transform: var(--social-transform); opacity: var(--sign-opacity); transition: transform .4s ease, opacity .4s ease; min-height: 2.4rem; }
.social>button { font-size: 1.4rem; }
.background { user-select: none; -moz-user-select: none; -webkit-user-select: none; position: absolute; top: 0; left: 0; z-index: 1; }
.background>div { width: 100%; height: 100%; background-color: #00000067; }
.background>img { width: 100%; height: auto; display: block; }
.background::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #0000002f; mix-blend-mode: darken; }

aside { position: sticky; z-index: 999; top: 0; background: var(--CARD_COLOR); padding: .7rem .6rem; display: flex; justify-content: space-between; transition: box-shadow .3s ease; margin: auto; }
.filter>button, .search>button, .current>button { font-size: 1.4rem; padding: .8rem; display: flex; align-items: center; min-height: 3rem; }
.filter { display: flex; align-items: center; }
.filter>span { padding: .7rem .5rem .7rem .8rem; max-width: 5rem; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size: .8rem; padding-right: .8rem; color: var(--TAG_COLOR); background-color: color-mix(in srgb, var(--TAG_COLOR) 20%, white 80%); }
.current { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); user-select: none; -moz-user-select: none; -webkit-user-select: none; }
.current>button { padding: .7rem; }
#current_B>.icon-calendar { pointer-events: none; }
#current_B>i::after { display: block; transform: translateY(0px); }

.post { animation: fadein .3s ease; overflow: hidden; }
.post, .editor { width: 100%; min-height: 4rem; background-color: var(--CARD_COLOR); padding: 0 2rem; box-sizing: border-box; position: relative; transition: max-height .3s; }
.post_pin::after, .post_pin_disable::after { font-family: 'icomoon'; content: '\e91e'; top: 0.1rem; left: 0.1rem; position: absolute; transform: rotate(323deg); animation: fadein .3s ease; font-size: 1.6rem; padding: .6rem; }
.post_pin::after { color: #ff3714; }
.post_pin_disable::after { color: #d1d1d1; }
.post_hidden { background-color: var(--CARD2_COLOR); }
.post_hidden .tag { background-color: #2c3283; color: #d9d9d9; }
.post_hidden .meta { color: #d9d9d9; }
.title { padding-top: 1rem; }
.title h1 { color: var(--TITLE_COLOR); z-index: 2; overflow-wrap: anywhere; }
.content { position: relative; margin: 1rem 0; line-break: anywhere; max-height: 38rem; overflow: hidden; overflow-wrap: anywhere; transition: max-height .3s cubic-bezier(0.99, -0.01, 0.55, 0.7); }
.tag { color: var(--TAG_COLOR); background: color-mix(in srgb, var(--TAG_COLOR) 20%, white 80%); padding: .5rem .8rem; border-radius: 4rem; margin-right: .8rem; font-size: 1rem; display: inline-block; user-select: none; letter-spacing: .2rem; transition: opacity .2s; }
.content .tag { vertical-align: top; transform: translateY(0.2rem); }
.content, .content p, .editor p { font-size: 1.5rem; letter-spacing: .2rem; line-height: 2.5rem; color: var(--CONTENT_COLOR); min-height: 2.5rem; word-break: break-all; }
.readmore { width: 100%; text-align: center; transform: translateY(-1rem); transition: box-shadow 0.2s ease, background-color 0s ease; --shadow-color: var(--CARD_COLOR); background: var(--shadow-color); position: absolute; left: 0; transform: translateY(-3.8rem); padding-bottom: 1rem; }
.readmore>button { background-color: var(--BACKGROUND_COLOR); user-select: none; padding: .6rem 2rem; color: #2196f3 !important; }
.meta { color: var(--DESC_COLOR); font-size: 1rem; padding: 1.8rem 0; user-select: none; }
.meta>span { margin-right: .5rem; }
.date2 { margin-right: .2rem; }

.annex, ._annex { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; width: 100%; margin: 0 auto; pointer-events: none; position: relative; z-index: 2; }
.annex>div { width: 100%; background: var(--loading-gif) no-repeat center/cover; aspect-ratio: 1/1; background-size: 50% 50%; }
.annex>div * { width: 100%; overflow: hidden; object-fit: cover; aspect-ratio: 1/1; display: block; pointer-events: all; }
.video::before { font-family: 'icomoon'; content: '\e90f'; position: absolute; color: #ffffffd8; font-size: 2.5rem; top: 50%; left: 50%; transform: translate(-50%, -50%); text-shadow: 0 0 20px #0000009c; pointer-events: none; }
.gif::before { font-family: 'icomoon'; content: '\e91f'; position: absolute; color: #5d5d5d; font-size: 2rem; bottom: -2px; right: 0; background: #ffffff; line-height: 1.4rem; border-radius: .5rem 0 0 0; pointer-events: none; }

.date>button { display: flex; margin: 0 auto; padding: .5rem; color: var(--DESC_COLOR); font-size: 1.2rem; align-items: center; user-select: none; margin-bottom: 1.5rem; }
.date>button>i { pointer-events: none; }

.loadmore { font-size: 1.3rem; width: 100%; height: 15rem; text-align: center; color: var(--DESC_COLOR); user-select: none; display: flex; align-items: center; justify-content: center; }
.copyright { text-align: center; color: var(--DESC_COLOR); user-select: none; display: flex; align-items: center; justify-content: center; height: 5rem; }
#backToTop { position: fixed; bottom: -5rem; right: 3rem; padding: 0.7rem; background: var(--MAIN_COLOR); color: var(--BACKGROUND_COLOR); border-radius: 0.4rem; font-size: 2rem; box-shadow: 0 0 4px #00000030; pointer-events: none; transition: bottom .3s ease; z-index: 1000; }

.mybutton { background: transparent; border-radius: .5rem; border: none; padding: .5rem 1rem; font-size: 1rem; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: opacity .1s linear, transform .1s linear, background-color .1s linear; display: inline-block; user-select: none; }
.mybutton:disabled { opacity: .2; }
.light { color: #fff; }
.dark { color: var(--MAIN_COLOR); }
.lightactive { background: #ffffff3b; transform: scale(.95); opacity: .5; }
.darkactive { background: #00000010; transform: scale(.95); opacity: .5; }

#tools { position: sticky; top: 4.3rem; background: var(--TOOL_COLOR); z-index: 999; box-shadow: inset #00000030 0 -5px 5px -5px; grid-template-rows: 0fr; overflow: hidden; display: none; box-sizing: border-box; transition: all .2s ease-in-out; width: 100%; }
.panel { min-height: 0; }
.searchPanel, .tagsPanel, .calendarPanel { box-sizing: border-box; width: 100%; padding: 2rem; display: flex; justify-content: space-evenly; flex-wrap: wrap; z-index: 1; }
.tagsPanel { flex-wrap: wrap; justify-content: space-between; max-height: 84vh; user-select: none; }
.tagsPanelTag { margin: .5rem .1rem; background: var(--CARD_COLOR); padding: .8rem 1rem; color: var(--TITLE_COLOR); border-radius: .5rem; width: 47%; font-size: 1rem; letter-spacing: .2rem; }
.tagsPanel span { color: #9b9b9b; pointer-events: none; }
.searchTool { width: 100%; margin: 2rem 0 2em 0; display: flex; justify-content: space-around; }
#searchInput { width: 70%; box-sizing: border-box; font-size: 1rem; background: var(--CARD_COLOR); border: none; outline: none; border-radius: .5rem; padding: .6rem 1rem; color: var(--DESC_COLOR); letter-spacing: .1rem; font-size: 1.4rem; }
#searchSubmit { font-size: 1.4rem; }

.calendarTool { width: 100%; margin-bottom: 3rem; display: flex; justify-content: space-around; }
.calendarTool>span { position: absolute; display: block; padding: .6rem; margin-left: 1rem; color: var(--CONTENT_COLOR); }
.calendarView { width: 100%; min-height: 3rem; background: white; margin-top: .5rem; }
.calendar-header { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; padding: .8rem 0; border: 1px solid var(--TOOL_COLOR); border-bottom: none; color: var(--TITLE_COLOR); }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; padding: 1px; background-color: var(--TOOL_COLOR); }
.calendar-day { text-align: center; background-color: #fff; aspect-ratio: 5/4; display: flex; align-items: center; justify-content: center; border: 0; color: #39393A; -webkit-tap-highlight-color: transparent; }
.calendar-day:disabled { color: #e7e7e7; }
.current_day { color: white; z-index: 1; }
.current_day::before { content: ' '; position: absolute; border-radius: 50%; width: 2rem; height: 2rem; z-index: -1; background-color: #03a9f4 !important; }
.today { font-weight: bold; color: #03a9f4; }
.today::before { content: ' '; position: absolute; width: 1.8rem; height: 1.8rem; border: 1px solid #03a9f4; filter: opacity(0.5); border-radius: 50%; }
.pccalendar { margin-top: 2rem; }
#calendarPanelPC { padding: 2rem 0; }
#calendarYear, #calendarMonth { min-width: 8rem; }
.select_right { right: 2rem; }
.select_left { left: 2rem; }

#lightBox { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background-color: #000000e6; z-index: 10000; display: flex; align-items: center; justify-content: center; animation: fadein .3s; }
.lb_container { user-select: none; display: flex; flex-flow: row; flex-wrap: nowrap; align-items: center; transition: all .3s ease; height: 0; width: auto; position: relative; }
.lb_container>* { max-width: 98vw; max-height: 98vh; object-fit: contain; display: block; transition: all .2s cubic-bezier(0, 0, .58, 1); }

#bubble-container { position: fixed; top: .8rem; left: 50%; transform: translateX(-50%); max-width: 90%; z-index: 10001; display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.bubble { position: relative; padding: 0.6rem 1rem; color: white; box-shadow: 0 2px 10px #00000033; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; animation: slideIn 0.3s ease-out forwards; }
.bubble-success { background-color: #c0e9c2; color: #09ad00; }
.bubble-error { background-color: #ffb2ad; color: #ff0000; }
.bubble-warning { background-color: #ffddab; color: #ff8400; }
.bubble-info { background-color: #d9eeff; color: #50b0ff; }
.bubble- { display: none; }
.bubble.hiding { animation: slideOut 0.3s ease-in forwards; }

.weiyu-section { margin-bottom: 1.5rem; }
.weiyu-section-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem 0; background: var(--CARD_COLOR); }
.weiyu-section-header h2 { color: var(--TITLE_COLOR); font-size: 1.4rem; }
.weiyu-publish-btn { background: var(--BUTTON_COLOR); color: white; border: none; padding: .4rem 1rem; border-radius: .4rem; cursor: pointer; font-size: 1.1rem; }
.weiyu-card { background: var(--CARD_COLOR); padding: 1.5rem 2rem; margin-bottom: 0; position: relative; }
.weiyu-header { display: flex; align-items: center; margin-bottom: .8rem; }
.weiyu-avatar { width: 2.8rem; height: 2.8rem; border-radius: 50%; margin-right: .8rem; object-fit: cover; }
.weiyu-author { font-weight: bold; color: var(--TITLE_COLOR); font-size: 1.2rem; }
.weiyu-date { color: var(--DESC_COLOR); font-size: .9rem; margin-left: .8rem; }
.weiyu-content { color: var(--CONTENT_COLOR); font-size: 1.4rem; line-height: 2.2rem; letter-spacing: .1rem; margin-bottom: .8rem; }
.weiyu-images { display: grid; gap: .6rem; margin-bottom: .8rem; }
.weiyu-images[data-count="1"] { grid-template-columns: 1fr; max-width: 60%; }
.weiyu-images[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
.weiyu-images img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: .3rem; cursor: pointer; }
.weiyu-actions { display: flex; gap: 1.2rem; color: var(--DESC_COLOR); font-size: 1.1rem; }
.weiyu-actions button { background: none; border: none; color: var(--DESC_COLOR); cursor: pointer; font-size: 1.1rem; display: flex; align-items: center; gap: .3rem; }

#authModal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; display: none; align-items: center; justify-content: center; }
#authModal.active { display: flex; }
.auth-modal-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); }
.auth-modal-content { position: relative; z-index: 1; background: var(--CARD_COLOR); padding: 3rem; width: 90%; max-width: 40rem; border-radius: .8rem; animation: fadein .3s; }
.auth-modal-close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; font-size: 2rem; color: var(--DESC_COLOR); cursor: pointer; }
.auth-tabs { display: flex; margin-bottom: 2rem; border-bottom: 2px solid var(--TOOL_COLOR); }
.auth-tab { flex: 1; text-align: center; padding: 1rem; background: none; border: none; font-size: 1.4rem; color: var(--DESC_COLOR); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; }
.auth-tab.active { color: var(--BUTTON_COLOR); border-bottom-color: var(--BUTTON_COLOR); }
.auth-form { display: none; }
.auth-form.active { display: block; }
.auth-form input { width: 100%; padding: 1rem; margin-bottom: 1.5rem; border: 1px solid var(--TOOL_COLOR); border-radius: .4rem; font-size: 1.3rem; box-sizing: border-box; background: var(--BACKGROUND_COLOR); color: var(--CONTENT_COLOR); }
.auth-form input:focus { outline: none; border-color: var(--BUTTON_COLOR); }
.auth-submit { width: 100%; padding: 1rem; background: var(--BUTTON_COLOR); color: white; border: none; border-radius: .4rem; font-size: 1.4rem; cursor: pointer; }
.auth-submit:hover { opacity: .9; }
.auth-message { text-align: center; padding: .5rem; margin-bottom: 1rem; font-size: 1.2rem; border-radius: .4rem; display: none; }
.auth-message.error { display: block; background: #ffb2ad; color: #ff0000; }
.auth-message.success { display: block; background: #c0e9c2; color: #09ad00; }

#weiyuModal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; display: none; align-items: center; justify-content: center; }
#weiyuModal.active { display: flex; }
.weiyu-modal-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); }
.weiyu-modal-content { position: relative; z-index: 1; background: var(--CARD_COLOR); padding: 2rem; width: 90%; max-width: 50rem; border-radius: .8rem; }
.weiyu-modal-close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; font-size: 2rem; color: var(--DESC_COLOR); cursor: pointer; }
.weiyu-modal-content textarea { width: 100%; min-height: 10rem; padding: 1rem; border: 1px solid var(--TOOL_COLOR); border-radius: .4rem; font-size: 1.4rem; resize: vertical; box-sizing: border-box; background: var(--BACKGROUND_COLOR); color: var(--CONTENT_COLOR); }
.weiyu-upload-area { border: 2px dashed var(--TOOL_COLOR); border-radius: .4rem; padding: 2rem; text-align: center; margin: 1rem 0; cursor: pointer; color: var(--DESC_COLOR); }
.weiyu-upload-area:hover { border-color: var(--BUTTON_COLOR); }
.weiyu-upload-preview { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.weiyu-upload-preview img { width: 6rem; height: 6rem; object-fit: cover; border-radius: .4rem; }
.weiyu-publish-submit { width: 100%; padding: 1rem; background: var(--BUTTON_COLOR); color: white; border: none; border-radius: .4rem; font-size: 1.4rem; cursor: pointer; }

.comment-list { list-style: none; padding: 0; margin: 0; }
.comment-item { padding: 1.5rem 0; border-bottom: 1px solid var(--TOOL_COLOR); }
.comment-item:last-child { border-bottom: none; }
.comment-author { font-weight: bold; color: var(--TITLE_COLOR); margin-right: 1rem; font-size: 1.2rem; }
.comment-date { color: var(--DESC_COLOR); font-size: 1rem; }
.comment-content { color: var(--CONTENT_COLOR); margin-top: .5rem; font-size: 1.4rem; line-height: 2rem; }
.comment-content p { margin: 0; }
.comment-children { padding-left: 3rem; list-style: none; margin: 0; }
.comment-form { margin-top: 2rem; padding: 0 2rem 2rem; }
.comment-form input, .comment-form textarea { width: 100%; padding: 1rem; margin-bottom: 1rem; border: 1px solid var(--TOOL_COLOR); border-radius: .4rem; box-sizing: border-box; background: var(--BACKGROUND_COLOR); color: var(--CONTENT_COLOR); font-size: 1.3rem; }
.comment-form textarea { min-height: 10rem; resize: vertical; }
.comment-form input:focus, .comment-form textarea:focus { outline: none; border-color: var(--BUTTON_COLOR); }
.comment-submit { padding: .8rem 2rem; background: var(--BUTTON_COLOR); color: white; border: none; border-radius: .4rem; cursor: pointer; font-size: 1.3rem; }

.neighbor-log { display: flex; justify-content: space-between; margin: 2rem 0; gap: 1rem; }
.neighbor-log a { color: var(--BUTTON_COLOR); text-decoration: none; font-size: 1.3rem; max-width: 48%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pagination { text-align: center; padding: 2rem; color: var(--DESC_COLOR); }
.pagination a { display: inline-block; padding: .5rem 1rem; margin: 0 .3rem; background: var(--CARD_COLOR); border-radius: .4rem; color: var(--CONTENT_COLOR); text-decoration: none; }
.pagination a:hover { background: var(--BUTTON_COLOR); color: white; }

.user-center { max-width: 40rem; margin: 2rem auto; }
.user-profile-card { background: var(--CARD_COLOR); padding: 2rem; text-align: center; margin-bottom: 2rem; }
.user-profile-avatar { width: 6rem; height: 6rem; border-radius: 50%; margin-bottom: 1rem; object-fit: cover; }
.user-profile-name { font-size: 1.8rem; color: var(--TITLE_COLOR); margin-bottom: .5rem; }
.user-profile-bio { color: var(--DESC_COLOR); font-size: 1.3rem; }
.user-nav { display: flex; gap: 1rem; justify-content: center; margin-top: 1.5rem; }
.user-nav a { padding: .6rem 1.5rem; background: var(--TOOL_COLOR); border-radius: .4rem; color: var(--CONTENT_COLOR); text-decoration: none; }
.user-nav a:hover, .user-nav a.active { background: var(--BUTTON_COLOR); color: white; }

@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideIn { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes slideOut { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-100%); opacity: 0; } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes encry { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }