/* 📰 오늘의 가짜뉴스 찾기 (2026-10-10) — act/fakenews.php 전용. 신문 지면 톤 */
#fn-wrap {
    --fn-bg: #f6f1e7; --fn-paper: #fffdf8; --fn-ink: #1f1b16; --fn-sub: #6b6157; --fn-line: #d9cfbf;
    --fn-red: #b42318; --fn-red-soft: #fde8e6; --fn-green: #1f7a4d; --fn-green-soft: #e3f4ea;
    --fn-blue: #1d4ed8; --fn-gold: #a16207; --fn-shadow: 0 10px 28px rgba(60, 40, 10, .12);
    --fn-serif: "Noto Serif KR", "Nanum Myeongjo", "AppleMyungjo", "Batang", serif;
    width: 100%; max-width: none; margin: 0 auto 6px; box-sizing: border-box;
    color: var(--fn-ink);
}
html[data-theme="dark"] #fn-wrap {
    --fn-bg: #1b1915; --fn-paper: #24211c; --fn-ink: #f1ebe0; --fn-sub: #b5ab9c; --fn-line: #3d372e;
    --fn-red: #ff8a7a; --fn-red-soft: #3a1f1b; --fn-green: #6ee7a8; --fn-green-soft: #17301f;
    --fn-blue: #93b4ff; --fn-gold: #f5c84c; --fn-shadow: 0 10px 28px rgba(0, 0, 0, .4);
}
#fn-wrap *, #fn-wrap *::before, #fn-wrap *::after { box-sizing: border-box; }

.fn-masthead {
    background: var(--fn-paper); border: 1px solid var(--fn-line); border-radius: 16px 16px 0 0;
    padding: 14px 16px 12px; text-align: center; border-bottom: 3px double var(--fn-ink);
}
.fn-paper { font-size: 10.5px; letter-spacing: .18em; font-weight: 800; color: var(--fn-sub); }
.fn-masthead h2 { margin: 4px 0 6px; font-family: var(--fn-serif); font-size: 26px; font-weight: 900; letter-spacing: -.02em; color: var(--fn-ink); }
.fn-dateline { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 10px; font-size: 12.5px; color: var(--fn-sub); font-weight: 700; word-break: keep-all; }
.fn-streak { padding: 2px 9px; border-radius: 20px; background: var(--fn-red-soft); color: var(--fn-red); font-weight: 900; }
.fn-archive { display: inline-flex; align-items: center; gap: 6px; margin-top: 9px; font-size: 12px; color: var(--fn-sub); font-weight: 700; }
.fn-archive select {
    min-height: 36px; max-width: 220px; padding: 4px 8px; border-radius: 9px; border: 1px solid var(--fn-line);
    background: var(--fn-bg); color: var(--fn-ink); font-size: 13px; font-weight: 700;
}

#fn-stage {
    position: relative; min-height: 360px; background: var(--fn-bg);
    border: 1px solid var(--fn-line); border-top: 0; border-radius: 0 0 16px 16px; box-shadow: var(--fn-shadow);
    padding: 16px 14px 18px;
}
.fn-panel[hidden] { display: none !important; }

/* 시작 */
#fn-intro { text-align: center; padding: 14px 4px; }
.fn-intro-badge { display: inline-block; padding: 4px 12px; border-radius: 20px; background: var(--fn-ink); color: var(--fn-paper); font-size: 12px; font-weight: 800; }
.fn-intro-t { margin: 16px 0 8px; font-family: var(--fn-serif); font-size: 24px; line-height: 1.45; font-weight: 900; color: var(--fn-ink); }
.fn-intro-t b { color: var(--fn-red); }
.fn-intro-d { margin: 0 0 14px; font-size: 13.5px; line-height: 1.7; color: var(--fn-sub); word-break: keep-all; }
.fn-intro-my { margin: 0 auto 14px; max-width: 360px; padding: 10px 12px; border-radius: 12px; background: var(--fn-paper); border: 1px dashed var(--fn-line); font-size: 13.5px; line-height: 1.6; color: var(--fn-ink); }
.fn-intro-my b { color: var(--fn-red); font-size: 16px; }
.fn-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
.fn-btn { min-height: 46px; min-width: 150px; padding: 11px 20px; border-radius: 24px; cursor: pointer; font-size: 15px; font-weight: 900; border: 0; }
.fn-btn-main { background: var(--fn-red); color: #fff; box-shadow: 0 6px 16px rgba(180, 35, 24, .25); }
html[data-theme="dark"] .fn-btn-main { color: #2a0d09; }
.fn-btn-main:disabled { opacity: .55; cursor: default; }
.fn-btn-sub { background: var(--fn-paper); color: var(--fn-ink); border: 1px solid var(--fn-line); }
.fn-btn:active { transform: translateY(1px); }

/* 플레이 */
.fn-timer { height: 4px; border-radius: 3px; background: var(--fn-line); overflow: hidden; margin: 0 0 12px; }
.fn-timer i { display: block; height: 100%; width: 0; background: var(--fn-gold); transition: width .1s linear; }
.fn-timer i.over { background: var(--fn-sub); }
.fn-q { display: flex; justify-content: space-between; align-items: baseline; margin: 0 2px 10px; font-weight: 900; }
.fn-q span { font-size: 16px; color: var(--fn-ink); }
.fn-q b { font-size: 13px; color: var(--fn-sub); font-variant-numeric: tabular-nums; }
.fn-opts { display: flex; flex-direction: column; gap: 10px; }
.fn-opt {
    position: relative; display: block; width: 100%; min-height: 64px; text-align: left; cursor: pointer;
    padding: 13px 14px 13px 46px; border-radius: 12px; border: 1px solid var(--fn-line);
    background: var(--fn-paper); color: var(--fn-ink); box-shadow: 0 2px 0 var(--fn-line);
    font-family: var(--fn-serif); font-size: 16.5px; line-height: 1.5; font-weight: 800; word-break: keep-all; overflow-wrap: anywhere;
    -webkit-tap-highlight-color: transparent; transition: transform .08s, border-color .15s, background .15s;
}
.fn-opt::before {
    content: attr(data-n); position: absolute; left: 12px; top: 13px; width: 24px; height: 24px; border-radius: 50%;
    background: var(--fn-ink); color: var(--fn-paper); font-family: system-ui, sans-serif; font-size: 12.5px; font-weight: 900;
    display: flex; align-items: center; justify-content: center;
}
@media (hover: hover) { .fn-opt:hover { border-color: var(--fn-red); } }
.fn-opt:focus-visible { outline: 3px solid var(--fn-blue); outline-offset: 2px; }
.fn-opt.picked { border-color: var(--fn-red); background: var(--fn-red-soft); transform: scale(.985); }
.fn-opts.locked .fn-opt { cursor: default; }
.fn-dots { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
.fn-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--fn-line); }
.fn-dots i.done { background: var(--fn-ink); }
.fn-dots i.now { background: var(--fn-red); }

/* 결과 */
.fn-score-head { text-align: center; padding: 4px 0 12px; border-bottom: 1px solid var(--fn-line); }
.fn-score strong { font-size: 54px; font-weight: 900; color: var(--fn-red); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.fn-score span { font-size: 18px; font-weight: 900; color: var(--fn-ink); margin-left: 2px; }
.fn-rstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 8px 0; }
.fn-rstats div { padding: 7px 4px; border-radius: 10px; background: var(--fn-paper); border: 1px solid var(--fn-line); }
.fn-rstats small { display: block; font-size: 11px; color: var(--fn-sub); font-weight: 700; }
.fn-rstats b { display: block; font-size: 16px; font-weight: 900; color: var(--fn-ink); font-variant-numeric: tabular-nums; }
.fn-rmsg { font-size: 13px; line-height: 1.6; color: var(--fn-sub); word-break: keep-all; }
.fn-review-list { list-style: none; margin: 12px 0 10px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.fn-rv { opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s; }
.fn-rv.show { opacity: 1; transform: none; }
.fn-rv-h { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 900; margin: 0 2px 6px; color: var(--fn-ink); }
.fn-rv-h .ok { color: var(--fn-green); } .fn-rv-h .no { color: var(--fn-red); }
.fn-rv-o {
    position: relative; padding: 10px 12px; border-radius: 11px; margin-bottom: 6px;
    background: var(--fn-paper); border: 1px solid var(--fn-line); color: var(--fn-ink);
}
.fn-rv-o.fake { border: 2px solid var(--fn-red); background: var(--fn-red-soft); }
.fn-rv-o .t { font-family: var(--fn-serif); font-size: 15px; font-weight: 800; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere; }
.fn-rv-o .m { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 5px; font-size: 12px; color: var(--fn-sub); font-weight: 700; }
.fn-rv-o .bar { position: relative; flex: 1 1 80px; min-width: 60px; height: 6px; border-radius: 3px; background: var(--fn-line); overflow: hidden; }
.fn-rv-o .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--fn-sub); }
.fn-rv-o.fake .bar i { background: var(--fn-red); }
.fn-tag { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11.5px; font-weight: 900; }
.fn-tag.ai { background: var(--fn-red); color: #fff; }
html[data-theme="dark"] .fn-tag.ai { color: #2a0d09; }
.fn-tag.real { background: var(--fn-green-soft); color: var(--fn-green); }
.fn-tag.mine { background: var(--fn-ink); color: var(--fn-paper); }
.fn-rv-o a { color: var(--fn-blue); font-weight: 800; text-decoration: none; padding: 4px 0; }
.fn-rv-o a:hover { text-decoration: underline; }
.fn-hint { margin-top: 5px; font-size: 12.5px; line-height: 1.55; color: var(--fn-red); font-weight: 700; word-break: keep-all; }
.fn-tomorrow { margin: 12px 0 0; text-align: center; font-size: 12.5px; color: var(--fn-sub); word-break: keep-all; }
.fn-tomorrow b { color: var(--fn-ink); }

#fn-msg { text-align: center; padding: 40px 10px; }
#fn-msg p { font-size: 14.5px; line-height: 1.7; color: var(--fn-ink); word-break: keep-all; margin: 0 0 14px; }

.fn-notice { margin: 10px 4px 0; font-size: 11.5px; line-height: 1.6; color: var(--fn-sub); text-align: center; word-break: keep-all; }

/* 안내 박스 — 전역 .answer_shadow(가운데 정렬·1.1em) 누르기 */
.fn-guide { text-align: left; line-height: 1.7; margin-top: 16px; }
.fn-guide h3 { font-size: 1rem; font-weight: 900; margin: 10px 0 4px; }
.fn-guide h3:first-child { margin-top: 0; }
.fn-guide p { font-size: .9rem; margin: 0 0 8px; }
.fn-guide ul { font-size: .9rem; margin: 4px 0 9px 18px; padding: 0; }
.fn-guide li { margin: 3px 0; }
.fn-guide small { font-size: .8rem; display: block; margin-top: 8px; color: #64748b; }
html[data-theme="dark"] .fn-guide small { color: #a8b3c4; }
.fn-description { text-align: left; }

@media (max-width: 420px) {
    .fn-masthead h2 { font-size: 22px; }
    .fn-intro-t { font-size: 21px; }
    .fn-opt { font-size: 15.5px; padding: 12px 12px 12px 42px; }
    .fn-opt::before { left: 10px; }
    .fn-score strong { font-size: 46px; }
    .fn-btn { min-width: 130px; font-size: 14px; }
    #fn-stage { padding: 14px 10px 16px; }
}
.fn-archive[hidden] { display: none; }

/* 10-10 게임 영역 폭 100%: 배경·테두리는 꽉 채우고 넓은 화면에서는 안쪽 콘텐츠만 가운데로 모은다 */
@media (min-width: 761px) {
    #fn-wrap .fn-panel { padding-left: max(4px, calc((100% - 680px) / 2)); padding-right: max(4px, calc((100% - 680px) / 2)); }
}