/* 기능 카드 + 자세히 보기 팝업 - 홈(index.html)과 기능소개(features.html)가 함께 쓴다 */
/* 기능 카드 */
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:1000px){.features{grid-template-columns:repeat(2,1fr)}}
.card{padding:22px 20px;border-radius:20px;transition:transform .18s,border-color .18s}
.card:hover{transform:translateY(-3px);border-color:var(--gline2)}
.card .k{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:rgba(157,184,255,.16);color:var(--acc);border:1px solid rgba(157,184,255,.3)}
.card .k svg{width:21px;height:21px}
/* 주요 기능 카드: 흰 아이콘 + 또렷한 흰 테두리 */
.features .card{border:1px solid rgba(255,255,255,.42)}
.features .card:hover{border-color:#fff}
.features .card[hidden]{display:none}
.features .card{position:relative}
.fx-new{position:absolute;top:14px;right:14px;padding:2px 9px;border-radius:999px;background:#f2c66d;color:#000;font-size:11px;font-weight:900;letter-spacing:.06em}
/* 기능 카드 → 자세히 보기 팝업 */
.features .card[data-fk]{cursor:pointer;position:relative}
.features .card[data-fk]:focus-visible{outline:2px solid #fff;outline-offset:3px}
.fx-more{display:inline-block;margin-top:12px;font-size:12.5px;font-weight:700;color:#fff;opacity:.55;transition:opacity .15s}
.fx-more::after{content:" \2192"}
.features .card[data-fk]:hover .fx-more,.features .card[data-fk]:focus-visible .fx-more{opacity:1}
.fx-ov{position:fixed;inset:0;z-index:6000;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(4,6,14,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.fx-ov[hidden]{display:none}
html.fx-lock{overflow:hidden}
.fx-box{position:relative;width:min(1000px,100%);max-height:calc(100vh - 48px);overflow:auto;border-radius:24px;border:1px solid rgba(255,255,255,.85);background:#0d0f17;box-shadow:0 30px 80px rgba(0,0,0,.6)}
/* 사진 칸 = 같은 높이의 전시 틀. 사진은 실제 앱 크기(2배로 찍은 사진의 절반)로 가운데에 - features.js 가 사진별 최대 폭을 정한다 */
.fx-shot{box-sizing:border-box;height:min(50vh,440px);background:radial-gradient(120% 90% at 50% 0%,rgba(90,120,255,.16),transparent 62%),#07080d;border-bottom:1px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;padding:26px;overflow:hidden}
.fx-shot img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;border-radius:10px;border:1px solid rgba(255,255,255,.22);box-shadow:0 14px 36px rgba(0,0,0,.55)}
.fx-body{padding:22px 26px 20px}
.fx-head{display:flex;align-items:center;gap:12px}
.fx-head .k{width:42px;height:42px;flex:none;border-radius:13px;display:flex;align-items:center;justify-content:center;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.55)}
.fx-head .k svg{width:21px;height:21px}
.fx-head h3{font-size:21px;font-weight:800;color:#fff}
#fxDesc{margin-top:12px;color:#d7dbef;font-size:15.5px;line-height:1.8;word-break:keep-all}
.fx-nav{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:16px;color:var(--muted);font-size:13px}
.fx-nav button{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.55);background:transparent;color:#fff;font-size:20px;line-height:1;cursor:pointer}
.fx-nav button:hover{background:rgba(255,255,255,.12);border-color:#fff}
.fx-x{position:absolute;top:12px;right:12px;z-index:2;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.8);background:rgba(0,0,0,.6);color:#fff;font-size:22px;line-height:1;cursor:pointer}
.fx-x:hover{background:#fff;color:#000}
@media(max-width:600px){.fx-ov{padding:10px}.fx-body{padding:16px 16px 14px}.fx-head h3{font-size:18px}#fxDesc{font-size:14.5px}.fx-shot{padding:14px;height:min(42vh,320px)}}

.features .card .k{color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.55)}
html[data-theme="light"] .features .card{border-color:rgba(16,19,42,.3)}
html[data-theme="light"] .features .card:hover{border-color:#10132a}
html[data-theme="light"] .features .card .k{color:#10132a;background:rgba(16,19,42,.06);border-color:rgba(16,19,42,.35)}
.card h3{margin:14px 0 6px;font-size:16px;font-weight:800;color:#fff}
.card p{color:var(--muted);font-size:13.5px;line-height:1.7;word-break:keep-all}
.card .tag{display:inline-block;margin-top:14px;font-size:12px;font-weight:600;color:#dfe5ff;border:1px solid var(--gline);border-radius:999px;padding:3px 11px;background:rgba(255,255,255,.05)}
html[data-theme="light"] .card h3{color:#10132a}
html[data-theme="light"] .card .tag{color:#22264a}
@media(max-width:720px){.features{grid-template-columns:1fr}}
.fx-shot[hidden]{display:none}
.features .empty{grid-column:1/-1}
.feat-all-wrap{display:flex;justify-content:center;margin:22px 0 6px}
.feat-all{display:inline-flex;align-items:center;gap:6px;padding:11px 22px;border-radius:999px;border:1px solid rgba(255,255,255,.85);color:#fff;font-weight:700;font-size:14.5px;text-decoration:none;transition:background .15s}
.feat-all::after{content:"\2192"}
.feat-all:hover{background:rgba(255,255,255,.12)}
html[data-theme="light"] .feat-all{color:#10132a;border-color:rgba(16,19,42,.5)}
/* 유튜브 숏폼(재생목록 「우주코드 활용」)이 있는 카드: 카드엔 '영상' 표시, 팝업엔 사진 옆에 세로 영상 */
.fx-vid{display:inline-flex;align-items:center;gap:4px;margin:12px 8px 0 0;padding:2px 9px 2px 7px;border-radius:999px;border:1px solid rgba(255,255,255,.85);color:#fff;font-size:11.5px;font-weight:800;vertical-align:middle}
.fx-vid svg{width:11px;height:11px}
/* 영상이 있으면 팝업을 좌우로: 왼쪽=사진·설명, 오른쪽=세로 영상(팝업 높이 전체) */
.fx-box.with-yt{width:min(1240px,100%);display:flex;align-items:stretch}
.fx-main{flex:1 1 auto;min-width:0}
.fx-side{flex:none;display:flex;align-items:center;justify-content:center;padding:22px;border-left:1px solid rgba(255,255,255,.25);background:#07080d}
.fx-side[hidden]{display:none}
.fx-side iframe{display:block;height:min(calc(100vh - 92px),760px);aspect-ratio:9/16;width:auto;border:1px solid rgba(255,255,255,.85);border-radius:14px;background:#000}
.fx-box.with-yt .fx-x{right:auto;left:12px}
@media(max-width:860px){.fx-box.with-yt{display:block}.fx-box.with-yt .fx-x{left:auto;right:12px}.fx-side{border-left:0;border-top:1px solid rgba(255,255,255,.25)}.fx-side iframe{height:min(78vh,620px)}}
/* 기능 카드: 영상이 있으면 오른쪽 위에 유튜브 아이콘 (features.js 가 단다) */
.card[data-yt]{position:relative}
.fx-ytic{position:absolute;top:18px;right:18px;width:34px;height:24px;display:flex;align-items:center;justify-content:center}
.fx-ytic svg{width:34px;height:24px;display:block}
.card[data-new="1"] .fx-ytic{right:72px;top:14px}