@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&family=Nanum+Brush+Script&family=Gowun+Batang:wght@400;700&display=swap');
/* 음양관식 상세: 화면 단위 블록 */
.dv{position:relative;min-height:86svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:70px 26px;overflow:hidden}
.dv.short{min-height:auto;padding:60px 26px}
.dv.white{background:#fff;color:#111}
.dv.pink{background:#fff url(../img/d_pink.jpg) center/cover;color:#111}
.dv.blush{background:linear-gradient(180deg,#fff,#fbe7ea);color:#111}
.dv.black{background:#0B0B0E;color:#fff}
.dv.photo{color:#fff;justify-content:flex-end;padding-bottom:110px}
.dv.photo>img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dv.photo:before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,0) 35%,rgba(0,0,0,.8))}
.dv>*{position:relative;z-index:2}
.big{font:800 29px/1.45 var(--body);letter-spacing:-.04em}
.mid{font:700 22px/1.55 var(--body);letter-spacing:-.03em}
.sm{font:500 15.5px/1.75 var(--body);color:#666}
.dv.black .sm{color:#aaa}
.pen{font:400 46px/1.15 'Nanum Pen Script';color:#D8344B;letter-spacing:0}
.pen.xl{font-size:72px}
.brush{font:400 58px/1.1 'Nanum Brush Script';color:#D8344B}
.hl-red{background:#E8364F;color:#fff;padding:0 6px}
.hl-box{border:2px solid #E8364F;color:#E8364F;padding:0 8px}
.hl-pur{background:#5B3FD8;color:#fff;padding:0 6px}
.hl-ul{text-decoration:underline;text-decoration-color:#E8364F;text-decoration-thickness:3px;text-underline-offset:6px}
.c-red{color:#E8364F}.c-pur{color:#5B3FD8}.c-gray{color:#aaa}
.sp20{height:20px}.sp40{height:40px}.sp80{height:80px}
/* 카톡 프로필 목업 */
.kprof{width:270px;margin:26px auto 0;background:#fff;border-radius:20px;box-shadow:0 14px 40px rgba(0,0,0,.12);padding:16px;display:flex;gap:12px;align-items:center;text-align:left}
.kprof .av{width:48px;height:48px;border-radius:18px;background:#bfd3ea;display:flex;align-items:center;justify-content:center;font-size:24px}
.kprof b{font-size:15px;color:#111}.kprof span{display:block;font-size:12.5px;color:#999;margin-top:2px}
.kinput{width:290px;margin:26px auto 0;background:#fff;border-radius:99px;box-shadow:0 10px 30px rgba(0,0,0,.1);display:flex;align-items:center;gap:10px;padding:8px 8px 8px 16px;text-align:left}
.kinput .tx{flex:1;font-size:15px;color:#222;min-height:22px}
.kinput .tx:after{content:'|';animation:blink 1s infinite;color:#E8364F;margin-left:1px}
@keyframes blink{50%{opacity:0}}
.kinput .send{width:34px;height:34px;border-radius:50%;background:#FEE500;display:flex;align-items:center;justify-content:center;font-size:15px}
/* 수신 화면 */
.callui{position:relative;z-index:2;width:260px;margin:0 auto 26px;background:rgba(30,30,36,.82);backdrop-filter:blur(10px);border-radius:22px;padding:16px 18px;display:flex;align-items:center;gap:12px;text-align:left;color:#fff;animation:ring 1.2s infinite}
@keyframes ring{0%,100%{transform:translateX(0)}10%{transform:translateX(-3px)}20%{transform:translateX(3px)}30%{transform:translateX(0)}}
.callui .av{width:44px;height:44px;border-radius:50%;background:#556;display:flex;align-items:center;justify-content:center}
.callui b{font-size:16px}.callui span{display:block;font-size:12px;color:#bbb}
.callui .bt{margin-left:auto;display:flex;gap:8px}.callui .bt i{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-style:normal}
/* 잠금화면 */
.lock2{width:290px;margin:28px auto 0;border-radius:36px;background:linear-gradient(180deg,#f7c9cf,#e98d99);padding:30px 16px 22px;box-shadow:0 20px 50px rgba(200,60,80,.25);color:#fff}
.lock2 .tm{font:200 64px/1 var(--body);letter-spacing:-.02em}
.lock2 .dt{font-size:13px;margin:6px 0 18px;opacity:.9}
.lock2 .nt{background:rgba(255,255,255,.75);color:#111;border-radius:16px;padding:10px 12px;display:flex;gap:10px;align-items:center;text-align:left;margin-top:8px;opacity:0;transform:translateY(10px);transition:all .6s}
.lock2 .nt.in{opacity:1;transform:none}
.lock2 .nt .ic{width:30px;height:30px;border-radius:8px;background:#FEE500;display:flex;align-items:center;justify-content:center;font-size:14px}
.lock2 .nt b{font-size:13px}.lock2 .nt span{display:block;font-size:12.5px;color:#444}
.lock2 .nt small{margin-left:auto;font-size:11px;color:#888;align-self:flex-start}
/* 후기 카드 (사진 + 빨간 인용) */
.rvp{width:100%;max-width:340px;margin:14px auto;background:#151518;border-radius:18px;overflow:hidden;text-align:left;color:#ddd}
.rvp .ph{height:150px;position:relative}.rvp .ph img{width:100%;height:100%;object-fit:cover;filter:brightness(.5)}
.rvp .ph .who{position:absolute;left:14px;bottom:12px;display:flex;gap:8px;align-items:center;color:#fff;font-size:13px}
.rvp .ph .who i{width:30px;height:30px;border-radius:50%;background:#fff;color:#000;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:15px}
.rvp .bd{padding:14px 16px 18px;font-size:14px;line-height:1.75}
.rvp .bd .q{color:#FF6B7F;font-weight:800;font-size:15px;margin-bottom:8px}
.rvp .bd mark{background:#E8364F;color:#fff;padding:1px 4px;font-weight:700}
/* 벤 다이어그램 */
.venn{position:relative;width:280px;height:170px;margin:26px auto}
.venn i{position:absolute;top:0;width:170px;height:170px;border-radius:50%;border:1.5px solid #E8364F;display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:800;font-size:17px;color:#E8364F;background:repeating-radial-gradient(circle,rgba(232,54,79,.06) 0 2px,transparent 2px 6px)}
.venn i:first-child{left:0;padding-right:50px}.venn i:last-child{right:0;padding-left:50px;border-color:#5B3FD8;color:#5B3FD8;background:repeating-radial-gradient(circle,rgba(91,63,216,.06) 0 2px,transparent 2px 6px)}
.venn b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:14px;color:#111;background:#fff;padding:2px 6px;border-radius:6px}
/* 대비 인용 */
.qt{font:400 26px/1.4 'Nanum Pen Script';color:#ddd;margin:8px 0}
.lbl{display:inline-block;background:#E8364F;color:#fff;font:800 22px var(--body);padding:8px 18px;margin:18px 0 6px}
/* 배지 */
.badges{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.badges span{border:1.5px solid #5B3FD8;color:#5B3FD8;border-radius:99px;padding:8px 16px;font-weight:800;font-size:14px;background:#fff}
.dv.black .badges span{background:transparent;color:#C9BFFF;border-color:#7a64e8}
/* 목차 카드 */
.tocw{width:100%;max-width:360px;margin:26px auto 0;text-align:left;background:#fff;border-radius:20px;box-shadow:0 10px 40px rgba(0,0,0,.08);padding:22px 20px;color:#111}
.tocw .pt{font:800 12px var(--body);letter-spacing:.12em;color:#E8364F;margin:18px 0 6px}.tocw .pt:first-child{margin-top:0}
.tocw .ch{font-weight:800;font-size:15.5px;margin:8px 0 4px}
.tocw li{list-style:none;font-size:13.5px;color:#666;padding:3px 0 3px 12px;position:relative}
.tocw li:before{content:'·';position:absolute;left:2px;color:#E8364F;font-weight:800}
/* 결과지 미리보기 캐러셀 */
.shots{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 26px 16px;margin:20px -26px 0;scrollbar-width:none}
.shots::-webkit-scrollbar{display:none}
.shots img{flex:0 0 62%;scroll-snap-align:center;border-radius:18px;box-shadow:0 14px 34px rgba(0,0,0,.35)}
/* 만드는 과정 */
.steps3{width:100%;max-width:340px;margin:24px auto 0;display:grid;gap:10px;text-align:left}
.steps3 div{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:16px 18px}
.steps3 b{display:block;color:#fff;font-size:16px;margin-bottom:4px}.steps3 b em{font-style:normal;color:#E3C27A;margin-right:8px}
.steps3 span{font-size:13.5px;color:#bbb;line-height:1.6}
/* 음양관식 하단바 */
.ubar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:440px;z-index:45;background:linear-gradient(90deg,#9E1C33,#E8364F);display:flex;align-items:center;gap:10px;padding:10px 12px 14px;transition:transform .3s}
.ubar .cd{color:#fff;font-size:10.5px;line-height:1.3;min-width:96px;opacity:.95}.ubar .cd b{display:block;font:800 16px var(--body);color:#FFE27A;letter-spacing:.02em}
.ubar .go{flex:1;height:50px;border:0;border-radius:12px;background:#fff;color:#C51F3A;font:800 16px var(--body);cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.2)}
.ubar .bub{position:absolute;top:-30px;right:28px;background:#fff;color:#E8364F;font-size:12px;font-weight:800;padding:5px 11px;border-radius:99px;box-shadow:0 4px 12px rgba(0,0,0,.2);animation:bob2 1.6s infinite}
.ubar .bub:after{content:'';position:absolute;left:50%;bottom:-5px;transform:translateX(-50%);border:6px solid transparent;border-top-color:#fff;border-bottom:0}
.cat{width:250px;margin:16px auto}