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

.wrap.main {background:linear-gradient(141deg, #FCF5EF 0%, #E8E0D7 100%)}
.badge.new {background-color:#794E37}

.content .desc-box {margin-bottom:20px; background-color:rgba(223, 206, 184, 0.50)}
.ranking-box .rank-info .btn-basic, .fixed-area .btn-list {border-color:#794E37; color:#794E37}

/* 크로스워드판 */
.crossword-wrap .crossword-list {max-width:760px}
.crossword-list {display:grid; grid-template-columns:repeat(5, 1fr); margin:auto; border:3px solid #121212; background-color:#61544D; box-sizing:border-box} 
.crossword-item {aspect-ratio:1 / 1; min-width:0; min-height:100%; border:1px solid #121212; font-weight:700; background-color:#fff; box-sizing:border-box}
.crossword-item > button {pointer-events:auto}

/* .crossword-tbl {width:100%; max-width:760px; table-layout:fixed; border:3px solid #121212; margin:30px auto 0}
.view .crossword-tbl .crossword-item {display:table-cell; text-align:center} */

.crossword-item .date {color:#585858}
.crossword-item.ready {background:#ccc; cursor:default}
.crossword-item.ready button {pointer-events:none}
.crossword-item.ready .quiz-info {cursor:default}
.crossword-item.complete {background:linear-gradient(180deg, #F7E6D7 0%, #D7BCA2 100%)}
.crossword-item.complete .quiz-info::after {content:''; display:block; width:46px; height:40px; background:url('https://static.hankyung.com/resource/www/game/crossword/img/icon-catfoot.png') no-repeat center/contain}
.crossword-item.empty {background-color:#61544D}

/* 퀴즈뷰 */
.ing-progress {max-width:586px; margin:0 auto}
.ing-progress .progress-bar .bar {background-color:#533921}
.ing-progress .time-area .sec {color:#533921}
.ing-progress .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='%23533921' 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");}
.ing-progress + .crossword-list {margin-top:18px}
.view .crossword-list {max-width:586px; width:100%}
.view .crossword-list + .crossword-list {margin-top:20px}
.view .crossword-item .quiz-info {font-size:24px}
.view .crossword-item {position:relative; display:flex; align-items:center; justify-content:center; max-width:100%; font-weight:500; color:#533921}
.view .crossword-item:not(.correct, .incorrect, .timeout, .empty) {cursor:pointer}
.view .crossword-item.on {background:#F9F4EF}
.view .crossword-item.correct {background:linear-gradient(180deg, #F7E6D7 0%, #D7BCA2 100%)}
.view .crossword-item.incorrect, .view .crossword-item.cross.incorrect {border-color:#CA3531; color:#CA3531; background:#fff}
.view .crossword-item.timeout {border-color:#CA3531; color:#CA3531; background:#fff}
.view .crossword-item.incorrect.on, .view .crossword-item.cross.incorrect.on {background-color:#F9F4EF}
.view .crossword-list.ready .crossword-item.cross .quiz-info::before {content:''; display:inline-block; width:30px; height:30px; margin:0 auto; background-size:contain; background-repeat:no-repeat; background-position:center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='30' fill='none'%3E%3Cpath fill='%23121212' d='M6.333 16.56c0-.347.12-.64.36-.88s.52-.36.84-.36c1.227-.08 2.32-.387 3.28-.92a6.122 6.122 0 0 0 2.28-2.16c.56-.907.84-1.96.84-3.16 0-1.253-.267-2.333-.8-3.24-.507-.933-1.2-1.653-2.08-2.16-.88-.533-1.88-.8-3-.8-1.093 0-2.12.253-3.08.76a7.302 7.302 0 0 0-2.4 2 2.051 2.051 0 0 1-.76.48c-.267.08-.56.013-.88-.2-.32-.213-.507-.48-.56-.8-.053-.347.04-.667.28-.96.853-1.067 1.933-1.933 3.24-2.6a9.029 9.029 0 0 1 4.16-1C9.6.56 11 .907 12.253 1.6a7.722 7.722 0 0 1 3.04 2.96c.747 1.28 1.12 2.787 1.12 4.52a7.683 7.683 0 0 1-.64 3.08 8.799 8.799 0 0 1-1.76 2.64 8.534 8.534 0 0 1-2.6 1.84 8.54 8.54 0 0 1-3.2.76c-.08 0-.053-.013.08-.04a.805.805 0 0 0 .4-.24v4.2c0 .347-.12.64-.36.88-.213.213-.493.32-.84.32s-.64-.107-.88-.32a1.137 1.137 0 0 1-.28-.88v-4.76ZM7.533 30c-.453 0-.813-.133-1.08-.4-.24-.293-.36-.667-.36-1.12v-.88c0-.48.12-.853.36-1.12.267-.267.627-.4 1.08-.4h.24c.48 0 .827.133 1.04.4.24.267.36.64.36 1.12v.88c0 .453-.12.827-.36 1.12-.213.267-.56.4-1.04.4h-.24Z'/%3E%3C/svg%3E")}
/* .view .crossword-item.on {padding:24px; box-sizing:border-box} */
.view .ground-area {width:586px}
.view .cont-area {width:calc(100% - 666px)}
.view .q-num {position:absolute; top:12px; left:12px; width:12px; height:12px; background-size:contain; background-position:center; background-repeat:no-repeat}
.view .q-num.num1 {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none'%3E%3Cpath fill='%23121212' d='M6.64 11.6V.88l.512.544H4V.4h3.792v11.2H6.64Z'/%3E%3C/svg%3E")}
.view .q-num.num2 {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none'%3E%3Cpath fill='%23121212' d='M2.336 11.696v-.816l4.656-4.56c.427-.416.747-.779.96-1.088.213-.32.357-.619.432-.896a3.02 3.02 0 0 0 .112-.784c0-.65-.224-1.163-.672-1.536-.437-.373-1.088-.56-1.952-.56-.661 0-1.248.101-1.76.304a3.311 3.311 0 0 0-1.296.944L2 2c.437-.512.997-.907 1.68-1.184C4.363.539 5.125.4 5.968.4c.757 0 1.413.123 1.968.368.555.235.981.581 1.28 1.04.31.459.464.997.464 1.616 0 .363-.053.72-.16 1.072-.096.352-.277.725-.544 1.12-.256.384-.635.821-1.136 1.312L3.568 11.12l-.32-.448h6.944v1.024H2.336Z'/%3E%3C/svg%3E")}
.view .q-num.row, .view .q-num.col {display:none}
.view .q-num.row {animation:shakeRow 1.6s ease-in-out infinite; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none'%3E%3Cpath stroke='%23533921' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M1 6h10m0 0L7.25 2M11 6l-3.75 4'/%3E%3C/svg%3E")}
.view .q-num.col {animation:shakeCol 1.6s ease-in-out infinite; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='12' fill='none'%3E%3Cpath stroke='%23533921' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 1v10m0 0 4-3.75M5 11 1 7.25'/%3E%3C/svg%3E")}
.view .crossword-item.on .q-num.row, .view .crossword-item.on .q-num.col {display:block}

@keyframes shakeRow {
  0% {transform:translateX(0)}
  50% {transform:translateX(4px)}
	100% {transform:translateX(0)}
}
@keyframes shakeCol {
  0% {transform:translateY(0)}
  50% {transform:translateY(4px)}
	100% {transform:translateY(0)}
}

.view .cont-area .ready-txt {display:block; width:100%; margin-bottom:16px; font-weight:500; font-size:18px; text-align:center}
.view .bg-box {display:flex; flex-direction:column; align-items:flex-start; gap:16px; border-radius:8px; padding:20px 20px 24px; background-color:#F5F5F5}
.view .quiz-item {cursor:pointer}
.view .quiz-item + .quiz-item, .view .quiz-item + .btn-area {margin-top:20px}
.view .quiz-item:first-child {margin-top:44px}
.view .ready-txt + .quiz-item, .view .feedback-tit + .quiz-item {margin-top:12px}
.view .feedback-tit ~ .quiz-item {cursor:default}
.view .quiz-item.ready .quiz-questions {display:flex; align-items:center; justify-content:center; width:100%; height:100px}
.view .quiz-item.ready .quiz-questions::before {width:30px; height:30px; margin:0 auto; background-size:contain; background-repeat:no-repeat; background-position:center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='30' fill='none'%3E%3Cpath fill='%23121212' d='M6.333 16.56c0-.347.12-.64.36-.88s.52-.36.84-.36c1.227-.08 2.32-.387 3.28-.92a6.122 6.122 0 0 0 2.28-2.16c.56-.907.84-1.96.84-3.16 0-1.253-.267-2.333-.8-3.24-.507-.933-1.2-1.653-2.08-2.16-.88-.533-1.88-.8-3-.8-1.093 0-2.12.253-3.08.76a7.302 7.302 0 0 0-2.4 2 2.051 2.051 0 0 1-.76.48c-.267.08-.56.013-.88-.2-.32-.213-.507-.48-.56-.8-.053-.347.04-.667.28-.96.853-1.067 1.933-1.933 3.24-2.6a9.029 9.029 0 0 1 4.16-1C9.6.56 11 .907 12.253 1.6a7.722 7.722 0 0 1 3.04 2.96c.747 1.28 1.12 2.787 1.12 4.52a7.683 7.683 0 0 1-.64 3.08 8.799 8.799 0 0 1-1.76 2.64 8.534 8.534 0 0 1-2.6 1.84 8.54 8.54 0 0 1-3.2.76c-.08 0-.053-.013.08-.04a.805.805 0 0 0 .4-.24v4.2c0 .347-.12.64-.36.88-.213.213-.493.32-.84.32s-.64-.107-.88-.32a1.137 1.137 0 0 1-.28-.88v-4.76ZM7.533 30c-.453 0-.813-.133-1.08-.4-.24-.293-.36-.667-.36-1.12v-.88c0-.48.12-.853.36-1.12.267-.267.627-.4 1.08-.4h.24c.48 0 .827.133 1.04.4.24.267.36.64.36 1.12v.88c0 .453-.12.827-.36 1.12-.213.267-.56.4-1.04.4h-.24Z'/%3E%3C/svg%3E")}
.view .quiz-item.ready .inp-wrap {display:none}
.view .btn-basic.full-type {background:#533921 !important}
.view .btn-basic.full-type.type-black {background:#121212 !important}
.view .quiz-item.on .bg-box {background-color:#F9F4EF}
.view .quiz-item.on .inp-area, .view .quiz-item:hover .inp-area {box-shadow:0 4px 12px 0 rgba(0, 0, 0, 0.10)}
.view .quiz-item.incorrect .inp-area {border-color:#CA3531; animation:shake 0.5s ease}

@keyframes shake {
  0%   { transform: translateX(0)}
  20%  { transform: translateX(-6px)}
  40%  { transform: translateX(6px)}
  60%  { transform: translateX(-4px)}
  80%  { transform: translateX(4px)}
  100% { transform: translateX(0)}
}

.view .quiz-item .answer-area {display:flex; align-items:center}
.view .quiz-item .answer-area > span {font-size:16px;}
.view .quiz-item .answer-area .tit {font-weight:700; color:#533921}
.view .quiz-item .answer-area .answer {font-weight:400}
.view .quiz-item .answer-area .answer::before {content:''; display:inline-block; width:1px; height:14px; margin:0 8px; vertical-align:-1px; background-color:#585858}

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

/* 퀴즈결과 */
.result-content .answer-box > .tit {background-image:url('https://static.hankyung.com/resource/www/game/crossword/img/icon-note.svg')}
.result-content .quiz-box.result-box {position:relative; background-color:#F9F4EF; overflow:hidden}
.result-box .score-wrap .name {color:#121212}
.answer-box .answer-tit, .result-box .score-wrap .total-score,
.result-box .result-tit > strong {color:#533921}
.feedback-cont {border-color:#DED7D0}
.firework-ani {position:absolute; top:0; left:50%; width:100%; height:100%; margin-left:-360px; pointer-events:none}

@media screen and (min-width:1100px) and (max-width:1440px) {
 
}

@media screen and (min-width:1101px){
  .col-wrap::before {background-color:#C5B9AF}
  .main .quiz-info {position:relative}
  .main .quiz-info::before {content:'시작하기'; position:absolute; top:0; left:0; opacity:0; visibility:hidden; width:100%; height:99%; padding-right:12px; font-weight:400; color:#794E37; font-size:18px; background-position:82% center; background-color:#fff; background-repeat:no-repeat; background-size:20px 20px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='21' fill='none'%3E%3Cpath stroke='%23794E37' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m7.5 15.9 5-5-5-5'/%3E%3C/svg%3E"); box-sizing:border-box; pointer-events:none; transition:opacity .3s ease; overflow:hidden}
  .main .quiz-info .quiz-head, .main .quiz-info .quiz-cont {transition:opacity .2s}
  .main .quiz-info:hover .quiz-head, .main .quiz-info:hover .quiz-cont {opacity:0}
  .main .quiz-info:hover::before {display:flex; align-items:center; justify-content:center; opacity:1; visibility:visible}

  .main .crossword-item.complete .quiz-info::before {content:'결과보기'; color:#121212; background-repeat:no-repeat; background-size:20px 20px; background-position:82% center; background-color:transparent; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' fill='none'%3E%3Cpath stroke='%23121212' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m7.7 15.9 5-5-5-5'/%3E%3C/svg%3E"); z-index:2}
  .main .crossword-item.complete .quiz-info:hover::after {position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(180deg, #F7E6D7 0%, #D7BCA2 100%); z-index:1}
}

/* 모바일 */
@media screen and (max-width:1100px) {
  .view .footer {margin:64px 16px 40px; padding-bottom:0}

  /* 퀴즈뷰 */
  .cont-body {flex-direction:column; gap:20px; padding:0 16px}
  .view .feedback-tit {margin-top:0}
  .view .ground-area, .view .cont-area {width:100%}
  /* .view .crossword-list.ready .crossword-item.cross .quiz-info::before {width:30px; height:30px} */
  .view .quiz-item + .quiz-item, .view .quiz-item + .btn-area {margin-top:12px}
  .view .quiz-item.ready {opacity:0}
  /* .view .quiz-item.ready.active .inp-wrap {display:block} */
  .view .quiz-item:has(.inp-wrap) {visibility:hidden; opacity:0; z-index:2; position:fixed; left:0; right:0; bottom:-200px; max-height:auto; border-radius:20px 20px 0 0; box-shadow:0 -4px 16px 0 rgba(0, 0, 0, 0.15); transition:all .3s}
  .view .quiz-item:has(.inp-wrap).active {visibility:visible; opacity:1; bottom:-1px; max-height:500px}
  .view .quiz-item:has(.inp-wrap) .bg-box {margin-bottom:0; border-radius:20px 20px 0 0;}
  .view .bg-box {gap:8px; margin-bottom:0; padding:12px 16px 16px; box-sizing:border-box}
  .quiz-questions {line-height:1.6; font-size:14px}
  .quiz-questions::before {width:14px; height:14px; margin-right:2px; vertical-align:-2px}
  .view .quiz-item .answer-area .tit, .view .quiz-item .answer-area .answer {font-size:14px}
  .inp-area {height:40px; padding:6px 5px 6px 16px}
  .inp-area .btn-basic {min-width:53px; height:31px}
  /* .inp-area .inp-txt {font-size:14px} */
}

@media screen and (max-width:720px) {
  .badge.new {width:18px; height:18px; margin-left:0}
  .badge.new::before {content:'N'; line-height:1.2; font-size:10px}

  .info-box {margin-bottom:20px}
  .main .footer {margin-top:32px}
  .content .desc-box > strong {font-weight:700; font-size:16px}
  .main .crossword-list {grid-template-columns:repeat(3, 1fr)}
  .main .crossword-item.empty:not(.show) {display:none}
  .crossword-item.complete .quiz-info::after {width:42px; height:36px; margin-top:10px}
  .view .crossword-item {font-weight:700}
  .view .crossword-item .quiz-info {font-size:20px}
  .result-content .quiz-box {padding:16px}

  /* 퀴즈뷰 */
  .ing-progress .ing-num {font-size:16px}
  .view .q-num {top:4px; left:4px; width:10px; height:10px}
  .view .cont-area .ready-txt {font-size:16px}
  .inp-area .inp-txt::placeholder {font-size:14px}
  .inp-area .inp-txt::-webkit-input-placeholde {font-size:14px}
  .inp-area .inp-txt::-moz-placeholder {font-size:14px}
  .inp-area .inp-txt::-ms-input-placeholder {font-size:14px}
  .inp-area .inp-txt:-ms-input-placeholder {font-size:14px}
  .view .quiz-item:first-child {margin-top:0}
}

/* OS dark mode */
/* @media (prefers-color-scheme: dark) {
  @media screen and (max-width:1100px) {
    .wrap.main {background:linear-gradient(167deg, #22201E 0%, #61544D 100%)}
    .content .desc-box {background-color:rgba(125, 109, 91, 0.50)}
    .fixed-area.active .btn-list {border-color:#B18C6B; color:#B18C6B}
    .ing-progress .progress-bar .bar {background-color:#B18C6B}
    .ing-progress .time-area .sec {color:#B18C6B}
    .ing-progress .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='%23B18C6B' 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")}
    .view .crossword-list {border-color:#333}
    .inp-area,
    .result-content .quiz-box.result-box {background-color:#323235}
    .inp-area .btn-basic {border:none; background-color:#555}
    .view .feedback-tit.success,
    .view .quiz-item .answer-area .tit,
    .answer-box .answer-tit, 
    .result-box .score-wrap .total-score, 
    .result-box .result-tit > strong {color:#B18C6B}
    .view .btn-basic.full-type.type-black {background-color:#555 !important}
    .view .feedback-tit.fail {color:#E0443F}

    .view .bg-box,
    .view .quiz-item.on .bg-box {background-color:#1c1c1e}
    
    .quiz-header .quiz-num,
    .result-box .score-wrap .name,
    .view .btn-basic.full-type {color:#fff}
    .answer-box .answer-info .tit::after {background-color:#888}
    .view .crossword-item.on {background-color:#f1e6db}
    .feedback-cont {border-color:#555}
  }
} */


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