/*야호*/
@import url("https://fonts.googleapis.com/css2?family=Do+Hyeon&family=Nanum+Gothic&display=swap");
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.css");
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.test > * {
  border: 1px solid #ff00007a;
}

body,
html {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100%;
  overflow: hidden;
  font-size: 21px;
}

main,
body,
html {
  overflow: hidden;
}

body:not(.dark),body:not(.dark) :is(.background,.selectPanel,.post){
  background:#fcfcff;
  color:black;
}

.dark,
body.dark :is(.background,
.selectPanel,.post,header)
{
  background: #0a0a0f;
  color: white;
}

.cherry.dark,
.cherry .background {
  background: #080505;
  color: white;
}

@media (max-width: 550px) {
  body,
  html {
    font-size: 5.5vw !important;
  }
}

body,
main {
  font-family: "Pretendard Variable", sans-serif;
  display: flex;
  flex-direction: column;
}

main {
  display: flex;
  flex-direction: column;
  height:100%;
}

main,
#content {
  width: 100vw;
  margin: 0;
  padding: 0;
  overflow: hidden;
  max-width: 25rem;
  margin: 0 auto;
  flex: 1;
}

#content {
  position:relative;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  /* padding:0.7rem; */
  /* align-items:center; */
  animation: pageIn 0.5s ease;
}

aside {
  display: flex;
  width: 82.5%;
  height: 20vw;
  position: absolute !important;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  justify-content: space-between;
  padding: 0.05rem 1.5rem;
  border-radius: 2rem;
  max-width: 14.5rem;
  min-height: 2rem;
  max-height: 3.3rem;
  transition: all 0.5s ease;
  /* backdrop-filter:blur(1rem) saturate(70%) !important; */
}
body.dark aside{/* background: rgb(31 31 37 / 50%) !important; */}

body.dark.cherry  aside{background: rgb(27 26 26 / 50%) !important;}

aside > * {
  height: 100%;
}
.icon {
  transition: all 1s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15em;
  justify-content: center;
}
aside img {
  height: 1.4rem;
  transition: all 0.65s ease;
  margin-bottom:0.85em;
}
aside .selected{
  
  animation:iconCoverSelect 0.9s ease;
}
aside .selected::after{
  position:absolute;
  width:265%;
  height:85%;
  border-radius:2rem;
  background:#ffffff25;
  content:'';
}
body:not(.dark) aside .selected::after{
  background:#00000030;
}
aside .selected:is(:first-of-type,:last-of-type)::after{
  border-radius:2rem;
}
aside .selected img {
  animation: show 1s ease;
}
aside .icon:not(.selected) :is(.name, img) {
  opacity: 0.3;
}
body:not(.dark) aside .icon:not(.selected) :is(.name, img){
  opacity:0.45;
}

aside .icon:not(.selected):hover>*:not(.newLabel){opacity:0.5}

aside .icon{position:relative;}
aside .name {
  font-size: 0.6em;
  font-weight: 700;
  transition:all 0.5s ease;
  position:absolute;
  width:4.5em;
  left:50%;
  bottom:0.75em;
  text-align:center;
  height:1.15em;
  transform:translateX(-50%);
  overflow:hidden;
  line-height:1em;
  
}

aside.hide {
  height: 2rem;
  width: 95%;
  opacity: 0;
  pointer-events:none;
  transform:translateY(2em) translateX(-50%)
}
aside.hide img {
  height: 0.8rem;
}

.glass:not(.lower *) {
  background: rgba(255, 255, 255, 0.025);
  backdrop-filter: blur(0.5rem) saturate(110%) contrast(1.1);
  -webkit-backdrop-filter: blur(0.5rem) saturate(70%);
  transition: all 0.5s ease;
  box-shadow: 0 0.3em 0.2em rgba(0, 0, 0, 0.08),
    inset -0.1em -0.1em 0.25em #ffffff15;
  overflow: hidden;
  position:relative;
}

body:not(.dark):not(.lower) .glass {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 1px 0 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.04),
    inset -1px 0 0 rgba(0, 0, 0, 0.02);
  background:#00000010;
}
.glass:not(.lower *):not(:is(.post, .onContent > *)):hover {
  filter: brightness(1.1);
  cursor: pointer;
}
body.dark:not(.lower) .glass {
  box-shadow: 0 0.3em 0.2em rgba(0, 0, 0, 0.08);
  background: rgb(56 56 67 / 45%);
}

body.dark:not(.lower) .glass.blueB {
  box-shadow: 0 0.3em 0.2em rgba(0, 0, 0, 0.08);
}
body.dark.cherry .glass:not(.lower *) {
  box-shadow: 0 0.3em 0.2em rgba(0, 0, 0, 0.08),
    inset -0.05em -0.05em 0.5em #ffffff05;
  background: rgb(87 74 76 / 50%) !important;
}

.glass:not(.lower *)::after {
  top:0;
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;

  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.15),
    rgba(0, 0, 0, 0) 50%,
    rgba(0, 0, 0, 0.05)
  );
  animation: show 0.5s ease;

  padding: 1px;

  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  transition:all 0.5s ease;
  opacity:0.5 !important;
}

body:not(.dark) .glass:not(.lower *)::after {
  background: #00000030 !important;
  box-shadow: none !important;
  
}
body.dark .glass:not(.lower *)::after {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.65),
    rgba(255, 255, 255, 0.05) 40%,
    rgba(255, 255, 255, 0.5)
  );
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
  
}

.lower .glass{
  backdrop-filter:blur(1rem);
  background: rgba(255,255,255,0.08);
  box-shadow: 0 1px 0 rgba(0,0,0,0.05);
  border:1px solid #ffffff20 !important;
}
.lower.cherry .glass{
  background: rgb(255 210 210 / 11%) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.05);
}
body.dark .darkImg {
  filter: invert(1);
}

@keyframes iconSelect {
  0% {
    transform: scale(1);
  }

  30% {
    transform: scale(0.7);
  }

  55% {
    transform: scale(1);
  }

  75% {
    transform: scale(0.8);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes iconCoverSelect {
  0% {
    transform: scale(1);
  }

  30% {
    transform: scale(0.7);
  }

  55% {
    transform: scale(1);
  }

  75% {
    transform: scale(0.95);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes pageIn {
  0% {
    opacity: 0;
    transform: scale(0.98);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

header {
  padding: 0.7rem;
}
#pageTitle {
  font-size: 1.25em;
  font-weight: 600;
  display: flex;
  gap: 1rem;
  height: 1.25rem;
  align-items: center;
}
#pageTitleTitle {
  margin-right: auto;
}
#pageTitleIconCover {
  display: flex;
  height: 100%;
  align-items: center;
  gap: 0.6rem;
}
#pageTitleIconCover img {
  height: 1.15em;
}

aside,
#pageTitle {
  user-select: none;
}

.prof {
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1;
  position: relative;
  transition: all 0.5s ease;
  user-select: none;
  background: #eaeaea;
  outline: 1px solid #00000020;
}
body.dark .prof {
  background: #ffffff15;
  border-color: #ffffff15;
  outline: 1px solid #ffffff25;
}
.prof img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: all 0.5s ease;
}
.prof .loading {
  height: 70%;
  position: absolute;
}
.blueB .loading{filter:invert(1);}
.prof:hover {
  filter: brightness(0.75);
  cursor: pointer;
}
.prof:active {
  transform: scale(0.9);
}

#pageTitleIconCover .prof{
  height:100%;
}

body.dark #__bottomSheet {
  background: rgb(30 30 35) !important;
  border-top: #ffffff25 1px solid;
}

body.dark #__bottomSheet > div:first-of-type > div {
  background: #6e6e75 !important;
}
#profCover {
  outline: 0rem solid transparent;
  border-radius: 2rem;
  transition: all 0.5s ease;
  animation: show 0.5s ease;
  height: 1.1em;
}
#profCover:hover {
  outline: 0.35rem solid #00000020;
}
body.dark #profCover:hover {
  outline: 0.35rem solid #ffffff20;
}

.icon {
  position: relative;
}
.newLabel {
  position: absolute;
  font-size: 0.5em;
  border-radius: 1rem;
  transition: all 0.25s ease;
  background: /*#FB345D*/ #FB345D;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  min-width: 1.6em;
  animation: show 0.5s ease;
  font-weight: 800;
}

aside .newLabel{
  padding: 0.1rem 0.2rem;
  top: 0.4em;
  right: -0.37em;
  font-size:0.56rem;
}
@keyframes show {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes blurShow {
  0% {
    filter: blur(0.1em);
    opacity: 0;
  }
  100% {
    filter: none;
    opacity: 1;
  }
}
@keyframes like {
  0% {
    transform: scale(1) translateY(0);
  }
  20% {
    transform: scale(0.88) translateY(0.12em);
  }
  45% {
    transform: scale(1.18) translateY(-2px);
  }
  65% {
    transform: scale(0.97) translateY(0.5px);
  }
  80% {
    transform: scale(1.04) translateY(-0.5px);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}

@keyframes up {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(0.9) translateY(3.5px);
  }
  75% {
    transform: scale(1.12) translateY(-4.5px);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes isMore {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-30%, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes biggerShow {
  0% {
    transform: scale(0.5);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes biggerUpShow {
  0% {
    transform: scale(0.8) translateY(4rem);
    opacity: 0;
  }
  50% {
    transform: scale(1.1) translateY(-0.2rem);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

@keyframes widthBigger {
  0% {
    width: 50%;
    opacity: 0;
  }
  100% {
    width: 100%;
    opacity: 1;
  }
}
@keyframes biggerUpHide {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(0.75) translateY(30%);
    opacity: 0;
  }
}

@keyframes glow {
  0% {
    filter: none;
  }
  50% {
    filter: brightness(1.15) contrast(1.1);
  }
  100% {
    filter: none;
  }
}
@keyframes spin {
  0% {
    rotate: 0deg;
  }
  100% {
    rotate: 360deg;
  }
}

.loading {
  aspect-ratio: 1;

  border-radius: 50%;
  border: 0.15em solid rgba(255, 255, 255, 0.12);
  border-top: 0.15em solid rgba(255, 255, 255, 0.9);

  position: relative;

  animation: spin 0.8s ease infinite,biggerShow 0.75s ease;
}

.loading::after {
  content: "";
  position: absolute;
  inset: -0.25rem;
  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.15),
    transparent 60%
  );

  filter: blur(0.4em);
  opacity: 0.6;
}

.profBar {
  display: flex;
  gap: 0.525em;
  height: 1.5rem;
  align-items: center;
  user-select:none;
  transition:all 0.5 ease;
}
.profBar .prof {
  height: 100%;
}
.profBar .profBarTxt {
  display: flex;
  gap: 0.5em;
  font-size: 0.8em;
  font-weight: 600;
}
.profBar .profBarTxt .info {
  opacity: 0.35;
  font-weight: 550;
}
body:not(.dark) .profBar .profBarTxt .info{
  opacity:0.5;
}
.post {
  display: flex;
  flex-direction: column;
  gap: 0.55em;
  padding: 0.75em 0;
  width: 100%;
  animation: show 1s ease;
  position: relative;
  transition: all 0.25s ease;
  font-size: 1.04rem;
  padding-bottom:0
}

.post .profBar{
  gap:0.5em;
}

.post .nick{
  opacity:0.95;
  font-weight:600;
}

.post.hide {
  transition: all 1s ease, height 1s ease 0.5s;
  height: 0;
  overflow: hidden;
  padding: 0;
  opacity: 0;
  filter: blur(1rem);
}

.postTxt {
  white-space: pre-wrap;
  word-break: break-word;
  font-weight: 400;
  font-size:0.97em;
  line-height:1.5em;
  line-height: 1.55;
  letter-spacing: -0.01em;
}

.postTxt *:not(br) {
  display:inline-flex;
  align-items:center;
  line-height:1;
}
.postTxt:active {
  transform: scale(0.975);
}

.post > *:not(.postWindow) {
  padding: 0 0.5em;
  padding-left: 0.7em;
}

.postProf {
  width: 100%;
  height: 1.5em;
  display: flex;
  font-size: 0.89em;
}
.postProf .profBar {
  height: 100%;
}

.postContent {
  width: 100%;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: 0.03em;
  padding-left: 0.9em !important;
  overflow-x: auto;
  scrollbar-width: none;
  display: flex !important;
  flex-wrap: wrap;
  flex-direction: column;
  font-size: 0.85em;
  line-height: 1.5;
  letter-spacing: 0.03em;
}

:is(.row) .post {
  /* border-bottom: 1px solid #ffffff25; */
}

body:not(.dark) :is(.row) .post {
  border-color:#00000035
}
.postInfo {
  display: none;
}

.postReact {
  display: flex;
  gap: 0.75em;
  margin-top: 0.25em;
  padding: 0 0.85em !important;
  font-size:0.925em;
}

.postReact > * {
  display: flex;
  gap: 0.35em;
  align-items: center;
  height: 1.1em;
  font-size: 0.95em;
}

.postReact > *:hover {
  cursor: pointer;
}
.postReact > * .svgCover {
  height: 100%;
  aspect-ratio: 1;
}

.postReact > * span {
  font-size: 0.95em;
  font-weight: 600;
  transition: all 0.5s ease;
  margin-left:0.1em;
}

.postReact > * svg {
  height: 100%;
  display: inline-block;
  stroke: #000000;
  stroke-width: 12px;
  stroke-linejoin: round;
  transition: all 1.2s ease, stroke 0s ease;
  fill: none;
  transition: all 0.5s ease, stroke 0.1s ease;
}

.postReact > *:not(.active) {
  opacity: 0.45;
}

body:not(.dark) .postReact > *:not(.active) {
  opacity: 0.525;
}

body.dark .postReact svg:not(.active *) {
  stroke: #ffffff;
}

.postReact .active {
  color: #FB345D;
  transition: all 0.5s ease;
}
.postReact .active svg {
  fill: #FB345D;
  stroke: #FB345D;
  animation: like 1s ease;
}

.postReact .active span {
  font-weight: 650;
}
.postChild .postHr{
  display:none;
}
.postChild .post{
  padding-top:0.5em;
  padding-bottom:0.25em !important;
}
.postChild {
  padding: 0 !important;
  transition: all 0.5s ease;
}
.postChild .post:not(.view #mainContent > .post > .postChild > .post) {
  padding:0.25em;
  padding-left: 1em;
}
.postChild .post:not(.view #mainContent > .post > .postChild > .post)::before {
  content: "";
  position: absolute;
  top: 0.4em;
  left: 0.5em;

  width: 0.85em;
  height: 0.85em;

  background-image: url("https://i.ifh.cc/zamf06.png");
  background-size: contain;
  background-repeat: no-repeat;

  pointer-events: none;
  transform: scaleY(-1);
  opacity: 0.25;
}
body.dark .postChild .post::before {
  filter: invert(1);
}

.post .postWindow {
  position: absolute;
  display: none;
  flex-direction: column;
  border-radius: 0.5rem;
  font-size: 0.8em;
  overflow: hidden;
  top: 3.5em;
  right: 0.75em;
  z-index: 1000;
  animation: show 0.5s ease;
  letter-spacing:0.15em;
}
.post .postWindow.show {
  display: flex;
}
.post .postWindow div {
  display: flex;
  align-items: center;
  padding: 0.65rem 0.75rem;
  gap: 0.5rem;
  width: 100%;
  transition: all 0.5s ease;
  font-weight: 500;
  opacity: 0.8;
}

body.dark .post .postWindow img {
  filter: invert(1);
}
.post .postWindow div:hover {
  background: #00000020;
}
body.dark .post .postWindow div:hover {
  background: #ffffff20;
}

.post .postWindow img {
  height: 1.25em;
  width: auto;
  flex-grow: 0;
}

.post .profButton {
  margin-left: auto;
  margin-right: 0.2em;
  height: 100%;
  aspect-ratio: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.5rem;
  transition: all 0.5s ease;
  cursor: pointer;
}

.post .profButton:hover {
  background: #00000020;
}

.post .profButton:active {
  transform: scale(0.9);
  background: #00000025;
}
.post .profButton img {
  height: 0.175rem;
  width: auto;
  opacity: 0.5;
  transition: all 0.5s ease;
}
.post .profButton:hover img {
  opacity: 1;
}

body.dark .post .profButton {
  filter: invert(1);
}

#pageTitleButton {
  height: 100%;
  display: flex;
  align-items: center;
  transition: all 0.25s ease;
}
:is(#pageTitleButton, #pageTitleIconCover):hover {
  cursor: pointer;
}
#pageTitleButton #pageTitleBUtton img{}
#pageTitleButton img {
  height: 0.8em;
}


#mainContent {
  width: 100%;
  min-height: 100%;
  height: auto;
  padding-bottom: 15rem;
  overflow: hidden;
  overflow-y: auto;
  scrollbar-width: none;
}

.parentInfo,.bubbleBox {
  width: fit-content;
  font-size: 0.7em;
  padding: 0.25rem 0.5rem;
  border-radius: 2rem;
  font-weight: 600;
}
.parentInfo{
  opacity: 0.9;
  margin: 0.7em;
  margin-bottom: 0.8em;
  color: #ffffff70;
}

.postReact {
  position: relative;
  width:fit-content;
}
.postChild .post > .postHr {
  background:none;
}
.onContent,
.bigAlarm {
  position: absolute;
  top: 0 !important;
  left: 0 !important;
  width: 100%;
  height:100% !important;
  z-index: 1000;
  flex:1;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  opacity: 1;
  transition: all 0.25s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: show 0.5s ease;
}

.bigAlarm{
  z-index:10000 !important
}

.onContent .writter {
  width: 90%;
  max-width: 20rem;
  height: fit-content;
  max-height: 22rem;
  border-radius: 1rem;
  overflow-x: hidden;
  padding: 0;
  /* backdrop-filter:blur(1rem) !important; */
  /* background: #ffffff20 !important; */
  gap: 0;
  overflow-y:auto !important;
}
.onContent .writter .postMenus img {
  height: 1.4rem;
  filter: invert(1);
  opacity: 0.3;
  user-select: none;
}

textarea {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  resize: none;
  font-size: 1em;
  font-weight: 500;
  font-family: "Pretendard Variable", sans-serif;
  scrollbar-width: none;
}

textarea::placeholder {
  opacity: 0.3;
  color: black;
}
textarea::placeholder {
  color: #ffffff;
  user-select: none;
}
body.dark textarea {
  color: white;
}

.writterHeader {
  padding: 0rem 0.8rem !important;
  border-bottom: 1px solid #ffffff25;
  margin-top: 0 !important;
  height: 2.6rem;
  display: flex;
  align-items: center;
  user-select: none;
  margin-bottom: 0 !important;
}

.onContent .postContent {
  padding: 0em 0.2rem !important;
  margin-top: 0.75rem;
  margin-bottom:1rem;
}
.onContent .postTail {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  align-items: center;
}
*.cherry #content *.blueB{
  background:linear-gradient(
    180deg,
    #ff6483 0%,
    #ff3a69 100%
  ) !important;
}
.blueB:hover {
  filter: brightness(1.08);
}

.blueB:hover {
  filter: brightness(1.15);
}

.button {
  padding: 0.5rem 1.1rem;
  border: none;
  border-radius: 0.9rem;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.875rem;
  transition: all 0.5s ease;
  line-height: 1;
  user-select: none;
}
.button:active {
  transform: scale(0.85);
}
.writter .parentInfo {
  margin-left: 0;
  margin-top:0;
}
.postImg {
  width: fit-content;
  transition:all 0.5s ease;
}
.postImg:not(:has(.single)) {
  width: 100%;
}
.imgList {
  height: 10em;
  overflow: hidden;
  display: flex;
  gap: 0.5em;
  width: 100%;
  overflow-x: auto;
  border-radius: 0.5em;
  margin-top: 0.5em;
  scrollbar-width: none;
}
.imgList.single {
  height: 15em;
  width: fit-content;
}
.imgList .imgCover {
  height: 100%;
  overflow: hidden;
  width: fit-content;
  border-radius: 0.7em;
  flex-shrink: 0;
  border: 1px solid #ffffff25;
  max-width: 20em;
  min-width: 10em;
  position:relative;
  transition:all 0.5s ease;
  display:flex;
  justify-content:center;
  align-items:center;
}
.imgList img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.button .loading {
  height: 1em;
  margin-right: 0.5em;
}
.imgViewer {
  width: 90vw;
  overflow: auto;
  border-radius: 1rem;
}
#alarmWindowList {
  position: absolute;
  bottom: 4.75rem;
  width: 70vw;
  min-width: 12rem;
  max-width: 20rem;
  display: flex;
  flex-direction: column;
  height: fit-content;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100000;
  align-items: center;
  gap: 0.5rem;
}
#alarmWindowList > * {
  display: flex;
  justify-content: center;
  width: fit-content;
  padding: 0.7rem;
  border-radius: 1rem;
  font-size: 0.85em;
  font-weight: 600;
  text-align: center;
  animation: biggerUpShow 0.75s ease;
  transition: all 0.5s ease;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

#alarmWindowList > *.hide {
  animation: biggerUpHide 0.5s ease forwards;
}

#pageTitleButton:active {
  transform: scale(0.8);
}

.selectPanel {
  display: flex;
}

.selectPanel .selected::after {
  content: "";
  position: absolute !important;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
  height: 0.175em;
  background: #ffffff !important;
  border-radius: 1rem;
  bottom: -0;
  animation: widthBigger 0.5s ease;
}

body:not(.dark) .selectPanel .selected::after{
  background: #000000 !important;
}

.selectPanel {
  padding: 0 0.5rem;
  display: flex;
  gap: 0.5em;
  user-select: none;
  border-bottom: 1px solid #ffffff25;
  position:sticky;
  top:0;
  z-index:1000;
}

body:not(.dark) .selectPanel{
  border-color:#00000035;
}

.selectPanel div {
  font-weight: 600;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1em;
  padding: 0.7em;
  padding-top:1em;
  transition: all 0.5s ease;
  opacity: 0.5;
}

.selectPanel div:hover {
  cursor: pointer;
  opacity: 0.9;
}

.selectPanel .selected {
  font-weight: 700 !important;
  opacity: 1;
  position:relative;
}

.postChildToggle {
  font-size: 0.8em;
  padding: 0.25em 0.6em !important;
  font-weight: 550;
  width: fit-content;
  border-radius: 1rem;
  margin-left: 0.75em;
  color: #ffffff50;
}
.postChildToggle.hide{display:none}
.postChild.hide:not(.view .root > .postChild) {
  transition: all 1s ease, height 1s ease 0.5s;
  height: 0;
  overflow: hidden;
  padding: 0;
  opacity: 0;
}

.parentInfo span:hover {
  text-decoration: underline;
}
.onContent .window,
.bigAlarm .glass {
  width: 80%;
  max-width: 18rem;
  min-height: 10rem;
  border-radius: 1rem;
  background: #ffffff15 !important;
}

body:not(.dark) :is(.onContent .window,
.bigAlarm .glass){
  color:white;
}

.txtInput {
  border-radius: 1rem;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  font-size: 0.9em;
  display:flex;
  flex:1;
}
.txtInput input {
  width: 100%;
  background: none !important;
  border: none;
  padding: 0;
  margin: 0;
  outline: none;
  font-size: 1em;
  font-weight: 500;
}

body.dark input {
  color: white;
}

.bigAlarm .glass {
  height:fit-content;
  min-height:7rem !important;
  position: relative;
  flex-direction: column;
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  animation: biggerShow 0.5s ease;
  /* padding-top: 1rem; */
  color: white !important;
  font-size:0.95em;
  position:relative !important;
  padding-bottom:2.5em;
}
.bigAlarm:not(:has(.title)) .content{
  font-size:1.1em !important;
  font-weight:500
}

.bigAlarm .title {
  opacity: 1;
  font-size: 1.1em;
  margin-bottom: 0.2em;
  font-weight: 650;
  max-width: 90%;
  user-select: none;
  margin-top:1rem;
}
.bigAlarm .content {
  opacity: 0.4;
  max-width: 85%;
  display: flex;
  justify-content: center;
  text-align: center;
  line-height: 1.25;
  margin:0.5em auto;
  font-size:0.95em;
}
.bigAlarm > div > article {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position:absolute;
  bottom:0;
  height:2.5rem;
}

.bigAlarm > div > article button {
  width: 100%;
  margin: 0;
  font-weight: 550;
  height:100%;
  font-size: 0.92em;
  border-radius: 0;
  background: transparent !important;
  border: 1px solid #ffffff30;
  border-bottom: none;
  border-left: none;
  filter: none !important;
  color: white;
  line-height:1em;
}
.bigAlarm button:nth-of-type(2) {
  border-right: none;
}
.bigAlarm.red button:first-of-type {
  color: #ff4646 !important;
}
.bigAlarm button:hover {
  background: #00000010 !important;
}
body.dark .bigAlarm button {
  border-color: #ffffff15;
}
body.dark .bigAlarm button:hover {
  background: #ffffff15;
}

.writter .postContent textarea {
  min-height: 1em;
}
.writter .cover {
  overflow: auto;
  scrollbar-width: none;
  padding-top: 0.5rem;
}
.writter .postImg:has(.imgCover) {
  height: 9rem;
  margin-top: 0;
  margin-bottom: 0.5rem;
  overflow: hidden;
}
.writter .postImg:not(:has(.imgCover)){
  height:0
} 
.writter .imgList {
  margin-top: 0;
  height: 100%;
  transition:all 0.5s ease;
}
.writter .imgList > * {
  max-width: 5rem;
  animation:pageIn 1s ease;
}
.writter .postTail .button {
  margin: 0.2rem;
}
.onContent:not(:has(.postImg img)) .postTail {
  margin-top: 0.5rem;
}

* body span.mention {
  flex-grow: 0;
  flex-basis: auto;
  max-width: auto;
  border-radius: 0.1em;
  height: 1em;
  padding: 0.1em 0.1em;
  font-weight: 680;
  color: #5ba5ff !important;
  transition: all 0.5s ease;
  display: inline-flex;
  align-items: center;
  text-align: center;
  justify-content: center;
}
* body span.mention:hover {
  color: #0f7bff !important;
  background: #0073ff26;
}

.writterHeader > *:last-child {
  display: flex;
  justify-content: center;
  align-items: center;
  outline: 0rem solid #00000000;
  transition: all 0.25s ease;
}
.writterHeader > *:last-child:hover {
  background: #ffffff20;
  outline: 0.45rem solid #ffffff20;
  border-radius: 1rem;
}
.writterHeader > *:last-child:active {
  transform: scale(0.75);
}
body:not(:has(aside.hide)) #mainContent {
  transition: all 0.5s ease;
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 80%,
    rgba(0, 0, 0, 0) 100%
  );

  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 75%,
    rgba(0, 0, 0, 0) 90%
  );
}

.userInfoSheet >div:last-of-type{
  padding: 0 0.5rem;
}
.userInfoSheet .profBar {
  font-size: 1.2em;
  height: 1.55em;
}

.userInfoSheet #profile {
  display: flex;
  align-items: center;
}
.userInfoSheet .profileButton {
  height: 2em;
  margin-left: auto;
  padding: 0.3rem;
  border-radius: 0.65rem;
  background: #00000020;
  transition: all 0.5s ease;
}
.userInfoSheet .profileButton:active {
  transform: scale(0.8);
}
.userInfoSheet .profileButton img {
  height: 100%;
}

.editButton{
  position:absolute !important;
  width:1.25rem;
  aspect-ratio:1;
  border-radius:1rem;
  top:5%;
  right:3.25%;
  padding:0.2em;
  display:flex;
  justify-content:center;
  align-items:center;
  background:#ffffff50 !important;
  box-shadow:none !important;
  flex-shrink:0;
}
.editButton img{
  opacity:0.75;
}

.imgList:has(.imgCover.hide){
  gap:0
}
.imgCover.hide{
  width:0;
  min-width:0;
  opacity:0;
}
.postMenus{
  display:flex;
  gap:0.35rem;
}
.postMenus>*{
  transition:all 0.5s ease;
}
.postMenus>*:active{transform:scale(0.6)}

.inputCover{
  height:2.25em;
  width:auth;
  overflow:hidden;
  display:flex;
  gap:0.5em;
  border-radius:2rem;
  margin:0.5rem;
  align-items:center;
  justify-content:space-between;
}
.inputCover .txtInput{
  width:auto;
}
.inputCover img{
  height:55%;
  margin-right:0.75em;
  opacity:0.5;
  transition:all 0.25s ease;
}
body:not(.dark) .inputCover img{
  filter:invert(1);
  opacity:0.25;
}
.inputCover:has(input:focus)::after{
  filter:brightness(100)
}
.inputCover:has(input:focus) img{
  opacity:1;
}

.profs{
  display:flex;
  aspect-ratio:1;
  flex-wrap:wrap;
  position:relative;
}
.profs .prof{
  outline:0.15em solid #0a0a0f !important;
  position:absolute;
}
body:not(.dark) .profs .prof{
  outline:0.1em solid #fcfcff !important;
  border:1px solid #00000045;
  position:absolute;
}

.profs.n2 .prof{
  width:65%;
}
.profs.n2 .prof:nth-last-of-type(1){
  bottom:0;
  right:0;
}
.profs.n3 .prof{
  width:55%;
}
.profs.n3 .prof:nth-last-of-type(1){
  bottom:0;
}
.profs.n3 .prof:nth-last-of-type(2){
  right:0;
  bottom:0;
}

.profs.n3 .prof:nth-last-of-type(3){
  left:50%;
  transform:translateX(-50%);
  top:0;
}

.profs.n4 .prof{
  width:50%;
}

.profs.n4 .prof:nth-last-of-type(2){
  right:0;
  top:0;
}

.profs.n4 .prof:nth-last-of-type(3){
  left:0;
  bottom:0;
}
.profs.n4 .prof:nth-last-of-type(4){
  right:0;
  bottom:0;
  z-index:3;
}
/*
.profs.n3 .prof{
  width:45%;
  position:absolute;
}
.profs.n3 .prof:nth-last-of-type(1){
  width:60%;
}
.profs.n3 .prof:nth-last-of-type(2){
  right:0;
  top:15%;
  width:30%;
}

.profs.n3 .prof:nth-last-of-type(3){
  left:75%;
  transform:translateX(-50%);
  bottom:0;
}*/

.glass.blueB{
  outline:none !important;
  border:none !important;
}


* body:is(.dark,*:not(.dark)) *.blueB {
  /*background: linear-gradient(180deg, #7443fa 0%, #6a34ff 100%) !important;
  color: white !important;
  */
  background:#ffffffEE !important;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: black!important;
  transition: all 0.5s ease;
}
.glass.blueB{
  /*background: linear-gradient(180deg, #7443fa 0%, #6a34ff 100%) !important;
  */
  background:#ffffffee;
}

.windowTitle{
  width:100%;
  font-size:1.25em;
  font-weight:600;
  margin-bottom:1em;
}

.checkIcon{
  height:0.75em;
  display:flex;
}
.checkIcon:hover{
  filter:brightness(1.25);
}
.checkIcon img{
  height:100%;
}

.profBar .nick{display:flex;align-items:center;gap:0.25em;}

#editCWindow .window{
  height:80%;
  display:flex;
  font-size:0.95em;
}

.windowScrollCover{
  width:100%;
  height:100%;
  flex:1;
  overflow-y:auto;
  min-height: 0;

}

#editCWindow .windowScrollCover{
  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent);
    mask-image: linear-gradient(to bottom, black 60%, transparent);
  padding-bottom:4rem;
}

#editCWindow .prof{
  height:3rem;
}

#editCWindow .prof:after {
  content: "";
  opacity:0 !important;
  width: 100%;
  aspect-ratio: 1;
  background: #00000040;
  opacity: 1;
  background-image: url("https://i.ifh.cc/D7H8lc.png");
  background-size: cover; /* 이미지 꽉 채우기 */
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  animation: none;
  transition:all 0.5s ease;
}

#editCWindow .prof:hover:after {
  opacity:1 !important;
}

#editCWindow .editUPanel{
  padding:0.75em;
  padding-bottom:0.5em;
}

.editUPanel .midTitle{
  font-weight:600;
  font-size:0.85em;
  margin-left:0.5em;
  margin-bottom:0.5em;
}

.editUPanel .inputCover{
  margin:0 !important;
}

#editCWindow .blueB{
  margin:0.5em;
  height:2.5em;
  margin-top:1em;
  position:absolute;
  bottom:0;
  width:calc(100% - 1em);
  font-size:1em;
  box-shadow:0 -0.5em 2em #070707AE;
  
}
.editUPanel:first-of-type{
  display:flex;
  align-items:center;
  gap:0.25em;
}

.editUPanel .editUPanel{padding-right:0 !important;}

.lowTitle{
  font-size:0.8em;
  opacity:0.5;
}

.txtInput:has(input[type='color']){
  padding:0;
}

input[type='color'] {

  -webkit-appearance: none;

  appearance: none;



  width: 100%;
  height: 2.2rem;
  padding: 0.75em;
  border: none;
  flex-shrink: 0;
  background: transparent;
}



input[type='color']::-webkit-color-swatch-wrapper {
  padding: 0;
}



input[type='color']::-webkit-color-swatch {
  border-radius: 0.6rem;
  border: none;
  width: 100%;
  height: 100%;

}

.userInfoSheet .glass{
  background:#e5e1ff20 !important
}
.userInfoSheet .glass::after{opacity:0.75}

.userInfoSheet > div:last-of-type{
  display:flex;
  gap:0.5em;
  flex-direction:column;
}

.userInfoSheet > div>.glass{
  flex-shrink:0;
  padding:0.75em;
  border-radius:1em;
}


#profileMorePanel{
  display:flex;
  padding:0;
  margin-top:1em;
  height:2.25em;
}

#profileMorePanel .glass{
  width:100%;
  margin:0;
  height:100% !important;
  gap:0.25em;
  align-items:center;
  padding:0 !important;
  font-size:0.925em;
}

#profileMorePanel .glass img{
  height:58%;
}

.flex{
  display:flex;
  gap:0.5em;
}
.line{
  flex-direction:column;
}
#xpPanel .glass{
  border-radius:1em;
}
#xpPanel>*{
  width:100%;
  height:5rem;
}

#xpPanel>*>*:not(img){
  width:100%;
  height:100%;
}

#fastSettingPanel{
  min-height:10rem;
  gap:1rem;
}
#fastSettingPanel > .flex>.flex{
  gap:0.25em;
}

#xpPanel>*:has(progress){
  gap:1rem;
  height:fit-content;
  padding:1em 0.75em;
  align-items:center;
}

#xpPanel>*:has(progress) .flex{
  gap:0.25em;
  font-size:0.9em;
  justify-content:center;
  padding-right:0.5em;
}

.toggle {
  width: 2.5em;
  height: 1.5em;
  border-radius: 100px;
  padding: 0.2rem;
  position: relative;
  background: #00000030;
  margin-left: auto;
  transition: all 1s ease;
}
body.dark #content *.glass.toggle:not(.on) {
  background: #585858 !important;
}
.toggle{flex-shrink:0;}
body #content *.glass.toggle.on {
  background: #845eff !important;
}
body.cherry #content .toggle.on{background:linear-gradient(
    180deg,
    #ff6483 0%,
    #ff3a69 100%
  ) !important;}
.toggle div.glass {
  border-radius: 50%;
  height: 100%;
  aspect-ratio: 1;
   transition: margin 0.5s ease;
  margin-left:0;
}
.lower .toggle div.glass{
  background:white !important;
  
}
body .toggle div.glass:not(.lower *):is(.cherry *,*:not(.cherry *)) {
  background: radial-gradient(white,white,transparent) !important;

}
 
.toggle.on div {
  margin-left: calc(100% - 1em);
}

.noBlur{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.noBlur::after{
  backdrop-filter:none !important;
  -webkit-backdrop-filter: none !important;
}

.midTitle{
  font-weight:600;
  font-size:0.9em;
  
}


#fastSettingPanel > .flex{
  align-items:center;
}

#fastSettingPanel .flex.line{
  width:70%;
}

#pageTitleTitle>div{gap: 0.5em;align-items:center;}
#pageTitleTitle .logo{
  height: 1em;
}
#pageTitleTitle .logo:not(.dark *){
  filter:invert(1);
}

.tier{
  height:4.15em !important;
  width:auto;
  display: block;

}

.눈팅러::-webkit-progress-value {
  background: linear-gradient(90deg, #90857e, #9f948c);
}
.입문자::-webkit-progress-value {
  background: linear-gradient(90deg, rgb(169 93 48), #d58149);
}
.단골객::-webkit-progress-value {
  background: linear-gradient(90deg, rgb(242 176 43 / 80%), #ffa513);
}
.터줏대감::-webkit-progress-value {
  background: linear-gradient(90deg, rgb(63 185 120), #61babc);
}
.염라대왕::-webkit-progress-value {
  background: linear-gradient(90deg, rgb(165 140 255), #7a39f2);
}
.옥황상제::-webkit-progress-value {
  background: linear-gradient(90deg, rgb(255 78 78 / 63%), #9959ff);
}
.눈팅러:not(progress) {
  background: linear-gradient(100deg,
    rgb(145 141 136 / 22%),
    rgb(175 168 161 / 6%)
  ) !important;
}

.입문자:not(progress) {
  background: linear-gradient(100deg,
    rgb(166 103 63 / 28%),
    rgb(215 144 88 / 8%)
  ) !important;
}

.단골객:not(progress) {
  background:
    radial-gradient(circle at 85% 20%, rgb(255 150 50 / 12%), transparent 45%),
    linear-gradient(100deg,
      rgb(245 185 55 / 34%),
      rgb(255 175 55 / 22%),
      rgb(255 215 120 / 10%)
    ) !important;
}

.터줏대감:not(progress) {
  background:
    radial-gradient(circle at 85% 20%, rgb(90 175 255 / 12%), transparent 45%),
    linear-gradient(100deg,
      rgb(45 195 150 / 32%),
      rgb(70 210 180 / 22%),
      rgb(110 170 255 / 10%)
    ) !important;
}
.염라대왕:not(progress) {
  background:
    radial-gradient(circle at 85% 20%, rgb(205 178 255 / 12%), transparent 45%),
    linear-gradient(
      100deg,
      rgb(123 51 255 / 50%),
      rgb(154 104 255 / 18%),
      rgb(95 44 220 / 6%)
    ) !important;
}
.옥황상제:not(progress) {
  background:
    radial-gradient(circle at 85% 20%, rgb(165 95 255 / 10%), transparent 45%),
    linear-gradient(100deg,
      rgb(255 47 31 / 42%),
      rgb(255 23 242 / 18%),
      rgb(157 68 255 / 6%)
    ) !important;
}
progress.xpProgress {
  -webkit-appearance: none;
  appearance: none;
  border-radius:10rem;
  overflow:hidden;
  appearance: none;
  border-radius: 5rem;;
  height: 0.7rem;
  width: 100%;
}
progress.xpProgress::-webkit-progress-value {
  border-radius: 100rem;
  height: 1rem;
  transition: width 1s ease;
}

progress.xpProgress::-webkit-progress-bar {
  background: linear-gradient(90deg, #dcdcdc, #f0f0f0Ca);
  border-radius: 20rem;
  border: 0.11rem solid #e0dfe150;
  height:100%;
  overflow: hidden;
  transition: width 1s ease;
}

.padding{
  padding:0.5em
}

#tierName{
  font-family: 'Do Hyeon', serif !important;
  font-weight:550;
  font-size:1.5em;
  opacity:1;
  margin-bottom:0.2em;
}

.tier{
  filter:contrast(1.1) brightness(0.9)
}


.stopFromDoing{
    opacity:0.35;
    pointer-events:none;
}

@keyframes xpFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-0.75rem);
  }
}

.link{
  display:inline;
  color:#9ec4ff;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
  border-radius:.35em;
  transition:.18s ease;
  text-shadow:0 0 10px rgba(113,168,255,.18);
}

.link:hover{
  color:#91BEFF;
  text-shadow:
    0 0 12px rgba(113,168,255,.35),
    0 0 20px rgba(113,168,255,.18);
}

.link:active{
  color:#5E98FF;
  opacity:.85;
}

.link::selection{
  background:rgba(113,168,255,.25);
}

#__bottomOverlay{
}
#__bottomSheet{
  width:calc(100% - 1rem) !important;
  border-radius:1rem !important;
  box-shadow:none !important;
  }

#__bottomSheet > *{
  scrollbar-width:none;
}

#__bottomSheet > *:first-of-type{
  height:1.5rem !important;
}
#__bottomSheet > *:first-of-type>div{
  height:0.225em !important;
  width:1.5rem !important;
  transition:all 0.5s ease;
  margin:0 !important;
}
#__bottomSheet > *:active:first-of-type>div{
  transform:translateY(0.25rem)
}
#__bottomSheet > *:last-of-type{
  padding-top:0rem !important;
  margin-top:1.5rem !important
}

#profileBox{
  margin:0.25rem 0;
  margin-bottom:0;
}

#direct.selected img {
  transform: translateY(-0.1em) rotate(-30deg);
  animation:directSoft 1s ease;
}
#space.selected img {
  animation:spin 1s ease;
}
#alarm.selected img {
  animation: bellSoft 1s ease;
}
#home.selected img{
  animation:homeSoft 1s ease;
}
@keyframes directSoft{
  0%{
  }
  30%{
    transform: translateY(-0.1em) rotate(-15deg)translateX(-0.4em)}
  50%{
    transform: translateY(-0.1em) rotate(-40deg)translateX(0.45em);}
  100%{ transform: translateY(-0.1em) rotate(-30deg)}
}
@keyframes bellSoft {
  0% {
    transform: rotate(0deg) translateY(0);
  }

  20% {
    transform: rotate(-15deg) translateY(-0.1em);
  }

  40% {
    transform: rotate(15deg) translateY(-0.25em);
  }

  60% {
    transform: rotate(-10deg) translateY(-0.25em);
  }

  80% {
    transform: rotate(5deg) translateY(-0.1em);
  }

  100% {
    transform: rotate(0deg) translateY(0);
  }
}

@keyframes homeSoft {
  0% {
    transform: scale(1) translateY(0);
  }

  45% {
    transform: scale(0.96) translateY(0.2em) scaleY(0.8);
  }

  70% {
    transform: scale(1.2) translateY(-0.25em) scaleY(1.1);
  }

  100% {
    transform: scale(1) translateY(0);
  }
}

#pageTitle{gap:0.5em !important}

.modePanel{
  display:flex;
  padding:0.5em 0.5em;
  height:3em;
  align-content:center;
  gap:0.25em;
}
.modePanel .glass{
  border-radius:1rem;
  width:fit-content;
  display:flex;
  align-items:center;
  height:100%;
  padding:0 0.75em;
  font-size:0.85em;
  font-weight:500;
  flex-shrink:0;
}
.modePanel img{
  height:0.85em;
}

.modePanel .glass.selected, .lightBB{
  background:#9b91ff4e !important;
  border:1px solid #7668ff !important;
  color:#c6c0ff !important;
  font-weight:600;
  animation:iconCoverSelect 1s ease;
}
body:not(.dark) :is(.modePanel .glass.selected, .lightBB){
  color: #7668ff !important;
}
.modePanel .glass.selected::after, .lightBB.glass .lightBB{display:none;}
.ai {
  user-select: none;

  color: #f0edff;

  background: linear-gradient(
    135deg,
    rgba(190,170,255,.3),
    rgba(130,220,255,.25)
  ) !important;


  box-shadow:
    0 .1em .4em rgba(100,90,255,.12),
    inset 0 .04em .18em rgba(255,255,255,.55) !important;

  display: flex;
  align-items: center;
  gap: .1em;
}

.ai::after {
  display: none;
}

.ai :is(img,.loading) {
  height: .9em;
  opacity: .75;
}

.ai:not(.on):hover {
  filter: brightness(1.08) contrast(1.1);
  border-color: rgba(150,130,255,.7) !important;
}

.ai.on {
  pointer-events:none;
  color: #fff;

  background: linear-gradient(
    135deg,
    #9078f0,
    #68cce8
  ) !important;

  border-color: rgba(255,255,255,.45) !important;

  box-shadow:
    0 0 .45em rgba(120,100,255,.35),
    0 .15em .8em rgba(80,180,255,.22),
    inset 0 0 .3em rgba(255,255,255,.5) !important;

  animation: aiGlow 2.5s ease-in-out infinite;
}

.ai.on :is(img,.loading) {
  opacity: 1;
  animation: aiStar 1.5s ease-in-out infinite;
}

@keyframes aiGlow {
  0%,100% {
    filter: brightness(1);
  }

  50% {
    filter: brightness(1.08);
  }
}

@keyframes aiStar {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(.88);
    opacity: .75;
  }
}

.ai .text {
  transition: opacity .2s ease, transform .2s ease;
}

.ai .text.change {
  opacity: 0;
  transform: translateY(.2em);
}

.ai .text {
  display:inline-block;
  overflow:hidden;
  white-space:nowrap;

  transition:
    width .25s ease,
    opacity .2s ease,
    transform .2s ease;
}

#footer{
  font-size:0.85em;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1.4em;
  padding:3em 1.5em;
  margin-top: 1em;
  border-top:.06em solid #2b2b2b;
  background:#151515;
}

#footerLogo{
    width:3.2em;
    opacity:.9;
  filter:invert(1);
}

#footerTitle{
    margin-top:-.4em;

    font-size:1.35em;
    font-weight:700;
    color:#fff;
    letter-spacing:.04em;
}

#footerNav{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:1.4em;

    color:#8d8d8d;
    font-size:.9em;
}

#footerNav span{
    cursor:pointer;
    transition:.2s;
}

#footerNav span:hover{
    color:#fff;
}

#footerCopyright{
    text-align:center;
    color:#666;
    font-size:.8em;
    line-height:1.7;
}

#footerCopyright b{
    color:#d5d5d5;
}


.userListSheet>div:last-of-type{
    padding:0.5em;
}
#__bottomSheet .title{
    font-size:1.1em;
    margin-bottom:1em;
    font-weight:600;
    
}
.userListSheet{
font-size:1.1em;
}

.writterHeader .darkImg{
  height:100% !important;
  
}

.full{
  width:100% !important;
  height:100% !important;
  min-height:100% !important;
  max-height:100% !important;
  border-radius:0 !important;
  flex:1 !important;
  display:flex !important;
  flex-direction:column !important;
  max-width:100% !important;
}
.full::after{display:none;}
.full .cover{
  flex:1 !important;
  display:flex;
  flex-direction:column;
  gap:0.75rem;
}
.full .cover > *:not(.postContent){
  flex-shrink:0;
}
.full .postContent,.full textarea{
  height:100% !important;
  min-height:2rem !important;
  max-height:100% !important;
}
.writterHeader .icon{
  height:40% !important;
  margin:0.25rem 0 !important;
  margin-left:0.5rem !important;
}
.writterHeader .icon:not(:last-of-type){
  margin-left:auto !important;
}

body:not(.dark) aside{
  box-shadow:0 0.5rem 1rem #00000050,inset -0.1em -0.2em 0.25rem #00000010  !important
}

body:not(.dark) :is(input,textarea){color:white;}

.loading.hide{
  transition:all 0.5s ease;
  opacity:0;
  width:0;
}

.lessGap{gap:0.5em}
.minGap{gap:0.25em}
.noGap{gap:0em}
.center{justify-content:center;align-items:center}

.cover .flex.line{
  overflow:hidden;
  margin-bottom:0.75em;
}
.cover .flex.line > *{
  margin:0 !important;
  flex-shrink:0;
}

.postHr{
  width:100%;
  height:1px;
  background:none;
  background:#ffffff25;
  margin-top: 0.1em;
}