/* 옥외간판 및 인테리어 (Figma: 5 인테리어 pc·tablet·mobile 1:1846 / 1:1898 / 1:1950, 인테리어 페이지 interaction 1:3445) */

.interior-wrap { width: 900px; margin: 0 auto; }
.interior-sec { padding-top: 150px; }
.interior-review { padding-bottom: 150px; }

.interior-title { font-size: 30px; font-weight: 600; line-height: normal; color: #000; text-align: center; }
.interior-title--left { text-align: left; }
.interior-label { font-size: 20px; font-weight: 500; line-height: normal; color: #707070; }

/* ── 1. 메인 비주얼 ── */
.interior-hero { position: relative; height: 500px; overflow: hidden; color: #fff; isolation: isolate; }
.interior-hero-bg { position: absolute; inset: 0; z-index: -1; }
.interior-hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.interior-hero-inner {
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 1280px;
  margin: 0 auto;
  padding: 330px 0 0 250px;
  white-space: nowrap;
}
.interior-hero-title { font-size: 40px; font-weight: 700; line-height: 40px; }
.interior-hero-sub { font-size: 20px; font-weight: 600; line-height: 25px; }

/* ── 2. 맞춤형 니즈 인테리어 ── */
.interior-head { display: grid; gap: 10px; text-align: center; }
.interior-pic { width: 100%; height: 410px; margin-top: 50px; border-radius: 20px; object-fit: cover; }

/* ── 3. 옥외 광고물 ── */
.interior-info-list { display: flex; gap: 24px; margin-top: 50px; }
.interior-info-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 438px;
  height: 260px;
  padding: 35px 30px;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
}
.interior-info-bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.interior-info-card h3 { font-size: 20px; font-weight: 600; line-height: normal; color: #000; }
.interior-info-card p { font-size: 15px; font-weight: 500; line-height: 1.3; color: #707070; }

/* ── 4. 원스톱 ── */
.interior-steps .interior-wrap { display: flex; flex-direction: column; gap: 50px; }
.interior-step { display: flex; align-items: center; gap: 70px; }
.interior-step-img { flex: none; width: 495px; height: 293px; border-radius: 20px; object-fit: cover; }
.interior-step:first-child .interior-step-img { height: 300px; }
.interior-step-text { display: grid; align-items: start; white-space: nowrap; }
.interior-step-text > * { grid-area: 1 / 1; }
.interior-step-text p { margin-top: 138px; }
.interior-step-text h3 { font-size: 30px; font-weight: 600; line-height: normal; color: #000; }
.interior-step-text p { font-size: 20px; font-weight: 500; line-height: 1.3; color: #707070; }

/* ── 5. 인테리어 후기 (마퀴) ── */
.interior-marquee { margin-top: 50px; }
.interior-case {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 675px;
  height: 330px;
  margin-right: 25px;
  padding: 50px;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
}
.interior-case-bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.interior-case h3 { font-size: 20px; font-weight: 600; line-height: normal; }
.interior-case p { font-size: 15px; font-weight: 500; line-height: 1.3; }

/* ───────── 태블릿 (디자인 800) ───────── */
@media (max-width: 1023px) {
  .interior-wrap { width: min(650px, 100% - 40px); }
  .interior-sec { padding-top: 100px; }
  /* Figma 후기 블록은 제목 프레임 높이 때문에 위아래로 6px 더 띄워짐 */
  .interior-review { padding-top: 106px; padding-bottom: 106px; }
  .interior-title { font-size: 25px; }
  .interior-label { font-size: 18px; }

  .interior-hero-inner { width: min(800px, 100%); padding: 330px 100px 0; }
  .interior-hero-title { font-size: 35px; }
  .interior-hero-sub { font-size: 18px; }

  .interior-pic { height: 296.111px; margin-top: 30px; }

  .interior-info-list { gap: 15px; margin-top: 30px; }
  .interior-info-card { flex: 1 1 0; width: auto; height: 188px; gap: 7.222px; padding: 25.278px 21.667px; }
  .interior-info-card h3 { font-size: 15px; }
  .interior-info-card p { font-size: 12px; }

  .interior-steps .interior-wrap { gap: 25px; }
  .interior-step { gap: 50.548px; }
  .interior-step-img { width: 357.444px; height: 211.578px; }
  .interior-step:first-child .interior-step-img { height: 216.633px; }
  .interior-step-text p { margin-top: 99.65px; }
  .interior-step-text h3 { font-size: 25px; }
  .interior-step-text p { font-size: 18px; }

  .interior-marquee { margin-top: 30px; }
  .interior-case { width: 533px; height: 324px; }
}

/* ───────── 모바일 (디자인 375) ───────── */
@media (max-width: 767px) {
  .interior-wrap { width: calc(100% - 55px); }
  .interior-sec { padding-top: 50px; }
  .interior-review { padding-top: 56px; padding-bottom: 56px; }
  .interior-title { font-size: 20px; }
  .interior-label { font-size: 15px; }

  .interior-hero-inner { width: 100%; padding: 330px 40px 0; }
  .interior-hero-title { font-size: 30px; }
  .interior-hero-sub { font-size: 15px; }

  .interior-pic { width: calc(100% + 5px); max-width: none; height: 148.056px; }

  .interior-info .interior-wrap { width: calc(100% - 50px); }
  .interior-info-list { flex-direction: column; gap: 10px; }
  .interior-info-card { flex: none; height: 191px; gap: 7.352px; padding: 25.731px 22.055px; }

  .interior-steps .interior-wrap { gap: 35px; }
  .interior-step { flex-direction: column-reverse; align-items: flex-start; gap: 15px; }
  .interior-step-img { width: 100%; height: 195px; }
  .interior-step:first-child .interior-step-img { height: 199px; }
  .interior-step:last-child .interior-step-img { height: 194px; }
  .interior-step-text p { margin-top: 81px; }
  .interior-step-text h3 { font-size: 20px; }
  .interior-step-text p { font-size: 15px; }

  .interior-case { width: 251px; height: 203px; margin-right: 15.657px; gap: 6.263px; padding: 31.314px; border-radius: 12.526px; }
  .interior-case h3 { font-size: 15px; }
  .interior-case p { font-size: 12px; }
}