/* D안 미용실 인테리어 상담 페이지 (/d/interior/) 전용 — b-detail.css 다음에 읽는다.
   기획안 디자인 지침: 프리미엄 미용실 전문 플랫폼 · 화이트/차콜/딥네이비 · 모바일 우선.
   공통 상세 틀(d-*)은 그대로 쓰고, 사진 첫 화면·안심 체크 패널·상담 서비스 목록처럼 이 페이지에만 있는 것만 둔다 */

.di-page {
  --di-charcoal: #1b1d24;
}

/* ---------- 01 첫 화면: 미용실 사진을 화면 가득 ---------- */
.d-hero.di-hero {
  display: grid;
  align-items: end;
  min-height: min(92svh, 860px);
  background: var(--di-charcoal);
  color: var(--white);
}

.di-hero-photo,
.di-hero-photo img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
}

.di-hero-photo img {
  object-fit: cover;
  object-position: 60% 50%;
  animation: di-settle 1.6s var(--ease-out-expo) both;
}

@keyframes di-settle {
  from {
    transform: scale(1.06);
  }
}

/* 글씨가 읽히도록 왼쪽·아래를 어둡게 */
.di-hero-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(14, 16, 22, 0.86) 0%, rgba(14, 16, 22, 0.62) 42%, rgba(14, 16, 22, 0.1) 75%),
    linear-gradient(0deg, rgba(14, 16, 22, 0.55) 0%, rgba(14, 16, 22, 0) 40%);
}

.di-hero-inner {
  padding-block: clamp(4rem, 12vh, 7rem) clamp(3rem, 8vh, 5rem);
}

.di-hero-inner > * {
  max-width: 620px;
  animation: b-rise var(--duration-slow) var(--ease-out-expo) both;
}

.di-hero-inner > :nth-child(2) {
  animation-delay: 80ms;
}

.di-hero-inner > :nth-child(n + 3) {
  animation-delay: 160ms;
}

.di-eyebrow {
  display: inline-block;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: var(--text-small);
  font-weight: 700;
}

.di-title {
  margin-top: 18px;
  font-size: clamp(2.25rem, 1.4rem + 3.8vw, 4.25rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.05em;
  word-break: keep-all;
}

.di-title em {
  font-style: normal;
  color: #c7d2ff;
}

.di-lead {
  margin-top: 18px;
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--text-lead);
  line-height: 1.7;
  word-break: keep-all;
}

.di-lead + .di-lead {
  margin-top: 10px;
  font-size: var(--text-body);
}

.di-lead strong {
  color: var(--white);
}

.di-promise {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.di-promise li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px 7px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.94);
  color: var(--di-charcoal);
  font-size: var(--text-small);
  font-weight: 800;
}

.di-promise li::before {
  content: '';
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7.2l2.2 2.2 4.8-4.8' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat,
    var(--brand);
}

.di-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  margin-top: 30px;
}

.di-ghost {
  color: var(--white);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 5px;
}

@media (max-width: 720px) {
  .d-hero.di-hero {
    min-height: 0;
  }

  .di-hero-photo img {
    object-position: 50% 30%;
  }

  .di-hero-veil {
    background: linear-gradient(180deg, rgba(14, 16, 22, 0.1) 0%, rgba(14, 16, 22, 0.55) 34%, rgba(14, 16, 22, 0.92) 62%, rgba(14, 16, 22, 0.97) 100%);
  }

  .di-hero-inner {
    padding-block: 40vh 40px;
  }

  .di-actions .btn {
    width: 100%;
    padding: 0 20px;
    font-size: 1.0625rem;
  }

  .di-ghost {
    width: 100%;
    text-align: center;
  }
}

/* ---------- 콘셉트 한 줄 ---------- */
.di-concept {
  padding: clamp(3rem, 2rem + 4vw, 5.5rem) 0;
  background: var(--di-charcoal);
  color: var(--white);
  text-align: center;
}

.di-concept-q {
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.375rem);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.045em;
  word-break: keep-all;
}

.di-concept-q em {
  font-style: normal;
  color: #c7d2ff;
}

.di-concept-text {
  max-width: 720px;
  margin: 18px auto 0;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.8;
  word-break: keep-all;
}

/* ---------- 02 차이점 카드 ---------- */
.di-points {
  margin-top: 26px;
}

.di-points .d-card > p {
  font-size: var(--text-body);
}

/* ---------- 04 5가지 상담 서비스 ---------- */
.di-services {
  display: grid;
  gap: 10px;
  max-width: 900px;
}

.di-services li {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 20px 24px;
  border-radius: 22px;
  background: linear-gradient(160deg, #f3f5f9 0%, #f9fafc 100%);
  box-shadow: inset 0 0 0 1px #e6e9f1;
}

.di-services li > span {
  color: var(--brand);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.04em;
}

.di-services h3 {
  color: var(--ink);
  font-size: var(--text-h3);
  font-weight: 800;
  letter-spacing: -0.04em;
}

.di-services p {
  margin-top: 4px;
  color: var(--ink-2);
  line-height: 1.6;
  word-break: keep-all;
}

@media (max-width: 560px) {
  .di-services li {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 18px;
  }

  .di-services li > span {
    font-size: 1rem;
  }
}

/* ---------- 05 안심 체크: 차콜 패널 ---------- */
.di-trust {
  padding: clamp(1.75rem, 1.2rem + 3vw, 3.5rem);
  border-radius: clamp(28px, 1.2rem + 1.6vw, 40px);
  background:
    radial-gradient(circle at 100% 0%, rgba(140, 156, 214, 0.28) 0%, rgba(140, 156, 214, 0) 40%),
    linear-gradient(150deg, #262a36 0%, #1b1d24 55%, #12141a 100%);
  color: var(--white);
}

.di-trust .label-en {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.75rem;
}

.di-trust-head h2 {
  margin-top: 10px;
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.05em;
}

.di-trust-head h2 em {
  font-style: normal;
  color: #c7d2ff;
}

.di-trust-head > p:last-child {
  max-width: 640px;
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.76);
  line-height: 1.75;
  word-break: keep-all;
}

.di-trust-head strong {
  color: var(--white);
}

.di-checks {
  display: grid;
  gap: 10px;
  margin-top: 28px;
}

.di-checks li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 16px;
  padding: 20px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.di-checks li > span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(150deg, #3a5bc7 0%, #2a49b8 45%, #1f3484 100%);
  font-size: var(--text-small);
  font-weight: 800;
}

.di-checks h3 {
  font-size: var(--text-h3);
  font-weight: 800;
  letter-spacing: -0.04em;
}

.di-checks p {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.76);
  line-height: 1.65;
  word-break: keep-all;
}

.di-checks small {
  display: block;
  margin-top: 8px;
  padding-left: 10px;
  border-left: 2px solid rgba(199, 210, 255, 0.5);
  color: rgba(255, 255, 255, 0.58);
  font-size: var(--text-xs);
  line-height: 1.6;
}

.di-trust-foot {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.di-trust-big {
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.625rem);
  font-weight: 800;
  letter-spacing: -0.04em;
}

.di-trust-foot > p:not(.di-trust-big) {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.72);
}

.di-trust-foot .btn {
  margin-top: 20px;
}

@media (max-width: 560px) {
  .di-checks li {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 18px;
  }

  .di-trust-foot .btn {
    width: 100%;
  }
}

/* ---------- 06 진행 절차: 두 줄 ---------- */
@media (min-width: 900px) {
  .di-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: column;
    grid-template-rows: repeat(4, auto);
    column-gap: 48px;
    max-width: none;
  }

  .di-steps .d-step:nth-child(4)::before {
    display: none;
  }
}

/* ---------- 07 추천 대상 ---------- */
.di-who {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 12px;
}

.di-who li {
  padding: 22px 22px 24px;
  border-radius: 22px;
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--line), 0 10px 26px rgba(28, 40, 96, 0.05);
}

.di-who b {
  display: block;
  color: var(--ink);
  font-size: var(--text-h3);
  font-weight: 800;
  letter-spacing: -0.04em;
}

.di-who b::before {
  content: '';
  display: block;
  width: 28px;
  height: 3px;
  margin-bottom: 14px;
  border-radius: 3px;
  background: var(--brand);
}

.di-who p {
  margin-top: 8px;
  color: var(--ink-2);
  line-height: 1.65;
  word-break: keep-all;
}

/* ---------- 08 비용: 견적 항목 ---------- */
.di-subhead {
  margin-top: 28px;
  color: var(--ink);
  font-size: var(--text-h3);
  font-weight: 800;
  letter-spacing: -0.04em;
}

.di-cost {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  max-width: 980px;
  margin-top: 14px;
  counter-reset: di-cost;
}

.di-cost li {
  counter-increment: di-cost;
  display: grid;
  gap: 10px;
  padding: 18px;
  border-radius: 18px;
  background: #f4f5f9;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.45;
  word-break: keep-all;
}

.di-cost li::before {
  content: counter(di-cost, decimal-leading-zero);
  color: #8c9cd6;
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.1em;
}

@media (max-width: 900px) {
  .di-cost {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.di-quote {
  max-width: 760px;
  margin-top: 28px;
  padding: 24px 26px;
  border-radius: 22px;
  background: var(--di-charcoal);
  color: var(--white);
  font-size: clamp(1.1875rem, 1rem + 0.8vw, 1.5rem);
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: -0.035em;
  word-break: keep-all;
}

.di-quote em {
  font-style: normal;
  color: #c7d2ff;
}

/* ---------- 10 신청서 ---------- */
.di-call {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  padding: 14px 20px;
  border-radius: 18px;
  background: var(--brand-tint);
  color: var(--brand-deep);
}

.di-call span {
  font-size: var(--text-small);
  font-weight: 700;
}

.di-call b {
  font-size: 1.25rem;
  font-weight: 800;
}

.di-form-group {
  margin: 30px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--brand);
  font-size: var(--text-small);
  font-weight: 800;
}

/* 성함·연락처 한 줄 위 끝 맞추기, 묶음 제목 바로 아래 간격 */
.di-form .field-row .field {
  margin-top: 0;
}

.di-form .di-form-group + .field-row,
.di-form .di-form-group + .field {
  margin-top: 14px;
}

.di-form > .di-form-group:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* 고르기 칸의 오류 문구 (fieldset 은 .field 지만 입력칸이 아니라 따로 보인다) */
.di-form fieldset.field.has-error .chips {
  padding: 6px;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1.5px #e42939;
}

.di-consent .di-form-group {
  margin-bottom: 0;
}

.di-consent-item {
  margin: 0;
  padding: 0;
  border: 0;
}

.di-consent-item + .di-consent-item {
  margin-top: 4px;
}

.di-consent .agree {
  margin-top: 16px;
}

.di-consent .agree small {
  display: block;
  margin-top: 2px;
  color: var(--ink-3);
  font-size: var(--text-xs);
}

.di-consent-item .field-error {
  margin-top: 6px;
}

.di-consent-item.has-error .field-error {
  display: block;
}

.di-consent-item.has-error .agree {
  color: #e42939;
}

.di-consent-note {
  margin-top: 14px;
  color: var(--ink-3);
  font-size: var(--text-xs);
  line-height: 1.6;
}

.di-form .form-done p {
  line-height: 1.7;
}

/* 아주 좁은 폰(320~360px): 버튼 글자가 넘치지 않게 화살표를 숨긴다 */
@media (max-width: 380px) {
  .di-page .btn .arrow-long {
    display: none;
  }

  .di-page .btn-xl,
  .di-page .btn-lg {
    padding: 0 16px;
    font-size: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .di-hero-photo img {
    animation: none;
  }
}