/* ── 미친 색깔 집합 · 브랜드 테마 (헤드라인 이미지 톤) ──
   보라 질감 배경 + 노랑 레터링 + 흰 글씨. 각 페이지 <body class="pg-*">로 범위 지정 */
@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap');
:root{ --bv:#AD1AAC; --by:#FFCD00; --ink2:#2D2926; --glass:rgba(64,0,66,.46); --line:rgba(255,255,255,.18); }
html{background:var(--bv)}
body{background:transparent !important;color:#fff !important}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse min(460px,62vw) 120vh at 50% 0,rgba(232,70,228,.34) 0%,rgba(232,70,228,.12) 55%,rgba(232,70,228,0) 100%),linear-gradient(rgba(105,0,105,.24),rgba(105,0,105,.24)),var(--bv) url("bg-texture.webp") 0 0/600px 600px repeat}
body{overflow-x:hidden}
.disp{font-family:'Black Han Sans','Pretendard Variable',Pretendard,sans-serif;font-weight:400;letter-spacing:-.3px}

/* ── 측정 화면 ── */
.pg-measure .scrim{background:radial-gradient(ellipse 70% 60% at 50% 55%, rgba(176,26,175,.74) 0%, rgba(170,24,170,.4) 55%, rgba(160,20,160,.12) 100%)}
.pg-measure .heroband{--h:min(72vw,360px);height:var(--h);width:calc(var(--h) * 2.357);position:relative;left:50%;transform:translateX(-50%);margin-top:-22px;background:url("head-wide.webp") center/cover no-repeat;-webkit-mask-image:linear-gradient(180deg,#000 0,#000 90%,transparent 100%),linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,#000 0,#000 90%,transparent 100%),linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%);mask-composite:intersect}
.pg-measure header{text-shadow:none}
.pg-measure .heroband + .sub{margin-top:2px;font-size:14px;font-weight:600}
.pg-measure .letter{display:block;width:100%;max-width:330px;margin:6px auto 0;filter:drop-shadow(0 4px 0 rgba(70,0,70,.35))}
.pg-measure .logo{height:28px;margin-top:12px}
.pg-measure h1{font-family:'Black Han Sans',sans-serif;font-weight:400;font-size:23px;margin-top:14px;color:#fff}
.pg-measure h1 .y{color:var(--by)}
.pg-measure .sub{opacity:.92}
.pg-measure .limit{background:rgba(70,0,70,.35)}
.pg-measure .viewbox{border-color:rgba(255,255,255,.9);box-shadow:0 18px 44px rgba(60,0,60,.45)}
.pg-measure .hint{text-shadow:none;opacity:.92}
.pg-measure .primary{color:var(--ink2)}
.pg-measure button:disabled{opacity:1;background:rgba(255,255,255,.16) !important;color:rgba(255,255,255,.6) !important}
.pg-measure .ghost{background:rgba(255,255,255,.16);color:#fff}
.pg-measure .result{background:var(--glass);border:1px solid var(--line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 16px 40px rgba(60,0,60,.35)}
.pg-measure .chip{border-color:rgba(255,255,255,.3)}
.pg-measure .pct{font-family:'Black Han Sans',sans-serif;font-weight:400;font-size:78px;letter-spacing:-1px}
.pg-measure .disc b,.pg-measure .cDisc b{font-family:'Black Han Sans',sans-serif;font-weight:400}
.pg-measure .tierNote{opacity:.78}
.pg-measure .consent{background:rgba(255,255,255,.1)}
.pg-measure .couponCard{background:#7d0e7c;border:2px solid rgba(255,205,0,.55)}
.pg-measure .snsMsg{color:var(--by)}
.pg-measure .snsInfo{background:rgba(255,255,255,.1)}
.pg-measure .snsInfo b{color:var(--by)}
.pg-measure .foot a{color:var(--by)}
.pg-measure .foot .note{opacity:.65}
.pg-measure .drop img{box-shadow:0 10px 26px rgba(60,0,60,.35)}

/* ── 쿠폰 ── */
.pg-coupon h1{font-family:'Black Han Sans',sans-serif;font-weight:400;font-size:26px;color:#fff;margin-top:10px}
.pg-coupon .card{background:#6f0d6e;border:2px solid rgba(255,205,0,.55);box-shadow:0 16px 40px rgba(60,0,60,.4)}
.pg-coupon .syncpct,.pg-coupon .disc b{font-family:'Black Han Sans',sans-serif;font-weight:400}
.pg-coupon .statusBar.ok{background:rgba(255,255,255,.14);color:var(--by)}
.pg-coupon .statusBar.spent{background:rgba(255,77,109,.22);color:#ffc2cf}
.pg-coupon .statusBar.expired{background:rgba(40,0,40,.3);color:#f1e3f1}
.pg-coupon .use{opacity:.92}
.pg-coupon .use b{color:var(--by)}
.pg-coupon .staff{border-top-color:var(--line)}
.pg-coupon .staffTog{color:rgba(255,255,255,.72)}
.pg-coupon .staffMsg.bad{color:#ffc2cf}
.pg-coupon .staffMsg.good,.pg-coupon .staffCalc{color:var(--by)}
.pg-coupon .staffHint{opacity:.6}
.pg-coupon .foot{opacity:.6}

/* ── 미친 색깔들 갤러리 ── */
.pg-gallery h1{font-family:'Black Han Sans',sans-serif;font-weight:400;font-size:34px;color:var(--by);margin-top:10px;letter-spacing:-.5px}
.pg-gallery .sub{opacity:.9}
.pg-gallery .cell{border:2px solid rgba(255,255,255,.3);box-shadow:0 8px 20px rgba(60,0,60,.3)}
.pg-gallery .sticky{background:linear-gradient(180deg,rgba(150,14,150,0),rgba(140,12,140,.96) 34%)}
.pg-gallery .sticky a{color:var(--ink2);box-shadow:0 10px 26px rgba(60,0,60,.4)}
.pg-gallery .state{opacity:.9}

/* ── 디자인 업그레이드 (2026-10-26) ── */
/* 뷰파인더: 흰 테두리 대신 모서리 브래킷 */
.pg-measure .viewbox{border:0;border-radius:22px;box-shadow:0 0 0 6px rgba(255,255,255,.14),0 22px 50px rgba(60,0,60,.5)}
.pg-measure .viewbox::after{content:"";position:absolute;inset:12px;z-index:4;pointer-events:none;background:linear-gradient(#fff,#fff) 0 0/28px 4px no-repeat,linear-gradient(#fff,#fff) 0 0/4px 28px no-repeat,linear-gradient(#fff,#fff) 100% 0/28px 4px no-repeat,linear-gradient(#fff,#fff) 100% 0/4px 28px no-repeat,linear-gradient(#fff,#fff) 0 100%/28px 4px no-repeat,linear-gradient(#fff,#fff) 0 100%/4px 28px no-repeat,linear-gradient(#fff,#fff) 100% 100%/28px 4px no-repeat,linear-gradient(#fff,#fff) 100% 100%/4px 28px no-repeat}
/* 셔터 버튼 */
.pg-measure #camBtns{justify-content:center}
.pg-measure #captureBtn{flex:0 0 auto;width:80px;height:80px;border-radius:50%;padding:0;font-size:13px;font-weight:900;box-shadow:0 0 0 5px rgba(255,255,255,.38),0 12px 26px rgba(60,0,60,.42)}
.pg-measure #captureBtn:not(:disabled):active{transform:scale(.94)}
/* 컬러칩 (MICHIN BORA 포스터 느낌) */
.pg-measure .swatches{gap:14px}
.pg-measure .sw{background:#fff;border-radius:6px;padding:6px 6px 8px;max-width:132px;box-shadow:0 10px 22px rgba(60,0,60,.32)}
.pg-measure .chip{height:84px;border-radius:2px;border:0}
.pg-measure .sw span{color:#2D2926;opacity:1;font-family:'Black Han Sans',sans-serif;font-size:12.5px;text-align:left;margin-top:6px;padding-left:2px}
/* 싱크로율 게이지 */
.pg-measure .gauge{position:relative;height:12px;border-radius:999px;background:rgba(255,255,255,.18);margin:14px 8px 0}
.pg-measure .gfill{height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#ffe680,#FFCD00);box-shadow:0 0 12px rgba(255,205,0,.55);transition:width .9s cubic-bezier(.2,.8,.2,1)}
.pg-measure .gm{position:absolute;top:-4px;width:2px;height:20px;margin-left:-1px;background:#fff;border-radius:2px}
.pg-measure .glab{position:relative;height:16px;margin:5px 8px 2px;font-size:10.5px;font-weight:700;opacity:.85}
.pg-measure .glab span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.pg-measure .glab span.r{transform:translateX(-100%)}
/* 떨어지는 사진: 폴라로이드 */
.pg-measure .drop img{border:5px solid #fff;border-radius:6px}
/* 쿠폰 미리보기: 프레임 합성 이미지 */
.pg-measure .couponCard img{max-width:270px;border:0;border-radius:6px;box-shadow:0 10px 24px rgba(40,0,40,.4)}
/* 하단 링크 알약 */
.pg-measure .foot a{display:inline-block;padding:9px 16px;border-radius:999px;background:rgba(70,0,70,.35);border:1px solid var(--line)}
/* 쿠폰 페이지: 프레임 오버레이 */
.pg-coupon .framed{position:relative;width:100%;aspect-ratio:1/1;border-radius:8px;overflow:hidden;background:#fff}
.pg-coupon .framed .photo{position:absolute;left:7.5%;top:7.5%;width:85%;height:85%;aspect-ratio:auto;object-fit:cover;border:0;border-radius:0}
.pg-coupon .framed .frameov{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.pg-measure #captureBtn:disabled{background:#8c168b !important;color:rgba(255,255,255,.7) !important}
.pg-measure a.heroband{display:block}