@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@200;300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Hi+Melody&display=swap');
body, .f-noto-sans, .f-basic {font-family: 'Noto Sans KR', sans-serif;}
.f-hi-melody{font-family: 'Hi Melody', sans-serif;}
.f-poor-story{font-family:'PoorStory', sans-serif;}
.noselect {-webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; user-select: none}

.vscroll::-webkit-scrollbar{background:#f5f5f5;width:6px}
.hscroll::-webkit-scrollbar{background:#f5f5f5;height:6px}
.hscroll::-webkit-scrollbar-thumb,
.vscroll::-webkit-scrollbar-thumb{background-color:#d6d6d6;border-radius:3px;cursor:pointer}
.hscroll::-webkit-scrollbar-thumb:hover,
.vscroll::-webkit-scrollbar-thumb:hover{background-color:#afafaf}

body {overflow-x: hidden}

/* loader */
.loader{display:block; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%; text-align:center; z-index:999999999}
.loader > div{margin:0 auto; border-radius:10px; display:inline-block; background:#FFF; box-shadow:0 0 50px 3px rgba(0,0,0,0.1); min-width:280px; min-height:170px; padding-top:30px; position:relative; top:50%; margin-top:-85px}
.load-imgwrap{display:flex; justify-content:center}
.loader img{width:60px}
.loader p{color:#444; font-size:15px; padding-top:20px}
html.loadershow,
html.loadershow body{height:100%; overflow:hidden}
@media(min-width:1070px){
  .loader > div{min-width:350px}
}

/*******************************
  디자인 토큰 / 공용 톤
********************************/

/*
 * 이 파일은 레이아웃의 <Link>로 들어가서 hys 모듈 CSS(번들)보다 '먼저' 로드된다.
 * 그래서 hys와 명시도가 같은 규칙은 순서에서 밀린다.
 * hys 기본값을 덮어써야 하는 셀렉터는 html / body 로 한 단계 한정해서 명시도를 올렸다.
 * (html:root = 0,1,1 > hys의 :root = 0,1,0 / body input.hysui = 0,1,2 > hys의 input.hysui = 0,1,1)
 */
html:root{
  /* 색 */
  --c-accent:#3182f6;
  --c-accent-dark:#2a76e8;
  --c-accent-soft:#f1f7ff;
  --c-accent-line:#c9ddff;
  --c-danger:#ff4266;
  --c-danger-dark:#f02a51;
  --c-danger-soft:#fff0f3;
  --c-warn:#ff9f43;

  --c-text:#2b3444;
  --c-text-sub:#5a6474;
  --c-label:#8a93a5;
  --c-muted:#a7aebb;

  --c-line:#e9ecf3;
  --c-line-soft:#f2f4f8;
  --c-surface:#ffffff;
  --c-surface-soft:#f7f9fc;
  --c-surface-hover:#f2f5fa;

  /* 모서리 */
  --r-xs:6px;
  --r-sm:8px;
  --r-md:10px;
  --r-lg:14px;
  --r-full:999px;

  /* 그림자 (넓고 옅게 — 밝은 화면에서 뜨지 않도록) */
  --sh-1:0 1px 2px rgba(11, 24, 50, 0.04);
  --sh-2:0 4px 16px rgba(11, 24, 50, 0.08);
  --sh-3:0 12px 36px rgba(11, 24, 50, 0.12);

  /* hys UI를 이 프로젝트 톤에 맞춤 (폰트는 본문 폰트를 그대로 상속) */
  --hysui-font: inherit;
  --hysui-theme-color: 49, 130, 246;
}


/* 폼 컨트롤 — hys는 focus 시 inset 테두리를 겹쳐 그려서 무겁다. 얇은 테두리 + 옅은 링으로 바꾼다 */
body input.hysui,
body select.hysui,
body textarea.hysui{border-color:var(--c-line); border-radius:var(--r-md); color:var(--c-text-sub); transition:border-color .18s, box-shadow .18s, background-color .18s}
body input.hysui::placeholder,
body textarea.hysui::placeholder{color:var(--c-muted); font-size:1em; opacity:1}
body input.hysui:focus,
body select.hysui:focus,
body textarea.hysui:focus{border-color:var(--c-accent); box-shadow:0 0 0 3px rgba(49, 130, 246, 0.12); background-color:var(--c-surface)}
body input.hysui:disabled,
body select.hysui:disabled,
body textarea.hysui:disabled{background:var(--c-surface-soft); color:var(--c-muted); cursor:not-allowed}

/* select은 hys가 -webkit-appearance:none으로 기본 화살표를 지우므로 직접 그려준다 */
body select.hysui{padding-right:34px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a93a5' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9.5l7 7 7-7'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; background-size:16px 16px; cursor:pointer}

@media (hover: hover) and (pointer: fine) {
  body input.hysui:hover:not(:focus):not(:disabled),
  body textarea.hysui:hover:not(:focus):not(:disabled),
  body select.hysui:hover:not(:focus):not(:disabled){border-color:#cfd6e4; box-shadow:none; background-color:var(--c-surface)}
}

/* 키보드 포커스 링 (마우스 클릭에는 나타나지 않음) */
:where(a, button, [tabindex]):focus-visible{outline:2px solid var(--c-accent); outline-offset:2px}