/* ============================================================
   JOSEPH TELECOM — modal.css  (모든 페이지 공통)
   상담 신청 · 개인정보 동의 · 서비스 안내 · 제품 모달. 동작은 js/modals.js
   토큰(--navy-900 · --ivory-warm · --orange-500 · --font-kr …)은 style.css 에서 온다.
   ============================================================ */

/* 모달이 스크롤을 잠가도 스크롤바 자리가 남아 페이지 폭이 흔들리지 않는다.
   (폭이 바뀌면 ScrollTrigger · STAGE 가 다시 계산하면서 화면이 튄다) */
html { scrollbar-gutter: stable; }
html.is-modal-open { overflow: hidden; }

.modal {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  padding: clamp(16px, 4vw, 40px);
  font-family: var(--font-kr);
  color: var(--navy-900);
  word-break: keep-all;
}
.modal__backdrop {
  position: absolute; inset: 0;
  background: rgb(7 17 30 / 0.58);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 240ms var(--ease-out);
}
.modal__panel {
  position: relative;
  width: min(100%, 560px);
  max-height: min(88vh, 880px);
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--ivory-warm);
  border-radius: 6px;
  box-shadow: 0 30px 80px rgb(7 17 30 / 0.28);
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  transition: opacity 240ms var(--ease-out), transform 320ms var(--ease-out);
}
.modal__panel:focus { outline: none; }
.modal.is-open .modal__backdrop { opacity: 1; }
.modal.is-open .modal__panel { opacity: 1; transform: none; }

.modal--privacy .modal__panel { width: min(100%, 520px); }
.modal--info .modal__panel { width: min(100%, 900px); }
.modal--product .modal__panel { width: min(100%, 1040px); }

/* 닫기 — 창 안이 스크롤돼도 늘 오른쪽 위에 남는다 */
.modal__close {
  position: sticky; top: 12px; z-index: 2;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  margin: 12px 12px -56px auto;
  border-radius: 50%;
  color: var(--navy-900);
  background: rgb(247 244 238 / 0.92);
  cursor: pointer;
  transition: background-color 160ms var(--ease-out);
}
.modal__close:hover { background: #fff; }
.modal__close:focus-visible { outline: 2px solid var(--orange-500); outline-offset: 2px; }

.modal__body { padding: clamp(28px, 4vw, 44px); padding-top: clamp(30px, 4vw, 44px); }
.modal--info .modal__body,
.modal--product .modal__body { padding: 0; }

/* ---------- 글 ---------- */
.modal__eyebrow { font-size: 13px; font-weight: 600; color: var(--orange-700); padding-right: 48px; }
.modal__title {
  margin-top: 8px;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.38; letter-spacing: -0.03em; font-weight: 700;
  color: var(--navy-900);
}
.modal__title:focus { outline: none; }
.modal__lead { margin-top: 12px; font-size: 15.5px; line-height: 1.8; color: rgb(20 24 29 / 0.74); }
.modal__actions { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.modal__link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 14.5px; font-weight: 600; color: var(--navy-900);
  text-decoration: underline; text-decoration-color: rgb(11 27 46 / 0.25); text-underline-offset: 3px;
}
.modal__link:hover { text-decoration-color: var(--orange-500); }
.modal__alt {
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid rgb(11 27 46 / 0.1);
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px;
  font-size: 14px; color: rgb(20 24 29 / 0.7);
}
.modal__alt a {
  display: inline-flex; align-items: center; min-height: 40px;
  font-weight: 600; color: var(--navy-900);
  text-decoration: underline; text-decoration-color: rgb(11 27 46 / 0.25); text-underline-offset: 3px;
}
.modal__hours { margin-top: 6px; font-size: 13px; color: var(--warm-grey); }

/* ---------- 상담 신청 폼 ---------- */
.cform { margin-top: 24px; display: grid; gap: 18px; }
.cform__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 14px; }
.cform__row { display: grid; gap: 7px; min-width: 0; }
.cform__label { font-size: 14px; font-weight: 600; color: var(--navy-900); }
.cform__req { margin-left: 6px; font-size: 11.5px; font-weight: 600; color: var(--orange-700); }
.cform__opt { margin-left: 6px; font-size: 11.5px; font-weight: 500; color: var(--warm-grey); }

.cform__input {
  width: 100%; min-height: 48px;
  padding: 11px 14px;
  font: inherit;
  font-size: 16px;               /* 16px 아래면 iOS 가 입력칸을 확대한다 */
  color: var(--navy-900);
  background: #fff;
  border: 1px solid rgb(11 27 46 / 0.2);
  border-radius: 3px;
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.cform__input::placeholder { color: rgb(20 24 29 / 0.38); }
.cform__input:focus { outline: none; border-color: var(--orange-500); box-shadow: 0 0 0 3px rgb(224 94 20 / 0.18); }
.cform__input[aria-invalid="true"] { border-color: #A8322A; }
.cform__input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgb(168 50 42 / 0.16); }
.cform__select {
  appearance: none; -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230B1B2E' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.cform__textarea { min-height: 96px; line-height: 1.65; resize: vertical; }
.cform__error { font-size: 13px; line-height: 1.5; color: #A8322A; }
.cform__error--form { font-size: 14px; }

.cform__consent {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  padding: 8px 14px;
  background: rgb(11 27 46 / 0.045);
  border-radius: 3px;
}
.cform__consent input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--orange-500); }
.cform__consent label { flex: 1 1 auto; min-height: 44px; display: flex; align-items: center; font-size: 14.5px; font-weight: 500; cursor: pointer; }
.cform__more {
  min-height: 44px; padding: 0 2px;
  font-size: 13.5px; color: rgb(11 27 46 / 0.72);
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.cform__more:hover { color: var(--navy-900); }
.cform__submit { width: 100%; margin-top: 4px; }
.cform__submit:disabled { opacity: 0.6; cursor: progress; }

/* ---------- 개인정보 ---------- */
.privacy { margin: 18px 0 0; border-top: 1px solid rgb(11 27 46 / 0.12); }
.privacy div {
  display: grid; grid-template-columns: 7.5em 1fr; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgb(11 27 46 / 0.08);
  font-size: 14.5px; line-height: 1.7;
}
.privacy dt { font-weight: 600; }
.privacy dd { margin: 0; color: rgb(20 24 29 / 0.8); }
.privacy__note { margin-top: 14px; font-size: 14px; line-height: 1.75; color: rgb(20 24 29 / 0.72); }

/* ---------- 서비스 안내 (사진 + 설명) ---------- */
.imodal { display: grid; grid-template-columns: 1fr; }
.imodal__media { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: rgb(11 27 46 / 0.06); }
.imodal__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.imodal__body { padding: clamp(26px, 3.6vw, 44px); }
@media (min-width: 780px) {
  .imodal { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .imodal__media { aspect-ratio: auto; min-height: 100%; }
}
.imodal__h { margin-top: 26px; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.imodal__steps { list-style: none; margin: 10px 0 0; padding: 0; }
.imodal__steps li {
  display: grid; grid-template-columns: 34px 1fr; gap: 10px;
  padding: 14px 0;
  border-top: 1px solid rgb(11 27 46 / 0.1);
}
.imodal__num { padding-top: 3px; font-family: var(--font-mono); font-size: 12px; color: var(--orange-700); }
.imodal__steps strong { font-size: 15.5px; font-weight: 700; }
.imodal__steps p { margin-top: 3px; font-size: 14.5px; line-height: 1.7; color: rgb(20 24 29 / 0.74); }
.imodal__list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.imodal__list li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.6; }
.imodal__list li::before {
  content: ""; position: absolute; left: 2px; top: 0.42em;
  width: 13px; height: 7px;
  border-left: 2px solid var(--orange-500); border-bottom: 2px solid var(--orange-500);
  transform: rotate(-45deg);
}
.imodal__note { margin-top: 18px; font-size: 14px; line-height: 1.7; color: var(--warm-grey); }

/* ---------- 제품 ---------- */
.pmodal { display: grid; grid-template-columns: 1fr; }
.pmodal__media { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.pmodal__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pmodal__body { padding: clamp(26px, 3.4vw, 42px); }
@media (min-width: 880px) {
  .pmodal { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); }
  .pmodal__media { aspect-ratio: auto; min-height: 600px; }
}
.pmodal__brand { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.3em; color: var(--warm-grey); padding-right: 48px; }
.pmodal__name {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 36px); line-height: 1.15; letter-spacing: -0.02em; font-weight: 700;
}
.pmodal__name span { font-size: 0.55em; font-weight: 600; color: var(--warm-grey); }
.pmodal__tagline { margin-top: 10px; font-size: 17px; font-weight: 500; }
.pmodal__features { list-style: none; margin: 22px 0 0; padding: 0; }
.pmodal__features li { display: grid; gap: 3px; padding: 13px 0; border-top: 1px solid rgb(11 27 46 / 0.1); }
.pmodal__key { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; color: var(--orange-700); }
.pmodal__features strong { font-size: 15.5px; font-weight: 700; }
.pmodal__features p { font-size: 14px; line-height: 1.7; color: rgb(20 24 29 / 0.72); }
.pmodal__note { margin-top: 16px; font-size: 14px; line-height: 1.7; color: var(--warm-grey); }

/* ---------- 좁은 화면 — 아래에서 올라오는 시트 ---------- */
@media (max-width: 600px) {
  .modal { place-items: end center; padding: 0; }
  .modal__panel,
  .modal--privacy .modal__panel,
  .modal--info .modal__panel,
  .modal--product .modal__panel {
    width: 100%;
    max-height: 92vh;
    border-radius: 14px 14px 0 0;
    transform: translateY(28px);
  }
  .cform__grid { grid-template-columns: 1fr; }
  .modal__actions .btn { flex: 1 1 100%; }
  .privacy div { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- 제품 상세 시트 (js/product-sheet.js) ----------
   메인 위를 전체화면으로 덮는 product.html. 메인이 살아 있어 배경 음악이 끊기지 않는다. */
html.is-sheet-open { overflow: hidden; }
.pd-sheet {
  position: fixed; inset: 0; z-index: 950;
  background: var(--navy-900);
  opacity: 0; visibility: hidden;
  transform: translateY(24px);
  transition: opacity 280ms var(--ease-out), transform 360ms var(--ease-out), visibility 0s linear 360ms;
}
.pd-sheet.is-open {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 280ms var(--ease-out), transform 360ms var(--ease-out), visibility 0s;
}
.pd-sheet.is-light { background: var(--bg); }
.pd-sheet__frame {
  display: block; width: 100%; height: 100%; border: 0;
  opacity: 0; transition: opacity 240ms var(--ease-out);
}
.pd-sheet.is-ready .pd-sheet__frame { opacity: 1; }
/* 시트 안의 상세 페이지 — 소리 버튼은 메인 것을 쓰므로 감춘다 */
html.is-embed .bgm { display: none; }

@media (prefers-reduced-motion: reduce) {
  .pd-sheet, .pd-sheet.is-open, .pd-sheet__frame { transition: none; transform: none; }
  .modal__backdrop, .modal__panel { transition: none; }
  .modal__panel { transform: none; }
}