@charset "UTF-8";

/* site page bg */
body{position:relative;}
body::before{content:'';display:block;position:absolute;inset-block-start:0;inset-inline:0;z-index:-1;height:calc(var(--VHeight) - var(--site-header-height,145) * 1px);pointer-events:none;background:var(--SiteTHM-A50) url("../images/art/page_bg.svg") no-repeat center calc(var(--site-header-height,145) * 1px)/min(1920px,200%) auto;-webkit-mask-image:linear-gradient(180deg,rgba(0 0 0 / 50%),rgba(0 0 0 / 0%));mask-image:linear-gradient(180deg,rgba(0 0 0 / 50%),rgba(0 0 0 / 0%));}

/* home page */
#home_cover{}
#home_cover>.inner{display:flex;flex-direction:column;justify-content:center;gap:var(--spacing);max-width:var(--MaxContentWidth);padding-block:calc(var(--spacing) * 2) var(--spacing);padding-inline:var(--spacing);margin-inline:auto;box-sizing:border-box;}
@media only screen and (max-width:1440px){
	#home_cover{background-size:cover;}
}

#home_search{display:flex;flex-direction:column;gap:var(--spacing);}
#home_search .title{font-size:var(--SiteFS-XXL);font-weight:var(--SiteFW-EB);text-transform:uppercase;}
#home_search .cpt-search{--CPT-US:4em;--CPT-BGC:var(--background-color-L1,#fff);--background-focus-color:var(--background-color-L1,#fff);width:min(60em,100%);}
#home_search .cpt-search:not(:focus-within){--border-color:var(--body-text-color-a25,transparent);}

#home_category{display:flex;flex-direction:column;gap:var(--spacing);}
#home_category .title{font-size:var(--SiteFS-XXL);font-weight:var(--SiteFW-EB);text-transform: uppercase;}
#home_category .list{display:grid;grid-template-columns:repeat(auto-fill,minmax(20em,1fr));gap:1em;}
#home_category .category{display:grid;grid:"icon name" auto ". tips" 1fr/auto 1fr;align-items:start;gap:.5em 1.5em;padding:var(--spacing);color:inherit;background-color:var(--background-color-L1,#fff);border-radius:1em;transition:color 300ms;}
#home_category .category::before{grid-area:icon;content:attr(icon);font-size:2em;}
#home_category .category:hover{color:var(--SiteTHM);}
#home_category .name{grid-area:name;align-self:center;font-size:var(--SiteFS-L);font-weight:var(--SiteFW-B);text-transform:uppercase;}
#home_category .tips{grid-area:tips;font-size:var(--SiteFS-S);color:var(--body-text-color-a50,rgba(0 0 0/50%));display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height:3em;overflow:hidden;text-overflow:ellipsis;}
@media only screen and (max-width:480px){
	#home_category .list{margin-inline:calc(var(--spacing) * -1);grid-template-columns:repeat(2,1fr);gap:.5em;}
	#home_category .category{grid:"icon name"/auto 1fr;}
	#home_category .category::before{font-size:1.5em;}
	#home_category .name{font-size:var(--SiteFS);align-self:start;}
	#home_category .tips{display:none;}
}

#home_articles{display:flex;flex-direction:column;gap:var(--spacing);max-width:var(--MaxContentWidth);padding-inline:var(--spacing);margin-inline:auto;box-sizing:border-box;}
#home_articles>.inner{display:flex;flex-direction:column;gap:var(--spacing);}
#home_articles .block{display:flex;flex-direction:column;gap:var(--spacing);padding:var(--spacing);background-color:var(--background-color-L3,#fff);border-radius:1em;overflow:hidden;}
#home_articles .title{font-size:var(--SiteFS-L);font-weight:var(--SiteFW-EB);text-transform:uppercase;}
#home_articles .list{display:grid;grid-template-columns:repeat(auto-fill,minmax(25em,1fr));gap:var(--spacing);padding-block-start:var(--spacing);box-shadow:var(--body-text-color-a5,rgba(0 0 0/5%)) 0 1px 0 inset;}
#home_articles .article{display:grid;grid:"icon title" auto ". description" 1fr/auto 1fr;align-items:start;gap:1em;color:inherit;transition:color 300ms;}
#home_articles .article::before{grid-area:icon;content:attr(icon);font-size:2em;color:var(--body-text-color-a50,rgba(0 0 0/50%));}
#home_articles .article:hover{color:var(--SiteTHM);}
#home_articles .article_title{grid-area:title;align-self:center;font-weight:var(--SiteFW-B);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height:3em;overflow:hidden;text-overflow:ellipsis;}
#home_articles .article_description{grid-area:description;font-size:var(--SiteFS-S);color:var(--body-text-color-a50,rgba(0 0 0/50%));display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;max-height:4.5em;overflow:hidden;text-overflow:ellipsis;}
@media only screen and (max-width:480px){
	#home_articles>.inner{margin-inline:calc(var(--spacing) * -1);}
	#home_articles .article::before{font-size:1.5em;}
}


#Breadcrumbs{}
#Breadcrumbs ul{display:flex;flex-wrap:wrap;gap:.5em;}
#Breadcrumbs ul>li{overflow:hidden;}
#Breadcrumbs ul>li~li{display:grid;grid-template-columns:auto 1fr;}
#Breadcrumbs ul>li~li::before{content:'/';display:inline-block;vertical-align:top;margin-inline-end:.5em;color:var(--body-text-color-a25,rgba(0 0 0/25%));}
#Breadcrumbs a{display:block;max-width:min(30em,100%);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--body-text-color-a50,rgba(0 0 0/50%));}
#Breadcrumbs a:hover{color:var(--SiteTHM);}


/* category page */
#category_content{flex:auto;}
#category_content>.inner{display:flex;flex-direction:column;gap:var(--spacing);width:min(var(--MaxContentWidth),100%);margin-inline:auto;padding-block-start:var(--spacing);padding-inline:var(--spacing);box-sizing:border-box;}
#category_list{display:flex;flex-direction:column;gap:var(--spacing);}
#category_list>.title{display:flex;flex-direction:column;gap:.75em;}
#category_list>.title h2{font-size:var(--SiteFS-XXXL);text-transform:uppercase;}
#category_list>.title .tips{}
#category_list>.title .tips:empty{display:none;}
#category_list>.list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(25em,100%),1fr));gap:var(--spacing);overflow:hidden;}
#category_list .group{display:flex;flex-direction:column;gap:var(--spacing);padding:var(--spacing);background-color:var(--background-color-L1,#fff);border-radius:1em;}
#category_list .group:not(:has(.article)){display:none;}
#category_list .group>.title{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:var(--spacing);padding-block-end:var(--spacing);box-shadow:var(--body-text-color-a5,rgba(0 0 0/5%)) 0 1px 0;}
#category_list .group>.title h3{font-size:var(--SiteFS-L);text-transform:uppercase;}
#category_list .group>.title .more{color:var(--body-text-color-a50,rgba(0 0 0/50%));}
#category_list .group>.title .more:hover{color:var(--SiteTHM);}
#category_list .group>.list{display:flex;flex-direction:column;gap:1em;}
#category_list .article{display:grid;grid-template-columns:auto 1fr;gap:1em;color:inherit;transition:color 300ms;}
#category_list .article::before{content:attr(icon);font-size:1.5em;color:var(--body-text-color-a50,rgba(0 0 0/50%));}
#category_list .article:hover{color:var(--SiteTHM);}
#category_list .article>span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height:3em;overflow:hidden;text-overflow:ellipsis;}
@media only screen and (max-width:480px){
	#category_list>.title h2{font-size:var(--SiteFS-XXL);}
	#category_list>.list{margin-inline:calc(var(--spacing) * -1);}
	#category_list .group>.title h3{font-size:var(--SiteFS);}
}


/* sub category page */
#subcategory_content{flex:auto;}
#subcategory_content>.inner{display:flex;flex-direction:column;gap:var(--spacing);width:min(var(--MaxContentWidth),100%);margin-inline:auto;padding-block-start:var(--spacing);padding-inline:var(--spacing);box-sizing:border-box;}
#subcategory_list{display:flex;flex-direction:column;gap:var(--spacing);}
#subcategory_list>.title{display:flex;flex-direction:column;gap:.75em;}
#subcategory_list>.title h2{font-size:var(--SiteFS-XXXL);text-transform:uppercase;}
#subcategory_list>.list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(35em,100%),1fr));gap:1px;background-color:var(--background-color-L1,#fff);border-radius:1em;overflow:hidden;}
#subcategory_list>.list:not(:has(.article)){display:none;}
#subcategory_list .article{display:grid;grid:"icon title" auto ". description" 1fr / auto 1fr;align-items:start;gap:1em;color:inherit;transition:color 300ms;padding:var(--spacing);box-shadow:var(--text-color-a5,rgba(0 0 0 / 5%)) 0 1px 0,var(--text-color-a5,rgba(0 0 0 / 5%)) 1px 0 0;}
#subcategory_list .article:hover{color:var(--SiteTHM);}
#subcategory_list .article::before{grid-area:icon;content:attr(icon);font-size:1.5em;color:var(--body-text-color-a50,rgba(0 0 0/50%));}
#subcategory_list .article_title{grid-area:title;align-self:center;font-weight:var(--SiteFW-B);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height:3em;overflow:hidden;text-overflow:ellipsis;}
#subcategory_list .article_description{grid-area:description;color:var(--body-text-color-a50,rgba(0 0 0 / 50%));display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;max-height:4.5em;overflow:hidden;text-overflow:ellipsis;}
@media only screen and (max-width:480px){
	#subcategory_list>.title h2{font-size:var(--SiteFS-XXL);}
	#subcategory_list>.list{margin-inline:calc(var(--spacing) * -1);}
	#subcategory_list .article+.article{padding-block-start:var(--spacing);box-shadow:var(--body-text-color-a5,rgba(0 0 0/5%)) 0 1px 0 inset;}
}


/* article */
#article_content{flex:auto;}
#article_content>.inner{display:grid;grid:"Breadcrumbs Breadcrumbs" auto "article_container article_functions" 1fr/1fr clamp(25em,30%,30em);align-items:start;gap:var(--spacing);width:min(var(--MaxContentWidth),100%);margin-inline:auto;padding-block-start:var(--spacing);padding-inline:var(--spacing);box-sizing:border-box;}
#article_content #Breadcrumbs{grid-area:Breadcrumbs;}
#article_container{grid-area:article_container;}
#article_functions{grid-area:article_functions;}
@media only screen and (max-width:800px){
	#article_content>.inner{grid:"Breadcrumbs" "article_container" "article_functions";}
}
@media only screen and (max-width:480px){
	#article_container,
	#article_functions{margin-inline:calc(var(--spacing) * -1);}
}

#article_container{display:flex;flex-direction:column;gap:var(--spacing);padding:var(--spacing);background-color:var(--background-color-L3,#fff);border-radius:1em;overflow:hidden;}
#article_container .title{display:flex;flex-direction:column;gap:1em;padding-block-end:var(--spacing);box-shadow:var(--body-text-color-a5,rgba(0 0 0 / 5%)) 0 1px 0;}
#article_container .title h1{font-size:var(--SiteFS-XXXL);}
#article_container .title .update{font-size:var(--SiteFS-S);color:var(--body-text-color-a50,rgba(0 0 0 / 50%));}
@media only screen and (max-width:480px){
	#article_container .title h1{font-size:var(--SiteFS-XXL);}
}

#article_functions{display:flex;flex-direction:column;gap:var(--spacing);padding:var(--spacing);background-color:var(--background-color-L3,#fff);border-radius:1em;overflow:hidden;}
#article_functions .block{display:flex;flex-direction:column;gap:1em;}
#article_functions .block:not(:last-child){padding-block-end:var(--spacing);box-shadow:var(--body-text-color-a5,rgba(0 0 0/5%)) 0 1px 0;}
#article_functions .block:has(.list):not(:has(.article)){display:none;}
#article_functions .title{font-weight:var(--SiteFW-EB);margin-block-end:calc(var(--spacing) - 1em);}
#article_functions .list{display:flex;flex-direction:column;gap:1em;}
#article_functions .article{display:grid;grid-template-columns:auto 1fr;gap:1em;color:inherit;transition:color 300ms;}
#article_functions .article::before{content:attr(icon);font-size:1.5em;color:var(--body-text-color-a50,rgba(0 0 0/50%));}
#article_functions .article:hover{color:var(--SiteTHM);}
#article_functions .article>span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height:3em;overflow:hidden;text-overflow:ellipsis;}
#article_tags:not(:has(.tag)){display:none;}
#article_tags:not(:has(.tag)){display:none;}
#article_tags .tags{display:flex;flex-wrap:wrap;align-items:center;gap:.75em;}
#article_tags .tags .tag{max-width:min(20em,100%);--CPT-US:3em;overflow:hidden;}
#article_tags .tags .tag:hover{--color:var(--SiteTHM);--background-color:var(--SiteTHM-A10);--border-color:var(--SiteTHM);}
#article_tags .tags .tag>span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#article_votes .votes{display:flex;align-items:center;gap:.75em;}
#article_votes .votes .btw:not(:hover,.on){color:inherit;--background-color:transparent;--border-color:var(--body-text-color-a10,rgba(0 0 0/10%));}
#article_votes .count{}
#article_votes .count b{font-weight:var(--SiteFW-EB);}

article.guide{overflow:hidden;}
article.guide h1{font-weight:var(--SiteFW-EB);font-size:var(--SiteFS-XXXL);margin-block:1em;}
article.guide h2{font-weight:var(--SiteFW-EB);font-size:var(--SiteFS-XXL);margin-block:1em;}
article.guide h3{font-weight:var(--SiteFW-EB);font-size:var(--SiteFS-XL);margin-block:1em;}
article.guide>*:first-child{margin-block-start:0;}
article.guide ul,
article.guide ol{margin-block:1em;margin-inline-start:2em;}
article.guide ul>li{list-style:disc outside;margin-block:1em;}
article.guide ol>li{list-style:decimal outside;margin-block:1em;}
article.guide ul>li::marker,
article.guide ol>li::marker{color:var(--body-text-color-a50,rgba(0 0 0/50%));}
article.guide a{font-weight:var(--SiteFW-EB);}
article.guide a:hover{text-decoration:underline;}
article.guide b{font-weight:var(--SiteFW-EB);}
article.guide img{display:block;max-width:min(40em,100%);max-height:40em;width:auto;height:auto;object-fit:contain;margin-block:.5em;}
article.guide table{width:auto!important;vertical-align:top;border-collapse:collapse;border:none!important;text-align:center;margin-block:1em;}
article.guide table th,
article.guide table td{border:1px #ddd solid;padding:.5em 1em!important;}
article.guide table p{margin:0!important;}
article.guide [font],
article.guide [style]{color:inherit !important;}
@media only screen and (max-width:1000px){
	article.guide h1{font-size:var(--SiteFS-XXL);}
	article.guide h2{font-size:var(--SiteFS-XL);}
	article.guide h3{font-size:var(--SiteFS-L);}
}