:root {
--blue: #0047A0;
--red: #CD313A;
--black: #000000;
--white: #FFFFFF;
--trigrams-location-width: cos（atan2（2,3）） * （11/18）;
--trigrams-location-height: sin（atan2（2,3）） * （11/12）;
--brick-size: 1/6;
}

body {
background-color: var（--black）;
}

.wrap {
position: relative;
width: 100%;
height: 0;
overflow: hidden;
padding-bottom: calc（（2/3） * 100%）;
}

.taegeukgi {
;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var（--white）;
display: flex;
align-items: center;
justify-content: center;
}

.taegeuk {
;
width: calc（（1/3） * 100%）;
height: 50%;
background: linear-gradient（var（--red） 50%, var（--blue） 0）;
border-radius: 50%;
rotate: calc（atan2（2,3））;
}

.taegeuk::before {
;
content: "";
width: 50%;
height: 50%;
border-radius: 50%;
background-color: var（--red）;
margin: 25% 0;
}

.taegeuk::after {
;
content: "";
width: 50%;
height: 50%;
border-radius: 50%;
background-color: var（--blue）;
margin: 25% 50%;
}

.trigrams {
;
width: calc（（var（--trigrams-location-width） + var（--brick-size）） * 100%）;
height: calc（（var（--trigrams-location-height） + var（--brick-size）） * 100%）;
display: grid;
grid-template-rows: repeat（2, 1fr）;
gap: calc（（（var（--trigrams-location-width） - var（--brick-size）） / （var（--trigrams-location-width） + var（--brick-size））） * 100%）;
}

.top,
.bottom {
display: flex;
justify-content: space-between;
}

.sky,
.water,
.fire,
.earth {
width: calc（（var（--brick-size） / （var（--trigrams-location-width） + var（--brick-size））） * 100%）;
display: grid;
column-gap: calc（（1/12） * 100%）;
row-gap: calc（（1/8） * 100%）;
grid-template-rows: repeat（3, 1fr）;
grid-template-columns: repeat（2, 1fr）;
}

.brick {
background-color: var（--black）;
}

.sky {
grid-template-columns: 1fr;
}

.water {
grid-template-columns: repeat（2, 1fr）;
}

.water .brick:nth-child（3） {
grid-column: span 2;
}

.fire {
grid-template-columns: repeat（2, 1fr）;
}

.fire .brick:first-child,
.fire .brick:last-child {
grid-column: span 2;
}

.sky,
.earth {
transform: rotate（atan2（3, -2））;
}

.water,
.fire {
transform: rotate（atan2（3, 2））;
}













































아니 CSS는 참 못하는게 없군요;;;