/* 한국어 줄바꿈: 단어(이모지+글자) 중간에서 끊기지 않게 — 단어 단위로만 줄바꿈 */
body { word-break: keep-all; overflow-wrap: break-word; }
.codebox, pre, code { word-break: normal; }   /* 코드 블록은 기존 동작 유지 */

.codebox {
  background: #0b1220;
  border: 1px solid #1e293b;
  border-radius: 6px;
  padding: 8px 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-x: auto;
  color: #cbd5e1;
}
.prose-cf { color: #cbd5e1; font-size: 14px; line-height: 1.7; }
.prose-cf h1 { font-size: 1.25rem; font-weight: 700; color: #f1f5f9; margin: .6em 0 .4em; }
.prose-cf h2 { font-size: 1.08rem; font-weight: 800; color: #f1f5f9; margin: 1.15em 0 .55em; padding: .35em .65em; border-left: 3px solid #38bdf8; background: linear-gradient(90deg, rgba(56,189,248,.14), rgba(56,189,248,0)); border-radius: 5px; }
.prose-cf h2:first-child { margin-top: .2em; }
.prose-cf h3 { font-size: .95rem; font-weight: 600; color: #e2e8f0; margin: .7em 0 .3em; }
.prose-cf p { margin: .5em 0; }
.prose-cf ul, .prose-cf ol { margin: .5em 0 .5em 1.2em; list-style: disc; }
.prose-cf ol { list-style: decimal; }
.prose-cf li { margin: .2em 0; }
.prose-cf code { background: #1e293b; padding: 1px 5px; border-radius: 4px; font-size: 12.5px; font-family: ui-monospace, monospace; }
.prose-cf pre { background: #0b1220; border: 1px solid #1e293b; border-radius: 6px; padding: 10px; overflow-x: auto; margin: .6em 0; }
.prose-cf pre code { background: none; padding: 0; font-size: 12.5px; }
.prose-cf strong { color: #f1f5f9; }
.prose-cf table { border-collapse: collapse; margin: .5em 0; }
.prose-cf th, .prose-cf td { border: 1px solid #1e293b; padding: 4px 8px; font-size: 13px; }

/* ── 폴리시: 폰트·네비·모션 ── */
body {
  font-family: 'Pretendard', 'Pretendard Variable', -apple-system, BlinkMacSystemFont,
    'Apple SD Gothic Neo', system-ui, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.nav-link { color: #cbd5e1; transition: color .15s; white-space: nowrap; }
.nav-link:hover { color: #fff; }
.nav-m { padding: 6px 10px; border-radius: 6px; color: #cbd5e1; white-space: nowrap; }
.nav-m:hover { background: #1e293b; color: #fff; }

.card { transition: transform .14s ease, border-color .14s, box-shadow .14s; }
.card:hover { transform: translateY(-2px); border-color: #0284c7;
  box-shadow: 0 8px 24px -10px rgba(2,132,199,.35); }

button, a { transition: background-color .14s, color .14s, opacity .14s; }

/* 채점 중 스피너 */
.spinner { display:inline-block; width:13px; height:13px; border:2px solid #475569;
  border-top-color:#38bdf8; border-radius:50%; animation:spin .7s linear infinite; vertical-align:-2px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 정답 축하 */
@keyframes pop { 0%{transform:scale(.96);opacity:.4} 60%{transform:scale(1.02)} 100%{transform:scale(1);opacity:1} }
.celebrate { animation: pop .35s ease; box-shadow: 0 0 0 2px rgba(16,185,129,.5), 0 0 30px -5px rgba(16,185,129,.4); }
@keyframes floatup { 0%{transform:translateY(0);opacity:1} 100%{transform:translateY(-90px) rotate(20deg);opacity:0} }
.confetti { position:fixed; font-size:26px; pointer-events:none; animation:floatup 1.1s ease-out forwards; z-index:50; }

/* 등장 페이드 */
/* opacity만(transform 없음) — transform이 있으면 main이 fixed 모달의 기준이 돼 모달이 엉뚱한 위치에 뜸 */
@keyframes fadein { from{opacity:0} to{opacity:1} }
.fadein { animation: fadein .25s ease both; }

/* 힌트 버튼 + 모달 */
.hint-btn { font-size:.8125rem; padding:.4rem .8rem; border-radius:.5rem; border:1px solid #334155; background:#1e293b; color:#fcd34d; cursor:pointer; transition:background .12s, color .12s; }
.hint-btn:hover { background:#334155; }
.hint-btn.viewed { color:#94a3b8; background:#0f172a; border-color:#1e293b; }
.hint-btn.locked { color:#475569; background:#0b1220; border-color:#1e293b; cursor:not-allowed; }
.hint-modal { position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; padding:1rem; }
.hint-modal.hidden { display:none; }
.hint-modal-backdrop { position:absolute; inset:0; background:rgba(2,6,23,.72); backdrop-filter:blur(2px); }
.hint-card { position:relative; width:100%; max-width:32rem; background:#0f172a; border:1px solid #1e293b; border-radius:.75rem; padding:1.25rem; box-shadow:0 20px 60px rgba(0,0,0,.5); animation:hintpop .16s ease-out; }
@keyframes hintpop { from{opacity:0; transform:translateY(8px) scale(.97)} to{opacity:1; transform:none} }

/* ── 문제 풀이 워크스페이스 (IDE 스플릿 + 집중모드) ── */
.cf-ws { display:block; }
.cf-dragbar { display:none; }
.cf-editor { display:flex; flex-direction:column; gap:.5rem; }
.cf-toolbar { display:flex; align-items:center; gap:.4rem; }
.cf-toolbar-right { margin-left:auto; display:flex; align-items:center; gap:.35rem; flex-shrink:0; }
.cf-tbtn { display:inline-flex; align-items:center; height:34px; font-size:.8125rem; padding:0 .7rem; border-radius:.5rem; border:1px solid #334155; background:#1e293b; color:#cbd5e1; cursor:pointer; white-space:nowrap; line-height:1; flex-shrink:0; }
/* 파일 탭이 많아지면 이 영역만 가로 스크롤 — 나머지 버튼(문제/집중모드/이전·다음)은 항상 잘리지 않고 보임 */
#tabs { overflow-x:auto; min-width:0; scrollbar-width:thin; }
#tabs::-webkit-scrollbar { height:4px; }
.cf-tbtn:hover { background:#334155; color:#fff; }
.cf-tbtn.active { background:#0369a1; border-color:#0284c7; color:#fff; }
.cf-monaco { height:55vh; min-height:380px; border:1px solid #1e293b; border-radius:.5rem; overflow:hidden; }

/* 얇은 스크롤바(문제 패널·채점결과) — 빈여백/굵은 네이티브 스크롤바 정리 */
.cf-problem { scrollbar-width:thin; scrollbar-color:#243042 transparent; }
.cf-problem::-webkit-scrollbar, .cf-verdict::-webkit-scrollbar { width:8px; height:8px; }
.cf-problem::-webkit-scrollbar-thumb, .cf-verdict::-webkit-scrollbar-thumb { background:#243042; border-radius:4px; }
.cf-problem::-webkit-scrollbar-thumb:hover, .cf-verdict::-webkit-scrollbar-thumb:hover { background:#334155; }

@media (min-width:1024px) {
  .cf-ws { --cf-workh: calc(100vh - 7rem); display:flex; align-items:stretch; height:var(--cf-workh); overflow:hidden; }
  .cf-ws > .cf-problem { flex:0 0 auto; width:var(--cf-split, 48%); min-width:340px; max-width:64%; min-height:0; overflow-y:auto; padding-right:.6rem; }
  /* 가운데 분할선 = 얇은 sash(가운데 1px선 + 넉넉한 잡기영역), hover 시 강조 */
  .cf-ws > .cf-dragbar { display:block; flex:0 0 11px; align-self:stretch; cursor:col-resize; background:transparent; position:relative; }
  .cf-ws > .cf-dragbar::before { content:""; position:absolute; top:0; bottom:0; left:50%; width:2px; transform:translateX(-50%); background:#1e293b; border-radius:2px; transition:background .12s, width .12s; }
  .cf-ws > .cf-dragbar:hover::before, .cf-ws > .cf-dragbar.dragging::before { background:#38bdf8; width:4px; }
  .cf-ws > .cf-editor { flex:1 1 0; min-width:0; min-height:0; height:100%; padding-left:.4rem; }
  .cf-ws > .cf-editor .cf-monaco { flex:1 1 auto; height:auto; min-height:0; }
  .cf-ws > .cf-editor .cf-verdict { flex:0 0 auto; max-height:32vh; overflow:auto; }
  .cf-ws.zen > .cf-problem, .cf-ws.zen > .cf-dragbar { display:none; }
  .cf-ws.zen > .cf-editor { padding-left:0; }
}

/* 문제 설명 모달(넓은 버전) */
.cf-modal { position:fixed; inset:0; z-index:55; display:flex; align-items:center; justify-content:center; padding:1rem; }
.cf-modal.hidden { display:none; }
.cf-modal-backdrop { position:absolute; inset:0; background:rgba(2,6,23,.72); backdrop-filter:blur(2px); }
.cf-modal-card { position:relative; width:100%; max-width:44rem; max-height:88vh; display:flex; flex-direction:column;
  background:#0f172a; border:1px solid #1e293b; border-radius:.75rem; box-shadow:0 20px 60px rgba(0,0,0,.5); animation:hintpop .16s ease-out; }
.cf-modal-head { display:flex; align-items:center; justify-content:space-between; padding:.85rem 1.25rem; border-bottom:1px solid #1e293b; flex:0 0 auto; }
.cf-modal-body { padding:1rem 1.25rem; overflow-y:auto; }
.cf-modal-foot { display:flex; align-items:center; gap:.5rem; padding:.8rem 1.25rem; border-top:1px solid #1e293b; flex:0 0 auto; }
/* 라이브 페어코딩 — 선생님이 코멘트 단 줄 강조 + 글리프 */
.pair-cmt-line { background: rgba(56,189,248,.14); }
.pair-cmt-glyph::before { content:'💬'; font-size:11px; line-height:1; }
.cf-primary { background:#059669; color:#fff; font-weight:600; font-size:.875rem; padding:.5rem 1rem; border-radius:.5rem; cursor:pointer; }
.cf-primary:hover { background:#10b981; }

/* 실시간 활동화면 — 변경 강조 + LIVE 표시 */
@keyframes cfFlash { 0% { background:#0c4a6e; } 100% { background:transparent; } }
.cf-flash { animation: cfFlash 1.2s ease-out; }
@keyframes cfFlashCard { 0% { box-shadow:0 0 0 2px #0ea5e9, 0 0 18px -2px rgba(14,165,233,.6); } 100% { box-shadow:none; } }
.cf-flash-card { animation: cfFlashCard 1.2s ease-out; }
.cf-live-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:#10b981; margin-right:5px; animation: cfPulse 1.6s ease-in-out infinite; vertical-align:middle; }
@keyframes cfPulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }

/* 디버그 현재 실행 줄 강조 */
.dbg-line { background: rgba(234,179,8,.18); }
.monaco-editor .dbg-line { background: rgba(234,179,8,.20) !important; }

/* ════════ 비주얼 폴리시 ════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}
/* 은은한 커스텀 스크롤바 */
*::-webkit-scrollbar { width:10px; height:10px; }
*::-webkit-scrollbar-thumb { background:#243042; border-radius:6px; }
*::-webkit-scrollbar-thumb:hover { background:#334155; }
/* 오로라 배경(로그인) */
.aurora { position:fixed; inset:0; z-index:-1; overflow:hidden; background:#020617; }
.aurora::before, .aurora::after { content:""; position:absolute; width:60vmax; height:60vmax; border-radius:50%; filter:blur(90px); opacity:.35; will-change:transform; }
.aurora::before { background:radial-gradient(circle,#0ea5e9,transparent 60%); top:-20vmax; left:-12vmax; animation:auroraA 18s ease-in-out infinite alternate; }
.aurora::after { background:radial-gradient(circle,#f59e0b,transparent 60%); bottom:-20vmax; right:-12vmax; animation:auroraB 22s ease-in-out infinite alternate; }
@keyframes auroraA { to { transform:translate(18vmax,12vmax) scale(1.2); } }
@keyframes auroraB { to { transform:translate(-16vmax,-10vmax) scale(1.3); } }
/* 그라데이션 로고(반짝임) */
.cf-logo { background:linear-gradient(90deg,#fbbf24,#38bdf8,#fbbf24); background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent; animation:cfShine 5s linear infinite; }
@keyframes cfShine { to { background-position:200% center; } }
/* 스태거 등장(목록 카드) */
.cf-stagger > * { animation:fadein .45s both; }
.cf-stagger > *:nth-child(1){animation-delay:.02s}.cf-stagger > *:nth-child(2){animation-delay:.06s}
.cf-stagger > *:nth-child(3){animation-delay:.10s}.cf-stagger > *:nth-child(4){animation-delay:.14s}
.cf-stagger > *:nth-child(5){animation-delay:.18s}.cf-stagger > *:nth-child(6){animation-delay:.22s}
.cf-stagger > *:nth-child(7){animation-delay:.26s}.cf-stagger > *:nth-child(8){animation-delay:.30s}
.cf-stagger > *:nth-child(n+9){animation-delay:.34s}
/* primary 버튼 광택 */
.cf-shine { position:relative; overflow:hidden; }
.cf-shine::after { content:""; position:absolute; top:0; left:-160%; width:55%; height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.18),transparent); transform:skewX(-20deg); animation:cfSweep 5s ease-in-out infinite; }
@keyframes cfSweep { 0%,62%{left:-160%} 88%,100%{left:170%} }
/* 리더보드 메달 */
.rank-1 td { background:linear-gradient(90deg,rgba(251,191,36,.13),transparent); }
.rank-2 td { background:linear-gradient(90deg,rgba(203,213,225,.11),transparent); }
.rank-3 td { background:linear-gradient(90deg,rgba(217,119,6,.11),transparent); }