@charset "UTF-8";
@import url('https://static.hankyung.com/resource/www/game/common/css/common.css?v=20250818');

.wrap.main {background:linear-gradient(141deg, #FFFAE9 0%, #F9EECE 100%)}
.badge {color:#121212}
.badge.new {color:#fff; border-color:#C08000; background:#C08000}
.quiz-title {font-size:20px}

.ranking-box .rank-info .btn-basic,
.fixed-area .btn-list {border-color:#C08000; color:#A16B00}
.content .desc-box {border-radius:16px; background-color:rgba(231, 217, 184, 0.50)}

/* 콘텐츠 */
.voca-wrap {max-width:760px; margin:0 auto}
.voca-list {display:flex; flex-direction:row-reverse; justify-content:flex-end; flex-wrap:wrap; gap:40px 32px}
.voca-item {position:relative; flex:0 0 auto; display:flex; flex-direction:column; justify-content:center; align-items:center; width:calc(50% - 16px); min-height:164px; padding:32px 24px 24px; border-radius:16px; border:1px solid #E7D9B8; background-color:#fff; box-shadow:0 -8px 0 0 rgba(231, 217, 184, 0.25) inset, 0 6px 8px 0 rgba(231, 217, 184, 0.50); transition:all .3s}
.voca-item:hover {box-shadow:0 -8px 0 0 rgba(231, 217, 184, 0.25) inset, 0 4px 8px 0 rgba(231, 217, 184, 0.50), 0 6px 12px 0 rgba(231, 217, 184, 0.50), 0 16px 20px 0 rgba(231, 217, 184, 0.50)}
.voca-item::before {content:''; position:absolute; top:-16px; left:0; width:36px; height:39px; background:url('https://static.hankyung.com/resource/www/game/quiz-hkvoca/img/icon-ring.svg') no-repeat center/contain}
.voca-item .quiz-info {gap:0; height:54px}
.voca-item .quiz-cont {margin-top:8px; color:#585858}
.voca-item .btn-basic {height:32px; border-radius:100px; border:1px solid #ccc; padding:0 16px; font-size:12px}
.voca-item .btn-basic.color-type {border-color:#FFDE78; background-color:#FFDE78}
.voca-item.new {border-color:#C08000}
.voca-item.complete {background:linear-gradient(180deg, #FFECB1 0%, #FFDD73 100%); box-shadow:0 -8px 0 0 rgba(225, 176, 59, 0.25) inset, 0 6px 8px 0 rgba(231, 217, 184, 0.50)}
.voca-item.complete:hover {box-shadow:0 -8px 0 0 rgba(225, 176, 59, 0.25) inset, 0 6px 8px 0 rgba(231, 217, 184, 0.50), 0 6px 12px 0 rgba(231, 217, 184, 0.50), 0 16px 20px 0 rgba(231, 217, 184, 0.50)}
.voca-item.complete .btn-basic {border-color:#C08000}
.voca-item .btn-area {display:flex; align-items:center; gap:12px; width:100%; margin-top:20px}
.voca-item .btn-area .btn-basic {flex:1 1 auto; width:calc(50% - 6px); min-width:auto}
.voca-item.ready {padding:24px; background-color:#FDF8ED}

.layer-pop.voca-pop .pop-inner {max-width:480px; max-height:calc(100dvh - 60px); padding:16px; overflow-y:auto}
.voca-pop .quiz-box {border-radius:8px; padding:24px 20px; background-color:#f5f5f5; box-sizing:border-box}
.voca-pop .answer-box {margin-top:0}
.voca-pop .answer-box .answer-tit {color:#C08000}

/* 퀴즈뷰 */
.view .layout-inner {max-width:680px}
.ing-progress .progress-bar .bar {background-color:#C08000}
.time-area .sec {color:#C08000}
.time-area .sec::before {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='25' fill='none'%3E%3Cpath stroke='%23C08000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M12 10v4l2.5 1.5M12 5.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17Zm0 0v-3m-2 0h4m6.329 3.592-1.5-1.5.75.75m-15.908.75 1.5-1.5-.75.75'/%3E%3C/svg%3E")}

.score-info-area .score-info {height:35px; margin-bottom:8px}
.btn-hint.active {color:#585858; background-color:#F7F7F7}

.view .bg-box {display:flex; flex-direction:column; align-items:flex-start; gap:16px; border-radius:0; padding:20px 20px 24px; background-color:#F5F5F5}
.view .quiz-item {padding-top:8px}

.inp-area {transition:all .3s}
.inp-area:hover, .inp-area:focus {box-shadow:0 4px 12px 0 rgba(0, 0, 0, 0.10)}

.inp-wrap {margin-top:12px}
.view .quiz-item + .btn-area {margin-top:40px}
.view .hint-area + .quiz-box {margin-top:8px}
.view .quiz-item .quiz-box {border-radius:8px; padding:16px; background-color:#f5f5f5; box-sizing:border-box}
.voca-area {display:flex; align-items:center; justify-content:center; width:100%; gap:8px; padding:24px 0}
.voca-area .word {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:78px; height:78px; font-weight:500; color:#000; font-size:28px; background:url('https://static.hankyung.com/resource/www/game/quiz-hkvoca/img/bg-default.png') no-repeat center/contain}
.voca-area .word.on {background:url('https://static.hankyung.com/resource/www/game/quiz-hkvoca/img/bg-correct.png') no-repeat center/contain}

.view .feedback-tit {display:flex; align-items:center; justify-content:center; width:100%; font-weight:700; font-size:24px}
.view .feedback-tit::before {content:''; display:inline-block; width:24px; height:24px; margin-right:8px; background-repeat:no-repeat; background-size:contain; background-position:center}
.view .feedback-tit.correct::before {background-image:url('https://static.hankyung.com/resource/www/game/quiz-economy-weekly/img/icon-correct.svg')}
.view .feedback-tit.timeout::before {background-image:url('https://static.hankyung.com/resource/www/game/crossword/img/icon-fail2.svg')} 
.view .feedback-tit.correct {color:#C08000}
.view .feedback-tit.timeout {color:#E0443F}

/* 퀴즈결과 */
.result .layout-inner {max-width:580px}
.feedback-cont {border-color:#E5DEC8}
.result-content .answer-box > .tit {background-image:url('https://static.hankyung.com/resource/www/game/quiz-hkvoca/img/icon-note.svg')}
.result-content .quiz-box.result-box {background-color:#FFF9EA}
.result-box .score-wrap .name {color:#121212}
.answer-box .answer-tit, .result-box .score-wrap .total-score {color:#C08000}
.result-box .result-tit {font-size:16px}

@media screen and (min-width:1100px){
  .col-wrap::before {background-color:#E5DEC8}
}
/* 모바일 */
@media screen and (max-width:720px) {
  .content .desc-box > p > strong {display:block}
  .content .desc-box > p > br {display:none}
  .voca-list {gap:28px}
  .voca-item {width:100%; min-height:126px; padding:20px 16px}
  .voca-item .quiz-info {height:48px}
  .quiz-title, .quiz-cont {font-size:14px}
  .voca-item .btn-area {margin-top:12px}
  .voca-area {flex-wrap:wrap; min-width:328px; margin:0 auto}
  .voca-area .word {width:76px; height:76px}

  /* .voca-area {display: grid; grid-template-columns:repeat(4, 1fr); gap:8px; max-width:328px; margin:0 auto; }
  .voca-area .word {width:76px; height:76px}
  .voca-area.five-word {grid-template-columns:repeat(5, 1fr);}
  .voca-area.five-word .word {width:59px; height:59px} */

  .view .quiz-item + .btn-area {margin-top:32px}
}
@media screen and (max-width:485px) {
  .voca-area.five-word .word {width:59px; height:59px}
}
@media screen and (max-width:345px) {
  .voca-area {min-width:auto; width:100%}
  .voca-area .word {width:59px; height:59px}
  .voca-area.five-word .word {width:46px; height:46px}
}

/* OS dark mode */
/* @media (prefers-color-scheme: dark) {
  @media screen and (max-width:1100px) {
    .badge.complete {border:none; color:#fff; background:rgba(255, 255, 255, 0.20)}
    .wrap.main {background:linear-gradient(167deg, #22211E 0%, #644608 100%)}
    .content .desc-box {background:rgba(114, 101, 80, 0.50)}
    .voca-item {border-color:#2C2312; background-color:#755B2B; box-shadow:0 -8px 0 0 rgba(58, 43, 17, 0.25) inset, 0 6px 8px 0 rgba(65, 48, 20, 0.50)}
    .voca-item::before {background-image:url('https://static.hankyung.com/resource/www/game/quiz-hkvoca/img/icon-ring-dark.svg')}
    .voca-item.new {border-color:#B08747; background-color:#755B2B}
    .voca-item.complete {background:linear-gradient(180deg, #A96E00 0%, #5F3F00 100%); box-shadow:0 -8px 0 0 rgba(64, 42, 0, 0.25) inset, 0 6px 8px 0 rgba(65, 48, 20, 0.50)}
    .voca-item.complete .btn-basic {background-color:#9E6900}
    .voca-item.ready {border-color:#2C2312; background-color:#50432A}
    .voca-item:hover {box-shadow:0 -8px 0 0 rgba(58, 43, 17, 0.25) inset, 0 6px 8px 0 rgba(65, 48, 20, 0.50)}
    .voca-item.complete:hover {box-shadow:0 -8px 0 0 rgba(64, 42, 0, 0.25) inset, 0 6px 8px 0 rgba(65, 48, 20, 0.50)}
    .voca-item .btn-basic {border:none; background:rgba(255, 255, 255, 0.10)}
    .voca-item .btn-basic.color-type {background-color:#9E6900}
    .fixed-area.active .btn-list {border-color:#C08000; color:#C08000}
    .voca-area .word {background-image:url('https://static.hankyung.com/resource/www/game/quiz-hkvoca/img/bg-default-dark.png')}
    .voca-area .word.on {background-image:url('https://static.hankyung.com/resource/www/game/quiz-hkvoca/img/bg-correct-dark.png')}
    .view .quiz-item .quiz-box,
    .voca-pop .quiz-box {background-color:#1c1c1e}
    .feedback-cont {border-color:#555}
    .tbl-rank + .btn-area .btn-more::after,
    .hint-area .btn-hint:not(.active) {filter:invert(1)}
    .hint-area .btn-hint:not(.active), .btn-hint.active {border:none; background-color:#e0e0e0}
    .btn-hint.active {color:#fff; background-color:#2a2a2a; background-image:url('https://static.hankyung.com/resource/www/game/quiz-economy-weekly/img/icon-hint.svg'); filter:brightness(0.7)}
    .score-info-area .page-num,
    .related-news .date {color:#bdbdbd}
    .result-box .score-wrap .name,
    .related-news .news-tit, .related-news .news-tit > a,
    .view .quiz-item .quiz-box,
    .voca-item .quiz-cont,
    .voca-area .word {color:#fff}
  }
} */

/*===== [2025.09.01] 앱용 화면 only =====*/
@media screen and (max-width: 1100px) {
  [data-env="app"] .voca-item .quiz-info {height:auto}
}