/* app.css */

/* ==========================================================================
   [BASIC]
   ========================================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  overscroll-behavior: none;
  width: 100%;
  height: 100%;
}

body {
  font-family: Arial, sans-serif;
  background-color: var(--xi-gray);
}

/* ==========================================================================
   [COMMON]
   ========================================================================== */

/* 앱 전체 컨테이너: 모바일 전용, 가로 최대 var(--app-max-width), 높이 100 * var(--vh) */
.app-container {
  max-width: var(--app-max-width);
  height: calc(var(--vh, 1vh) * 100);
  margin: 0 auto;
  position: relative;
  background-color: white;
  /* Safe-Area 보정을 위한 패딩 */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  overflow: hidden;
}

/* 1. Header (세로 크기 불변, 위치 불변, 스크롤 불가, 배경: Xi Deep Blue) */
.header {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--app-max-width);
  height: var(--header-height);
  background-color: var(--xi-deep-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  overflow: hidden;
  z-index: 3;
}

.header__logo-button {
  position: absolute;
  left: var(--header-margin);
  background: none;
  border: none;
  cursor: pointer;
}

.header__logo-button img {
  height: calc(var(--header-height) * 0.45);
}

.header__service-name {
  font-size: 22px;
  font-weight: bold;
  text-align: center;
}

.header__date {
  position: absolute;
  right: var(--header-margin);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 14px;
}

/* 2. Title (세로 크기 불변, 위치 불변, 스크롤 불가, 배경: White) */
.title {
  position: fixed;
  top: var(--header-height);
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--app-max-width);
  height: var(--title-height);
  background-color: white;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  z-index: 2;
}

.title__text {
  font-size: 26px;
  font-weight: bold;
  color: var(--xi-deep-blue);
  margin-bottom: var(--title-margin);
}

/* 3. Main (세로 크기 불변, 위치 불변, 스크롤 불가, 배경: White) */
.main {
  position: absolute;
  top: calc(var(--header-height) + var(--title-height));
  bottom: calc(var(--action-secondary-height) + var(--action-primary-height) + var(--info-height));
  left: 0;
  right: 0;
  overflow: hidden;
  background-color: white;
  z-index: 1;
}

.page-section {
  height: 100%;
  width: 100%;
}

/* 4. Action – Secondary (세로 크기 불변, 위치 불변, 스크롤 불가, 배경: Xi Deep Blue) */
.action-secondary {
  position: fixed;
  bottom: calc(var(--action-primary-height) + var(--info-height));
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--app-max-width);
  height: var(--action-secondary-height);
  background-color: var(--xi-deep-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 2;
}

.action-secondary__button {
  background: none;
  border: none;
  cursor: pointer;
}

.action-secondary__button img {
  height: calc(var(--action-secondary-height) - var(--common-gap) * 2);
}

/* 5. Action – Primary (세로 크기 불변, 위치 불변, 스크롤 불가, 배경: Xi Deep Blue) */
.action-primary {
  position: fixed;
  bottom: var(--info-height);
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--app-max-width);
  height: var(--action-primary-height);
  background-color: var(--xi-deep-blue);
  display: flex;
  align-items: center;
  flex-direction: column;
  overflow: hidden;
  z-index: 3;
}

.action-primary__container {
  display: flex;
  justify-content: space-evenly;
  width: 100%;
}

/* 공통 action-primary 버튼과 라벨 */
.action-primary__item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 공통 action-primary 버튼 */
.action-primary__button {
  width: calc(var(--action-primary-height) * 0.6);
  height: calc(var(--action-primary-height) * 0.6);
  border: 3px solid white;
  border-radius: calc(var(--action-primary-height) * 0.6 / 5);
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* 공통 action-primary 라벨 */
.action-primary__label {
  margin-top: var(--common-gap);
  font-size: 15px;
  font-weight: bold;
  color: white;
}

/* 6. Info (세로 크기 불변, 위치 불변, 스크롤 불가, 배경: White) */
.info {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--app-max-width);
  height: var(--info-height);
  background-color: white;
  display: flex;
  align-items: center;
  padding: 0 var(--info-margin);
  overflow: hidden;
  z-index: 2;
  font-size: 12px;
  font-weight: bold;
  color: var(--xi-deep-blue);
}

.info__set {
  display: flex;
  align-items: center;
  gap: var(--common-gap);
}

/* 장비(equipment) 정보 */
.info__set.equipment {
  justify-content: flex-start;
  width: 33.33%;
}

/* 사용업체(partner) 정보 */
.info__set.partner {
  justify-content: flex-start;
  width: 33.33%;
}

/* 프로젝트(project) 정보 */
.info__set.project {
  justify-content: flex-start;
  width: 33.33%;
}

.info__set img {
  height: calc(var(--info-height) * 0.5);
}

/* ==========================================================================
   [EQUIPMENT CONFIRM PAGE]
   [EQUIPMENT REGISTER PAGE]
   [PARTNER CONFIRM PAGE]
   [PARTNER REGISTER PAGE]
   ========================================================================== */

/* 각 페이지 배치 */
.main-equipment-confirm,
.main-partner-confirm,
.main-partner-register {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

/* 각 페이지 배치 */
.main-equipment-register {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  height: 100%;
  width: 100%;
}

/* 등록 버튼과 입력 및 선택 박스 */
.btn-box-group {
  display: flex;
  width: calc(100% - var(--main-margin) * 2);
}

/* 등록 버튼 */
.register-btn {
  background-color: var(--gs-gray);
  height: var(--main-input-height);
  width: calc(var(--main-input-height) * 0.75);
  border: none;
  border-radius: calc(var(--main-input-height) / 8);
  cursor: pointer;
  margin-right: var(--common-gap);
}

/* 등록 버튼 이미지 */
.register-btn img {
  display: block;
  margin: auto;
  height: calc(var(--main-input-height) / 2);
  width: calc(var(--main-input-height) / 2);
}

/* 수정 버튼 */
.edit-btn {
  background-color: var(--gs-gray);
  height: var(--main-input-height);
  width: calc(var(--main-input-height) * 0.75);
  border: none;
  border-radius: calc(var(--main-input-height) / 8);
  cursor: pointer;
  margin-left: var(--common-gap);
}

/* 수정 버튼 이미지 */
.edit-btn img {
  display: block;
  margin: auto;
  height: calc(var(--main-input-height) / 2);
  width: calc(var(--main-input-height) / 2);
}

/* 라벨과 입력 및 선택 박스 */
.label-box-group {
  display: flex;
  flex-direction: column;
  width: calc(100% - var(--main-margin) * 2);
}

/* 라벨 */
.input-label {
  text-align: left;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: var(--common-gap);
}

/* 라벨: "선택" */
.input-label.optional {
  color: var(--xi-sky-blue);
}

/* 입력 및 선택 박스 */
.input-box {
  background-color: white;
  border: 2px solid var(--gs-gray);
  border-radius: calc(var(--main-input-height) / 8);
  height: var(--main-input-height);
  font-size: 18px;
  padding: 0 5px;
}

/* 등록 버튼, 수정 버튼, 입력 및 선택 박스 가로 확장 */
.btn-box-group .input-box {
  flex: 1;
  min-width: 0;
}

/* ==========================================================================
   [INSPECTION ITEM PAGE]
   ========================================================================== */

.inspection-item-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.inspection-item-photo {
  height: 60%;
}

.inspection-item-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.inspection-item-info-container {
  height: 40%;
}

.inspection-item-info {
  height: 100%;
  margin: 0 var(--main-margin);
  display: flex;
  flex-direction: column;
}

.item-description {
  height: 75%;
  color: var(--xi-deep-blue);
  font-size: 18px;
  font-weight: bold;
  text-align: justify;
  white-space: pre-wrap;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--common-gap);
}

.item-number {
  height: 25%;
  color: var(--xi-deep-blue);
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--common-gap);
}

.move-prev,
.move-next {
  position: absolute;
  top: 60%;
  height: 40%;
  width: var(--main-margin);
  display: flex;
  align-items: center;
  justify-content: center;
}

.move-prev {
  left: 0;
}

.move-next {
  right: 0;
}

.move-prev-btn,
.move-next-btn {
  background: none;
  border: none;
  cursor: pointer;
}

.move-prev-btn img,
.move-next-btn img {
  width: calc(var(--main-margin) * 0.5);
}

/* 클릭한 action-primary 버튼 */
.action-primary__button.pressed {
  box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.5);
}

/* 클릭하지 않은 action-primary 버튼 */
.action-primary__button.unpressed {
  border: 2px dashed white !important;
}

/* ==========================================================================
   [OVERLAY]
   ========================================================================== */

.overlay {
  position: fixed;
  top: var(--header-height);
  bottom: calc(var(--action-secondary-height) + var(--action-primary-height) + var(--info-height));
  left: 50%;
  width: 100%;
  max-width: var(--app-max-width);
  background-color: var(--xi-deep-blue);
  z-index: 5;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  transition: transform 0.2s ease, opacity 0.2s ease;
  transform: translate(-50%, calc(var(--vh, 1vh) * 100 - var(--header-height)));
  pointer-events: none;
}

.overlay.hidden {
  display: none;
}

.overlay.visible {
  transform: translate(-50%, 0);
  opacity: 0.95;
  pointer-events: auto;
}

.inspection-overlay-container {
  width: 100%;
  padding: var(--overlay-gap);
  padding-bottom: var(--main-margin);
  display: flex;
  flex-direction: column;
  gap: var(--overlay-gap);
}

/* Inspection Note */
.inspection-note-area {
  display: flex;
  flex-direction: column;
}

.inspection-note-input {
  min-height: var(--main-input-height);
  background-color: white;
  border: none;
  border-radius: calc(var(--main-input-height) / 8);
  padding: 5px;
  font-size: 18px;
  resize: none;
  overflow: hidden;
}

/* Inspection Photo */
.inspection-photo-area {
  display: flex;
  flex-direction: column;
}

.inspection-photo-upload {
  aspect-ratio: 4 / 3;
  border: 3px solid white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-size: cover;
  background-position: center;
}

.inspection-photo-upload.uploaded {
  aspect-ratio: unset;
}

.inspection-photo-upload img {
  width: calc(var(--action-primary-height) * 0.6);
  height: calc(var(--action-primary-height) * 0.6);
}

.inspection-photo-upload img.uploaded {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.inspection-note-label, .inspection-photo-label {
  font-size: 14px;
  font-weight: bold;
  color: white;
  margin-bottom: var(--common-gap);
}

/* Camera 버튼 */
.camera-button-area {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(var(--action-primary-height) * 0.6);
}

.camera-button {
  width: calc(var(--action-primary-height) * 0.6);
  height: calc(var(--action-primary-height) * 0.6);
  background: none;
  border: none;
  cursor: pointer;
}

.camera-button img {
  height: 100%;
}

/* ==========================================================================
   [PLEDGE CONFIRM PAGE]
   ========================================================================== */

.pledge-confirm-container {
  margin: 0 var(--main-margin);
  display: flex;
  flex-direction: column;
  gap: var(--overlay-gap);
  height: 100%;
}

.pledge-confirm-container .input-box{
  margin-top: var(--common-gap);
  flex-shrink: 0;
}

.pledge-description {
  width: 100%;
  font-size: 16px;
  font-weight: bold;
  text-align: justify;
  color: var(--xi-deep-blue);
  flex-shrink: 0;
}

.pledge-document-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

.pledge-document-area img {
  padding-bottom: var(--main-margin);
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pledge-lightbox {
  position: fixed;
  top: var(--header-height);
  bottom: calc(var(--action-secondary-height) + var(--action-primary-height) + var(--info-height));
  left: 50%;
  transform: translate(-50%, 0);
  width: 100%;
  max-width: var(--app-max-width);
  background-color: var(--xi-deep-blue);
  opacity: 0.95;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  overflow: hidden;
}

.pledge-lightbox-content img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: pointer;
}

.pledge-lightbox.hidden {
  display: none;
}

/* ==========================================================================
   [BACK BUTTON]
   ========================================================================== */

#backButtonContainer {
  position: absolute;
  left: 0;
  bottom: calc(var(--action-secondary-height) + var(--action-primary-height) + var(--info-height));
  width: var(--main-margin);
  height: var(--main-margin);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
}

#backButtonContainer button {
  background: none;
  border: none;
  cursor: pointer;
}

#backButtonContainer button img {
  width: calc(var(--main-margin) * 0.75);
}

#backButtonContainer.hidden {
  display: none;
}

/* ==========================================================================
   [LOADER]
   ========================================================================== */

.loader-container {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: 100%;
  max-width: var(--app-max-width);
  background-color: var(--xi-deep-blue);
  opacity: 0.95;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 6;
  overflow: hidden;
}

.loader {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  position: relative;
  animation: rotate 1s linear infinite
}

.loader::before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  inset: 0px;
  border-radius: 50%;
  border: 5px solid white;
  animation: prixClipFix 2s linear infinite ;
}

@keyframes rotate {
  100%   {transform: rotate(360deg)}
}

@keyframes prixClipFix {
  0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
  25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
  50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
  75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
  100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
}

.loader-container.hidden {
  display: none;
}