/* ============================================================
   VOICE APPS — 벨라 스케일 · 보밸 음성 진단실 카드
   ------------------------------------------------------------
   메인 index.html 의 #voice-apps 섹션에서만 씁니다.
   목소리앱 창에서 만들어 보낸 것을 그대로 씁니다.

   ⚠️ 모든 규칙이 #voice-apps 안으로 묶여 있습니다.
      홈페이지의 다른 곳에는 영향을 주지 않습니다.

   쓰는 그림 ·  img/app/bella.png · img/app/vobal.webp

   2026-09-14
   ============================================================ */
#voice-apps{max-width:1160px;margin:0 auto;padding:48px 24px;color:#193d43;font-family:inherit}#voice-apps *{box-sizing:border-box}#voice-apps .intro{margin-bottom:24px}#voice-apps .intro small{color:#347b6c;font-size:12px;letter-spacing:1px}#voice-apps h2{font-size:32px;line-height:1.35;margin:10px 0}#voice-apps .intro p{color:#61756f;line-height:1.7;margin:0}#voice-apps .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}#voice-apps .card{min-width:0;padding:28px;border:1px solid #eed0d9;border-radius:24px;background:linear-gradient(145deg,#fff0f3,#f8dce6);display:flex;flex-direction:column;overflow:hidden}#voice-apps .mint{background:linear-gradient(145deg,#edf9f3,#d4eee2);border-color:#b9ddce}#voice-apps .badge{font-size:13px;color:#994564;font-weight:700}#voice-apps .mint .badge{color:#287861}#voice-apps h3{font-size:29px;line-height:1.35;margin:10px 0}#voice-apps p{font-size:16px;line-height:1.7;margin:0;word-break:keep-all;overflow-wrap:anywhere}#voice-apps .scene{height:156px;position:relative;display:flex;align-items:center;justify-content:center;margin:12px 0;background:transparent;isolation:isolate}#voice-apps .scene:before{content:"";position:absolute;bottom:5px;width:65%;height:18px;border-radius:50%;background:#8d59651c;filter:blur(8px);z-index:-1}#voice-apps .mint .scene:before{background:#326e541c}#voice-apps .scene img{height:150px;max-width:80%;object-fit:contain;mix-blend-mode:multiply}#voice-apps .scene .vobal{position:absolute;right:22px;bottom:0;height:140px}#voice-apps .wave{width:65%;height:80px;margin-right:90px;opacity:.8}#voice-apps .chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 20px}#voice-apps .chips span{font-size:12px;line-height:1.5;border-radius:20px;padding:6px 10px;background:#ffffff85;color:#47615b}#voice-apps .cta{display:block;text-align:center;min-height:54px;padding:15px 12px;margin-top:auto;background:#9d4565;color:white;border-radius:12px;text-decoration:none;font-size:16px;line-height:1.5;font-weight:750}#voice-apps a.cta:hover{background:#843653}#voice-apps a:focus-visible{outline:3px solid #116cd8;outline-offset:4px}#voice-apps .mint .cta{background:#267b64}#voice-apps .cta[aria-disabled]{background:#c2dccf;color:#416253}#voice-apps .note{font-size:12px;line-height:1.6;color:#597168;margin-top:12px}@media(max-width:640px){#voice-apps{padding:30px 16px}#voice-apps h2{font-size:26px}#voice-apps .grid{grid-template-columns:1fr;gap:16px}#voice-apps .card{padding:22px}#voice-apps h3{font-size:26px}#voice-apps .scene{height:130px;margin:8px 0}#voice-apps .scene img{height:128px}#voice-apps .scene .vobal{height:122px}#voice-apps .intro p{font-size:14px}}
#voice-apps .trial-benefit{border-top:1px solid #bd879a55;padding:14px 0 16px;margin-top:auto;display:flex;flex-direction:column;gap:5px}#voice-apps .trial-benefit>span{font-size:12px;font-weight:700;color:#914462}#voice-apps .trial-benefit strong{font-size:20px;line-height:1.4;word-break:keep-all}#voice-apps .trial-benefit small{font-size:13px;line-height:1.5;color:#516b61}#voice-apps .mint .trial-benefit{border-color:#77a88e55}#voice-apps .mint .trial-benefit>span{color:#286e57}#voice-apps .trial-benefit+.cta{margin-top:0}

#voice-apps .subscription-entry{margin-top:20px;padding:24px;border:1px solid #d8e4dd;border-radius:18px;background:#fff;display:flex;align-items:center;justify-content:space-between;gap:20px}#voice-apps .subscription-entry strong{font-size:18px;line-height:1.5;word-break:keep-all}#voice-apps .subscription-entry p{font-size:14px;color:#64776d;margin-top:5px}#voice-apps .subscription-actions{display:flex;flex-direction:column;align-items:flex-end;gap:10px;flex-shrink:0}#voice-apps .subscription-actions>button,#voice-apps .subscription-actions>a{font:inherit;font-weight:700;color:#275f4e;background:white;border:1px solid #377c63;border-radius:12px;padding:12px 24px;min-height:48px;opacity:1;display:flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer}#voice-apps .subscription-actions>a:hover{background:#eafaf7}#voice-apps .subscription-actions>span{font-size:12px;color:#576f61}#voice-apps .sns-link{font:inherit;border:0;background:transparent;color:#275f4e;text-decoration:underline;text-underline-offset:3px;padding:8px 2px;opacity:1;cursor:pointer}@media(max-width:640px){#voice-apps .subscription-entry{padding:20px;flex-direction:column;align-items:stretch;gap:16px}#voice-apps .subscription-actions{align-items:stretch}#voice-apps .subscription-actions>span{text-align:center}}

/* 홈페이지에 맞춘 크기 — 글자와 누를 자리는 줄이지 않았습니다 */
#voice-apps{padding:28px 24px}
#voice-apps .intro{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:16px}
#voice-apps .intro h2{font-size:25px;margin:5px 0;line-height:1.35}
#voice-apps .intro h2 br{display:none}
#voice-apps .intro>p{font-size:13px;line-height:1.6}
#voice-apps .grid{gap:16px}
#voice-apps .card{padding:20px;border-radius:18px;display:grid;grid-template-columns:minmax(0,1fr) 135px;gap:6px 12px;align-content:start}
#voice-apps .badge{grid-column:1;font-size:12px}
#voice-apps .card h3{grid-column:1;font-size:24px;margin:2px 0}
#voice-apps .card>p:not(.note){grid-column:1;font-size:14px;line-height:1.6}
#voice-apps .scene{grid-column:2;grid-row:1 / 4;width:135px;height:116px;margin:0;align-self:center}
#voice-apps .scene img{height:110px;max-width:100%;width:135px}
#voice-apps .scene .vobal{height:100px;width:auto;right:0;bottom:0}
#voice-apps .wave{position:absolute;left:0;width:70px;height:60px;margin:0;bottom:18px}
#voice-apps .chips{grid-column:1 / -1;gap:5px;margin:8px 0 3px}
#voice-apps .chips span{font-size:11px;padding:4px 8px}
#voice-apps .trial-benefit{grid-column:1 / -1;margin:4px 0 0;padding:9px 0;display:grid;grid-template-columns:auto 1fr;gap:3px 10px;align-items:center}
#voice-apps .trial-benefit>span{font-size:11px}
#voice-apps .trial-benefit strong{font-size:17px}
#voice-apps .trial-benefit small{grid-column:2;font-size:12px}
#voice-apps .cta{grid-column:1 / -1;min-height:46px;padding:11px 12px;font-size:15px;margin:0}
#voice-apps .note{grid-column:1 / -1;margin:2px 0 0;font-size:11px;line-height:1.5}
#voice-apps .subscription-entry{margin-top:12px;padding:10px 14px;border-radius:12px;gap:12px}
#voice-apps .subscription-entry strong{font-size:14px}
#voice-apps .subscription-entry p{display:none}
#voice-apps .subscription-actions{flex-direction:row;align-items:center;gap:16px;flex-shrink:1}
#voice-apps .subscription-actions>button,#voice-apps .subscription-actions>a{min-height:44px;padding:8px 14px;font-size:14px;border-radius:9px}
#voice-apps .sns-link{min-height:44px}
@media(max-width:760px){#voice-apps .card{grid-template-columns:minmax(0,1fr) 100px}#voice-apps .scene{width:100px}#voice-apps .scene img{width:100px}#voice-apps .subscription-entry{flex-wrap:wrap}#voice-apps .subscription-actions{flex-wrap:wrap;gap:4px 12px}}
@media(max-width:640px){#voice-apps{padding:22px 16px}#voice-apps .intro{display:block;margin-bottom:14px}#voice-apps .intro h2{font-size:23px}#voice-apps .intro>p{margin-top:7px}#voice-apps .intro>p br{display:none}#voice-apps .grid{gap:12px}#voice-apps .card{padding:16px;gap:5px 8px}#voice-apps .card h3{font-size:23px}#voice-apps .scene{height:100px}#voice-apps .scene img{height:94px}#voice-apps .scene .vobal{height:94px}#voice-apps .cta{min-height:48px}#voice-apps .subscription-entry{flex-direction:column;align-items:stretch;padding:12px 14px;gap:6px}#voice-apps .subscription-actions{flex-direction:row;align-items:center;justify-content:space-between;gap:4px 10px}#voice-apps .subscription-actions>span{text-align:left;font-size:11px}}

/* 그림을 크게 — 카드 틀은 그대로 두고 그림만 키웠습니다 */
#voice-apps .card{position:relative;isolation:isolate;grid-template-columns:minmax(0,1fr) 168px;background:radial-gradient(ellipse at 95% 12%,#fff7fa 0,transparent 60%),linear-gradient(135deg,#fceaf0,#f5d6e2)}
#voice-apps .card.mint{background:radial-gradient(ellipse at 95% 12%,#f5fff9 0,transparent 60%),linear-gradient(135deg,#e8f7ee,#cee9dc)}
#voice-apps .scene{width:168px;height:116px;overflow:visible;align-self:center}
#voice-apps .scene img{width:192px;height:156px;max-width:none;flex:none;object-fit:contain;mix-blend-mode:multiply;filter:drop-shadow(0 5px 5px #683b4712)}
#voice-apps .scene:before{width:90%;height:20px;bottom:-7px;background:#a64e6920;filter:blur(10px)}
#voice-apps .scene .vobal{height:143px;width:90px;right:5px;bottom:-11px;filter:drop-shadow(0 5px 5px #28583f15)}
#voice-apps .wave{width:100px;height:78px;left:-2px;bottom:12px;opacity:.55}
#voice-apps .chips{position:relative;z-index:1;margin-top:14px}
@media(min-width:641px) and (max-width:900px){#voice-apps .card{grid-template-columns:minmax(0,1fr) 120px}#voice-apps .scene{width:120px}#voice-apps .scene img{width:145px;height:138px}#voice-apps .scene .vobal{height:130px;width:78px;right:0}#voice-apps .wave{width:78px;left:-10px}}
@media(max-width:640px){#voice-apps .card{grid-template-columns:minmax(0,1fr) 120px}#voice-apps .scene{width:120px;height:100px}#voice-apps .scene img{width:150px;height:136px}#voice-apps .scene .vobal{height:127px;width:80px;bottom:-9px;right:-2px}#voice-apps .wave{width:76px;height:65px;left:-8px;bottom:5px}#voice-apps .card>p:not(.note){font-size:14px}#voice-apps .card h3{font-size:22px}}
@media(max-width:360px){#voice-apps .card{grid-template-columns:minmax(0,1fr) 100px}#voice-apps .scene{width:100px}#voice-apps .scene img{width:130px;height:125px}#voice-apps .scene .vobal{width:73px;height:120px}#voice-apps .card h3{font-size:20px}}