/* ══════════════════════════════════════════════════════
   카드 펼치기 — '우리 앱의 명작들'(.feats, 6칸) · '박스 & 코치'(.boxes, 4칸)
   기본 격자 ↔ 펼친 카드(폰 목업) + 나머지는 아래 한 줄(아이콘 · 파란 라벨 · 짧은 설명 유지)
   동작은 features.js. 폰 프레임은 hero-demo.css 의 .phone/.screen 을 쓴다.
   ══════════════════════════════════════════════════════ */
[data-clip]{cursor:pointer;text-align:left;transition:border-color .17s ease,box-shadow .17s ease,background .2s}
.feat:hover,.feat:focus-visible,.feat.pick{border-color:var(--sun);outline:none}
.feat.pick,.bx.pick{box-shadow:0 0 0 2px var(--sun)}
.feat .tx{display:flex;flex-direction:column;gap:10px;min-width:0}
.more{display:none;margin:6px 0 0;padding:0;list-style:none}
.more li{position:relative;padding:8px 0 8px 22px;font-size:16px}
.more li::before{content:"";position:absolute;left:2px;top:15px;width:9px;height:9px;border-radius:50%;background:var(--sun)}
.feat .more li{border-top:1px solid var(--ink-line);color:rgba(245,242,235,.9)}
.slot{display:none}
.fphone{display:none}

/* ── 명작들: 펼친 상태 ── */
.feats.open{grid-template-columns:repeat(5,1fr)}
.feats.open .feat{padding:16px 16px 18px;gap:10px}
.feats.open .feat .ic{width:48px;height:48px;border-radius:12px}
.feats.open .feat .ic img{width:38px}
.feats.open .feat .tx{gap:6px}
.feats.open .feat .k{font-size:11px}
.feats.open .feat h3{font-size:16px}
.feats.open .feat p{font-size:13px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.feats.open .feat.on{grid-column:1/-1;order:-1;padding:clamp(24px,4vw,48px);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(20px,4vw,48px);
  border-color:var(--sun);box-shadow:0 0 0 2px var(--sun);cursor:zoom-out}
.feats.open .feat.on .ic{width:88px;height:88px;border-radius:22px;align-self:start}
.feats.open .feat.on .ic img{width:68px}
.feats.open .feat.on .tx{gap:10px}
.feats.open .feat.on .k{font-size:12px}
.feats.open .feat.on h3{font-size:clamp(26px,3vw,40px)}
.feats.open .feat.on p{font-size:17px;display:block;-webkit-line-clamp:unset;overflow:visible}

/* ── 박스 & 코치 ── */
.bx{border:2px solid transparent}
.bx:hover,.bx:focus-visible,.bx.pick{border-color:var(--sun);outline:none}
.bx .sub{margin:8px 0 0;font-size:14px;color:rgba(11,19,43,.72)}
.bx .more li{border-top:1px solid rgba(11,19,43,.12);color:var(--ink)}
.bx .more li::before{background:var(--deep)}
.boxes.open{grid-template-columns:repeat(3,1fr)}
.boxes.open .bx{flex-direction:row;align-items:stretch}
.boxes.open .bx .im{aspect-ratio:auto;width:96px;flex:none}
.boxes.open .bx .im img{width:62%}
.boxes.open .bx .tx{padding:14px 16px}
.boxes.open .bx h3{font-size:16px;margin-top:8px}
.boxes.open .bx .sub{font-size:13px}
.boxes.open .bx.on{grid-column:1/-1;order:-1;display:grid;grid-template-columns:clamp(140px,18vw,220px) 1fr auto;align-items:center;
  border-color:var(--sun);box-shadow:0 0 0 2px var(--sun);cursor:zoom-out}
.boxes.open .bx.on .im{width:auto;height:100%;align-self:stretch}
.boxes.open .bx.on .tx{padding:clamp(22px,3.4vw,40px)}
.boxes.open .bx.on h3{font-size:clamp(24px,2.8vw,36px)}
.boxes.open .bx.on .sub{font-size:16px}

/* 펼친 칸: 설명 목록 + 폰 */
[data-expand].open .on .more{display:block}
[data-expand].open .on .slot{display:block;padding:clamp(16px,3vw,32px) clamp(16px,3vw,32px) clamp(16px,3vw,32px) 0}
.feats.open .feat.on .slot{padding:0}
.on .fphone{display:block;--pw:250px;transform:rotate(-2deg)}
[data-expand].open .on .slot{display:flex;flex-direction:column;align-items:center;gap:18px}
.feat .skin{background:rgba(245,242,235,.08);border-color:var(--ink-line)}

/* View Transitions (이름은 features.js 가 전환 동안만 붙인다)
   · 카드 상자: 스냅샷 이미지를 쓰지 않고 전환 그룹 자체에 배경·테두리를 그린다 → 그룹의 크기가
     바뀌는 동안 테두리 두께·모서리는 그대로, 상자만 부푼다.
   · 안의 요소(vp): 각자 작은 자리 → 큰 자리로 이동·확대. vnew(설명 목록·폰)는 새로 나타난다. */
::view-transition-group(*){animation-duration:.5s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
::view-transition-old(*.vc),::view-transition-new(*.vc){display:none}
::view-transition-group(*.vc){border-radius:var(--r);box-sizing:border-box}
::view-transition-group(*.vc-feat){background:var(--ink-2);border:1px solid var(--ink-line)}
::view-transition-group(*.vc-box){background:var(--cream);border:2px solid transparent;overflow:hidden}
::view-transition-group(*.vpick){border-color:var(--sun);box-shadow:0 0 0 2px var(--sun)}
::view-transition-group(*.vunpick){border-color:var(--sun);box-shadow:0 0 0 2px var(--sun)}
/* 원래 있던 글자·아이콘: 겹쳐 보이는 크로스페이드 없이 한 장이 그대로 커지며(작아지며) 이동 */
::view-transition-old(*.vp){display:none}
::view-transition-new(*.vp){animation:none}
/* 펼칠 때만 있는 것(설명 목록 · 폰)은 상자가 거의 커진 뒤 서서히 나타나고, 접을 때는 먼저 사라진다 */
::view-transition-new(*.vnew){display:block;animation:vt-in .32s ease .2s both}
::view-transition-old(*.vnew){display:block;animation:vt-out .15s ease both}
@keyframes vt-in{from{opacity:0;transform:translateY(8px)}}
@keyframes vt-out{to{opacity:0}}

@media (max-width:860px){
  /* 좁은 화면: 펼친 칸은 한 줄 전체, 작은 칸은 두 칸씩 */
  .feats.open,.boxes.open{grid-template-columns:minmax(0,1fr);gap:12px}
  /* 나머지 칸: 한 줄 가로 스와이프(features.js 가 .rail 로 모은다) — 다음 칸이 살짝 보이게 */
  [data-expand] .rail{display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 calc(-1 * var(--gut, 16px));padding:2px var(--gut, 16px) 6px;scroll-padding:0 var(--gut, 16px)}
  /* index.html 의 명작 캐러셀 .rail(JS 드래그: touch-action:pan-y) 규칙이 섞이지 않게 — 여기선 기본 가로 스크롤 */
  [data-expand] .rail{touch-action:auto;cursor:auto;user-select:auto;-webkit-user-select:auto}
  [data-expand] .rail::-webkit-scrollbar{display:none}
  [data-expand] .rail > *{flex:0 0 min(44%,200px);scroll-snap-align:start}
  .feats.open .feat.on,.boxes.open .bx.on{grid-template-columns:1fr;text-align:left;justify-items:start}
  .boxes.open .bx{flex-direction:column}
  .boxes.open .bx .im{width:auto;aspect-ratio:4/3}
  .boxes.open .bx.on .im{display:none}
  [data-expand].open .on .slot{justify-self:center;padding:0 0 24px}
  .feats.open .feat.on .slot{padding:0}
}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*){animation-duration:0s}
}