.infobox {
float: right;
clear: right;
width: 320px;
max-width: 100%;
margin: 0 0 1.25rem 1.25rem;
padding: 0.72rem;
border: 3px solid #3d733a;
border-radius: 8px;
box-sizing: border-box;
background: #d9ead4;
color: #293728;
font-family:
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
"Apple SD Gothic Neo",
"Noto Sans KR",
sans-serif;
font-size: 0.92rem;
line-height: 1.5;
box-shadow: 0 0 22px rgba(48, 88, 45, 0.3);
}
.infobox__title {
padding: 0.18rem 0.82rem;
border: 1px solid #376e35;
border-bottom-width: 3px;
border-radius: 4px;
background: #479745;
color: #f8fff6;
font-family:
"SB Aggro B",
"SB 어그로 B",
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
font-size: 1.22rem;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.3;
text-align: center;
overflow-wrap: anywhere;
word-break: keep-all;
box-shadow: 0 3px 8px rgba(48, 83, 45, 0.2);
}
.infobox__panel {
margin-top: 0.68rem;
border: 1px solid #91b18b;
border-radius: 6px;
overflow: hidden;
background: #f3f8f1;
}
.infobox__image {
display: flex;
align-items: center;
justify-content: center;
padding: 1.35rem 1rem 1.25rem;
box-sizing: border-box;
background: #f3f8f1;
}
.infobox__image img {
display: block;
width: auto;
max-width: 100%;
height: auto;
max-height: 215px;
margin: 0 auto;
object-fit: contain;
filter: drop-shadow(0 9px 7px rgba(47, 79, 44, 0.24));
}
.infobox__details {
width: calc(100% - 2rem);
margin: 0 1rem 0.75rem;
padding-top: 0.48rem;
border-top: 1px solid #abc5a5;
border-collapse: separate;
border-spacing: 0 0.34rem;
table-layout: fixed;
background: transparent;
font-family:
"SB Aggro L",
"SB 어그로 L",
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
"Apple SD Gothic Neo",
"Noto Sans KR",
sans-serif;
}
.infobox__details th,
.infobox__details td {
min-width: 0;
padding: 0.4rem 0.55rem;
box-sizing: border-box;
vertical-align: middle;
font-family:
"SB Aggro L",
"SB 어그로 L",
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
"Apple SD Gothic Neo",
"Noto Sans KR",
sans-serif;
font-weight: 300;
line-height: 1.45;
}
.infobox__details th {
width: 35%;
border: 1px solid #72986b;
border-radius: 4px 0 0 4px;
background: #83aa7b;
color: #f8fff6;
font-size: 0.84rem;
text-align: left;
white-space: normal;
}
.infobox__details td {
border: 1px solid #c2d6bc;
border-left: 0;
border-radius: 0 4px 4px 0;
background: #e7f1e3;
color: #2d3a2c;
font-size: 0.89rem;
text-align: left;
overflow-wrap: anywhere;
word-break: break-word;
}
.infobox__details p {
margin: 0.2em 0;
}
.infobox__details ul,
.infobox__details ol {
margin: 0.2em 0 0.2em 1.2em;
padding: 0;
}
.infobox__details li {
margin: 0.1em 0;
}
.infobox__details sup {
line-height: 1;
}
.infobox a {
color: #397a36;
text-decoration: none;
}
.infobox a:hover {
color: #245522;
text-decoration: underline;
}
@media screen and (max-width: 720px) {
.infobox {
float: none;
clear: both;
width: 100%;
max-width: 100%;
margin: 0 0 1.1rem;
padding: 0.62rem;
border-radius: 7px;
box-shadow: 0 0 19px rgba(48, 88, 45, 0.27);
}
.infobox__title {
padding: 0.15rem 0.72rem;
font-size: 1.16rem;
}
.infobox__panel {
margin-top: 0.6rem;
border-radius: 5px;
}
.infobox__image {
padding: 1.15rem 0.82rem;
}
.infobox__image img {
max-height: 200px;
}
.infobox__details {
width: calc(100% - 1.6rem);
margin-right: 0.8rem;
margin-left: 0.8rem;
}
.infobox__details th {
width: 34%;
padding-right: 0.48rem;
padding-left: 0.48rem;
}
}
@media screen and (max-width: 420px) {
.infobox {
padding: 0.52rem;
}
.infobox__title {
padding-top: 0.12rem;
padding-bottom: 0.12rem;
font-size: 1.12rem;
}
.infobox__image {
padding: 1rem 0.7rem;
}
.infobox__image img {
max-height: 185px;
}
.infobox__details {
width: calc(100% - 1.3rem);
margin-right: 0.65rem;
margin-left: 0.65rem;
}
.infobox__details th,
.infobox__details td {
padding-top: 0.36rem;
padding-bottom: 0.36rem;
}
.infobox__details th {
width: 37%;
padding-right: 0.42rem;
padding-left: 0.42rem;
font-size: 0.79rem;
}
.infobox__details td {
padding-right: 0.48rem;
padding-left: 0.48rem;
font-size: 0.85rem;
}
}
@media screen {
html.skin-theme-clientpref-night .infobox {
border-color: #477343;
background: #2d3c2b;
color: #e4eee1;
box-shadow: 0 0 24px rgba(0, 0, 0, 0.43);
}
html.skin-theme-clientpref-night .infobox__title {
border-color: #315d2f;
background: #477f44;
color: #f5fff2;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}
html.skin-theme-clientpref-night .infobox__panel {
border-color: #557651;
background: #293527;
}
html.skin-theme-clientpref-night .infobox__image {
background: #293527;
}
html.skin-theme-clientpref-night .infobox__image img {
filter: drop-shadow(0 9px 7px rgba(0, 0, 0, 0.36));
}
html.skin-theme-clientpref-night .infobox__details {
border-top-color: #526f4e;
}
html.skin-theme-clientpref-night .infobox__details th {
border-color: #587f52;
background: #668d60;
color: #f4fbf1;
}
html.skin-theme-clientpref-night .infobox__details td {
border-color: #4e624a;
background: #374334;
color: #e4ece1;
}
html.skin-theme-clientpref-night .infobox a {
color: #9fd098;
}
html.skin-theme-clientpref-night .infobox a:hover {
color: #c0e5ba;
}
}
@media screen and (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os .infobox {
border-color: #477343;
background: #2d3c2b;
color: #e4eee1;
box-shadow: 0 0 24px rgba(0, 0, 0, 0.43);
}
html.skin-theme-clientpref-os .infobox__title {
border-color: #315d2f;
background: #477f44;
color: #f5fff2;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}
html.skin-theme-clientpref-os .infobox__panel {
border-color: #557651;
background: #293527;
}
html.skin-theme-clientpref-os .infobox__image {
background: #293527;
}
html.skin-theme-clientpref-os .infobox__image img {
filter: drop-shadow(0 9px 7px rgba(0, 0, 0, 0.36));
}
html.skin-theme-clientpref-os .infobox__details {
border-top-color: #526f4e;
}
html.skin-theme-clientpref-os .infobox__details th {
border-color: #587f52;
background: #668d60;
color: #f4fbf1;
}
html.skin-theme-clientpref-os .infobox__details td {
border-color: #4e624a;
background: #374334;
color: #e4ece1;
}
html.skin-theme-clientpref-os .infobox a {
color: #9fd098;
}
html.skin-theme-clientpref-os .infobox a:hover {
color: #c0e5ba;
}
}