@charset "UTF-8";

.preview-area textarea { height: 160px; padding: 8px; margin: 14px 0; }

.font-hanwhagothic { font-family: "HanwhaGothic" !important; }
.font-lifeplus { font-family: "LIFEPLUS" !important; }
.font-ydygo { font-family: "YDYGO" !important; }
.font-spoqa { font-family: "Spoqa Han Sans Neo" !important; }
.font-nato { font-family: "Noto Sans KR" !important; }

/* nato,spoqa 를 hanwhagothic 의 자간,줄간을 맞추려면 아래 css 활성화하면 된다. */
/*
.font-nato { letter-spacing: -0.55px !important; line-height: 1.38 !important; }
.font-spoqa { letter-spacing: -0.34px !important; line-height: 1.406 !important; }
*/


/*
    https://www.w3.org/TR/mediaqueries-5/#descdef-media-color
    https://docs.w3cub.com/css/@media/color

    https://www.w3.org/TR/mediaqueries-5/#descdef-media-resolution
    https://docs.w3cub.com/css/@media/resolution
    https://developer.mozilla.org/ko/docs/Web/API/Window/devicePixelRatio
    https://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/
    https://caniuse.com/?search=device-pixel-ratio
    https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-webkit-device-pixel-ratio

    https://medium.com/@hyunalee419/feconf-korea-%EC%9B%B9%ED%8F%B0%ED%8A%B8%EC%9D%98-%EC%82%AC%EC%9A%A9%EA%B3%BC-%EC%B5%9C%EC%A0%81%ED%99%94-%EC%9D%B4%EC%83%81%EC%A7%84-58c210fa77c4
    https://velog.io/@vnthf/%EC%9B%B9%ED%8F%B0%ED%8A%B8-%EC%B5%9C%EC%A0%81%ED%99%94-%ED%95%98%EA%B8%B0
 */
/* @media screen and (min-width:768px) { */
/* @media (color <= 10) { */
/* transform: skew(-0.0003turn) !important; */
/* transform: skew(.001rad) !important; */
@media (max-resolution: 1.999dppx), (min-resolution: 90dpi) {
  a, button, caption, h1, h2, h3, h4, h5, h6,
  input, label, li, p, select, span, textarea, tr,
  .font-hanwhagothic {
    -webkit-transform: skew(-0.03deg) !important;
    -ms-transform: skew(-0.03deg) !important;
    transform: skew(-0.03deg) !important;
  }
}

/*
    PC 버전 해상도 테스트
    테스트: resolution dppx
*/
@media (min-resolution: 1dppx) {
  .section-resolution-ratio { background: red !important; color:#fff !important; }
}
@media (min-resolution: 1.2dppx) {
  .section-resolution-ratio { background: orange !important; color:#000 !important; }
}
@media (min-resolution: 1.4dppx) {
  .section-resolution-ratio { background: yellow !important; color:#000 !important; }
}
@media (min-resolution: 1.6dppx) {
  .section-resolution-ratio { background: green !important; color:#fff !important; }
}
@media (min-resolution: 1.8dppx) {
  .section-resolution-ratio { background: blue !important; color:#fff !important; }
}
@media (min-resolution: 1.999dppx) {
  .section-resolution-ratio { background: indigo !important; color:#fff !important; }
}
@media (min-resolution: 2dppx) {
  .section-resolution-ratio { background: purple !important; color:#fff !important; }
}
/*
@media not (min-resolution: 2dppx) {
  .section-resolution-ratio { background: indigo !important; color:#fff !important; }
}
@media (min-resolution: 2dppx) {
  .section-resolution-ratio { background: purple !important; color:#fff !important; }
}
*/


/*
    모바일 WebKit 용 css 속성
    테스트: -webkit-device-pixel-ratio
*/
@media (-webkit-min-device-pixel-ratio: 1) {
  .section-device-pixel-ratio { background: red !important; color:#fff !important; }
}
@media (-webkit-min-device-pixel-ratio: 1.2) {
  .section-device-pixel-ratio { background: orange !important; color:#000 !important; }
}
@media (-webkit-min-device-pixel-ratio: 1.4) {
  .section-device-pixel-ratio { background: yellow !important; color:#000 !important; }
}
@media (-webkit-min-device-pixel-ratio: 1.6) {
  .section-device-pixel-ratio { background: green !important; color:#fff !important; }
}
@media (-webkit-min-device-pixel-ratio: 1.8) {
  .section-device-pixel-ratio { background: blue !important; color:#fff !important; }
}
@media (-webkit-min-device-pixel-ratio: 1.999) {
  .section-device-pixel-ratio { background: indigo !important; color:#fff !important; }
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .section-device-pixel-ratio { background: purple !important; color:#fff !important; }
}
/*
@media not (-webkit-min-device-pixel-ratio: 2) {
  .section-device-pixel-ratio { background: yellow !important; color:#000 !important; }
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .section-device-pixel-ratio { background: green !important; color:#fff !important; }
}
*/


/* 테스트: resolution dpi */
@media (min-resolution: 50dpi) {
  .section-resolution-dpi { background: red !important; color:#fff !important; }
}
@media (min-resolution: 90dpi) {
  .section-resolution-dpi { background: orange !important; color:#000 !important; }
}
@media (min-resolution: 100dpi) {
  .section-resolution-dpi { background: yellow !important; color:#000 !important; }
}
@media (min-resolution: 150dpi) {
  .section-resolution-dpi { background: green !important; color:#fff !important; }
}
@media (min-resolution: 200dpi) {
  .section-resolution-dpi { background: blue !important; color:#fff !important; }
}
@media (min-resolution: 250dpi) {
  .section-resolution-dpi { background: indigo !important; color:#fff !important; }
}
@media (min-resolution: 300dpi) {
  .section-resolution-dpi { background: purple !important; color:#fff !important; }
}