@charset "utf-8";

/* 초기화 */
html {font-size:62.5%; scroll-behavior: smooth; overflow-x:hidden;}
/* overflow-x:hidden 은 그 요소를 '스크롤 상자'로 만든다. 그러면 그 안의 position:sticky 는
   '스크롤이 일어나지 않는 상자'를 기준으로 삼게 되어 영원히 붙지 않는다. 2026-09-16 에
   블로그 목차(.blog-detail-aside)와 인기글 사이드바(.blog-side)가 실제로 이것 때문에
   죽어 있었다 - sticky 는 걸려 있는데 그냥 같이 떠내려갔다.
   clip 은 가로 넘침을 똑같이 잘라 내면서 스크롤 상자를 만들지 않는다. @supports 로 감싸
   clip 을 모르는 옛 브라우저에는 위의 hidden 이 그대로 남게 한다. */
@supports (overflow: clip) { html {overflow-x:clip;} }
body {margin:0;padding:0;font-size:1.6rem;font-family:'SUIT Variable', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-family:'SUIT Variable', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}

ul, dl,dt,dd {margin:0;padding:0;list-style:none}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle;}
input, button {margin:0;padding:0;font-family:'SUIT Variable', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;}
input[type="submit"]{cursor:pointer}
button {cursor:pointer}

textarea, select {font-family:'SUIT Variable', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;}
select {margin:0}
p {margin:0;padding:0;word-break:keep-all;}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a {color:#000;text-decoration:none}

*, :after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

input[type=text],input[type=password], textarea {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
}
 
input[type=text]:focus,input[type=password]:focus, textarea:focus,select:focus {
-webkit-box-shadow:  0 0 5px #9ed4ff;
-moz-box-shadow:  0 0 5px #9ed4ff;
box-shadow: 0 0 5px #9ed4ff;
border: 1px solid #558ab7 !important;
}
.placeholdersjs { color: #aaa !important; }


/* 버튼 */
a.btn,.btn{width: fit-content; line-height:35px; min-height:35px;padding:0 10px;text-align:center;font-weight:bold;border:0;
-webkit-transition: background-color 0.3s ease-out;
-moz-transition: background-color 0.3s ease-out;
-o-transition: background-color 0.3s ease-out;
transition: background-color 0.3s ease-out;}

.btn01, a.btn01 {padding:7px;border:1px solid #3b82f6;background:#3b82f6;color:#fff;text-decoration:none;border-radius:50px;}
.btn01:hover, .btn01:focus, a.btn01:hover, a.btn01:focus {color:#3b82f6; background:#fff;}
.btn01:hover img {filter:invert(41%) sepia(85%) saturate(1633%) hue-rotate(201deg) brightness(97%) contrast(99%);}




 @media (min-width: 768px) and (max-width: 1023px){
    html {
      font-size: 50%;
    }
  }
  @media all and (max-width: 767px){
    html {
      font-size: 40%;
    }
  }