/*
 * 기존 Vue 앱의 스타일을 그대로 옮긴 것 — 화면이 픽셀까지 같아야 하므로 값을 바꾸지 않는다.
 * 틀(버튼·입력창·격자)은 vuetify.min.css가 그리고, 여기에는 기존 앱이 직접 쓴 스타일만 있다.
 * 화면마다 따로 쓰던 스타일(Vue의 scoped)은 화면 이름 클래스(.view-*)로 범위를 좁혔다.
 */

/* 글꼴 (기존 index.html) */
@font-face {
  font-family: "NanumSquareOTF";
  src: url("/fonts/NanumSquareOTF_acR.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "UbuntuMedium";
  src: url("/fonts/Ubuntu-Medium.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "UbuntuLight";
  src: url("/fonts/Ubuntu-Light.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
html,
body,
* {
  font-family: "NanumSquareOTF", sans-serif;
}
.aeida-title {
  font-family: "UbuntuMedium", sans-serif !important;
}
.aeida-title-light {
  font-family: "UbuntuLight", sans-serif !important;
}

/* 공통 (기존 App.vue) */
:root {
  --gray: #f2f2f2;
  --gray-dark: #afafaf;
  --red: #f95858;
  --theme: #5757ff;
  --theme-light: #f5f5ff;
}
.v-app-bar {
  box-shadow: none;
}
.v-btn:before {
  background-color: transparent !important;
}
.v-btn:not(.v-btn--active):focus:before {
  opacity: 0 !important;
}
.v-btn {
  text-transform: none !important;
}
::-webkit-scrollbar {
  display: none;
}
* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.theme--text {
  color: var(--theme) !important;
}
.dark-gray--text {
  color: var(--gray-dark) !important;
}
.highlight {
  color: var(--theme) !important;
  font-weight: 700;
}
.back-icon {
  background-color: var(--gray);
  border-radius: 50%;
  padding: 4px;
  margin-right: 8%;
}
.app-icon-elevation {
  border-radius: 16px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  display: inline-block;
  transition: box-shadow 0.3s ease;
}
.app-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
}
@media screen and (max-width: 847px) {
  .app-icon {
    width: 50px;
    height: 50px;
    border-radius: 8px;
  }
}
@media screen and (max-width: 599px) {
  .app-icon {
    width: 50px;
    height: 50px;
    border-radius: 8px;
  }
}

/* 상단 메뉴의 아이콘 버튼 — 넓은 화면(960px 이상)에서만 보인다 (기존: $vuetify.breakpoint.mdAndUp) */
.nav-wide-only {
  display: none;
}
@media (min-width: 960px) {
  .nav-wide-only {
    display: inline-flex;
  }
}

/* 바닥글 (FooterView) */
.footer.footer {
  background-color: var(--gray);
  padding: 10px 20px;
  width: 100%;
}
.footer .footer-content {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.footer .copyright,
.footer .customer-service,
.footer .terms {
  margin: 5px 20px 5px 0;
  font-size: 12px;
}
.footer .terms {
  text-decoration: none;
  color: inherit;
}
.footer .terms:hover {
  text-decoration: underline;
}
@media (max-width: 600px) {
  .footer.footer {
    margin-bottom: 55px !important;
  }
  .footer .footer-content {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .footer .copyright,
  .footer .customer-service,
  .footer .terms {
    margin: 5px 0;
    text-align: center;
  }
}

/* 홈에 추가 안내 창 (AHMView) */
.modal-mask.modal-mask {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  transition: opacity 0.3s ease;
}
.modal-mask .modal-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.modal-mask .modal-container {
  width: 300px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
  transition: all 0.3s ease;
}
.modal-mask .modal-header h3 {
  margin-top: 0;
}
.modal-mask .modal-body {
  margin: 20px 0;
}
.modal-mask .modal-default-button {
  float: right;
}

/* 메인 (MainView) */
.view-main .add-home-btn {
  font-size: 12px !important;
  color: #fff !important;
  background-color: var(--theme) !important;
}
.view-main .position-relative {
  position: relative;
}
.view-main .close-button {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

/* 앱 상세 (AppDetailView) */
.view-app-detail .add-home-btn {
  color: #fff !important;
  background-color: var(--theme) !important;
}
.view-app-detail .overflow-x-auto {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.view-app-detail .overflow-x-auto::-webkit-scrollbar {
  display: none;
}
.view-app-detail .scroll-container {
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

/* 모든 앱 · 검색 (AllAppsView, SearchView) */
.view-all-apps .add-home-btn,
.view-search .add-home-btn {
  font-size: 12px !important;
  color: #fff !important;
  background-color: var(--theme) !important;
}

/* 신규 앱 등록 · 앱 수정 (NewAppView, ModifyAppView) */
.view-app-form .transparent-btn {
  background-color: transparent !important;
  box-shadow: none !important;
}
.view-app-form .overflow-x-auto {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.view-app-form .overflow-x-auto::-webkit-scrollbar {
  display: none;
}
.view-app-form .scroll-container {
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.view-app-form .screenshot-container {
  position: relative;
}
.view-app-form .delete-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.view-app-form .screenshot-container:hover .delete-btn {
  opacity: 1;
}
@media (max-width: 768px) {
  .view-app-form .delete-btn {
    display: none;
  }
}
.view-app-form .app-description-textarea {
  background-color: transparent !important;
}
.view-app-form .app-description-textarea .v-input__control {
  border: none !important;
}
.view-app-form .app-description-textarea .v-input__slot,
.view-app-form .app-description-textarea .v-input__slot:active,
.view-app-form .app-description-textarea .v-input__slot:focus,
.view-app-form .app-description-textarea .v-input__slot:hover {
  box-shadow: none !important;
}

/* 나의 앱 (MyAppView) */
.view-my-app .status-text {
  display: flex;
  align-items: center;
}
.view-my-app .status-dot {
  font-size: 20px;
}
.view-my-app .status-approved {
  color: green;
}
.view-my-app .status-pending {
  color: orange;
}
.view-my-app .status-denied {
  color: var(--red);
}

/* Aeida 안에서 앱 열기 (HostedView) */
.view-hosted .v-main {
  overflow: hidden;
}

/* 앱 설치 안내 (PWAView) */
.view-pwa .lowercase {
  text-transform: none;
}
.view-pwa .custom-tab {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
.view-pwa .tab-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.view-pwa .tab-text {
  white-space: normal;
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.2;
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.view-pwa .os-image {
  margin-bottom: 12px;
  font-size: 1.5rem !important;
}
.view-pwa .rounded-container {
  border-radius: 8px !important;
  overflow: hidden;
  background-color: #fff;
}
.view-pwa .rounded-top {
  border-top-left-radius: 8px !important;
  border-top-right-radius: 16px !important;
}
.view-pwa .rounded-bottom {
  border-bottom-left-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
}

/* 개발자 이용약관 본문 (developerTermsView — 노션에서 내보낸 문서의 스타일 중 본문에 쓰이는 것) */
.developer-terms,
.developer-terms * {
  box-sizing: border-box;
  -webkit-print-color-adjust: exact;
}
.developer-terms a,
.developer-terms a.visited {
  color: inherit;
  text-decoration: underline;
}
.developer-terms h1,
.developer-terms h2,
.developer-terms h3 {
  letter-spacing: -0.01em;
  line-height: 1.2;
  font-weight: 600;
  margin-bottom: 0;
}
.developer-terms .page-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 0.75em;
}
.developer-terms h1 {
  font-size: 1.875rem;
  margin-top: 1.875rem;
}
.developer-terms ol,
.developer-terms ul {
  margin: 0;
  margin-block-start: 0.6em;
  margin-block-end: 0.6em;
}
.developer-terms li > ol:first-child,
.developer-terms li > ul:first-child {
  margin-block-start: 0.6em;
}
.developer-terms ol {
  padding-inline-start: 1.6em;
}
.developer-terms ol > li {
  padding-left: 0.2em;
}
.developer-terms .page-description {
  margin-bottom: 2em;
}
.developer-terms p {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.developer-terms .sans {
  font-family:
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI Variable Display",
    "Segoe UI",
    Helvetica,
    "Apple Color Emoji",
    Arial,
    sans-serif,
    "Segoe UI Emoji",
    "Segoe UI Symbol";
}

/*
 * 기존 화면이 요소에 직접(style 속성) !important를 주던 곳 — React의 style로는 !important를 줄 수 없어 클래스로 옮겼다.
 * Vuetify의 여백 클래스(.v-application .ma-0 등)보다 뒤에 있어야 이긴다.
 */
.v-application .bottom-gap {
  margin-bottom: 60px !important;
}
.v-application .banner-row {
  color: black !important;
}
.v-application .field-narrow {
  max-width: 400px !important;
}

/* 설치 안내 화면의 상단 바 높이 — Vuetify가 화면 너비로 정하던 값 (960px 미만 56px, 이상 64px) */
.bar-height {
  height: 56px;
}
@media (min-width: 960px) {
  .bar-height {
    height: 64px;
  }
}