@font-face { font-display: swap; font-family: roboto; font-style: normal; font-weight: 400; src: url('font/roboto-400.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: roboto; font-style: normal; font-weight: 500; src: url('font/roboto-500.woff2') format('woff2'); }

* { margin: 0; padding: 0; box-sizing: border-box; color: black; font: 400 14px roboto; _border: 1px red dotted; }
body * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }

main { display: flex; max-width: 1280px; margin: auto; border-left: 1px solid silver; border-right: 1px solid silver;
	&>div:nth-child(1) { width: 330px; border-right: 1px solid silver; }
	&>div:nth-child(2) { width: 620px; border-right: 1px solid silver; }
	&>div:nth-child(3) { width: 330px; } }

x-temp { display: flex; flex-direction: column; padding: 1rem 1.3rem; border-bottom: 1px solid silver;
	&>p { font-style: italic; margin: 0.2rem 0rem; } }

 x-header { display: block; border-bottom: 1px solid silver;
	&>div { display: flex; align-items: center; justify-content: space-between; max-width: 1280px; margin: auto; padding: 1rem 1.25rem; }
	&>div>a { display: flex; align-items: center; font: 500 18px roboto; }
	&>div>a>img { display: block; min-height: 16px; min-width: 16px; margin-right: 0.5rem; }
	&>div>h1 { font: 500 15px roboto; } }

x-kartta { display: flex; padding: 1.5rem; border-bottom: 1px solid silver;
	&>a { display: flex; flex-direction: column; }
	&>a>h1 { font: 500 15px roboto; }
	&>a>h2 { color: #666; padding: 0.1rem 0rem; }
	&>a>img { display: block; width: 100%; margin: 0.5rem 0rem; } }

x-creator { display: flex; padding: 1.5rem; border-top: 1px solid silver;
	&>a { display: flex; flex-direction: column; }
	&>a>h1 { padding: 0.25rem 0rem; } }

x-writer, x-average { display: flex; flex-direction: column; padding: 1.5rem; border-bottom: 1px solid silver;
	&>h1 { display: flex; justify-content: space-between; margin-bottom: 0.5rem; }
	&>h1>span:first-child { font: 500 15px roboto; }
	&>a { display: flex; justify-content: space-between; }
	&>a>h2, &>a>h3 { padding: 0.2rem 0rem; }
	&>h4 { font: 500 15px roboto; margin-top: 0.5rem; cursor: pointer; } }

x-history, x-popular { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem;
	&>h1 { font: 500 15px roboto; }
	&>a { display: block; }
	&>a>h2 { font: 500 15px roboto; padding: 0.2rem 0rem;}
	&>a>h3, &>a>h3>span { color: #666; padding: 0.1rem 0rem; }
	&>h4 { font: 500 15px roboto; cursor: pointer; } }

x-current { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; 
	&>a { display: block; }
	&>a>h1 { font: 500 16px roboto; }
	&>a>h2, &>a>h2>span { color: #666; padding: 0.2rem 0rem; }
	&>a>h3 { line-height: 140%; white-space: normal; overflow: hidden; }
	&>a>h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
	&>a.hidden { display: none; }
	&>h4 { font: 500 15px roboto; cursor: pointer; } }

x-latest { display: none; font: 500 15px roboto; cursor: pointer;
	&.hidden { display: none; } }

x-left, x-right { display: none; font: 500 15px roboto; border-bottom: 2px solid white; cursor: pointer; }

@media screen and (max-width: 900px) {
	x-header h2 { display: none; }
	main>div:nth-child(1) { display: none; }
	main>div:nth-child(2) { width: 60%; }
	main>div:nth-child(3) { width: 40%; } }

@media screen and (max-width: 600px) {
	x-left, x-right { display: block; }
	x-left { border-bottom: 2px solid black; }
	x-header h1, x-popular h1 { display: none; }
	body.left>div>x-left { border-bottom: 2px solid black; }
	body.left>main>div:nth-child(2) { display: block; width: 100%; }
	body.left>main>div:nth-child(3) { display: none; width: 0%; }
	body.right>div>x-right { border-bottom: 2px solid black; }
	body.right>main>div:nth-child(2) { display: none; width: 0%; }
	body.right>main>div:nth-child(3) { display: block; width: 100%; } }