/* fonts */
/* Noto Sans KR, Cute Font */
@import url('https://fonts.googleapis.com/css2?family=Cute+Font&family=Noto+Sans+KR:wght@100..900&display=swap');

/* Roboto Mono */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');

/* IBM Plex Mono */
/* @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap'); */


/* animations */


/* styles */

/* Current application customs */
html {

    --color-gmdg-darker: #415244;   --cgmdgdr: 65 82 68;
    --color-gmdg-dark: #357C43;     --cgmdgd: 55 124 67;
    --color-gmdg: #209237;          --cgmdg: 32 146 55;
    --color-gmdg-light: #0DA72C;    --cgmdgl: 13 167 44;

    --color-point-dark: var(--color-gmdg-dark);      --cpd: var(--cgmdgd);
    --color-point: var(--color-gmdg);                --cp: var(--cgmdg);
    --color-point-light: var(--color-gmdg-light);    --cpl: var(--cgmdgl);


    /* --top-pad: calc(env(safe-area-inset-top) + 0px);
    --bottom-pad: calc(env(safe-area-inset-bottom) + 0px); */

}

body {
    --common-bg-color: #EFEFEF;

    font-family: 'Noto Sans KR';



    /* adaptive color (light/common) */
}

body[data-dark-mode="1"] {

    /* adaptive color (dark) */

}

main { font-family: 'Noto Sans KR'; }
main button, main input, main textarea { font-family: 'Noto Sans KR'; }

article { --article-theme-color: transparent; }

article button { padding: 1em; border-style: none; border-radius: 1em; }


/* override EstreUI */

nav#mainMenu > section#menuArea > div.container[data-container-id="root"] > article[data-article-id="main"] { display: flex; flex-flow: column nowrap; padding-top: var(--top-pad); justify-content: space-between; }
nav#mainMenu > section#menuArea > div.container[data-container-id="root"] > article[data-article-id="main"] > ul.recent { display: flex; flex-flow: column nowrap; flex-grow: 1; flex-shrink: 1; justify-content: flex-start; align-items: stretch; overflow-y: auto; scrollbar-width: thin; }
nav#mainMenu > section#menuArea > div.container[data-container-id="root"] > article[data-article-id="main"] > ul.recent::before { padding-inline: var(--basic-ui-inset-h); color: var(--color-text-ligntness); }

/* footer#fixedBottom { transition-timing-function: ease; transition-duration: 0.3s; }
footer#fixedBottom:not(:hover) { bottom: -44px; } */

footer#fixedBottom { background-color: transparent; }


/* custom element styles */
article .line_block { border-bottom: none; border-radius: 0; }

article .bg_pointed { --bg-basic: rgb(var(--cpl) / 15%); --bg-hover: rgb(var(--cpl) / 30%); --bg-active: rgb(var(--cpl) / 60%); }



/* Data related styles */
article .content_holder { --font-width-divider: 26; --page-pad-v: 32px; --page-pad-h: 24px; --page-pad: var(--page-pad-v) var(--page-pad-h); --font-size: min(1.25rem, calc((var(--available-max-width) - (var(--page-pad-h) * 2)) / var(--font-width-divider))); --line-height-ratio: 1.6666; display: flex; flex-flow: column nowrap; width: max-content; margin: auto; padding-bottom: var(--bottom-pad); align-items: stretch; font-family: "Roboto Mono"; font-size: var(--font-size); line-height: calc(1em * var(--line-height-ratio)); user-select: text; }
/* article .content_holder.ascii { --font-width-divider: 32; } */
article .content_holder > ol { position: relative; margin: var(--basic-ui-inset-v-half) 0 var(--basic-ui-inset-v); padding: var(--page-pad); background-color: var(--color-boundary-bright); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
article .content_holder > ol::before { position: absolute; display: inline-block; top: var(--basic-ui-inset-v); right: var(--basic-ui-inset-h); font-size: 0.75rem; font-weight: 300; line-height: 1em; }
article .content_holder > ol > li { }
article .content_holder > ol > li::marker { content: attr(data-line-no); font-size: 0.625rem; font-weight: 300; line-height: calc(var(--font-size) * var(--line-height-ratio)); }
article .content_holder > ol > li::after { font-size: 0.75rem; }





/* extra preset */

.app_user_handle { }
.app_user_handle label { min-width: fit-content; overflow: hidden; }
.app_user_handle .sign_out { cursor: pointer; }