/* 심플한 스타일 · plain & minimal */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
body{
  font-family: system-ui, "Malgun Gothic", sans-serif;
  max-width: 880px;
  margin: 0 auto;
  padding: 20px;
  color: #222;
  background: #fff;
  line-height: 1.6;
  -webkit-tap-highlight-color: rgba(42,109,244,.15);
}
h1{ font-size: 22px; margin-bottom: 4px; }
h1 small{ font-size: 14px; color: #888; font-weight: normal; }
h2{ font-size: 19px; margin: 22px 0 2px; }
.desc{ color: #666; font-size: 14px; margin: 0 0 14px; }

.opts{ font-size: 14px; color: #444; }
.opts label{ margin-right: 16px; cursor: pointer; }
.opts .tip{ display: block; color: #999; font-size: 13px; margin-top: 4px; }

/* 탭 */
.tabs{ display: flex; flex-wrap: wrap; margin: 10px 0 18px; border-bottom: 2px solid #eee; }
.tabs button{
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  margin-right: 6px;
  padding: 10px 20px;
  min-height: 44px;
  border: none;
  background: none;
  color: #888;
  cursor: pointer;
  border-bottom: 3px solid transparent;
}
.tabs button.active{ color: #2a6df4; border-bottom-color: #2a6df4; }

/* 드롭다운 (초급/중급/고급, 시나리오·읽기 메뉴) */
.levels{ margin: 16px 0 6px; }
nav{ margin: 14px 0; }
.dropdown{
  font-family: inherit;
  font-size: 16px;            /* iOS 자동 확대 방지(≥16px) */
  font-weight: 600;
  width: 100%;
  max-width: 100%;
  min-height: 48px;
  padding: 10px 40px 10px 14px;
  color: #2a6df4;
  background-color: #fff;
  border: 2px solid #2a6df4;
  border-radius: 10px;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* 오른쪽 화살표 아이콘 */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232a6df4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.dropdown:focus{ outline: 2px solid #2a6df4; outline-offset: 1px; }
/* 시나리오·읽기 메뉴는 회색 톤으로 구분 */
#menu .dropdown, #guideMenu .dropdown{
  color: #222;
  border-color: #ccc;
  font-weight: 500;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}

.line{
  padding: 10px 14px;
  margin: 8px 0;
  max-width: 70%;
  border-radius: 8px;
  cursor: pointer;
}
.line.them{
  background: #f1f1f1;
  border-left: 4px solid #999;
  margin-right: auto;
}
.line.you{
  background: #e7f0ff;
  border-left: 4px solid #2a6df4;
  margin-left: auto;
  text-align: right;
}
.line:hover{ filter: brightness(0.97); }
.who{ font-size: 12px; color: #888; margin-bottom: 2px; }
.who.you{ color: #2a6df4; }
.ko{ font-size: 17px; }
.rm{ font-size: 13px; color: #888; font-style: italic; }
.en{ font-size: 14px; color: #555; }
.hide-rm .rm{ display: none; }
.hide-en .en{ display: none; }

/* ===== 메뉴판 ===== */
.menu-section{
  font-size: 15px;
  font-weight: 700;
  color: #2a6df4;
  margin: 22px 0 8px;
  padding-bottom: 4px;
  border-bottom: 2px dashed #cdddff;
}
.menu-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  border-radius: 6px;
}
.menu-row:hover{ background: #f6f9ff; }
.m-left{ display: flex; flex-direction: column; }
.m-ko{ font-size: 18px; font-weight: 600; }
.m-rm{ font-size: 13px; color: #888; font-style: italic; }
.m-en{ font-size: 14px; color: #555; }
.m-price{ font-size: 17px; font-weight: 700; color: #c0392b; white-space: nowrap; margin-left: 16px; }

/* ===== 표지판 그리드 ===== */
.sign-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.sign-card{
  border: 1px solid #e3e3e3;
  border-radius: 12px;
  padding: 16px 10px;
  text-align: center;
  cursor: pointer;
  background: #fafafa;
}
.sign-card:hover{ background: #f0f5ff; border-color: #2a6df4; }
.sign-symbol{ font-size: 38px; line-height: 1; }
.sign-ko{ font-size: 19px; font-weight: 700; margin-top: 8px; }
.sign-rm{ font-size: 12px; color: #888; font-style: italic; }
.sign-en{ font-size: 13px; color: #555; margin-top: 2px; }

/* ===== 숫자 그리드 ===== */
.num-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.num-card{
  border: 1px solid #e3e3e3;
  border-radius: 10px;
  padding: 12px 8px;
  text-align: center;
  cursor: pointer;
  background: #fafafa;
}
.num-card:hover{ background: #f0f5ff; border-color: #2a6df4; }
.num-ko{ font-size: 20px; font-weight: 700; }
.num-rm{ font-size: 12px; color: #888; font-style: italic; }
.num-en{ font-size: 15px; color: #2a6df4; font-weight: 600; margin-top: 2px; }

.hide-rm .m-rm, .hide-rm .sign-rm, .hide-rm .num-rm{ display: none; }
.hide-en .m-en, .hide-en .sign-en, .hide-en .num-en{ display: none; }

/* 긴 단어/문장 줄바꿈 (가로 스크롤 방지) */
.line, .menu-row, .m-left, .sign-card, .num-card{ overflow-wrap: anywhere; }

/* ===== 모바일 (≤600px) ===== */
@media (max-width: 600px){
  body{ padding: 14px; }
  h1{ font-size: 20px; }
  h2{ font-size: 18px; }

  .tabs button{ flex: 1 1 auto; margin-right: 0; padding: 10px 12px; font-size: 15px; }

  /* 채팅 말풍선: 좁은 화면에서 더 넓게 */
  .line{ max-width: 88%; }
  .ko{ font-size: 18px; }

  /* 메뉴판: 가격 줄바꿈 여유 */
  .menu-row{ padding: 12px 8px; }
  .m-price{ margin-left: 10px; }

  /* 카드 그리드: 한 줄에 더 많이 들어가도록 최소폭 축소 */
  .sign-grid{ grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
  .sign-symbol{ font-size: 32px; }
  .num-grid{ grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; }
}

/* ===== 아주 작은 화면 (≤360px) ===== */
@media (max-width: 360px){
  .sign-grid{ grid-template-columns: 1fr 1fr; }
  .num-grid{ grid-template-columns: 1fr 1fr 1fr; }
}