/*!
 * ------------------------------------------------------------
 * MyXiaoyao Starter Theme
 * Base CSS
 * ------------------------------------------------------------
 * Theme Typography & Base Elements
 * ------------------------------------------------------------
 */

/* ============================================================
   Root
   ============================================================ */

:root {

    --font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "PingFang SC",
        "Microsoft YaHei",
        "Noto Sans KR",
        sans-serif;

    --font-size:16px;

    --line-height:1.75;

}

/* ============================================================
   Body
   ============================================================ */

body{

    font-family:var(--font-family);

    font-size:var(--font-size);

    line-height:var(--line-height);

    color:var(--color-text);

    background:var(--color-background);

}

/* ============================================================
   Headings
   ============================================================ */

h1,
h2,
h3,
h4,
h5,
h6{

    margin:0 0 20px;

    line-height:1.3;

    font-weight:600;

    color:var(--color-heading);

}

h1{

    font-size:2.25rem;

}

h2{

    font-size:1.875rem;

}

h3{

    font-size:1.5rem;

}

h4{

    font-size:1.25rem;

}

h5{

    font-size:1.125rem;

}

h6{

    font-size:1rem;

}

/* ============================================================
   Paragraph
   ============================================================ */

p{

    margin:0 0 20px;

}

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

a{

    color:var(--color-primary);

    text-decoration:none;

    transition:.2s;

}

a:hover{

    color:var(--color-primary-hover);

}

/* ============================================================
   Strong
   ============================================================ */

strong{

    font-weight:700;

}

/* ============================================================
   Small
   ============================================================ */

small{

    font-size:.875rem;

}

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

.entry-content ul,
.entry-content ol{

    margin:0 0 20px 24px;

}

.entry-content li{

    margin-bottom:8px;

}

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

table{

    width:100%;

    margin-bottom:20px;

}

th,
td{

    padding:12px;

    border:1px solid var(--color-border);

}

th{

    font-weight:600;

    background:#fafafa;

}

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

blockquote{

    margin:30px 0;

    padding:20px 25px;

    border-left:4px solid var(--color-primary);

    background:#fafafa;

    font-style:italic;

}

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

code{

    padding:2px 6px;

    border-radius:4px;

    background:#f5f5f5;

}

pre{

    overflow:auto;

    padding:20px;

    border-radius:6px;

    background:#f8f8f8;

}

pre code{

    padding:0;

    background:none;

}

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

img{

    border-radius:2px;

}

figure{

    margin:0 0 20px;

}

figcaption{

    margin-top:10px;

    color:#888;

    font-size:.875rem;

}

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

hr{

    margin:40px 0;

}

/* ============================================================
   Forms
   ============================================================ */

input,
textarea,
select{

    width:100%;

    padding:12px 15px;

    border:1px solid var(--color-border);

    border-radius:6px;

    background:#fff;

    transition:.2s;

}

input:focus,
textarea:focus,
select:focus{

    outline:none;

    border-color:var(--color-primary);

}

button,
input[type="submit"]{

    padding:12px 24px;

    border:0;

    border-radius:6px;

    background:var(--color-primary);

    color:#fff;

    cursor:pointer;

    transition:.2s;

}

button:hover,
input[type="submit"]:hover{

    background:var(--color-primary-hover);

}

/* ============================================================
   WordPress Content
   ============================================================ */

.entry-content{

    word-break:break-word;

}

.entry-content>*:last-child{

    margin-bottom:0;

}

/* ============================================================
   Embedded Media
   ============================================================ */

iframe,
embed,
object,
video{

    max-width:100%;

}

/* ============================================================
   Gallery
   ============================================================ */

.gallery{

    display:grid;

    gap:15px;

}

.gallery img{

    width:100%;

}

/* ============================================================
   Utilities
   ============================================================ */

.text-left{

    text-align:left;

}

.text-center{

    text-align:center;

}

.text-right{

    text-align:right;

}

.hidden{

    display:none !important;

}