/* ============ iPhone Duo [D2] — 애플 첫 폴더블(2026.9 발표) ============
   애플 공식: 책처럼 안으로 접힘. 접으면 117.8 × 84.1mm(5.4형 바깥 화면), 펼치면 117.8 × 164.6mm(7.6형 안쪽 화면),
   두 화면 모두 1.41:1, 안쪽 화면은 화면 속 카메라라 아일랜드가 없음. 대표 경험: 펼치면 앱이 그대로 이어지는 화면 전환,
   두 앱을 나란히 쓰는 분할 보기(Split View).
   구조: 왼쪽 반(고정) + 접히는 오른쪽 반(.duo-flap, 앞면 = 안쪽 화면 오른쪽 / 뒷면 = 바깥 화면).
   접으면 오른쪽 반이 왼쪽 반 위로 180° 넘어가며 바깥 화면이 보이고, 기기 전체는 가운데로 이동한다. */
.duo {
  --dw: 330px; /* 펼친 폭 — 나머지 치수는 비례 계산 */
  --dh: calc(var(--dw) * 0.7157); /* 117.8 / 164.6 */
  --db: calc(var(--dw) * 0.018); /* 베젤 */
  --dr: calc(var(--dw) * 0.062); /* 본체 모서리 */
  --frame: linear-gradient(160deg, #2a2748, #171430);
  margin: 0;
  perspective: 1600px;
}
.duo-device {
  position: relative;
  width: var(--dw);
  height: var(--dh);
  transform-style: preserve-3d;
  transition: transform 1.1s cubic-bezier(0.65, 0, 0.25, 1);
}
.duo.is-folded .duo-device {
  transform: translateX(25%); /* 접힌 기기를 펼친 자리의 가운데로 */
}
.duo-half,
.duo-flap {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
}
.duo-left {
  left: 0;
  padding: var(--db) 0 var(--db) var(--db);
  border-radius: var(--dr) 0 0 var(--dr);
  background: var(--frame);
  box-shadow:
    -20px 30px 60px -30px rgba(123, 15, 201, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}
.duo-flap {
  left: 50%;
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform 1.1s cubic-bezier(0.65, 0, 0.25, 1);
}
.duo.is-folded .duo-flap {
  transform: rotateY(-180deg);
}
.duo-face {
  position: absolute;
  inset: 0;
  background: var(--frame);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.duo-in {
  padding: var(--db) var(--db) var(--db) 0;
  border-radius: 0 var(--dr) var(--dr) 0;
  box-shadow:
    20px 30px 60px -30px rgba(123, 15, 201, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}
.duo-out {
  padding: var(--db);
  border-radius: var(--dr);
  transform: rotateY(180deg) translateZ(1px); /* 접혔을 때 왼쪽 반 바로 위에 오도록 */
  box-shadow:
    0 30px 60px -30px rgba(123, 15, 201, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}
/* 펼쳤을 때 안쪽 화면 가운데 접힘 자국 */
.duo-crease {
  position: absolute;
  left: 50%;
  top: var(--db);
  bottom: var(--db);
  width: 2px;
  transform: translateX(-1px);
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.35), rgba(255, 255, 255, 0.08));
  pointer-events: none;
  transition: opacity 0.3s;
}
.duo.is-folded .duo-crease {
  opacity: 0;
}

/* 화면 */
.duo-screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--base);
  color: var(--ink);
  font-size: calc(var(--dw) * 0.026);
  line-height: 1.4;
}
.duo-left .duo-screen {
  border-radius: calc(var(--dr) - var(--db)) 0 0 calc(var(--dr) - var(--db));
}
.duo-in .duo-screen {
  border-radius: 0 calc(var(--dr) - var(--db)) calc(var(--dr) - var(--db)) 0;
}
.duo-out .duo-screen {
  border-radius: calc(var(--dr) - var(--db));
}
.duo-sbar {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--dw) * 0.06);
  padding: 0 9%;
  display: flex;
  align-items: center;
  font-size: calc(var(--dw) * 0.027);
  font-weight: 700;
  color: #fff;
}
.duo-sbar svg {
  width: calc(var(--dw) * 0.085);
  height: auto;
  display: block;
}
.duo-sbar-r {
  justify-content: flex-end; /* iOS 27.1: 펼친 화면의 상태 아이콘은 오른쪽 */
}
.duo-sbar-both {
  justify-content: space-between;
}

/* 왼쪽 반: 캐릭터 상세 */
.dd-hero {
  position: relative;
  height: 50%;
  background-size: cover;
  background-position: center 18%;
}
.dd-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 18, 37, 0.45) 0%, transparent 25%, var(--base) 100%);
}
.dd-body {
  position: relative;
  z-index: 1;
  margin-top: -8%;
  padding: 0 9%;
}
.dd-name {
  display: block;
  font-size: 1.5em;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.02em;
}
.dd-desc {
  margin: 0.25em 0 0.5em;
  font-size: 0.85em;
  color: var(--muted);
}
.dd-tags span {
  display: inline-block;
  margin-right: 0.3em;
  padding: 0.1em 0.6em;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.09);
  color: var(--muted);
  font-size: 0.78em;
  font-weight: 600;
}
.dd-card {
  margin-top: 0.6em;
  padding: 0.45em 0.6em;
  border-radius: 0.8em;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
}
.dd-card b {
  font-size: 0.85em;
  color: #fff;
}
.dd-card p {
  margin-top: 0.15em;
  font-size: 0.78em;
  color: var(--muted);
}
.dd-scene {
  margin-top: 0.5em;
  display: flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.4em 0.6em;
  border-radius: 0.7em;
  border: 1px solid var(--accent);
  background: rgba(248, 87, 180, 0.08);
  font-size: 0.82em;
  font-weight: 700;
  color: #fff;
}
.dd-scene .dot {
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
  background: var(--accent);
}

/* 오른쪽 반·바깥 화면: 대화 */
.dc {
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--dw) * 0.06);
  background:
    linear-gradient(180deg, rgba(29, 27, 65, 0.86), rgba(20, 18, 37, 0.97)),
    url('../../images/characters/hansoyun-lv10.jpg') center 12% / cover; /* 기본값 — 인라인 지정 */
}
.dc-top {
  display: flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.4em 8% 0.6em;
  border-bottom: 1px solid var(--line);
}
.dc-ava {
  flex: none;
  width: 2.4em;
  height: 2.4em;
  border-radius: 50%;
  background-size: cover;
  background-position: center 18%;
}
.dc-top b {
  display: block;
  font-size: 1em;
  color: #fff;
}
.dc-top small {
  font-size: 0.75em;
  color: #5ce6a8;
}
.dc-mem {
  margin: 0.6em 7% 0;
  padding: 0.35em 0.6em;
  border-radius: 0.7em;
  border: 1px solid rgba(201, 164, 245, 0.3);
  background: rgba(123, 15, 201, 0.16);
  font-size: 0.78em;
  color: var(--violet-soft);
}
.dc-bubs {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  padding: 0.7em 7%;
}
.dc-bubs p {
  max-width: 88%;
  padding: 0.45em 0.65em;
  border-radius: 0.9em;
  font-size: 0.84em;
  line-height: 1.45;
}
.dc-bubs .ai {
  align-self: flex-start;
  border-top-left-radius: 0.3em;
  background: rgba(255, 255, 255, 0.07);
}
.dc-bubs .ai i {
  color: var(--violet-soft);
}
.dc-bubs .me {
  align-self: flex-end;
  border-top-right-radius: 0.3em;
  background: var(--grad);
  color: #fff;
}
.dc-input {
  margin: auto 7% 7%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.35em 0.4em 0.35em 0.8em;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.78em;
  color: var(--muted-2);
}
.dc-input span {
  width: 1.9em;
  height: 1.9em;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--grad);
  color: #fff;
}

/* [D5] 기기 자체가 접기/펼치기 버튼 */
.duo-device {
  cursor: pointer;
  outline: none;
}
.duo-device:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
  border-radius: var(--dr);
}
@media (prefers-reduced-motion: reduce) {
  .duo-device,
  .duo-flap {
    transition: none;
  }
}

/* ---- [G3][D8] 히어로 배치: 위 줄 = 아이폰·갤럭시 한 프레임(.hero-pair), 아래 줄 = iPhone Duo(가운데, 프레임 밖)
   프레임 안: iPhone 18 Pro(왼쪽) · Galaxy S26 Ultra(오른쪽, 조금 아래로 엇갈려 리듬감)
   펼친 뒤에는 세 기기가 서로 전혀 겹치지 않는다 ---- */
.hero-devices {
  display: grid;
  grid-template-columns: auto;
  grid-template-areas:
    'pair'
    'duo';
  justify-content: center;
  row-gap: 30px;
  min-height: 0;
  height: auto;
  width: 100%;
  max-width: 560px;
  margin-left: auto;
}
/* [D10] 아이폰·갤럭시는 보여 주기용 — 눌러도(클릭·터치) 아무 반응 없음. 글자 선택·길게 누르기 메뉴·탭 강조도 막는다 */
.hero-pair {
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  grid-area: pair;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas: 'phone galaxy';
  justify-content: center;
  column-gap: 44px;
}
.hero-pair .hero-phone {
  grid-area: phone;
  position: relative;
}
.hero .hero-phone .phone {
  --pw: 206px;
}
.hero-pair .hero-galaxy {
  grid-area: galaxy;
  position: relative;
  margin-top: 30px;
}
.hero .hero-galaxy .phone {
  --pw: 224px; /* 206 × 78.1 / 71.9 — 실제 크기 비율 */
}
.hero-devices .duo {
  --dw: 380px;
  grid-area: duo;
  justify-self: center;
  position: relative;
  z-index: 4;
}

/* ---- [D6] 아이폰·갤럭시: Duo 가 접혀 있는 동안 정방향(기울기 0°)으로 한가운데 포개어져 있다가,
   펼쳐지는 순간 제자리로 갈라지며 V 자(아이폰 -4° · 갤럭시 +4°)로 벌어짐 [D7] ----
   - 기울기는 안쪽 .phone 의 떠 있는 움직임(float·float-g)이 이미 주고 있으므로, 포개어진 동안에는
     바깥 래퍼가 반대로 같은 각도만큼 돌려 상쇄한다 → 래퍼가 0° 로 풀리는 동안 V 자가 자연스럽게 생김
   - 이동 거리: 두 폰 중심 사이 = 103(아이폰 반폭) + 44(간격) + 112(갤럭시 반폭) = 259px → 각자 절반씩.
     세로: 아이폰 중심 215 · 갤럭시 중심 30 + 234.5 → 각자 약 25px 씩 마주 보고 이동
   - Duo 펼침과 같은 시간·곡선(1.1초)으로 움직여 한 동작처럼 보이게 한다. 앞에는 아이폰 */
.hero-pair .hero-phone,
.hero-pair .hero-galaxy {
  transition: transform 1.1s cubic-bezier(0.65, 0, 0.25, 1);
}
.hero-pair .hero-phone {
  z-index: 5;
}
.hero-pair.is-together .hero-phone {
  transform: translate(129.5px, 25px) rotate(4deg);
}
.hero-pair.is-together .hero-galaxy {
  transform: translate(-129.5px, -25px) rotate(-4deg);
}
@media (prefers-reduced-motion: reduce) {
  .hero-pair .hero-phone,
  .hero-pair .hero-galaxy {
    transition: none;
  }
}