:root {
  --color_base:#232323;
  --bgcolor_base:#fff;
  --tb_bgcolor:#e9e9e9;
  --tbl_bdcolor:#ccc;
  --td_evbgcolor:#f9f9f9;
}

:root[data-dark=true] {
  --color_base:#fff;
  --bgcolor_base:#232323;
  --tb_bgcolor:#363636;
  --tbl_bdcolor:#484848;
  --td_evbgcolor:rgba(249,249,249,.03);
}

html, body {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  color: #232323;
  color: var(--color_base);
}

html[data-dark=true] {
  background-color: #232323;
  background-color: var(--bgcolor_base);
}

html[data-dark=true] select {
  background-color: #232323;
  color: var(--color_base);
}

div, span, h1, h2, h3, h4, h5, h6, input, textarea, caption, table, tr, td, th, font, p, a, em,
nav, article, header, footer, aside, blockquote, button, canvas, dl, dt, dd, ul, ol, li, form, strong {
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  box-sizing: border-box;
}

.clearfix {
  zoom: 1;
}
.clearfix:before {
  content: "";
  display: block;
}
.clearfix:after {
  content: "";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}


.ios-install-guide {
  display: none; /* 기본적으로 숨김 */
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 400px;
  background: white;
  border-radius: 15px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  z-index: 9999;
  padding: 20px;
  font-family: -apple-system, sans-serif;
  animation: slideUp 0.5s ease-out;
}

@keyframes slideUp {
  from { bottom: -100px; opacity: 0; }
  to { bottom: 20px; opacity: 1; }
}

.guide-header { display: flex; align-items: center; margin-bottom: 15px; position: relative; }
.app-icon-mini { width: 50px; height: 50px; border-radius: 10px; margin-right: 15px; }
.guide-header p { font-size: 14px; margin: 0; line-height: 1.4; color: #333; }

.close-btn { position: absolute; top: -10px; right: -5px; background: none; border: none; font-size: 24px; color: #999; cursor: pointer; }

.guide-body { font-size: 13px; color: #666; border-top: 1px solid #eee; padding-top: 15px; }
.guide-body p { margin: 8px 0; }
.icon-share { color: #007aff; font-size: 18px; font-weight: bold; }

/* 하단 중앙 화살표 표시 (Safari 공유 버튼 방향) */
.guide-arrow {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid white;
}

.android-install-guide {
  display: none;
  position: fixed;
  top: 60px; /* 주소창 아래 적당한 위치 */
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 400px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.15);
  z-index: 10000;
  padding: 15px;
  animation: fadeInDown 0.4s ease-out;
}

@keyframes fadeInDown {
  from { top: 20px; opacity: 0; }
  to { top: 60px; opacity: 1; }
}

/* 위를 향하는 화살표 */
.guide-arrow-up {
  position: absolute;
  top: -10px;
  right: 50px; /* 삼성 브라우저 설치 아이콘 위치에 맞춰 조절 */
  width: 0; height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid white;
}