/* 세계 퀴즈 — 앱 전용 스타일(공통은 css/site.css 사본) */
:root { --accent: #0f766e; --accent-soft: #ccfbf1; }
.modes button { flex: 1 1 auto; }
#setup .row { margin: 6px 0 14px; }
.btn.big { padding: 12px 28px; font-size: 1.05rem; }
.daily-box { border: 1px dashed var(--accent); border-radius: var(--radius); padding: 12px 14px; background: var(--accent-soft); }
.daily-box p { margin: 4px 0 8px; }
.play-top { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; margin-bottom: 12px; }
.q { font-size: 1.25rem; margin: 6px 0 12px; }
.q-media { display: flex; justify-content: center; margin-bottom: 14px; min-height: 0; }
.q-media img.flag { width: min(100%, 320px); aspect-ratio: 4 / 3; object-fit: contain; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--shadow); }
.opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.opts button { border: 1px solid var(--line); background: #fff; border-radius: var(--radius); padding: 14px 12px; font-size: 1rem; font-weight: 600; cursor: pointer; text-align: center; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; color: var(--ink); }
.opts button img { width: 36px; height: 27px; object-fit: cover; border-radius: 3px; border: 1px solid var(--line); flex: none; }
.opts button:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); }
.opts button:disabled { cursor: default; opacity: .75; }
.opts button.right { border-color: var(--ok); background: #e8f7ee; opacity: 1; color: var(--ok); }
.opts button.wrong { border-color: var(--bad); background: #fde8e8; opacity: 1; color: var(--bad); }
.opts.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opts.two button { flex-direction: column; min-height: 110px; }
.opts.two button img { width: 72px; height: 54px; }
.feedback { margin-top: 14px; padding: 12px 14px; border-radius: var(--radius); background: var(--soft); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; }
.feedback b { grid-column: 1; grid-row: 1; font-size: 1.05rem; }
.feedback p { grid-column: 1; grid-row: 2; margin: 0; }
.feedback .btn { grid-column: 2; grid-row: 1 / span 2; padding: 12px 26px; }
.feedback.ok b { color: var(--ok); } .feedback.ng b { color: var(--bad); }
.big-score { font-size: 2rem; font-weight: 800; color: var(--accent); margin: 4px 0; }
.squares { font-size: 1.4rem; letter-spacing: 2px; margin: 0 0 8px; }
.mk-paper { margin: 14px 0; padding-left: 1.3em; } .mk-q { margin: 0 0 14px; break-inside: avoid; } .mk-q .q { font-weight: 700; margin: 0 0 6px; } .mk-q .ok { color: var(--ok); } .mk-q .ng { color: var(--bad); }
@media print {
  body.print-maker .hd, body.print-maker .lead, body.print-maker .tabs, body.print-maker #setup, body.print-maker #play, body.print-maker #result, body.print-maker #atlas, body.print-maker .seo, body.print-maker .ft, body.print-maker #maker .row, body.print-maker #maker textarea, body.print-maker #mk-score, body.print-maker #maker h3, body.print-maker #mk-wrong, body.print-maker #lang-suggest-bar { display: none !important; }
  body.print-maker #maker { display: block !important; }
  body.print-ans .mk-q .q::after { content: "  →  " attr(data-a); font-weight: 500; color: #333; }
}
.review { margin: 16px 0 0; padding-left: 22px; font-size: .9rem; }
.review li { margin: 4px 0; } .review .ng { color: var(--bad); } .review .ok { color: var(--ok); }
.review img { width: 22px; height: 16px; vertical-align: -3px; margin-right: 4px; border: 1px solid var(--line); }
#atlas .row { margin-bottom: 12px; } #atlas-q { flex: 1 1 200px; }
.atlas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.atlas-grid .c { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; background: #fff; text-align: center; font-size: .85rem; }
.atlas-grid .c img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); margin-bottom: 6px; }
.atlas-grid .c b { display: block; } .atlas-grid .c small { color: var(--muted); display: block; }
@media (max-width: 600px) { .opts { grid-template-columns: 1fr; } .opts.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .play-top { grid-template-columns: auto 1fr auto; } #q-streak { display: none; } }