/*
 * Globals
 */
/* @import url(https://fonts.googleapis.com/earlyaccess/nanumgothic.css); */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css");
i.bi:before {vertical-align: middle}

/* {font-family:'Nanum Gothic';}*/
* {font-family: 'Noto Sans KR', sans-serif;}

@media (min-width: 48em) {
  html {
    font-size: 18px;
  }
}

a {text-decoration: none;}
a:hover {text-decoration: none;}
a:focus {text-decoration: none;}
a.clean {text-decoration: none; color: inherit;}
a.clean:hover {color: inherit;}

body {
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
}
ul.example {padding-left:1rem}
ul.example li {list-style-type: none; cursor:pointer; margin-bottom:.5rem}
ul.example li:hover {color:#3367D7}

[tabindex="-1"]:focus {
    outline: 0!important; 
}

[contenteditable]:focus {
    outline: 0px solid transparent;
}

.click {cursor:pointer;}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  font-weight: normal;
  color: var(--bs-heading-color);
  line-height:140%;
}

h3.exam-name a {color:var(--bs-emphasis-color)}

strong {font-weight:800;}

.cut {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*
 * Override Bootstrap's default container.
 */

.container,
.container-sm,
.container-md,
.container-lg,
.container-xl {
  max-width: 1400px;
}

.answer.q {
  margin:1rem;
  padding:5px;
  background-color:#fbfbfb;
  box-sizing:border-box;
  box-shadow:#aaa 1px 1px 2px;
  font-family:'Nanum Gothic';
  position:relative;
}

.answer.q .answer-cover {
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  z-index:999;
  background-color:#428bca;
  cursor:pointer;
  text-align:center;
  color:#fff;
}

.contents {
	margin:1rem;
	padding:5px;
	background-color:#fbfbfb;
	box-sizing:border-box;
	box-shadow:#aaa 1px 1px 2px;
	font-family:'Nanum Gothic';
	white-space: pre-wrap;
}

.contents th{
  border:1px solid #999;
  padding:.2rem .6rem;
}

.contents td{
	border:1px solid #999;
	padding:.2rem .6rem;
}

.contents blockquote {
  background: #fff;
  padding: 7px;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin: 3px !important;
}

.sh {
  background-color:black;
  color:#ccc;
  padding:7px;
  margin-bottom:0;
  font-family: initial;
}

l {
  text-decoration: underline;
}

/*
 * Masthead for nav
 */

.exam-head {
  background-color:cornflowerblue;
}

.blog-masthead {
  top:0px;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  z-index: 100;
  margin-bottom: 1rem;
  background-color: #428bca;
  -webkit-box-shadow: inset 0 -.1rem .25rem rgba(0,0,0,.1);
          box-shadow: inset 0 -.1rem .25rem rgba(0,0,0,.1);
}

[data-bs-theme="dark"] .exam-head,
[data-bs-theme="dark"] .blog-masthead {
  background-color: #1e2a3a;
  -webkit-box-shadow: inset 0 -.1rem .25rem rgba(0,0,0,.45);
          box-shadow: inset 0 -.1rem .25rem rgba(0,0,0,.45);
}

/* Nav links */
.nav-link {
  position: relative;
  padding:.8rem 1.5rem .8rem 0;
  font-weight: 500;
  color: #cdddeb;
  display:inline-block;
  font-size:0.9rem;
}
.nav-link.float-end {
    font-size: 0.8rem;
    padding:.8rem 0rem .8rem 0;
}

#examSelect {width:65%; font-size:1.3rem; display:inline-block;}
.searchWrap {width:35%}

@media (max-width: 587px) { 
  #examSelect {width:66%}
  .searchWrap {width:30%}
}

@media (max-width: 500px) { 
  .nav-link {padding:.8rem .7rem .8rem 0; font-size:.82rem;} 
  #examSelect {width:calc(100% - 80px)}
  .searchWrap {width:50px}
  #search {display:none}
  .searchIcon {margin-top:5px; font-size:1.3rem}
  .user-point {display:none}
}

@media (max-width: 380px) { 
  .nav-link {padding:.8rem .7rem .8rem 0;} 
  .nav-link.float-end {
      font-size: 0.8rem;
      padding:.9rem 0rem .9rem 0;
  }
}

.nav-link:last-child { padding:.8rem 0 .8rem 0;}
.nav-link:hover,
.nav-link:focus {
  color: #fff;
  background-color: transparent;
}

/* Active state gets a caret at the bottom */
.nav-link.active {
  color: #fff;
}
.nav-link.active:after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -0.85rem;
  vertical-align: middle;
  content: "";
  border-right: .3rem solid transparent;
  border-bottom: .3rem solid #fff;
  border-left: .3rem solid transparent;
}

[data-bs-theme="dark"] .blog-masthead .nav-link {
  color: #b9cce0;
}

[data-bs-theme="dark"] .blog-masthead .nav-link:hover,
[data-bs-theme="dark"] .blog-masthead .nav-link:focus,
[data-bs-theme="dark"] .blog-masthead .nav-link.active {
  color: #f1f6fb;
}

[data-bs-theme="dark"] .blog-masthead .nav-link.active:after {
  border-bottom-color: #2a3a4f;
}

[data-bs-theme="dark"] .blog-masthead .nv-openmain button {
  border-color: rgba(255,255,255,.65) !important;
  opacity: .92;
}


/*
 * Blog name and description
 */

.blog-header {
  margin-bottom: 1rem;
  border-bottom: .05rem solid var(--bs-border-color);
}
.blog-title {
  margin-bottom: 0;
  font-size: 2rem;
  font-weight: normal;
}
.blog-description {
  font-size: 1.1rem;
  color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .bg-light {
  background-color: var(--bs-secondary-bg) !important;
  color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .answer.q,
[data-bs-theme="dark"] .contents,
[data-bs-theme="dark"] .contents blockquote,
[data-bs-theme="dark"] .sidebar-module-inset {
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
  box-shadow: none;
}

[data-bs-theme="dark"] .contents th,
[data-bs-theme="dark"] .contents td {
  border-color: var(--bs-border-color);
}

@media (min-width: 40em) {
  .blog-title {
    font-size: 3.5rem;
  }
}


/*
 * Main column and sidebar layout
 */

/* Sidebar modules for boxing content */
.sidebar-module {
  padding: 1rem;
  /*margin: 0 -1rem 1rem;*/
}
.sidebar-module-inset {
  padding: 1rem;
  background-color: #f5f5f5;
  border-radius: .25rem;
}
.sidebar-module-inset p:last-child,
.sidebar-module-inset ul:last-child,
.sidebar-module-inset ol:last-child {
  margin-bottom: 0;
}


/* Pagination */
.blog-pagination {
  margin-bottom: 4rem;
}
.blog-pagination .btn {
  border-radius: .5rem;
  cursor:pointer;
}


/*
 * Blog posts
 */

.blog-post {
  margin-bottom: 1rem;
}
.blog-post.question {
  position: relative;
}
.blog-post-title {
  margin-bottom: .25rem;
  font-size: 1.5rem;
}
.blog-post-meta {
  margin-bottom: 1.25rem;
  color: #999;
}


/*
 * Footer
 */

.blog-footer {
  padding: 2.5rem 0;
  color: #999;
  text-align: center;
  background-color: #f9f9f9;
  border-top: .05rem solid #e5e5e5;
}
.blog-footer p:last-child {
  margin-bottom: 0;
}

ul#question-list { padding:0px }

#answer-sheet { 
  width:15%; 
  max-width:200px; 
  width:100%;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 60px;
  overflow-y:auto 
}

div.answer-box {width:20%; height:39px; border-right:1px solid #aaa; box-sizing:border-box; float:left}
div.answer-box:nth-child(-n+5) {border-top:1px solid #aaa;}
div.answer-box:nth-child(5n+1) {border-left:1px solid #aaa;}
div.answer-box .answer {text-align:center; height:19px; font-size:0.7em; border-bottom:1px solid #bbb}

.example li.checked {font-weight:bold;}
.example li .number {display:inline; position:relative}
.example li img.check-mark {position:absolute; top:-7px; left:0px; width:24px; height:24px; font-size:24px; display:none;}
.example li.checked img.check-mark {display:block}

/* ½ÃÇèÄ¡±â È­¸é Àü¿ë*/
.grade {
  position: fixed;
  right: 10px;
  left: auto;
  bottom: 10px;
  border-radius: 5px;
  background: RGBA(38,72,97,.8);
  padding: 6px 10px;
  margin: 0;
  border: 0;
  z-index: 999;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  width: fit-content;
  max-width: 44vw;
  font-size: 14px;
}

.timer {
  position: fixed;
  left: 10px;
  right: auto;
  bottom: 10px;
  border-radius: 5px;
  background: RGBA(200,200,200,.7);
  padding: 6px 10px;
  margin: 0;
  border: 0;
  z-index: 999;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  width: fit-content;
  max-width: 44vw;
  font-size: 14px;
}
.timer .func {position:absolute; border-radius:50%; width: 40px; height: 40px; padding-top: 9px; text-align: center; bottom:35px; display:none}
.timer .func.off {background:RGBA(255,200,200,.7);  left:0px;}
.timer .func.reset {background:RGBA(200,200,255,.7);  left:45px;}

@media (max-width: 576px) {
  .grade,
  .timer {
    max-width: 46vw;
    font-size: 13px;
    padding: 5px 8px;
  }
}

span.headerSelect {border:1px solid transparent; padding:4px; display:inline-block}
span.headerSelect:hover {border:1px solid var(--bs-border-color); cursor:pointer;}
span.headerSelect:hover::after {content:'▾'}

.subject {padding-left:15px;}
.subject .number {color:cornflowerblue; font-weight:bold; font-size:1.5rem}
.subject.small {font-size:0.9rem;}
.subject.small .number {font-size:1rem;}
.subject.long {font-size:1.1rem; margin-bottom:1rem}
.subject a {text-decoration: none; color: inherit;}

ul.exam li {padding:5px; cursor:pointer;}
ul.exam li.selected {background-color:#f1f1f1; padding:5px;}
ul.exam a {text-decoration:none; color:#000;}

label.shortKey {font-size:24px; position:absolute; top:-60px; right:145px; cursor:pointer;}
label.shortKey:before {
    font-weight:900;
    content: '\f11c';
  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free";
}

label.setting {font-size:24px; position:absolute; top:-60px; right:105px; cursor:pointer;}
label.setting:before {
    font-weight:900;
    content: '\f013';
  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free";
}

label.bookmark{font-size:24px; cursor:pointer; position:absolute;}
label.bookmark.top {top:-60px; right:70px;}
label.bookmark.right {right:20px;}
.blog-pagination .bookmark.right {
  position: static;
  right: auto;
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
}
label.bookmark:before {
  content: '\f005';
  font-weight:400;
  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free";
}
label.bookmark.active:before {
  content: '\f005';
  font-weight:900;
  color:#FD4;
}

.question label.more {font-size:24px; position:absolute; top:-60px; right:26px; cursor:pointer;}

.question-tools {
  gap: 1rem;
}

.question-tools label.shortKey,
.question-tools label.setting,
.question-tools label.bookmark,
.question-tools label.more {
  position: static;
  top: auto;
  right: auto;
  font-size: 22px;
  margin: 0;
}

label.shortKey,
label.setting,
label.bookmark,
.question label.more {
  z-index: 5;
}

.selfOX {color:#999; cursor:pointer;}
.selfOX.active {color:cornflowerblue; font-weight:bold;}
.light-small {color:var(--bs-secondary-color); font-size:0.7rem}

ul#question-list li {list-style:none;}
ul#question-list li.exam {font-size:2em; font-weight:bold;}
ul#question-list li.serial {font-size:1.5em; font-weight:bold;}
ul#question-list li.category {font-size:1.2em; font-weight:bold;}

#commentCover {position:relative;}
#commentCover .coverText {
    width: 260px;
    height: 110px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -130px;
    margin-top: -55px; 
    color:#000;
    padding:20px;
    background:RGBA(255,255,255,.6);
    box-shadow: 1px 1px 4px #ccc;
    border-radius: 15px;
    display:none;
    font-size:16px;
    z-index: 100;
}
#commentList.cover {filter:blur(4px);}

.commentWrap {padding:10px; position:relative; border:1px solid var(--bs-border-color); border-radius:5px; margin-bottom:10px; box-shadow:none; font-size:0.9rem}
.commentWrap .x {position:absolute; top:0px; right:10px; cursor:pointer;}
.commentWrap .y {position:absolute; top:0px; right:30px; cursor:pointer;}

#commentList article {position:relative; padding-bottom: 15px; margin-bottom:15px;}
#commentList article:not(:last-child) {border-bottom:1px solid var(--bs-border-color); }
#commentList article .x {position:absolute; top:0px; right:10px; cursor:pointer;}
#commentList article .y {position:absolute; top:0px; right:30px; cursor:pointer;}
#commentList article .report {position:absolute; top:0px; right:30px; cursor:pointer;}

#commentList article .content p:last-child {margin-bottom: 0;}

.contents table th,
.contents table th {text-align: center; font-weight:bold;}

.passInput {display:none; position:absolute; right:0px; top:0px; background-color:#f5f5f5; box-shadow:1px 1px 1px #ddd; padding:5px; z-index: 100;}

[data-bs-theme="dark"] .passInput {
  background-color: var(--bs-tertiary-bg);
  box-shadow: none;
  border: 1px solid var(--bs-border-color);
}

.examSideList {font-size:0.7rem; padding:5px 0px; list-style:none;}
.examSideList li {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width:100%;}

/* forum */
.forum_category {margin-top:5px;}
@media (min-width: 768px) { .forum_category {text-align:right; margin-top:0} }

.forum article .content {overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;}
.forum article .title a {text-decoration: none}
.forum article .tags span {background-color:#f1f4f5; border-radius:3px; font-size:0.7rem; padding:3px 5px; cursor:pointer;}

#searchResult {max-height:150px; overflow-y: auto; left:auto !important; right:4px !important;}
#searchResult .dropdown-item {font-size:0.8rem;}
#findResult {max-height:150px; overflow-y: auto}
#findResult .dropdown-item {font-size:0.8rem;}
#modFloat {display: none}
#modFloat.active {display: block}

.commentDeleteButton {display:none;}
.comment:hover .commentDeleteButton {display:inline;}

.speech-bubble {
  position: absolute;
  background: #ededed;
  border-radius: .4em;
  top: 25px;
  left: -30px;
  white-space:nowrap;
  z-index: 10;
  display:none;
}

.speech-bubble:after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-bottom-color: #ededed;
  border-top: 0;
  margin-left: -10px;
  margin-top: -10px;
}

.referenceBox {font-size: 0.9rem}
.wikis a {background:RGBA(255,255,255,.5); color: #444; display: inline-block; margin-right: 1rem; font-size: 0.9rem; padding: 2px 7px; border: 1px solid #aaa; border-radius: 2px;}
.examWikis a {background:RGBA(255,255,255,.5); color: #444; display: inline-block; margin-right: .5rem; font-size: 0.7rem; padding: 1px 4px; border: 1px solid #aaa; border-radius: 2px;}
#forumList article:not(:last-child) {border-bottom: 1px solid var(--bs-border-color); padding-bottom: 5px}
#forumList article:not(:first-child) {padding-bottom: 5px}
#forumList article .subject {display: inline-block; color: #333;}
#forumList article .info {display: inline-block; vertical-align: baseline;}

[data-bs-theme="dark"] .wikis a,
[data-bs-theme="dark"] .examWikis a {
  background: var(--bs-secondary-bg);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] #forumList article .subject {
  color: var(--bs-body-color);
}

#resolveList article {min-height: 50px;}
.resolveCover {position:relative;}
.resolveCover .coverText {
    width: 260px;
    height: 44px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -130px;
    margin-top: -22px; 
    color:#000;
    padding:11px;
    background:RGBA(255,255,255,.6);
    box-shadow: 1px 1px 4px #ccc;
    border-radius: 15px;
    font-size:16px;
    font-weight: bold;
    cursor: pointer;
}
.resolveCover .coverText.small {
    height: 30px;
    margin-top: -15px; 
    padding:5px;
    box-shadow: 1px 1px 2px #ccc;
    border-radius: 12px;
    font-size:14px;
    font-weight: normal;
}
.blurCover {filter:blur(4px);}

#aiResolveList article {font-family: 'Courier New', monospace; font-size:14px}
#aiResolveList article {padding-top: 10px; }
#aiResolveList article:not(:last-child) {padding-bottom: 10px; border-bottom: 1px solid var(--bs-border-color);}

[data-bs-theme="dark"] .speech-bubble {
  background: var(--bs-tertiary-bg);
}

[data-bs-theme="dark"] .speech-bubble:after {
  border-bottom-color: var(--bs-tertiary-bg);
}
#aiResolveList article .warning {color:#666}
#aiResolveList article .model {color:#666}
#aiResolveList article h5 {font-size:1rem; font-weight:bold}
#aiResolveList article h4 {font-size:1rem; font-weight:bold}
#aiResolveList article h3 {font-size:1rem; font-weight:bold}
#aiResolveList article h2 {font-size:1.1rem}
#aiResolveList article h1 {font-size:1.2rem; font-weight:bold}
.aiResolveList .ai-action-btn {font-size: 11px; padding: 2px 6px; line-height: 1.2;}
.aiResolveList .resolveCover {min-height:50px}

#autoSearchBox {height: 130px; overflow-y: auto; z-index: 1060; padding: 8px}
#autoSearchBox div {margin-bottom: 3px; cursor: pointer;}
#autoSearchBox div:hover {background-color: #eeeeff}
#autoSearchBox div.active {background-color: #eeeeff}

[data-bs-theme="dark"] #autoSearchBox div:hover,
[data-bs-theme="dark"] #autoSearchBox div.active {
  background-color: var(--bs-secondary-bg);
}

.rank .rank-user .no {font-family: Impact; font-weight: bold; font-style: italic; display: inline-block; width: 30px; text-align: center;}
.rank .rank-user .nick { font-weight:bold; display: inline-block; margin-right:10px }
.rank .rank-user:first-child .no {color: #a433f5; font-size: 1.3rem}
.rank .rank-user:first-child .nick {font-size: 1.2rem}
.rank .rank-user:nth-child(2) .no, .rank .rank-user:nth-child(3) .no {font-size: 1.2rem}
.rank .rank-user:nth-child(2) .nick, .rank .rank-user:nth-child(3) .nick {font-size: 1.1rem}

.rank .rank-user:first-child .content {font-weight: bold}

.nodec {color: inherit; text-decoration: none;}
.examList div {font-size: 18px; margin-bottom: 5px; cursor: pointer;}
.examList div:hover {color: cornflowerblue;}

.blink {
  animation: blink-animation 1s steps(20, start) infinite;
  -webkit-animation: blink-animation 1s steps(20, start) infinite;
}
@keyframes blink-animation {
  to {
    color: #fff;
  }
}
@-webkit-keyframes blink-animation {
  to {
    color: #fff;
  }
}

.alert-info-light { 
  color: #1c5460;
  background-color: #e1fcff;
  border-color: #cef5fb; 
}

.categoryTr .fail {background-color: pink;}
.categoryTr .pass {background-color: skyblue;}

.crush {letter-spacing: -0.5px;}
.crush-1 {letter-spacing: -1px;}
.crush-2 {letter-spacing: -2px;}

#examSelect a{color: white; text-decoration: none;}
#examSelect a:hover {text-decoration: none;}