/* 5. 그래서 저희가 (박성호 2026-10-23: 사진·모션·IT 회사 문법·와디즈 상세페이지 기법, 설명은 부드럽고 자세하게, 배경은 단조롭지 않게)
   - 바탕: 기획 도면처럼 점 모눈을 깐 종이. 왼쪽은 원칙 넷, 오른쪽은 고정된 어두운 무대
   - 무대: 읽고 있는 원칙에 맞춰 코드로 그린 장면이 바뀐다(대화창, 검색에서 전화까지의 도면, 작업 범위서, 할 일 목록)
   - 좁은 화면에서는 js/ours.js가 장면을 각 원칙 아래로 옮긴다. 움직임 줄이기 설정이면 처음부터 다 그려진 상태 */

.ours {
  position: relative;
  color: var(--ink);
  padding: clamp(88px, 11vw, 160px) var(--gutter) clamp(80px, 10vw, 150px);
  background-color: #f4f1ea;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(18, 18, 18, .16) 1px, transparent 1.4px),
    url("/assets/paper-grain.webp");
  background-size: 22px 22px, 512px 512px;
  background-blend-mode: normal, multiply;
  overflow: clip;
}
/* 위아래 가장자리는 점 모눈이 서서히 사라져 앞뒤 섹션과 이어진다 */
.ours::before,
.ours::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 160px;
  pointer-events: none;
}
.ours::before { top: 0; background: linear-gradient(#f4f1ea, rgba(244, 241, 234, 0)); }
.ours::after { bottom: 0; background: linear-gradient(rgba(244, 241, 234, 0), #f4f1ea); }

.ours__inner { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; }
.ours__kicker {
  margin: 0 0 18px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--blue);
}
.ours__title {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(34px, 5vw, 72px);
  line-height: 1.18;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.ours__sub {
  margin: 20px 0 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.4;
  letter-spacing: -0.03em;
  color: #3a3a37;
}

.ours__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(40px, 6vw, 96px);
  margin-top: clamp(56px, 7vw, 104px);
  align-items: start;
}
.ours__list { list-style: none; margin: 0; padding: 0; }
.ours__item {
  min-height: 72vh;
  padding: 0 0 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: .32;
  transition: opacity .45s ease;
}
.ours__item.is-on { opacity: 1; }
.ours__item:first-child { min-height: 60vh; justify-content: flex-start; padding-top: 4vh; }
.ours__no {
  margin: 0 0 10px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--blue);
}
.ours__rule {
  margin: 0 0 18px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(26px, 2.5vw, 36px);
  line-height: 1.28;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.ours__why {
  max-width: 32em;
  margin: 0 0 12px;
  font-size: 18px;
  line-height: 1.8;
  color: #3f3f3b;
  text-wrap: pretty;
}

/* 무대: 장면 넷을 3D 카드 묶음으로 겹친다(js/ours.js가 카드마다 --d = 지금 원칙과의 거리를 준다)
   맨 앞이 지금 원칙, 뒤 카드는 비스듬히 물러나 위로 살짝 보이고, 지난 카드는 위로 넘어가 사라진다.
   마우스를 올리면 맨 앞 카드가 기울고, 카드 위 빛과 무대 조명이 마우스를 따라온다 */
.ours__stage {
  position: sticky;
  top: calc(var(--header-h) + 32px);
  height: min(640px, calc(100vh - var(--header-h) - 64px));
  border-radius: 24px;
  background-color: #111;
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 32px 32px;
  box-shadow: 0 40px 80px -40px rgba(18, 18, 18, .55);
  overflow: hidden;
  color: var(--ink-text);
  perspective: 1600px;
  perspective-origin: 50% 0%;
}
.ours__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(640px circle at var(--mx, 70%) var(--my, 20%), rgba(255, 255, 255, .07), transparent 60%);
  transition: background .2s;
}
/* 오른쪽 위 진행 표시: 01 / 04와 가는 진행 막대 */
.ours__count { position: absolute; bottom: 22px; left: 36px; z-index: 20; display: flex; align-items: baseline; gap: 6px; margin: 0; font-family: var(--font-head); color: var(--ink-sub); font-size: 15px; }
.ours__count b { font-weight: 800; font-size: 24px; color: #fff; letter-spacing: -0.02em; }
.ours__count i { display: block; width: 96px; height: 2px; margin-left: 12px; background: #2b2b2b; align-self: center; }
.ours__count em { display: block; height: 100%; width: 25%; background: var(--blue-on-ink); transition: width .5s ease; }

.scene { display: flex; flex-direction: column; }
.ours__stage .scene {
  position: absolute;
  inset: 92px 32px 64px;
  padding: 24px 28px;
  border-radius: 20px;
  background: #1a1a1a;
  border: 1px solid #2e2e2e;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9);
  transform-origin: 50% 0%;
  transform: translate3d(0, calc(var(--d, 0) * -30px), calc(var(--d, 0) * -130px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  opacity: calc(1 - var(--d, 0) * .28);
  filter: brightness(calc(1 - var(--d, 0) * .18));
  transition: transform .85s cubic-bezier(.2, .8, .2, 1), opacity .6s ease, filter .6s ease;
  overflow: hidden;
}
.ours__stage .scene[data-pos="front"] { transition: transform .85s cubic-bezier(.2, .8, .2, 1), opacity .6s ease, filter .6s ease; }
.ours__stage .scene[data-pos="past"] {
  transform: translate3d(0, -118%, 60px) rotateX(-22deg);
  opacity: 0;
  pointer-events: none;
}
/* 맨 앞 카드 위를 지나가는 빛 */
/* 뒤 카드는 내용을 비우고 가장자리만 보인다 */
.ours__stage .scene > * { transition: opacity .4s ease; }
.ours__stage .scene[data-pos="back"] > * { opacity: 0; }
.ours__stage .scene::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .08), transparent 60%);
  opacity: 0;
  transition: opacity .3s;
}
.ours__stage .scene[data-pos="front"]::after { opacity: 1; }
.scene__label {
  margin: 0 0 16px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.03em;
  color: var(--blue-on-ink);
}

/* 01 대화창: 중간 담당자에 줄이 그어지고, 박성호와 바로 주고받는 대화가 차례로 뜬다 */
.chain { display: flex; gap: 10px; margin: 0 0 14px; font-size: 15px; color: var(--ink-sub); }
.chain s { position: relative; text-decoration: none; padding: 4px 10px; border: 1px solid #333; border-radius: 999px; }
.chain s::after { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; background: var(--pen); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
.is-on .chain s::after { transform: none; }
.is-on .chain s:nth-child(2)::after { transition-delay: .15s; }
.is-on .chain s:nth-child(3)::after { transition-delay: .3s; }
.chat { border-radius: 16px; background: #f7f6f2; color: var(--ink); overflow: hidden; }
.chat__head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #e3e0d8; font-size: 18px; }
.chat__head img { width: 44px; height: 44px; border-radius: 50%; }
.chat__head span { margin-left: auto; font-size: 13px; color: var(--paper-sub); }
.chat__body { display: grid; gap: 8px; padding: 14px 16px 16px; background: #ece9e2; }
.msg {
  position: relative;
  max-width: 78%;
  margin: 0;
  padding: 10px 15px;
  border-radius: 18px;
  font-size: 17px;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s, transform .35s;
}
.msg time { display: block; margin-top: 2px; font-size: 13px; color: rgba(18, 18, 18, .45); }
.msg--them { justify-self: start; background: #fff; border-top-left-radius: 4px; }
.msg--me { justify-self: end; background: #fee500; border-top-right-radius: 4px; }
.is-on .msg { opacity: 1; transform: none; }
.is-on .msg:nth-child(1) { transition-delay: .5s; }
.is-on .msg:nth-child(2) { transition-delay: 1.3s; }
.is-on .msg:nth-child(3) { transition-delay: 2.1s; }

/* 02 기획 도면: 검색어가 쳐지고, 전화와 상관없는 장면에는 빨간 줄이 그어져 접히고, 전화 버튼이 깜빡인다 */
.query { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 22px; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 700; font-size: 20px; }
.query__icon { width: 16px; height: 16px; border: 2.5px solid #12b886; border-radius: 50%; position: relative; flex: none; }
.query__icon::after { content: ""; position: absolute; right: -6px; bottom: -5px; width: 7px; height: 2.5px; background: #12b886; transform: rotate(45deg); }
.query__text { display: inline-block; overflow: hidden; white-space: nowrap; width: 0; }
.is-on .query__text { width: 8.4em; transition: width 1.1s steps(9) .3s; }
.query__caret { width: 2px; height: 20px; background: var(--ink); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.plan { display: grid; gap: 8px; margin-top: 16px; }
.plan__row {
  position: relative;
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: center;
  padding: 14px 16px;
  border: 1px dashed #4a4a46;
  border-radius: 12px;
  font-size: 16px;
  color: #d7d7d2;
  max-height: 60px;
  overflow: hidden;
  transition: max-height .4s ease 1.9s, padding .4s ease 1.9s, opacity .4s ease 1.9s, margin .4s ease 1.9s, border-color .3s;
}
.plan__row b { font-weight: 700; color: #fff; }
.is-on .plan__row--hit { border-style: solid; border-color: #3a3a37; }
.plan__row--cut::after { content: ""; position: absolute; left: 10px; right: 10px; top: 50%; height: 2px; background: var(--pen); transform: scaleX(0); transform-origin: left; transition: transform .4s ease 1.4s; }
.is-on .plan__row--cut::after { transform: none; }
.is-on .plan__row--cut { max-height: 0; padding-top: 0; padding-bottom: 0; margin: -4px 0; opacity: 0; }
.plan__call { position: relative; display: flex; align-items: center; justify-content: center; height: 58px; margin-top: 6px; border-radius: 14px; background: var(--blue); color: #fff; font-weight: 800; font-size: 19px; }
.plan__call i { position: absolute; inset: 0; border-radius: 12px; box-shadow: 0 0 0 0 rgba(111, 140, 255, .6); }
.is-on .plan__call i { animation: ring 1.6s ease-out 2.5s infinite; }
@keyframes ring { to { box-shadow: 0 0 0 14px rgba(111, 140, 255, 0); } }

/* 03 작업 범위서: 중간에 붙는 기능과 옵션 줄에 0원이 찍히고, 도장이 내려앉는다 */
.sheet { position: relative; padding: 18px 22px 16px; border-radius: 6px; background: #fffef9; color: var(--ink); box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .6); }
.sheet__head { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 6px; padding-bottom: 10px; border-bottom: 2px solid var(--ink); }
.sheet__head b { font-family: var(--font-head); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; }
.sheet__head span { font-size: 13px; color: var(--paper-sub); }
.sheet__rows { margin: 0; }
.sheet__rows div { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #e8e4da; font-size: 16px; }
.sheet__rows dd { margin: 0; font-weight: 700; }
.sheet__extra dd b { display: inline-block; color: var(--blue); opacity: 0; transform: scale(1.8); transition: opacity .2s, transform .35s cubic-bezier(.5, 1.6, .4, 1); }
.is-on .sheet__extra dd b { opacity: 1; transform: none; transition-delay: .8s; }
.is-on .sheet__extra + .sheet__extra dd b { transition-delay: 1.15s; }
.sheet__sum { display: flex; justify-content: space-between; align-items: baseline; margin: 10px 0 0; padding-top: 10px; border-top: 2px solid var(--ink); }
.sheet__sum span { font-size: 13px; color: var(--paper-sub); }
.sheet__sum b { font-family: var(--font-head); font-weight: 800; font-size: 21px; }
.sheet__stamp {
  position: absolute;
  left: 96px;
  bottom: 4px;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 2.5px solid var(--pen);
  border-radius: 50%;
  color: var(--pen);
  font-weight: 800;
  font-size: 13px;
  line-height: 1.2;
  text-align: center;
  opacity: 0;
  transform: rotate(-14deg) scale(1.8);
  transition: opacity .15s, transform .3s cubic-bezier(.5, 1.6, .4, 1);
}
.is-on .sheet__stamp { opacity: .9; transform: rotate(-14deg); transition-delay: 1.6s; }

/* 04 할 일 목록: 대표님 몫은 사전 미팅 한 줄, 나머지 줄에는 차례로 체크가 들어간다 */
.todo2 { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.todo2 li {
  position: relative;
  display: grid;
  grid-template-columns: 124px 1fr;
  align-items: center;
  padding: 14px 48px 14px 18px;
  border-radius: 14px;
  background: rgba(31, 31, 31, .92);
  font-size: 17px;
  color: #e6e6e1;
}
.todo2 li b { font-weight: 700; font-size: 13px; color: var(--ink-sub); }
.todo2 li small { grid-column: 2; font-size: 13px; color: var(--ink-sub); }
.todo2__you { background: #fff !important; color: var(--ink) !important; box-shadow: inset 0 0 0 2px var(--blue); }
.todo2__you b { color: var(--blue) !important; }
.todo2 li::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 16px;
  height: 9px;
  margin-top: -7px;
  border-left: 2.5px solid #6f8cff;
  border-bottom: 2.5px solid #6f8cff;
  transform: rotate(-45deg) scale(0);
  transition: transform .25s cubic-bezier(.5, 1.6, .4, 1);
}
.todo2__you::after { border-color: var(--blue) !important; }
.is-on .todo2 li::after { transform: rotate(-45deg) scale(1); }
.is-on .todo2 li:nth-child(1)::after { transition-delay: .3s; }
.is-on .todo2 li:nth-child(2)::after { transition-delay: .7s; }
.is-on .todo2 li:nth-child(3)::after { transition-delay: .95s; }
.is-on .todo2 li:nth-child(4)::after { transition-delay: 1.2s; }
.is-on .todo2 li:nth-child(5)::after { transition-delay: 1.45s; }
.is-on .todo2 li:nth-child(6)::after { transition-delay: 1.7s; }

/* 좁은 화면: 장면이 각 원칙 아래에 놓인다(js/ours.js) */
@media (max-width: 860px) {
  .ours { background-size: 18px 18px, 512px 512px; }
  .ours__body { grid-template-columns: 1fr; gap: 0; }
  .ours__stage { display: none; }
  .ours__item, .ours__item:first-child { min-height: 0; padding: 0 0 56px; opacity: 1; }
  .ours__rule { font-size: 25px; }
  .ours__why { font-size: 16px; }
  .ours__item .scene {
    position: relative;
    inset: auto;
    margin-top: 18px;
    padding: 24px 18px;
    border-radius: 18px;
    background-color: #141414;
    background-image:
      linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 28px 28px;
    color: var(--ink-text);
    visibility: visible;
    opacity: 1;
    transform: none;
  }
  .todo2 li { grid-template-columns: 96px 1fr; }
  .sheet__stamp { left: auto; right: 10px; top: -20px; bottom: auto; width: 64px; height: 64px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .ours__item { opacity: 1; transition: none; }
  .scene, .scene *, .scene *::after { transition: none !important; animation: none !important; }
  .msg, .sheet__extra dd b, .sheet__stamp { opacity: 1 !important; transform: none !important; }
  .sheet__stamp { transform: rotate(-14deg) !important; }
  .query__text { width: 8.4em !important; }
  .plan__row--cut::after, .chain s::after { transform: none !important; }
  .todo2 li::after { transform: rotate(-45deg) scale(1) !important; }
}


/* 3D 오브젝트: 원칙마다 하나(말풍선·돋보기·문서·체크). 카드 오른쪽 위 모서리에 떠서 천천히 오르내리고, 마우스 반대쪽으로 살짝 밀린다.
   바뀔 때는 작아지며 돌아 나가고 새 오브젝트가 튀어 들어온다 */
.ours__objs { position: absolute; top: 18px; right: 6px; z-index: 15; width: clamp(130px, 13vw, 170px); aspect-ratio: 1; pointer-events: none;
  transform: translate(var(--px, 0px), var(--py, 0px)); transition: transform .3s ease-out; }
.ours__objs img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transform: scale(.4) rotate(-25deg);
  transition: opacity .35s ease, transform .7s cubic-bezier(.3, 1.5, .5, 1); filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .55)); }
.ours__objs img.is-on { opacity: 1; transform: none; animation: ours-float 4.2s ease-in-out .7s infinite; }
@keyframes ours-float { 50% { transform: translateY(-10px) rotate(3deg); } }
@media (max-width: 860px) { .ours__objs { display: none; } }
@media (prefers-reduced-motion: reduce) { .ours__objs img.is-on { animation: none; } .ours__objs img { transition: none; } }
/* 좁은 화면: 같은 3D 오브젝트를 장면 카드 오른쪽 위에 작게 얹는다 */
@media (max-width: 860px) {
  .ours__item .scene::before { content: ""; position: absolute; top: -18px; right: 6px; width: 76px; height: 76px; background: center / contain no-repeat;
    filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .5)); }
  .ours__item .scene[data-scene="0"]::before { background-image: url("/assets/ours-chat.webp"); }
  .ours__item .scene[data-scene="1"]::before { background-image: url("/assets/ours-search.webp"); }
  .ours__item .scene[data-scene="2"]::before { background-image: url("/assets/ours-sheet.webp"); }
  .ours__item .scene[data-scene="3"]::before { background-image: url("/assets/ours-check.webp"); }
  .ours__item .scene { overflow: visible; }
  .ours__item .scene__label { padding-right: 72px; font-size: 20px; }
}