/* ==========================================================================
   Material for MkDocs - Custom Theme
   Version : 3.0
   Purpose : Professional Technical Documentation
   ========================================================================== */



/* ==========================================================================
   Layout
   ========================================================================== */

.md-grid{
    max-width:1600px;
}

.md-content{
    max-width:none;
}



/* ==========================================================================
   Typography
   ========================================================================== */

.md-typeset{

    font-family:
        "Pretendard",
        "SUIT",
        "Inter",
        "Noto Sans KR",
        sans-serif;

    font-size:18px;
    line-height:1.8;
    color:#333;
}


.md-typeset p{

    margin:1rem 0;
}



/* ==========================================================================
   Heading
   ========================================================================== */

.md-typeset h1{

    font-size:2.25rem;
    font-weight:700;

    color:#263238;

    margin:.6rem 0 1.3rem;

    padding-bottom:.45rem;

    border-bottom:3px solid #1976d2;
}


.md-typeset h2{

    font-size:1.75rem;
    font-weight:700;

    color:#1565c0;

    margin:2.4rem 0 1rem;

    padding-left:.7rem;

    border-left:6px solid #1976d2;
}


.md-typeset h3{

    font-size:1.375rem;
    font-weight:600;

    color:#37474f;

    margin:2rem 0 .8rem;
}


.md-typeset h4{

    font-size:1.125rem;
    font-weight:600;

    color:#546e7a;

    margin:1.5rem 0 .6rem;
}


.md-typeset h5{

    font-size:1rem;
    font-weight:600;

    color:#607d8b;

    margin:1.2rem 0 .4rem;
}



/* ==========================================================================
   List
   ========================================================================== */

.md-typeset ul,
.md-typeset ol{

    margin:.7rem 0 1rem;
}


.md-typeset li{

    margin:.1rem 0;
}


.md-typeset li > ul,
.md-typeset li > ol{

    margin:.10rem 0;
}



/* ==========================================================================
   Link
   ========================================================================== */

.md-typeset a{

    font-weight:500;
    text-decoration:none;
}


.md-typeset a:hover{

    text-decoration:underline;
}



/* ==========================================================================
   Code Block
   ========================================================================== */

.highlight{

    margin:1.2rem 0;
}


.highlight pre{

    border-radius:10px;
    padding:1rem;

    overflow-x:auto;
}


.highlight pre code{

    /* font-size:.83rem;*/
    font-size:16px;
    line-height:1.5;
}


/* 코드 언어 표시 */

.md-code__title{

    font-size:.75rem;
    font-weight:600;
}



/* Inline Code */

.md-typeset code{

    border-radius:4px;
    padding:.15rem .35rem;

    font-size:.83rem;
}



/* ==========================================================================
   Table
   ========================================================================== */

/* --------------------------------------------------------------------------
   Table Wrapper
   -------------------------------------------------------------------------- */

.md-typeset__scrollwrap{
    width:100%;
}

.md-typeset__table{
    display: table;
    width:100%;
}


/* --------------------------------------------------------------------------
   Table
   -------------------------------------------------------------------------- */

.md-typeset table:not([class]){

/*    width:calc(100% - 20px);
    max-width:calc(100% - 20px);
*/

    margin:1rem 10px;

    /*table-layout:auto;*/
    display: table;

    border-collapse:collapse;

    font-size:16px;
}


/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.md-typeset table:not([class]) thead{
    background:#E3F2FD;
}


.md-typeset table:not([class]) th{
    line-height:1.5;
    font-size:16px;
    font-weight:700;
    text-align:left;
    vertical-align:middle;
    padding:.45rem .75rem;
    border-bottom:2px solid #BBDEFB;
}


/* --------------------------------------------------------------------------
   Cell
   -------------------------------------------------------------------------- */

.md-typeset table:not([class]) td{
    line-height:1.5;
    font-size:15px;
    padding:.45rem .75rem;
    vertical-align:middle;
    text-align:left;
    word-break:keep-all;
    overflow-wrap:break-word;
    border-bottom:1px solid rgba(0,0,0,.08);
}


/* --------------------------------------------------------------------------
   Zebra Stripe (선택 사항)
   -------------------------------------------------------------------------- */

.md-typeset table:not([class]) tbody tr:nth-child(even){

    background:#FCFCFC;
}


/* --------------------------------------------------------------------------
   Hover
   -------------------------------------------------------------------------- */

.md-typeset table:not([class]) tbody tr:hover{

    background:#F5F9FF;
}


/* --------------------------------------------------------------------------
   Table in List
   -------------------------------------------------------------------------- */

.md-typeset ul li table:not([class]),
.md-typeset ol li table:not([class]){

   /*
    width:calc(100% - 20px);
   */

    margin:1rem 10px;
}


/* ==========================================================================
   Blockquote
   ========================================================================== */

.md-typeset blockquote {

    position:relative;

    margin:0.5rem 0;

    padding:0.3rem 1rem 0.3rem 1.2rem;

    border-left:none !important;

}


/* short bar */

.md-typeset blockquote::before {

    content:"";

    position:absolute;

    left:0;

    top:0.7rem;

    bottom:0.7rem;

    width:4px;

    background:#F5F9FF; 

    border-radius:8px;

}

/* ==========================================================================
   Image
   ========================================================================== */

.md-typeset img{

    display:block;

    margin:1rem auto;

    border-radius:8px;

    box-shadow:0 2px 12px rgba(0,0,0,.08);

    max-width:100%;
}



/* Figure */

.md-typeset figure{

    text-align:center;

    margin:1.5rem auto;
}


.md-typeset figcaption{

    margin-top:.6rem;

    /*font-size:.85rem;*/
    font-size:14px;

    color:#666;

    line-height:1.5;
}



/* ==========================================================================
   Mermaid
   ========================================================================== */

.md-typeset .mermaid{

    max-width:100%;

    overflow-x:auto;

    text-align:center;

    margin:1.5rem auto;
}


.md-typeset li .mermaid{

    margin-left:.1rem;
}



/* ==========================================================================
   MathJax / KaTeX
   ========================================================================== */

.md-typeset mjx-container{

    font-size:1.02em;
}


.md-typeset .arithmatex{

    overflow-x:auto;
}



/* ==========================================================================
   Horizontal Rule
   ========================================================================== */

.md-typeset hr{

    margin:2rem 0;
}



/* ==========================================================================
   Admonition
   ========================================================================== */

.md-typeset .admonition{

    font-size:17px;

    line-height:1.6;
}


.md-typeset .admonition-title{

    font-size:17px;

    font-weight:700;
}


/* ==========================================================================
   Keyboard
   ========================================================================== */

.md-typeset kbd{

    border-radius:4px;

    padding:.15rem .4rem;

    font-size:.85rem;
}



/* ==========================================================================
   Task List
   ========================================================================== */

.md-typeset input[type=checkbox]{

    transform:scale(1.1);
}



/* ==========================================================================
   Scrollbar
   ========================================================================== */

::-webkit-scrollbar{

    width:10px;

    height:10px;
}


::-webkit-scrollbar-thumb{

    border-radius:20px;
}


::-webkit-scrollbar-track{

    background:transparent;
}



/* ==========================================================================
   Animation
   ========================================================================== */

html{

    scroll-behavior:smooth;
}


.md-typeset h1,
.md-typeset h2,
.md-typeset h3{

    scroll-margin-top:80px;
}



/* ==========================================================================
   Dark Mode
   ========================================================================== */

[data-md-color-scheme="slate"] .md-typeset{

    color:#d7d7d7;
}


[data-md-color-scheme="slate"] .md-typeset h1{

    color:#ffffff;

    border-bottom-color:#42a5f5;
}


[data-md-color-scheme="slate"] .md-typeset h2{

    color:#64b5f6;

    border-left-color:#42a5f5;
}


[data-md-color-scheme="slate"] .md-typeset h3{

    color:#eceff1;
}


[data-md-color-scheme="slate"] .md-typeset h4{

    color:#cfd8dc;
}


[data-md-color-scheme="slate"] .md-typeset table:not([class]) thead{

    background:#263b4d;
}


[data-md-color-scheme="slate"] .md-typeset table:not([class]) tbody tr:hover{

    background:#253341;
}


[data-md-color-scheme="slate"] .md-typeset blockquote{

    background:#263238;
}


[data-md-color-scheme="slate"] .md-typeset figcaption{

    color:#b0bec5;
}


[data-md-color-scheme="slate"] .md-typeset img{

    box-shadow:0 2px 14px rgba(255,255,255,.08);
}


/* ==========================================================================
   Highlight
   ========================================================================== */

/* Light Mode */
:root {
    --hl-bg: #FFF3E0;
    --hl-text: #D84315;
    --hl-border: #FB8C00;
    --hl-bg-hover: #FFE0B2;
}

/* Dark Mode */
[data-md-color-scheme="slate"] {
    --hl-bg: #4E342E;
    --hl-text: #FFCC80;
    --hl-border: #FF9800;
    --hl-bg-hover: #5D4037;
}

/* Highlight */
.hl {
    display: inline;

    padding: 0.08em 0.40em;
    margin: 0 0.05em;

    background: var(--hl-bg);
    color: var(--hl-text);

    font-weight: 700;
    line-height: inherit;

    border-left: 0.25rem solid var(--hl-border);
    border-radius: 3px;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.hl:hover {
    background: var(--hl-bg-hover);
}