/* ========= 웹폰트 ========= */
@font-face {
  font-family: 'GangwonEduSaeeum_OTFMediumA';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/GangwonEduSaeeum_OTFMediumA.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* ========= 기본 리셋 ========= */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root{
  --bg: #f7f7fb;
  --card: #fff;
  --ink: #111;
  --muted: #666;
  --line: #e9ecf2;
  --ring: #dfe4ee;
  --accent: #111;         /* 포인트(버튼/차트 기본) */
  --accent-soft: #f0f1f6; /* 보조 배경 */
  --chip: #eef1f7;
  --chip-ink: #334;
  --success: #12b886;
  --warn: #f08c00;
  --radius: 14px;
  --shadow: 0 10px 24px rgba(0,0,0,.08);
}

html, body{
  background: white;
  color: var(--ink);
  font-family: 'GangwonEduSaeeum_OTFMediumA', Arial, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;  /* 가로 스크롤 방지 */
  min-height: 100vh;
}

/* ========= 상단 내비게이션 (유지) ========= */
nav {
  position: fixed;
  top: 0; left: 0; width: 100%;
  background-color: #f4f4f4;
  padding: 10px 0;
  z-index: 1000;
}
nav ul {
  list-style: none;
  display: flex;
  justify-content: flex-end;
  margin: 0; padding: 0 20px;
}
nav ul li { display: inline; }
nav ul li a {
  color: rgb(62,62,62);
  text-decoration: none;
  padding: 8px 12px;
  font-size: 14px;
  font-family: 'GangwonEduSaeeum_OTFMediumA', Arial, sans-serif;
}
nav ul li a:hover { background: #555; color: #fff; }

/* ========= 광고 영역 (유지, 약간 정돈) ========= */
.ad-container,
.footer-ad-container{
  width: 100%;
  min-height: 90px;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: auto;
}
.ad-container{ margin-top: 60px; margin-bottom: 20px; }
.footer-ad-container{ margin-top: 30px; }
.adsbygoogle{ display: block; width: 100%; height: auto !important; }

/* ========= 앱 컨테이너(360 x 550 고정) ========= */
#app{
  width: 360px;
  height: 550px;
  position: relative;
  background: var(--card);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* ========= 공통 화면 ========= */
.screen{
  width: 100%; height: 100%;
  position: absolute; inset: 0;
  display: none;
}
.screen.active{
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.container{ width: 100%; height: 100%; padding: 16px; }

/* 시각장애 사용자용 숨김 텍스트 */
.sr-only{
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ========= 공통 버튼 ========= */
.btn{
  border: 0; cursor: pointer; user-select: none;
  border-radius: 12px; padding: 12px 16px; font-size: 16px;
}
.btn.primary{ background: var(--accent); color: #fff; font-weight: 700; }
.btn.ghost{ background: #fff; border: 1px solid var(--line); color: var(--ink); }

/* ========= 시작 화면 ========= */
#start-screen{ position: relative; }
.background-img{
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  z-index: 0;
}
.start-btn-container{
  position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%);
  z-index: 1;
}
#start-btn{
  padding: 12px 22px; background: #ffffffcc; border: none;
  border-radius: 24px; font-size: 16px; font-weight: bold; cursor: pointer; 
}

/* ========= 검색 화면 ========= */
#search-screen .hint{
  color: var(--muted); font-size: 13px; margin-top: 8px; margin-bottom: 14px;
}
.search-row{ display: grid; grid-template-columns: 1fr auto; gap: 8px; }
#name-input{
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 16px;
}
.suggest{ margin-top: 14px; }
.suggest-title{ font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.chips{ display: flex; flex-wrap: wrap; gap: 8px; max-height: 120px; overflow: auto; }
.chip{
  border: 0; padding: 6px 10px; border-radius: 999px;
  background: var(--chip); color: var(--chip-ink); font-size: 12px; cursor: pointer;
}
.chip:hover{ filter: brightness(.97); }

/* ========= 로딩 화면 ========= */
#loading-screen .loading-wrap{
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.spinner{
  width: 52px; height: 52px; border-radius: 50%;
  border: 6px solid var(--ring);
  border-top-color: var(--accent);
  animation: spin 1s linear infinite;
}
.loading-text{ font-size: 16px; font-weight: 700; }
.loading-sub{ font-size: 12px; color: var(--muted); }
@keyframes spin{ to { transform: rotate(360deg); } }

/* ========= 결과 화면: 헤더/배지/KPI ========= */
.result{ overflow: auto; }
.result-header{ display: grid; gap: 10px; margin-bottom: 12px; }
.name-badge{ display: flex; align-items: center; gap: 8px; }
#result-title{ font-size: 22px; }
.badge.rank{
  padding: 4px 10px; border-radius: 999px; background: #111; color: #fff; font-size: 12px; font-weight: 700;
}
.subcopy{ color: var(--muted); font-size: 13px; }

.kpis{
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px; margin-top: 4px;
}
.kpi{
  background: #fafafc; border: 1px solid var(--line);
  border-radius: 12px; padding: 10px;
}
.kpi-label{ font-size: 12px; color: var(--muted); }
.kpi-value{ font-size: 16px; font-weight: 700; }

/* ========= 차트 카드 ========= */
.charts{
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px;
}
.chart-card{
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px;
}
.chart-card.wide{ grid-column: 1 / span 2; }
.chart-title{ font-size: 14px; margin-bottom: 8px; }
.chart-note{ color: var(--muted); font-size: 11px; margin-top: 6px; }
.chart{ width: 100%; }

/* 도넛 차트 (conic-gradient로 표현, 중앙 숫자) */
.chart.donut{
  width: 160px; height: 160px; border-radius: 50%; margin: 0 auto;
  display: grid; place-items: center;
  background: conic-gradient(var(--accent) calc(var(--pct, 0) * 1%), var(--line) 0);
  position: relative;
}
.donut-center{
  position: absolute; width: 88px; height: 88px; border-radius: 50%;
  background: #fff; display: grid; place-items: center;
  font-weight: 800; font-size: 18px; border: 6px solid #fff;
  box-shadow: inset 0 0 0 1px var(--line);
}

/* Top10 정규화 막대 그래프 */
.chart.bar{ display: flex; flex-direction: column; gap: 8px; }
.bar-row{ display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; }
.bar-label{ font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-track{ height: 12px; background: var(--accent-soft); border-radius: 999px; overflow: hidden; }
.bar-fill{ height: 100%; background: var(--accent); border-radius: 999px; transition: width .35s ease; }
.bar-val{ font-size: 12px; color: var(--muted); text-align: right; }
.bar-row.active .bar-fill{ box-shadow: 0 0 0 2px #000 inset; }
.bar-row.active .bar-label{ font-weight: 800; }

/* 와플(1000 도트) */
.chart.waffle{
  display: grid;
  grid-template-columns: repeat(50, 1fr); /* 50 x 20 = 1000 */
  gap: 2px; padding: 6px; border: 1px dashed var(--line); border-radius: 12px;
  max-height: 220px; overflow: hidden;
}
.chart.waffle .dot{
  width: 100%; aspect-ratio: 1/1; border-radius: 2px;
  background: #e6eaf2; transition: transform .15s ease, background .15s ease, opacity .15s ease;
  opacity: .9;
}
.chart.waffle .dot.on{
  background: var(--accent); opacity: 1;
}

/* ========= Top 리스트 ========= */
.toplist{ margin-top: 12px; }
.toplist-header{
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;
}
.toplist-controls{ display: flex; align-items: center; gap: 8px; }
#top-n{
  border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px; background: #fff;
}
.table-wrap{
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden; max-height: 220px; overflow-y: auto;
}
.table-wrap table{ width: 100%; border-collapse: collapse; }
.table-wrap thead th{
  position: sticky; top: 0; background: #fafafc; border-bottom: 1px solid var(--line);
  font-weight: 800; text-align: left; font-size: 13px; padding: 8px 10px;
}
.table-wrap tbody td{ border-bottom: 1px solid var(--line); padding: 8px 10px; font-size: 13px; }
.table-wrap td.num{ text-align: right; }
.table-wrap tbody tr.hl{ background: #fff6cc; }

/* ========= 비슷한 이름 (결과) ========= */
#res-suggest{ margin-top: 10px; }
#res-suggest .suggest-title{ font-size: 13px; color: var(--muted); margin-bottom: 6px; }

/* ========= 하단 버튼 ========= */
#bottom-actions{
  width: 360px; margin: 16px auto 24px; display: flex; gap: 8px; justify-content: center;
}
#share-kakao, #restart-btn{
  font-family: 'GangwonEduSaeeum_OTFMediumA', Arial, sans-serif;
  font-size: 18px; text-align: center; display: inline-block; padding: 10px 16px;
  border-radius: 10px; border: none; cursor: pointer;
}
#share-kakao{ background: #fee500; }
#restart-btn{ background: #ffe2da; }

/* ========= 선택적으로 유지되는 요소들 (사용 안 해도 무방) ========= */
.counter-badge{
  position:absolute; top:10px; right:10px;
  background: rgba(0,0,0,.6); color:#fff; padding:6px 10px; border-radius:999px;
  font-size:12px; font-weight:600; backdrop-filter: blur(2px); pointer-events:none;
}

/* ========= 작은 화면 대응(선택) ========= */
@media (max-width: 380px){
  .kpis{ grid-template-columns: repeat(2, 1fr); }
  .charts{ grid-template-columns: 1fr; }
  .chart-card.wide{ grid-column: auto; }
}

/* ==== 시작화면 CTA 강조 ==== */
/* 배경 위 하단을 살짝 어둡게 → 버튼 대비 상승 */
#start-screen::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,0) 45%);
  z-index: 1; /* 버튼 뒤, 이미지 앞 */
}

/* 버튼 컨테이너 위치/층위 확실히 */
.start-btn-container{
  position: absolute;
  left: 50%; bottom: 48px; transform: translateX(-50%);
  z-index: 2; /* 배경 오버레이보다 위 */
  width: 88%;
  display: flex; justify-content: center;
}

/* 메인 CTA 버튼 */
#start-btn{
  -webkit-tap-highlight-color: transparent;
  appearance: none; border: 0;
  padding: 14px 28px;
  min-width: 180px; height: 56px;
  border-radius: 999px;
  font-family: 'GangwonEduSaeeum_OTFMediumA', Arial, sans-serif;
  font-size: 20px; font-weight: 800; letter-spacing: -.2px;
  color: #fff;
  background: linear-gradient(135deg, #ff5fa0 0%, #ff86b8 45%, #ffd1e1 100%);
  box-shadow:
    0 10px 24px rgba(255,95,160,.35),
    inset 0 -2px 0 rgba(0,0,0,.08);
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
  cursor: pointer;
  transform: translateZ(0); /* 모바일 렌더링 개선 */
  position: relative; isolation: isolate;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  outline: none;
}

/* 호버/포커스/액티브 인터랙션 */
#start-btn:hover{ transform: translateY(-1px) scale(1.02); }
#start-btn:active{ transform: translateY(0) scale(.98); }
#start-btn:focus-visible{
  box-shadow:
    0 0 0 4px rgba(255,255,255,.8),
    0 0 0 8px rgba(255,95,160,.35),
    0 10px 24px rgba(255,95,160,.35);
}

/* 은은한 발광 효과 (시선 유도) */
#start-btn::after{
  content:"";
  position:absolute; inset:-8px;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.5), rgba(255,255,255,0) 60%);
  filter: blur(8px);
  opacity: .45;
  z-index: -1;
  animation: cta-pulse 1.8s ease-in-out infinite;
}
@keyframes cta-pulse{
  0%,100%{ transform: scale(1); opacity:.35; }
  50%{ transform: scale(1.06); opacity:.55; }
}

/* 모션 최소화 선호 시 애니메이션 끔 */
@media (prefers-reduced-motion: reduce){
  #start-btn{ transition:none; }
  #start-btn::after{ animation:none; opacity:.3; }
}

/* 작은 기기에서 버튼이 배경에 묻히지 않도록 대비 + 여백 보정 */
@media (max-width: 380px){
  #start-btn{ min-width: 200px; height: 52px; font-size: 18px; }
  .start-btn-container{ bottom: 40px; }
}