:root{
  --green:#16a34a; --blue:#2563eb; --amber:#d97706; --violet:#7c3aed; --orange:#ea580c; --pink:#db2777;
  --accent:rgb(120,200,80); --bg:#f7f8fa; --card:#fff; --line:#e5e7eb; --text:#1f2937; --muted:#9ca3af;
  --track:#eceff3;
}
*{box-sizing:border-box}
body{
  margin:0;font-family:"Pretendard",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  background:var(--bg);color:var(--text);line-height:1.5;
  transition:background .2s ease,color .2s ease;
}
.hd,.tabs,.panel,.ad{max-width:840px;margin:0 auto;padding:0 16px}
.hd{text-align:center;padding-top:24px}
.hd h1{margin:0;color:var(--accent);font-size:2.4rem;font-weight:800}
.brand{display:flex;align-items:center;justify-content:center;gap:10px}
.brandlogo{border-radius:9px;box-shadow:0 3px 10px rgba(120,200,80,.35);flex:0 0 auto}
.tolink{color:var(--accent);font-weight:700;text-decoration:none}
.tolink:hover{text-decoration:underline}
.hd .date{margin:.3rem 0 0;font-size:1.2rem}
.sub{color:var(--muted);margin:.2rem 0}
.ad{margin:16px auto;min-height:90px}

.tabs{display:flex;gap:8px;margin:16px auto;border-bottom:1px solid var(--line)}
.tab{flex:1;padding:10px;border:0;background:none;font-size:1rem;font-weight:600;color:var(--muted);
  cursor:pointer;border-bottom:2px solid transparent}
.tab.active{color:var(--accent);border-bottom-color:var(--accent)}

.panel{padding-bottom:48px}
.hidden{display:none!important}

.inputrow{display:flex;gap:8px;margin:16px 0}
.inputrow input{flex:1;padding:12px 14px;font-size:1rem;border:1px solid var(--line);border-radius:10px}
.inputrow input:focus{outline:none;border-color:var(--accent)}
.inputrow button,.controls button,#regbtn{
  padding:12px 16px;font-size:1rem;font-weight:700;border:0;border-radius:10px;
  background:var(--accent);color:#fff;cursor:pointer}
.controls{display:flex;gap:8px}
.controls button{flex:1;background:#eef2f0;color:var(--text)}
.controls button:disabled{opacity:.45;cursor:not-allowed}
.muted{color:var(--muted);font-weight:400;font-size:.85rem}

/* 방금 시도 / 가장 가까운 단어 — 1행 2열, 왼쪽 색 바로 구분 */
.metrics{display:flex;gap:10px;margin:16px 0 12px}
.metrics > div{flex:1;min-width:0;margin:0}
.lastbox,.bestbox{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--card)}
.lastbox{border-left:3px solid var(--blue)}       /* 방금 시도 = 파랑 */
.bestbox{border-left:3px solid var(--accent)}     /* 가장 가까운 = 초록 */
.lastbox .lbl{font-size:.78rem;color:var(--blue);font-weight:700;margin-bottom:4px}
.bestbox .lbl{font-size:.78rem;color:var(--accent);font-weight:700;margin-bottom:4px}
/* 단어+순위 | 게이지 한 줄 배치 */
.metric{display:flex;align-items:center;gap:10px}
.metric .mword{flex:0 0 auto;white-space:nowrap}
.metric .last-word{font-size:1.02rem}
.metric .gauge{flex:1}
.metric .mrank{font-weight:700;font-size:.85rem;margin-left:5px;white-space:nowrap}
@media(max-width:560px){.metrics{flex-direction:column}}

.legend{display:flex;flex-wrap:wrap;gap:6px 12px;justify-content:center;margin:14px 0 2px;font-size:.78rem;color:var(--muted)}
.legend .lg{display:inline-flex;align-items:center;gap:5px;--c:var(--muted)}
.legend .lg::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--c);opacity:.9}
.legend .lg.t10{--c:var(--green)} .legend .lg.t100{--c:var(--blue)} .legend .lg.t1000{--c:var(--amber)}
.legend .lg.hint{--c:var(--pink)} .legend .lg.answer{--c:var(--violet)}

table{width:100%;border-collapse:collapse;margin-top:12px;background:var(--card);border-radius:12px;overflow:hidden}
th,td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--line);font-size:.95rem}
th{background:#fafafa;color:var(--muted);font-weight:600}
td.num{color:var(--muted);width:36px}
td.rank,td.sim{font-weight:700;text-align:right}
.t10{color:var(--green)} .t100{color:var(--blue)} .t1000{color:var(--amber)}
.answer{color:var(--violet)} .hint{color:var(--pink)} .out{color:var(--muted)}
tr.lastrow{background:#f0fdf4}

.hint-msg{text-align:center;color:var(--muted);padding:24px 0}
.result{border:1px solid var(--line);border-radius:12px;padding:18px;margin:16px 0;background:var(--card);text-align:center}
.result.win{border-color:var(--green);background:#f0fdf4}
.result.lose{border-color:var(--amber);background:#fffbeb}
.result h3{margin:.2rem 0}
.reg{display:flex;gap:8px;justify-content:center;margin-top:12px}
.reg input{padding:10px 12px;border:1px solid var(--line);border-radius:8px}

.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);
  background:#111827;color:#fff;padding:12px 18px;border-radius:10px;font-size:.95rem;
  box-shadow:0 8px 24px rgba(0,0,0,.25);z-index:50;max-width:90vw}
@media(max-width:480px){.hd h1{font-size:2rem}}

/* ---- 상단 내비게이션 ---- */
.topnav{position:sticky;top:0;z-index:45;display:flex;align-items:center;justify-content:space-between;
  gap:8px;padding:8px 16px;background:var(--card);border-bottom:1px solid var(--line);flex-wrap:wrap}
.nav-brand{display:flex;align-items:center;gap:7px;font-weight:800;font-size:1.05rem;
  color:var(--accent);text-decoration:none}
.nav-brand img{border-radius:7px}
.nav-right{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.nav-right a{color:var(--text);text-decoration:none;font-size:.85rem;font-weight:600;padding:6px 9px;border-radius:8px;white-space:nowrap}
.nav-right a:hover{background:var(--track);color:var(--accent)}
[id]{scroll-margin-top:60px}   /* 앵커(#how) 이동 시 sticky 내비에 안 가리게 */

.intro{color:var(--muted);font-size:.92rem;line-height:1.6;margin:.5rem 0 0}
.intro b{color:var(--accent)}

/* 공지 배너 (버전키로 1회 표시, 닫기 가능) */
.notice{max-width:840px;margin:14px auto 0;padding:11px 14px;display:flex;align-items:center;gap:12px;
  justify-content:space-between;background:rgba(120,200,80,.12);border:1px solid rgba(120,200,80,.4);
  border-radius:12px;font-size:.9rem;line-height:1.5}
.notice b{color:var(--accent)}
.notice-txt{flex:1;min-width:0}
.notice #notice-x,.notice button{flex:0 0 auto;border:0;background:none;color:var(--muted);
  font-size:1rem;cursor:pointer;padding:2px 6px;border-radius:6px}
.notice button:hover{background:rgba(0,0,0,.06);color:var(--text)}

/* ---- 테마 (다크/라이트) ---- */
.themebtn{width:34px;height:34px;border-radius:50%;margin-left:3px;flex:0 0 auto;
  border:1px solid var(--line);background:var(--bg);color:var(--text);font-size:1rem;cursor:pointer}
:root[data-theme="dark"]{
  --bg:#0f172a;--card:#1e293b;--line:#334155;--text:#e8edf4;--muted:#94a3b8;
  --green:#4ade80;--blue:#60a5fa;--amber:#fbbf24;--violet:#a78bfa;--orange:#fb923c;--pink:#f472b6;
  --track:#0b1425;
}
:root[data-theme="dark"] th{background:#172033}
:root[data-theme="dark"] tr.lastrow{background:#14302a}
:root[data-theme="dark"] .controls button{background:#28323f;color:var(--text)}
:root[data-theme="dark"] .result.win{background:#0f2a1c}
:root[data-theme="dark"] .result.lose{background:#2a230f}
:root[data-theme="dark"] .inputrow input,
:root[data-theme="dark"] .reg input{background:#0b1220;color:var(--text)}

/* ---- 유사도 게이지 ---- */
td.sim{padding:6px 10px}
.gauge{position:relative;height:22px;min-width:84px;border-radius:6px;background:var(--track);overflow:hidden}
.gauge.big{height:20px;border-radius:6px}
.gauge-fill{position:absolute;left:0;top:0;bottom:0;border-radius:inherit;opacity:.30;transform-origin:left}
.gauge-fill.answer,.gauge-fill.hint{opacity:.40}
.gauge-fill.t10{background:var(--green)} .gauge-fill.t100{background:var(--blue)}
.gauge-fill.t1000{background:var(--amber)} .gauge-fill.answer{background:var(--violet)}
.gauge-fill.hint{background:var(--pink)} .gauge-fill.out{background:var(--muted)}
.gauge-val{position:absolute;right:8px;top:0;bottom:0;display:flex;align-items:center;
  font-size:.82rem;font-weight:700;font-variant-numeric:tabular-nums}
.gauge.big .gauge-val{font-size:.95rem;right:10px}
.gauge.gauge-na{background:transparent;display:flex;align-items:center;justify-content:center;color:var(--muted);font-weight:700}
.last-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.last-word{font-size:1.15rem}

/* ---- 애니메이션 ---- */
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes rowIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.gauge.big .gauge-fill,tr.lastrow .gauge-fill{animation:grow .5s cubic-bezier(.22,1,.36,1)}
tr.lastrow{animation:rowIn .3s ease}
@keyframes shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}
  30%,50%,70%{transform:translateX(-5px)}40%,60%{transform:translateX(5px)}}
.inputrow input.shake{animation:shake .4s;border-color:var(--orange)!important}
@keyframes pop{from{opacity:0;transform:scale(.94) translateY(8px)}to{opacity:1;transform:none}}
.result.pop{animation:pop .35s cubic-bezier(.22,1,.36,1)}

/* ---- 승리 컨페티 ---- */
.confetti-layer{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
.confetti-layer i{position:absolute;top:-16px;width:9px;height:14px;border-radius:2px;opacity:.95;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(104vh) translateX(var(--drift,0)) rotate(var(--rot,180deg));opacity:.9}}

/* 다시하기 확인 모달 */
.modal{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;background:rgba(15,23,42,.55);animation:fadein .15s ease}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.modal-card{background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:16px;padding:22px 22px 18px;max-width:340px;width:86%;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.35);animation:pop .2s cubic-bezier(.22,1,.36,1)}
.modal-card h3{margin:.2rem 0 .5rem}
.modal-btns{display:flex;gap:10px;margin-top:18px}
.modal-btns button{flex:1;padding:11px;border-radius:10px;font-weight:700;font-size:.95rem;cursor:pointer;border:0}
.modal-btns .btn-ghost{background:var(--track);color:var(--text)}
.modal-btns .btn-primary{background:var(--accent);color:#fff}

/* 닉네임 등록 오류 */
.regerr{color:#ef4444;font-size:.88rem;font-weight:600;margin-top:10px}
.nick-shake{animation:shake .4s;border-color:#ef4444!important}

@media(max-width:480px){.gauge{min-width:62px}.gauge-val{font-size:.72rem;right:5px}}
@media(prefers-reduced-motion:reduce){
  .confetti-layer{display:none}
  .gauge.big .gauge-fill,tr.lastrow .gauge-fill,tr.lastrow,.result.pop,.inputrow input.shake{animation:none}
}

/* ---- 점수판 정렬 ---- */
#boardtable th:nth-child(n+3){text-align:center}
#boardtable td:nth-child(2){font-weight:600}
#boardtable td.score{text-align:center;font-weight:800;color:var(--accent)}
#boardtable td.cnum{text-align:center;color:var(--muted)}

/* ---- 모바일 다듬기 ---- */
#history td:nth-child(2){word-break:break-all}
@media(max-width:480px){
  .controls button{padding:10px 8px;font-size:.9rem}
  .controls .muted{display:block;font-size:.72rem}
  th,td{padding:8px 9px;font-size:.9rem}
  .inputrow input,.inputrow button{font-size:.95rem}
}

/* ============ 소개(/about) 페이지 ============ */
.panel.about{max-width:840px}
.about section{margin-bottom:22px}
.about h3{font-size:1.15rem;margin:.1rem 0 .5rem}
.about p{color:var(--text);line-height:1.75;margin:.4rem 0;font-size:.95rem}
.about .muted{font-size:.85rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 20px}
.badge{display:inline-block;font-size:.75rem;font-weight:700;color:var(--accent);
  background:rgba(120,200,80,.12);border:1px solid rgba(120,200,80,.35);border-radius:999px;padding:4px 11px;margin-bottom:8px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:22px}
.grid2 .card{margin:0}
.dots{margin:8px 0;padding-left:20px}
.dots li{color:var(--text);line-height:1.7;font-size:.92rem;margin-bottom:3px}

/* 히어로 */
.hero{display:grid;grid-template-columns:1.3fr 1fr;gap:22px;align-items:center;margin:18px 0 26px}
.tagpill{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:5px 11px;margin-bottom:12px}
.tagpill .tag{background:var(--accent);color:#fff;font-weight:700;border-radius:999px;padding:2px 8px;font-size:.72rem}
.hero-title{font-size:1.9rem;line-height:1.25;margin:0 0 10px;font-weight:800}
.hero-title .accent{color:var(--accent)}
.btn-cta{display:inline-block;background:var(--accent);color:#fff;font-weight:800;font-size:1rem;
  padding:12px 26px;border-radius:999px;text-decoration:none;box-shadow:0 10px 24px rgba(120,200,80,.35)}
.btn-cta:hover{filter:brightness(1.05)}
.hero-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px}
.hero-card-hd{display:flex;justify-content:space-between;align-items:center;font-size:.85rem;margin-bottom:10px}
.ex{display:flex;align-items:center;gap:10px;margin:6px 0;font-size:.85rem}
.ex>span{flex:0 0 62px;white-space:nowrap}
.ex .exbar{flex:1;height:16px;border-radius:5px;background:var(--track);overflow:hidden}
.ex .exbar i{display:block;height:100%;border-radius:5px;opacity:.85}
.ex>b{flex:0 0 58px;text-align:right;font-variant-numeric:tabular-nums}
.exbar i.t10{background:var(--green)} .exbar i.t100{background:var(--blue)}
.exbar i.t1000{background:var(--amber)} .exbar i.out{background:var(--muted)}
.hero-card .note{margin-top:10px;font-size:.78rem}

/* 유사도 점수표 */
.scoretbl{width:100%;border-collapse:collapse;margin-top:8px;font-size:.9rem}
.scoretbl th,.scoretbl td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left}
.scoretbl th{color:var(--muted);font-weight:600;background:transparent}
.pill{display:inline-block;font-variant-numeric:tabular-nums;font-weight:700;font-size:.8rem;
  border-radius:999px;padding:3px 10px;border:1px solid var(--line)}
.pill.t10{color:var(--green)} .pill.t100{color:var(--blue)} .pill.t1000{color:var(--amber)} .pill.out{color:var(--muted)}

/* 어제 정답 / FAQ / 푸터 */
.yday{margin-top:10px;padding:12px 14px;border:1px dashed var(--line);border-radius:12px}
.yday-word{font-size:.95rem;margin-bottom:4px}
.yday-word b{color:var(--accent);font-size:1.1rem}
.faq{margin:10px 0}
.faq>b{font-size:.95rem}
.faq p{margin:.3rem 0 0;color:var(--muted);font-size:.9rem}
.ftr{max-width:840px;margin:0 auto;padding:20px 16px 40px;display:flex;justify-content:space-between;
  gap:12px;flex-wrap:wrap;border-top:1px solid var(--line);color:var(--muted);font-size:.82rem}
.ftr a{color:var(--accent);text-decoration:none}
@media(max-width:680px){.hero,.grid2{grid-template-columns:1fr}.hero-card{order:-1}.hero-title{font-size:1.6rem}}

/* 어제 정답 강조 (info_yday) */
.yday-answer{font-size:2rem;font-weight:800;color:var(--accent);margin:.1rem 0 .2rem}
#ydaytbl td.num{width:52px;text-align:center}

/* about 유사도 계산 단계 */
.steps{margin:8px 0;padding-left:22px}
.steps li{color:var(--text);line-height:1.7;font-size:.92rem;margin-bottom:6px}