@charset "utf-8";
/* CSS Document */

/* Web Font Load */
@font-face {
    font-family: 'happyGh';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.0/행복고흥L.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'happyGh';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.0/행복고흥M.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'happyGh';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.0/행복고흥B.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Jalnan';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_231029@1.1/JalnanGothic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

html, body { margin:0px; padding:0px; }
body { font-size:16px; font-family:"Noto Sans KR","Malgun Gothic","Myriad Pro","Dotum","Tahoma"; word-break: keep-all; color:rgba(0, 0, 0, 0.6);line-height: 1.8em; }
h1, h2, h3, h4, h5, h6, p{ 
    margin: 0px; padding:0px;
}

table { width: 100%; border-collapse:collapse; border-spacing:0px; margin:10px 0px; box-sizing: border-box; }
th, td
{padding:9px 10px; border:1px solid #ccc;}
table.td1c :where(td:first-child){ text-align: center;}

.bbsinimg{ max-width: 100%; }


/* view */
.flex2img{ display: flex; flex-wrap: wrap; gap: 1em; }
.flex2img>img{ flex: 1 1 45%; }
.quoet1{ display: block; padding: 1em; text-align: center; color:black; font-family: "Stylish"; font-size: 1.7em; border:1px solid rgba(0, 0, 0, 0.1); background-color: rgba(0, 0, 0, 0.03); border-radius: 5em; }

.elfdown {
    display: flex; width: var(--fullwidth); max-width: 800px; margin: auto; align-items: center; margin-bottom: 0.5em;
    border:1px solid rgba(0, 0, 0, 0.2); padding: 1em 2em; border-radius: 3em; color:unset; text-decoration:none;
}
.elfdown>img{ margin-right: 0.5em;}
.elfdown>p{ flex-grow: 1;}
.elfdown>.elfs{ padding-right: 1em; font-size: 0.8em; font-weight: 300;  }
.elfdown>.material-icons{ color: rgba(0, 0, 0, 0.2); }

.circle-list { counter-reset: circle 0; list-style: none; }
.circle-list >li{ position: relative; padding-left: 0.4em;  }
.circle-list >li:before{ 
    counter-increment: circle 1; content: counter(circle); font-family: 'Source Code Pro'; 
    display: block; font-size: 0.8em; position: absolute; left: -20px; top:calc(0.5em - 1px);
    width: 1rem; height: 1rem; line-height: 1.25;
    text-align: center; border: 1px solid rgba(0, 0, 0, 0.3); border-radius: 50%;
}
.circle-list.dark > li::before{ 
    background-color:rgba(0, 0, 0, 0.6); color:white; border: none;
    width: calc(1rem + 1px); height: calc(1rem + 1px);
}

/* 서식 */
.define1, .func1 {
    --main-color: #74b6d5; --main-dark-color: #28AFA5;
    background-color: rgba(0, 0, 0, 0.02); padding: 2em 1em 1em 1em; border: 1px solid rgba(0, 0, 0, 0.1);
    border-top:3px solid var(--main-color); position: relative; overflow: hidden;
}
.define1:before, .func1::before{ 
	content: ""; position: absolute; background-color: var(--main-color);
    width: 20px; height: 20px; transform: rotate(45deg); top:-10px; left: 1em;
} 
.define1>strong{ 
    display: block; border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding-bottom: 0.3em; padding-left: 0.3em;
    font-family: Jalnan; color: black; font-size: 1.15em; font-weight: normal;
}
.define1>strong::before{ content: ":"; display: inline-block; padding-right: 0.5em; color:var(--main-color); }

.define1 table :where(th, td) { border: none; }
.define1 table tr:not(:last-child) :where(td) { 
    border-bottom:1px dotted rgba(0, 0, 0, 0.15); 
}
.define1>.flex2el{ display: flex; flex-wrap: wrap; column-gap: 2em; padding: 10px 0; }
.define1>.flex2el> table{ flex: 1 0 250px; margin: 0;}
table.td1c :where(td:first-child){ color:var(--main-color); font-weight: bold;  }

.func1 { padding: 2em 2em 1em 2em;}
.func1>strong:first-child{
    display: block; border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding-bottom: 0.3em; 
    color:var(--main-color); font-size: 1.15em; font-family: Jalnan; font-weight: normal; 
}
.func1>strong:first-child+p{ border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding: 0.3em 0; display: block;  }
.func1 .construction{ display: block; padding: 0.8em 0.3em 0 0.3em; }
.func1 table td{ border:none; vertical-align: top; }
.func1 table tr:not(:last-child){ border-bottom:1px dotted rgba(0, 0, 0, 0.1); }
.func1 table td:first-child{ width: 150px; }
.func1 table td:first-child>b:first-child{ 
    display: inline-block; width: 100%; color: white; background-color: var(--main-color);
    text-align: center; border-radius: 2em; font-weight: normal; 
}


/*view og 설정*/
.og-zone{
     --ogsize:200px; color:unset; text-decoration:none;
    display: flex; flex-wrap: nowrap; border:1px solid rgba(0, 0, 0, 0.1); align-items: center;  background-color: rgba(0, 0, 0, 0.03);  
}
.og-zone .og-img{ width: var(--ogsize); height: var(--ogsize); object-fit: cover; border-right: 1px solid rgba(0, 0, 0, 0.1); display: block; overflow: hidden; }
.og-zone .og-wrap{ padding: 1em 1.5em;}
.og-zone .og-title{ font-size: 1.3rem; font-weight: 500; color:black; padding-bottom: 1rem; letter-spacing: -0.05em; }
.og-zone .og-desc{
    --cutline : 2;
    font-size: 0.97rem; font-weight: 300; line-height: 1.3rem;
    overflow: hidden; text-overflow: ellipsis; 
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--cutline);
}
.og-zone .og-host{
    width: calc(var(--fullwidth) - var(--ogsize) - 4em); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: text-bottom; padding-top: 1.5rem; font-size: 0.95rem;
}


/*replay*/
.rpl-box{  padding:1em; margin-bottom:1em; border:1px solid #ccc; background: rgba(0, 0, 0, 0.02); }
.rpl-box>h2{ font-size: 1.2em; font-weight: 600; color:black; border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding-bottom: 0.5em; margin-bottom: 0.5em; }
.rpl-sbj{ font-size: 1.2em; font-weight: 600; color:black; padding: 0.5em 0em; border-bottom: 1px solid rgba(0, 0, 0, 0.1); margin-bottom: 1em; }
.rpl-hr{ border-bottom:1px solid rgba(0, 0, 0, 0.3); height: 2em; margin-bottom: 1em; }



*:has(>.__adsens-adv1__){
    border:1px solid rgba(0, 0, 0, 0.1); margin: 50px 0; color:blue; font-weight: bold; font-size: 1.5em; text-align: center; background-color: rgba(0, 0, 0, 0.03);  height: 150px; line-height: 150px;
}



 /*탭 이하*/
@media screen and (max-width: 1024px) {
}

/*모바일*/
@media screen and (max-width: 500px) {
    .og-zone .og-img{ width: 100px; height: var(--ogsize);}

    .define1>.flex2el> table:not(:first-child){ border-top: 1px dotted rgba(0, 0, 0, 0.15); }
}

/*탭 이상*/
@media screen and (min-width: 500.1px) {
    .flex2img>img{ max-width: calc((100% - 1em)/2); }
}

/*PC 이상*/
@media screen and (min-width: 1024.1px) {
}