/* Layout: 탭 + 조작 줄 + 어두운 쇼케이스 무대. 무대는 테마와 상관없이 어둡게 고정 */
:root{
  --bg:#f1f2f5; --panel:#ffffff; --ink:#15171c; --muted:#5e6472; --line:#d8dbe2; --chip:#f5f6f9;
  --accent:#1f3a8a; --accent-ink:#fff;
  --stage:#0b0c11; --stage-ink:#e9eaf0; --stage-muted:#9aa0b4;
  --gold-a:#fff1b8; --gold-b:#d9a93a; --gold-c:#7d560f;
  --f-display:"Cinzel","Noto Serif KR",serif; --f-kr:"Noto Serif KR",serif; --f-hand:"Nanum Pen Script",cursive;
  --f-body:"IBM Plex Sans KR","Noto Sans KR",system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#121318; --panel:#1a1c23; --ink:#e8eaef; --muted:#9aa0ad; --line:#2b2f39; --chip:#22252e; --accent:#8fa8ff; --accent-ink:#0c1020; color-scheme:dark}}
:root[data-theme="dark"]{--bg:#121318; --panel:#1a1c23; --ink:#e8eaef; --muted:#9aa0ad; --line:#2b2f39; --chip:#22252e; --accent:#8fa8ff; --accent-ink:#0c1020; color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:14px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:16px}
header{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;margin-bottom:12px}
h1{margin:0;font-family:var(--f-kr);font-weight:900;font-size:22px}
header p{margin:0;color:var(--muted);font-size:13px}
.tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:10px}
.tabs button{font:inherit;font-weight:600;border:1px solid var(--line);background:var(--panel);color:var(--ink);padding:8px 14px;border-radius:8px;cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.controls{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.crow{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.uni-hint{font-size:13px;font-weight:700;color:#b42318}
.uni-hint[hidden]{display:none}
.crow>.lab{font-size:12px;color:var(--muted);min-width:60px}
.controls label{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}
select,input[type=text]{font:inherit;color:var(--ink);background:var(--chip);border:1px solid var(--line);border-radius:6px;padding:6px 8px;min-width:0}
input[type=text]{width:120px}
.seg{display:flex;gap:4px;flex-wrap:wrap}
.seg button,.btn{font:inherit;font-size:12.5px;font-weight:600;border:1px solid var(--line);background:var(--chip);color:var(--ink);border-radius:6px;padding:6px 10px;cursor:pointer}
.seg button[aria-pressed="true"],.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn:disabled{opacity:.55;cursor:not-allowed}
button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.unichips{display:flex;flex-wrap:wrap;gap:5px}
.unichips button{display:flex;align-items:center;gap:5px;font:inherit;font-size:12px;border:1px solid var(--line);background:var(--chip);color:var(--ink);border-radius:999px;padding:3px 9px 3px 3px;cursor:pointer}
.unichips button img{width:20px;height:20px;object-fit:contain;background:#fff;border-radius:50%;padding:1px}
.unichips button[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.legend{font-size:12px;color:var(--muted);line-height:1.6}
.legend b{color:var(--ink)}
.stage{background:radial-gradient(55% 60% at 50% 42%,#1a1d2c 0%,#0b0c13 55%,#050609 100%);color:var(--stage-ink);border-radius:14px;min-height:600px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:32px 12px 48px}
.stage .cap{position:absolute;left:0;right:0;bottom:14px;text-align:center;font-size:12px;color:var(--stage-muted);padding-inline:12px}

/* ===== 카드 공통 ===== */
@property --tx{syntax:"<number>";inherits:true;initial-value:0}
@property --ty{syntax:"<number>";inherits:true;initial-value:0}
@property --lift{syntax:"<number>";inherits:true;initial-value:1}
.cardwrap{perspective:1000px}
.card{--rx:0deg;--ry:0deg;--mx:50%;--my:50%;--o:0;--pos:50%;--c1:#333;--c2:#555;--c3:#111;
  width:min(340px,78vw);aspect-ratio:63/88;border-radius:18px;position:relative;transform-style:preserve-3d;
  transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .55s cubic-bezier(.2,.8,.2,1),--tx .55s cubic-bezier(.2,.8,.2,1),--ty .55s cubic-bezier(.2,.8,.2,1);touch-action:pinch-zoom;cursor:grab;
  user-select:none;-webkit-user-select:none;container-type:inline-size}
.card.active{transition:transform .07s linear,--tx .07s linear,--ty .07s linear}
.card .face{position:absolute;inset:0;border-radius:inherit;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  box-shadow:0 50px 90px -30px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.08),0 0 70px -18px var(--c2)}
.card .front::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;border-radius:inherit;
  background:linear-gradient(120deg,rgba(255,255,255,.45),transparent 28%,transparent 70%,rgba(255,255,255,.18));mix-blend-mode:overlay}
/* 테두리(은박/금박) */
.card .front{padding:3.2cqw;background:linear-gradient(135deg,#f4f6fa,#9aa3b3 22%,#eef1f6 40%,#7c8597 62%,#e6e9ef 80%,#a4acba)}

.card .body{position:relative;height:100%;border-radius:11px;overflow:hidden;color:#fff;display:flex;flex-direction:column;
  background:radial-gradient(90% 60% at 50% 0%,var(--c2) 0%,transparent 60%),linear-gradient(170deg,var(--c1) 0%,var(--c1) 30%,var(--c3) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),inset 0 0 0 3.5px rgba(0,0,0,.35),inset 0 0 0 4.5px rgba(255,255,255,.22),inset 0 30px 60px -30px rgba(255,255,255,.18),inset 0 -40px 60px -30px rgba(0,0,0,.55)}
.card .body::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0}
.card .body::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 40% at 50% 36%,rgba(255,255,255,.14),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.05),transparent 30%,rgba(0,0,0,.3)),radial-gradient(120% 100% at 50% 50%,transparent 60%,rgba(0,0,0,.35))}
.card .hdr{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;padding:3.4cqw 4.2cqw 0;font-family:var(--f-display);font-weight:700;font-size:2.9cqw;letter-spacing:.16em}
.card .hdr .set{opacity:.85}
.card .rsym{display:flex;align-items:center;gap:1.4cqw}
.card .rsym i{display:inline-block;width:3.2cqw;height:3.2cqw;background:#fff;clip-path:circle(50%)}
.card.holo .rsym i{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.card.gold .rsym i{clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);background:#ffe48a}
.card .ttl{position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;gap:2cqw;padding:2.2cqw 4.2cqw 0}
.card .ttl .nm{font-family:var(--f-kr);font-weight:900;font-size:8.2cqw;line-height:1.05;letter-spacing:-.02em;text-shadow:0 2px 10px rgba(0,0,0,.35)}
.card .ttl .est{flex:none;font-family:var(--f-display);font-weight:700;font-size:2.6cqw;letter-spacing:.12em;border:1px solid rgba(255,255,255,.55);border-radius:999px;padding:.8cqw 2.2cqw;margin-bottom:1cqw}
.card .art{position:relative;z-index:1;margin:3cqw 4.2cqw 0;flex:1;min-height:0;border-radius:8px;overflow:hidden;isolation:isolate;
  background:rgba(0,0,0,.2);
  border:1px solid rgba(255,255,255,.45);box-shadow:inset 0 0 0 3px rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center}
.card .art img{position:relative;z-index:2;width:56%;max-height:76%;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.25));transform:translateZ(0)}
/* 입체 로고: 누끼 마스크를 여러 장 겹쳐서 두께를 만들고, 기울기에 따라 층마다 다르게 밀어서 튀어나와 보이게 함.
   좌우 이동량(--dx)을 상하(--dy)보다 크게 잡아서 좌우로 기울일 때 옆면이 더 많이 보이게 */
.card .emb{position:absolute;inset:0;z-index:2;pointer-events:none;--dx:4.2cqw;--dy:1.8cqw;--base:.9cqw;
  animation:pop 1.3s cubic-bezier(.2,1.4,.3,1) both,breathe2 6s 1.3s ease-in-out infinite}
@keyframes pop{0%{--lift:0;opacity:0;transform:scale(.9)}40%{opacity:1}100%{--lift:1;transform:none}}
@keyframes breathe2{0%,100%{--lift:1}50%{--lift:1.25}}
.card .emb i{position:absolute;inset:9% 15%;display:block;-webkit-mask:var(--lm) center/contain no-repeat;mask:var(--lm) center/contain no-repeat;will-change:transform}
/* 그림자: 필터 대신 반투명 층 3장 (필터를 쓰면 위의 홀로 혼합이 깨짐) */
.card .emb .sh{background:rgba(0,0,0,.2);transform:translate(calc(var(--tx)*-1.4cqw*var(--s)*var(--lift)),calc((1.6cqw - var(--ty)*.8cqw)*var(--s)*var(--lift))) scale(calc(1 + var(--s)*.02))}
.card.uni .art{isolation:auto;z-index:auto}
/* 옆면: 0번이 바닥, 숫자가 클수록 위 */
.card .emb .sd{--k:calc(var(--i)/7);
  transform:translate(calc((var(--tx)*var(--dx))*var(--k)*var(--lift)),calc((var(--ty)*var(--dy) - var(--base))*var(--k)*var(--lift) + var(--base)*var(--lift)));
  background:linear-gradient(180deg,#5d6573,#2a2f38 60%,#14171c)}
.card .emb .hl{transform:translate(calc(var(--tx)*var(--dx)*var(--lift) - .25cqw),calc(var(--ty)*var(--dy)*var(--lift) - .25cqw));background:rgba(255,255,255,.9)}
.card .emb .top{transform:translate(calc(var(--tx)*var(--dx)*var(--lift)),calc(var(--ty)*var(--dy)*var(--lift)));
  background:linear-gradient(115deg,#ffffff 0%,#c7cdd8 22%,#ffffff 40%,#8e97a7 58%,#eef1f6 76%,#aab2c0 100%) var(--pos) 0/260% 100%}
.card .emb .sp{transform:translate(calc(var(--tx)*var(--dx)*var(--lift)),calc(var(--ty)*var(--dy)*var(--lift)));
  background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.95),rgba(255,255,255,0) 38%);mix-blend-mode:overlay;opacity:calc(.35 + var(--o)*.65)}
/* 금박: 금박/마스터 테두리나 스타더스트 표면일 때 */
.card.goldlogo .emb .top{background:linear-gradient(115deg,#fff6d2 0%,#d9a93a 22%,#fff1b8 40%,#8a5f12 58%,#f6dc8c 76%,#c08a25 100%) var(--pos) 0/260% 100%}
.card.goldlogo .emb .sd{background:linear-gradient(180deg,#7a5a1c,#3d2b08 60%,#1e1503)}
.card.goldlogo .emb .hl{background:rgba(255,248,220,.95)}
/* 원래 색: 윗면은 학교 로고 그대로, 옆면은 어둡게 */
.card.colorlogo .emb .top{-webkit-mask:none;mask:none;background:var(--lc) center/contain no-repeat}
.card.colorlogo .emb .sd{-webkit-mask:var(--la) center/contain no-repeat;mask:var(--la) center/contain no-repeat;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.85)),var(--c3)}
.card.colorlogo .emb .hl{-webkit-mask:var(--la) center/contain no-repeat;mask:var(--la) center/contain no-repeat}
.card.colorlogo .emb .sp{-webkit-mask:var(--la) center/contain no-repeat;mask:var(--la) center/contain no-repeat}
@media (prefers-reduced-motion: reduce){.card .emb{animation:none}}
.card .art .halo{position:absolute;z-index:1;width:min(62%,82cqh);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,#ffffff 0 86%,#dfe3ea 87% 91%,#ffffff 92%);
  box-shadow:0 0 0 1.6cqw rgba(255,255,255,.12),0 0 0 calc(1.6cqw + 1px) rgba(255,255,255,.5),0 14px 34px rgba(0,0,0,.4)}
.card .art img{width:68%;max-height:80%;filter:drop-shadow(0 1px 0 rgba(255,255,255,.35)) drop-shadow(0 10px 18px rgba(0,0,0,.5))}
.card .fxl{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.card .fxl i{position:absolute;display:block}
/* 로고 주변 효과 */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes sheen{0%,100%{background-position:120% 0}50%{background-position:-20% 0}}
@keyframes ripple{0%{transform:scale(.7);opacity:.6}100%{transform:scale(2.4);opacity:0}}
@keyframes twinkle{0%,100%{opacity:.2;transform:scale(.6)}50%{opacity:1;transform:scale(1)}}
@keyframes drift{0%{transform:translate(0,0) scale(1)}100%{transform:translate(14%,10%) scale(1.2)}}
@keyframes sway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
@keyframes fall{0%{transform:translateY(-20%) rotate(0deg)}100%{transform:translateY(560%) rotate(540deg)}}
@keyframes flow{to{background-position:400% 0}}
@keyframes rise{0%{transform:translateY(0);opacity:0}15%{opacity:.8}100%{transform:translateY(-110cqh);opacity:0}}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.06);opacity:.85}}
.card[data-art="silk"] .fxl::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.22) 44%,rgba(255,255,255,.05) 50%,rgba(255,255,255,.14) 56%,transparent 70%) 0 0/250% 100%;animation:sheen 8s ease-in-out infinite}
.card[data-art="silk"] .fxl::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 70% at 50% 45%,rgba(255,255,255,.1),transparent 65%),linear-gradient(180deg,transparent 60%,rgba(0,0,0,.25))}
.card[data-art="silk"] .fxl i:nth-child(-n+6){width:1px;height:1px;border-radius:50%;background:#fff;box-shadow:0 0 4px 1px rgba(255,255,255,.7);animation:twinkle 5s ease-in-out infinite}
.card[data-art="rosette"] .fxl::before{content:"";position:absolute;inset:-12%;background:var(--rosette) center/contain no-repeat;opacity:.55;animation:spin 140s linear infinite;
  -webkit-mask-image:radial-gradient(circle,#000 40%,transparent 72%);mask-image:radial-gradient(circle,#000 40%,transparent 72%)}
.card[data-art="rosette"] .fxl::after{content:"";position:absolute;inset:8%;background:var(--rosette) center/contain no-repeat;opacity:.35;animation:spin 90s linear infinite reverse}
.card[data-art="rosette"] .fxl i:nth-child(1){inset:0;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.14),transparent 55%)}
.card[data-art="ripple"] .fxl i:nth-child(-n+3){left:50%;top:50%;width:50%;aspect-ratio:1;margin:-25% 0 0 -25%;border:1px solid rgba(255,255,255,.55);border-radius:50%;animation:ripple 7s cubic-bezier(.2,.6,.3,1) infinite}
.card[data-art="ripple"] .fxl i:nth-child(2){animation-delay:2.3s}.card[data-art="ripple"] .fxl i:nth-child(3){animation-delay:4.6s}
.card[data-art="beams"] .fxl i:nth-child(-n+10){width:2px;height:2px;border-radius:50%;background:#fff;opacity:.7;animation:rise var(--d,10s) linear infinite}
.card[data-art="beams"] .fxl::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.14),transparent 45%)}
.card[data-art="beams"] .fxl::before{content:"";position:absolute;left:-40%;right:-40%;top:-30%;bottom:-10%;transform-origin:50% 0;animation:sway 9s ease-in-out infinite;
  background:conic-gradient(from 160deg at 50% 0%,transparent 0deg,rgba(255,255,255,.16) 8deg,transparent 12deg,rgba(255,255,255,.1) 18deg,transparent 22deg,rgba(255,255,255,.2) 28deg,transparent 33deg,rgba(255,255,255,.09) 38deg,transparent 42deg 360deg)}
.card[data-art="prism"] .fxl::before{content:"";position:absolute;inset:0;mix-blend-mode:screen;opacity:.9;
  background:repeating-linear-gradient(100deg,transparent 0 7px,rgba(255,110,140,.32) 8px,rgba(255,225,120,.32) 9px,rgba(120,255,200,.32) 10px,rgba(120,170,255,.32) 11px,transparent 13px) var(--pos) 0/220% 100%;
  -webkit-mask-image:radial-gradient(circle at var(--mx) var(--my),#000,transparent 75%);mask-image:radial-gradient(circle at var(--mx) var(--my),#000,transparent 75%)}
.card[data-art="constel"] .fxl{background:radial-gradient(120% 90% at 50% 50%,transparent,rgba(5,8,25,.5))}
.card[data-art="constel"] .fxl::before{content:"";position:absolute;inset:0;background:var(--constel) center/cover no-repeat;opacity:.8}
.card[data-art="constel"] .fxl i{width:2px;height:2px;border-radius:50%;background:#fff;box-shadow:0 0 5px 1px rgba(255,255,255,.8);animation:twinkle 3.6s ease-in-out infinite}
.card[data-art="aurora"] .fxl{background:radial-gradient(120% 90% at 50% 50%,transparent,rgba(5,8,25,.45))}
.card[data-art="aurora"] .fxl::before{content:"";position:absolute;inset:0;background:var(--constel) center/cover no-repeat;opacity:.35}
.card[data-art="aurora"] .fxl i:nth-child(n+4){width:2px;height:2px;border-radius:50%;background:#fff;box-shadow:0 0 5px 1px rgba(255,255,255,.7);animation:twinkle 4s ease-in-out infinite}
.card[data-art="aurora"] .fxl i:nth-child(-n+3){width:110%;height:75%;border-radius:50%;opacity:.6;mix-blend-mode:screen;-webkit-mask-image:radial-gradient(closest-side,#000,transparent);mask-image:radial-gradient(closest-side,#000,transparent);animation:drift 12s ease-in-out infinite alternate}
.card[data-art="aurora"] .fxl i:nth-child(1){left:-25%;top:-10%;background:var(--c2)}
.card[data-art="aurora"] .fxl i:nth-child(2){right:-30%;top:25%;background:#79d8c4;animation-duration:15s}
.card[data-art="aurora"] .fxl i:nth-child(3){left:5%;bottom:-25%;background:#a99be0;animation-duration:18s}
.card[data-art="master"] .fxl{background:radial-gradient(100% 80% at 50% 50%,rgba(255,215,130,.16),transparent 70%)}
.card[data-art="master"] .halo{box-shadow:0 0 0 1.6cqw rgba(255,226,150,.16),0 0 0 calc(1.6cqw + 1px) rgba(255,226,150,.7),0 0 24px 6px rgba(255,214,120,.35),0 14px 34px rgba(0,0,0,.4)}
.card[data-art="master"] .art::after{content:"";position:absolute;z-index:1;width:min(78%,100cqh);aspect-ratio:1;border-radius:50%;border:1px solid rgba(255,226,150,.5);box-shadow:0 0 18px rgba(255,214,120,.45),inset 0 0 18px rgba(255,214,120,.25);animation:breathe 6s ease-in-out infinite;pointer-events:none}
.card[data-art="master"] .fxl i{top:0;width:var(--w,6px);height:calc(var(--w,6px)*.7);
  background:linear-gradient(135deg,#fff3c4,#e2b448 45%,#9c6f18 70%,#f7dc8a);clip-path:polygon(10% 20%,60% 0,100% 35%,85% 90%,30% 100%,0 60%);opacity:.9;animation:fall var(--d,9s) linear infinite}
.card[data-art="master"] .fxl::before{content:"";position:absolute;inset:-14%;background:var(--rosetteGold) center/contain no-repeat;opacity:.75;animation:spin 90s linear infinite}
.card[data-art="master"] .fxl::after{content:"";position:absolute;left:-40%;right:-40%;top:-30%;bottom:-10%;transform-origin:50% 0;animation:sway 9s ease-in-out infinite;
  background:conic-gradient(from 160deg at 50% 0%,transparent 0deg,rgba(255,226,150,.2) 8deg,transparent 12deg,rgba(255,226,150,.12) 18deg,transparent 22deg,rgba(255,226,150,.24) 28deg,transparent 33deg 360deg)}
@media (prefers-reduced-motion: reduce){.card .fxl,.card .fxl *,.card .fxl::before,.card .fxl::after,.card .front{animation:none!important}}
/* 바탕 무늬 */
.card[data-bg="guilloche"] .body::before{opacity:.26;background:var(--gwave) center/100% 100% no-repeat}
.card[data-bg="brushed"] .body::before{opacity:1;background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,rgba(0,0,0,.05) 1px 2px,transparent 2px 4px),linear-gradient(115deg,transparent 25%,rgba(255,255,255,.12) 45%,transparent 65%) var(--pos) 0/250% 100%}
.card[data-bg="herring"] .body::before{opacity:.1;background:linear-gradient(135deg,#fff 25%,transparent 25%) -6px 0/12px 12px,linear-gradient(225deg,#fff 25%,transparent 25%) -6px 0/12px 12px,linear-gradient(315deg,#fff 25%,transparent 25%) 0 0/12px 12px,linear-gradient(45deg,#fff 25%,transparent 25%) 0 0/12px 12px}
.card[data-bg="contour"] .body::before{opacity:.3;background:var(--contour) center/cover no-repeat}
.card[data-bg="carbon"] .body::before{opacity:.55;mix-blend-mode:multiply;background:
  linear-gradient(27deg,#151515 5px,transparent 5px) 0 5px/20px 20px,linear-gradient(207deg,#151515 5px,transparent 5px) 10px 0/20px 20px,
  linear-gradient(27deg,#2a2a2a 5px,transparent 5px) 0 10px/20px 20px,linear-gradient(207deg,#2a2a2a 5px,transparent 5px) 10px 5px/20px 20px,
  linear-gradient(90deg,#1e1e1e 10px,transparent 10px) 0 0/20px 20px,linear-gradient(#202020 25%,#1a1a1a 25%,#1a1a1a 50%,transparent 50%,transparent 75%,#2c2c2c 75%,#2c2c2c) 0 0/20px 20px}
.card[data-bg="name"] .body::before{opacity:1;background:var(--pat) 0 0/170px 64px}
.card[data-bg="diamond"] .body{background:linear-gradient(165deg,#22232a 0%,#0d0d10 60%,#050506 100%)}
.card[data-bg="diamond"] .body::before{opacity:1;background:repeating-linear-gradient(45deg,rgba(226,186,104,.32) 0 1px,transparent 1px 15px),repeating-linear-gradient(-45deg,rgba(226,186,104,.32) 0 1px,transparent 1px 15px)}
.card[data-bg="diamond"] .ribbon{color:#1a1408}
/* 테두리 */
.card.fr-silver .front,.card.fr-silver .back{background:linear-gradient(135deg,#fbfcfe,#a7afbd 18%,#f2f4f8 34%,#7d8697 52%,#e9ecf1 70%,#9aa3b2 86%,#f5f7fa)}
.card.fr-school .front,.card.fr-school .back{background:linear-gradient(135deg,var(--c2),var(--c1) 40%,var(--c3))}
.card.fr-school .body{box-shadow:inset 0 0 0 1.5px #e7c46e,inset 0 0 0 4px rgba(0,0,0,.2),inset 0 0 0 5px rgba(231,196,110,.6)}
.card.fr-black .front,.card.fr-black .back{background:linear-gradient(135deg,#4a4e58,#0b0c10 26%,#6a6f7c 44%,#0b0c10 60%,#3a3d46 80%,#0b0c10)}
.card.fr-rose .front,.card.fr-rose .back{background:linear-gradient(135deg,#fff1ea,#d99a86 20%,#ffe4d8 38%,#a8634f 58%,#f3c4b2 78%,#c98673)}
.card.fr-gold .front,.card.fr-gold .back{background:linear-gradient(135deg,var(--gold-a),var(--gold-b) 22%,#fff6d2 40%,var(--gold-c) 62%,#f6dc8c 80%,var(--gold-b))}
.card.fr-gold .body,.card.fr-master .body{box-shadow:inset 0 0 0 1.5px #f3d27a,inset 0 0 0 4px rgba(0,0,0,.25),inset 0 0 0 5px rgba(243,210,122,.7)}
.card.fr-prism .front,.card.fr-prism .back{background:linear-gradient(115deg,#d7e0ff,#f6cdfb,#c9fff2,#fff2c2,#ffd0d8,#d7e0ff) var(--pos) 0/300% 100%}
.card.fr-master .front,.card.fr-master .back{background:linear-gradient(115deg,#f9e7a4,#c99a36,#fff6d2,#e9b9ff,#a9f0ff,#fff6d2,#c99a36,#f9e7a4) 0 0/400% 100%;animation:flow 10s linear infinite}
.card.fr-master{box-shadow:0 0 40px rgba(255,214,120,.35)}
/* 레벨 */
.card .lv{display:flex;align-items:center;gap:1.4cqw}
.card .lv b{font-family:var(--f-display);font-weight:900;font-size:3cqw;letter-spacing:.06em;background:#fff;color:var(--c3);border-radius:999px;padding:.5cqw 2cqw}
.card .lv b.t2{background:linear-gradient(135deg,#fbfcfe,#9aa3b2,#f2f4f8);color:#1b1f28}
.card .lv b.t3{background:linear-gradient(135deg,#fff1b8,#d9a93a,#fff6d2);color:#3a2600}
.card .lv b.t4{background:linear-gradient(90deg,#ffb3c4,#ffe7a0,#b5ffd0,#a8ecff,#d6b3ff);color:#1d1440}
.card .lv em{font-style:normal;font-family:var(--f-display);font-weight:900;font-size:2.4cqw;letter-spacing:.2em;color:#ffe39a}
.card .xp{position:relative;z-index:1;margin:2.4cqw 4.2cqw 0;font-size:2.4cqw;opacity:.9}
.card .xp .bar{height:1.4cqw;border-radius:999px;background:rgba(0,0,0,.3);overflow:hidden;margin-top:1cqw;border:1px solid rgba(255,255,255,.25)}
.card .xp .bar i{display:block;height:100%;background:linear-gradient(90deg,#fff6c8,#ffd25a);border-radius:inherit}
.card .xp .row{display:flex;justify-content:space-between;gap:2cqw}
.lock{opacity:.5}
.prog{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.prog .stat{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.card .ribbon{position:relative;z-index:1;margin:-3.2cqw 9cqw 0;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(226,230,238,.98));color:var(--c3);
  font-family:var(--f-display);font-weight:900;font-size:2.7cqw;letter-spacing:.18em;text-align:center;padding:1.6cqw 2cqw;border-radius:3px;box-shadow:0 3px 8px rgba(0,0,0,.3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .stats{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.4cqw;margin:3.2cqw 4.2cqw 0}
.card .stats div{background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.18);border-radius:6px;padding:1.6cqw 1.8cqw;min-width:0}
.card .stats small{display:block;font-size:2.3cqw;opacity:.75;letter-spacing:.04em}
.card .stats b{display:block;font-size:3.5cqw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.card .motto{position:relative;z-index:1;margin:2.6cqw 4.2cqw 0;font-family:"Nanum Myeongjo",var(--f-kr);font-weight:800;font-size:3.5cqw;line-height:1.45;text-align:center;text-wrap:balance;opacity:.95}
.card .foot{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:flex-end;padding:2.4cqw 4.2cqw 3.4cqw;margin-top:auto}
.card .sign{font-family:var(--f-kr);font-weight:700;font-size:3.6cqw;line-height:1;letter-spacing:.28em;padding-top:1.6cqw;border-top:1px solid rgba(255,255,255,.45);min-width:24cqw;opacity:.95}
.card .sign::before{content:"HOLDER";display:block;font-family:var(--f-display);font-weight:700;font-size:1.9cqw;letter-spacing:.3em;opacity:.65;margin-bottom:1.1cqw}
.card .serial{text-align:right;font-family:var(--f-display);font-size:2.4cqw;letter-spacing:.14em;opacity:.85;line-height:1.5}
.card .serial b{font-size:2.8cqw}
/* 빛 효과 */
.card .glare,.card .foil,.card .sparkle{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3}
.card .glare{background:radial-gradient(farthest-corner circle at var(--mx) var(--my),rgba(255,255,255,.6) 0%,rgba(255,255,255,.12) 28%,rgba(0,0,0,.3) 90%);mix-blend-mode:overlay;opacity:calc(.3 + var(--o)*.7)}
.card .foil{opacity:0;mix-blend-mode:color-dodge;
  background:
   repeating-linear-gradient(0deg,rgb(255,119,115) 5%,rgb(255,237,95) 10%,rgb(168,255,95) 15%,rgb(131,255,247) 20%,rgb(120,148,255) 25%,rgb(216,117,255) 30%,rgb(255,119,115) 35%) 0 var(--pos)/200% 700%,
   repeating-linear-gradient(133deg,#0e152e 0%,hsl(180,10%,60%) 3.8%,hsl(180,29%,66%) 4.5%,hsl(180,10%,60%) 5.2%,#0e152e 10%,#0e152e 12%) var(--pos) var(--pos)/300% 100%;
  background-blend-mode:hue;filter:brightness(.8) contrast(1.5) saturate(1.2)}
.card.holo .foil{opacity:calc(.28 + var(--o)*.5)}
.card.gold .foil{opacity:calc(.2 + var(--o)*.35)}
.card .sparkle{opacity:0;mix-blend-mode:screen;
  background-image:radial-gradient(circle,#fff 0 1px,transparent 1.6px),radial-gradient(circle,#fff6c8 0 .8px,transparent 1.3px);
  background-size:37px 41px,23px 29px;background-position:calc(var(--pos)*.3) calc(var(--pos)*.5),calc(var(--pos)*-.4) 10px}
.card.gold .sparkle{opacity:calc(.25 + var(--o)*.75)}

/* ===== 목표대학 카드 표면: 트레이딩 카드 홀로 기법 =====
   --hx/--hy: 기울기에 따라 움직이는 무늬 위치. color-dodge는 검정=변화 없음, 밝을수록 빛남 */
.card.uni{--hx:calc(50% + var(--tx)*38%);--hy:calc(50% + var(--ty)*38%)}
.card.uni .foil,.card.uni .sparkle{opacity:0;background:none;filter:none}
.card.uni .art .shine{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0}
.card.uni .glare{background:radial-gradient(farthest-corner circle at var(--mx) var(--my),rgba(255,255,255,.7) 0%,rgba(255,255,255,.1) 30%,rgba(0,0,0,.35) 95%);mix-blend-mode:overlay;opacity:calc(.25 + var(--o)*.6)}
/* 1. 매트: 종이 결 + 부드러운 사선 광 */
.card.sf-matte .foil{opacity:.8;mix-blend-mode:soft-light;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.45) 48%,rgba(255,255,255,.1) 54%,transparent 64%) var(--hx) 0/260% 100%}
/* 2. 아트 홀로: 그림 창 안에서만 무지개 띠가 세로 결을 타고 흐름 (빛 반사는 창 밖에도 약하게) */
.card.sf-holo .art .shine{mix-blend-mode:color-dodge;opacity:calc(.7 + var(--o)*.3);
  background:
   repeating-linear-gradient(0deg,#ff6a64 0%,#ffe24a 4%,#8dff4a 8%,#4afff0 12%,#5c7cff 16%,#c95cff 20%,#ff6a64 24%) var(--hx) var(--hy)/200% 600%,
   repeating-linear-gradient(90deg,#222 0 1.5px,#bbb 2px,#222 3px 5px),
   radial-gradient(farthest-corner circle at var(--mx) var(--my),#fff 0%,#888 45%,#333 85%);
  background-blend-mode:multiply,multiply}
.card.sf-holo .foil{opacity:calc(.15 + var(--o)*.3);mix-blend-mode:color-dodge;
  background:linear-gradient(115deg,transparent 30%,rgba(140,170,255,.5) 45%,rgba(255,170,230,.5) 52%,transparent 66%) var(--hx) 0/260% 100%}
/* 3. 래디언트: 카드 전체에 X자 교차 결 + 무지개, 기울이면 격자가 반짝이며 흐름 */
.card.sf-radiant .foil{opacity:calc(.55 + var(--o)*.4);mix-blend-mode:color-dodge;
  background:
   linear-gradient(-30deg,#c0504c,#c0b03c,#70c03c,#3cc0b6,#4c64c0,#9c4cc0,#c0504c,#c0b03c) var(--hx) var(--hy)/300% 300%,
   repeating-linear-gradient(45deg,#000 0 5px,#9a9a9a 6.5px,#000 8px 13px),
   repeating-linear-gradient(-45deg,#000 0 5px,#9a9a9a 6.5px,#000 8px 13px),
   radial-gradient(farthest-corner circle at var(--mx) var(--my),#fff 0%,#666 40%,#222 85%);
  background-blend-mode:multiply,lighten,multiply}
.card.sf-radiant .sparkle{opacity:calc(.35 + var(--o)*.5);mix-blend-mode:color-dodge;background:var(--glitter) var(--hx) var(--hy)/200px 200px;
  -webkit-mask-image:radial-gradient(circle at var(--mx) var(--my),#000 0,rgba(0,0,0,.2) 55%);mask-image:radial-gradient(circle at var(--mx) var(--my),#000 0,rgba(0,0,0,.2) 55%)}
/* 4. 레인보우: 카드 전체가 파스텔 무지개로 물들고, 글리터가 빛 쪽에서 반짝임 */
.card.sf-rainbow .foil{opacity:calc(.55 + var(--o)*.25);mix-blend-mode:color;
  background:linear-gradient(-45deg,#ff9a9a,#ffe39a,#b8ff9a,#9affee,#9ab4ff,#e29aff,#ff9a9a,#ffe39a,#b8ff9a) var(--hx) var(--hy)/400% 400%}
.card.sf-rainbow .sparkle{opacity:calc(.6 + var(--o)*.4);mix-blend-mode:color-dodge;filter:brightness(1.1) contrast(1.2);
  background:var(--glitter) calc(var(--tx)*-40px) calc(var(--ty)*-40px)/170px 170px,
   linear-gradient(-45deg,#ff7773,#ffed5f,#a8ff5f,#83fff7,#7894ff,#d875ff,#ff7773) var(--hx) var(--hy)/300% 300%;
  background-blend-mode:multiply;
  -webkit-mask-image:radial-gradient(circle at var(--mx) var(--my),#000 0,rgba(0,0,0,.35) 70%);mask-image:radial-gradient(circle at var(--mx) var(--my),#000 0,rgba(0,0,0,.35) 70%)}
/* 5. 시크릿 골드: 카드 전체가 금으로 물들고, 사선 결 + 금 글리터 + 강한 반사 */
.card.sf-gold .foil{opacity:.85;mix-blend-mode:color;
  background:linear-gradient(115deg,#fff1b8,#d9a93a 25%,#fff6d2 45%,#a87618 65%,#f6dc8c 85%,#d9a93a) var(--hx) var(--hy)/300% 300%}
.card.sf-gold .sparkle{opacity:calc(.6 + var(--o)*.4);mix-blend-mode:color-dodge;
  background:var(--glitterG) calc(var(--tx)*-50px) calc(var(--ty)*-50px)/150px 150px,
   repeating-linear-gradient(55deg,#000 0 3px,#3a2c10 4px,#000 5px 7px),
   linear-gradient(115deg,#000 30%,#6b4f17 46%,#000 62%) var(--hx) 0/260% 100%;
  background-blend-mode:screen,screen;
  -webkit-mask-image:radial-gradient(circle at var(--mx) var(--my),#000 0,rgba(0,0,0,.4) 70%);mask-image:radial-gradient(circle at var(--mx) var(--my),#000 0,rgba(0,0,0,.4) 70%)}
.card.sf-gold .glare{opacity:calc(.35 + var(--o)*.65)}
/* 앞면이 보일 땐 뒷면을 숨김: 뒷면 3D 레이어가 있으면 크롬에서 앞면의 빛 혼합(color-dodge)이 꺼짐. 뒤집기 중간 지점에서 전환 */
.card:not(.flipped) .back{visibility:hidden}
/* 폰 브라우저에서 3D 뒷면 숨김이 안 먹어도 겹치지 않게, 뒤집힌 동안 앞면도 직접 숨긴다 */
.card.flipped .front{visibility:hidden}
.card .back,.card .front{transition:visibility 0s .27s}
/* 뒷면 */
.card .back{transform:rotateY(180deg);padding:3.2cqw;background:linear-gradient(135deg,#f4f6fa,#9aa3b3 22%,#eef1f6 40%,#7c8597 62%,#e6e9ef 80%,#a4acba)}
.card .back .bb{height:100%;border-radius:11px;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4cqw;
  background:repeating-conic-gradient(from 0deg at 50% 50%,var(--c1) 0 6deg,var(--c3) 6deg 12deg)}
.card .back .bb::before{content:"";position:absolute;inset:6%;border:1.5px solid rgba(255,255,255,.5);border-radius:8px}
.card .back .seal{width:46cqw;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff 0 60%,#e5e8ee 61% 66%,rgba(255,255,255,.0) 67%);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1.5cqw rgba(255,255,255,.25),0 10px 30px rgba(0,0,0,.35)}
.card .back .seal img{width:70%;height:70%;object-fit:contain}
.card .back .btier{position:absolute;z-index:2;top:7%;left:0;right:0;margin:0 auto;width:max-content;max-width:88%;font-weight:800;font-size:5.2cqw;letter-spacing:.04em;padding:1.6cqw 4cqw;border-radius:999px;box-shadow:0 4px 14px rgba(0,0,0,.45)}
.card.gold .back .btier{background:linear-gradient(90deg,var(--gold-c),var(--gold-a) 35%,var(--gold-b) 65%,var(--gold-a));color:#3a2600}
.card.holo .back .btier{background:linear-gradient(90deg,#ff9ab0,#ffe39a,#a0ffb0,#9ae8ff,#c6a0ff);color:#1d1440}
.card.matte .back .btier{background:#f6f3ea;color:#23252b;border:1px solid rgba(0,0,0,.2)}
.card.exam.holo .back .bb::after,.card.exam.gold .back .bb::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:color-dodge;opacity:.35;
  background:repeating-linear-gradient(115deg,rgb(255,119,115) 0%,rgb(255,237,95) 6%,rgb(168,255,95) 12%,rgb(131,255,247) 18%,rgb(120,148,255) 24%,rgb(216,117,255) 30%,rgb(255,119,115) 36%) var(--pos) 0/300% 100%}
.card.exam.gold .back .bb::after{background:linear-gradient(115deg,transparent 30%,rgba(255,240,180,.9) 48%,transparent 62%) var(--pos) 0/250% 100%;opacity:.5}
.card.exam.matte .back .bb{filter:saturate(.55) brightness(.92)}
.card .back .bt{font-family:var(--f-display);font-weight:900;color:#fff;font-size:4.2cqw;letter-spacing:.22em;text-align:center;text-shadow:0 2px 8px rgba(0,0,0,.45);line-height:1.5}
@media (prefers-reduced-motion: no-preference){ .card.idle{animation:idle 6s ease-in-out infinite} }
@keyframes idle{0%,100%{transform:rotateX(4deg) rotateY(-9deg);--tx:-.5;--ty:-.29}50%{transform:rotateX(-3deg) rotateY(9deg);--tx:.5;--ty:.21}}

/* ===== 기출 카드 앞면 (카드팩) ===== */
.card.exam .body{background:linear-gradient(165deg,#2a2f45 0%,#191c2b 55%,#0e1019 100%)}
/* 학력평가 = 매트: 무광 종이 */
.card.exam.matte .front,.card.exam.matte .back{background:#e9e6dd}
.card.exam.matte .body{background:#f6f3ea;color:#23252b;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.card.exam.matte .body::after{background:none}
.card.exam.matte .body::before{opacity:.5;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='80' height='80' filter='url(%23n)'/%3E%3C/svg%3E")}
.card.exam.matte .eorg span{border-color:rgba(0,0,0,.25)}
.card.exam.matte .eicon{background:#fff;border-color:rgba(0,0,0,.18)}
.card.exam.matte .eicon svg{color:#23252b}
.card.exam.matte .etier{background:#23252b;color:#f6f3ea}
.card.exam.matte .ego{background:#23252b;color:#fff}
.card.exam.matte .glare{opacity:.25}
/* 평가원 모의평가 = 홀로그램: 무지개 펄 */
.card.exam.holo .front,.card.exam.holo .back{background:conic-gradient(from 0deg,#ff8a8a,#ffe08a,#9dff8a,#8affef,#8aa4ff,#d78aff,#ff8a8a)}
.card.exam.holo .body{background:linear-gradient(135deg,#2a1f6e 0%,#3d2c8f 30%,#14607e 65%,#5a2a86 100%)}
.card.exam.holo .foil{opacity:calc(.5 + var(--o)*.4)}
.card.exam.holo .etier{background:linear-gradient(90deg,#ff9ab0,#ffe39a,#a0ffb0,#9ae8ff,#c6a0ff);color:#1d1440}
.card.exam .body::before{opacity:.06}
.card.exam.gold .body{background:linear-gradient(165deg,#3a2c0c 0%,#221906 60%,#140e03 100%)}
.card.exam .eorg{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;padding:4cqw 4.6cqw 0;font-size:3cqw;font-weight:700}
.card.exam .eorg span{border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:.8cqw 2.4cqw}
.card.exam .eicon{position:relative;z-index:1;margin:5cqw auto 0;width:40cqw;aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle,rgba(255,255,255,.14),rgba(255,255,255,.03) 70%);border:1.5px solid rgba(255,255,255,.35)}
.card.exam .eicon svg{width:52%;height:52%;color:#fff}
.card.exam.gold .eicon svg{color:#ffe08a}
.card.exam .esub{position:relative;z-index:1;text-align:center;font-family:var(--f-kr);font-weight:900;font-size:9cqw;margin-top:4cqw;letter-spacing:-.02em;padding-inline:4cqw;text-wrap:balance}
.card.exam .eses{position:relative;z-index:1;text-align:center;font-size:3.6cqw;opacity:.85;margin-top:1.6cqw;padding-inline:5cqw;text-wrap:balance}
.card.exam .etier{position:relative;z-index:1;margin:4cqw auto 0;font-family:var(--f-display);font-weight:900;letter-spacing:.2em;font-size:2.8cqw;padding:1.2cqw 3cqw;border-radius:3px;background:rgba(255,255,255,.12)}
.card.exam.gold .etier{background:linear-gradient(90deg,var(--gold-b),#fff0b0,var(--gold-b));color:#3a2600}
.card.exam .ego{position:relative;z-index:1;margin:auto 4.6cqw 4.6cqw;font:inherit;font-weight:700;font-size:3.6cqw;border-radius:8px;border:0;padding:2.6cqw;background:#fff;color:#12141c;cursor:pointer}

/* ===== 코인 (로고 모양으로 오린 코인) ===== */
.coinwrap{perspective:1100px;display:flex;flex-direction:column;align-items:center;gap:20px}
.coin{--rx:0deg;--ry:0deg;--rz:0deg;--ty:0px;width:min(300px,70vw);aspect-ratio:1;position:relative;transform-style:preserve-3d;
  transform:translateY(var(--ty)) rotateZ(var(--rz)) rotateX(var(--rx)) rotateY(var(--ry));touch-action:pinch-zoom;cursor:grab}
.coin .lay{position:absolute;inset:0;background-size:contain;background-repeat:no-repeat;background-position:center;backface-visibility:visible}
.coin .cf{position:absolute;inset:0;background-size:contain;background-repeat:no-repeat;background-position:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
.coin .cf::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;
  background:linear-gradient(var(--shine-a,120deg),rgba(255,255,255,0) 32%,rgba(255,255,255,.75) 48%,rgba(255,255,255,0) 62%)}
.coinshadow{width:min(220px,52vw);height:18px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.7),transparent);transform:scale(var(--ss,1));opacity:var(--so,1)}
.result{min-height:28px;font-family:var(--f-kr);font-weight:900;font-size:20px;text-align:center}
.coinrow{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.coinrow .btn{background:#22263a;color:#fff;border-color:#3a3f58}
.coinrow .btn.primary{background:#fff;color:#12141c;border-color:#fff}

/* ===== 카드팩 ===== */
.packview{display:flex;flex-direction:column;align-items:center;gap:18px;width:100%}
.pack{width:min(260px,62vw);aspect-ratio:5/8;border-radius:12px;position:relative;cursor:pointer;border:0;padding:0;color:#fff;font:inherit;overflow:hidden;
  background:linear-gradient(160deg,#323856,#151826 70%);box-shadow:0 30px 60px -20px rgba(0,0,0,.85)}
.pack::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,0) 0 18px,rgba(255,255,255,.06) 18px 22px)}
.pack::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.25) 45%,transparent 60%);background-size:250% 100%;animation:packshine 3.5s ease-in-out infinite}
@keyframes packshine{0%{background-position:120% 0}60%,100%{background-position:-120% 0}}
.pack .pk{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:18px;z-index:1}
.pack .pk b{font-family:var(--f-display);font-weight:900;font-size:21px;letter-spacing:.12em;line-height:1.25}
.pack .pk small{color:#c2c7da;font-size:12px}
.pack .plogos{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.pack .plogos img{width:34px;height:34px;object-fit:contain;background:#fff;border-radius:50%;padding:3px}
.pack .tear{position:absolute;left:0;right:0;top:11%;border-top:2px dashed rgba(255,255,255,.45);z-index:1}
.pack.open{animation:packout .6s forwards}
@keyframes packout{to{transform:translateY(-40px) scale(.9);opacity:0}}
.fan{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:100%}
.fan .card{width:min(170px,42vw)}
.fan .card.flipped{transform:rotateY(180deg)}
.deal{animation:deal .5s backwards}
@keyframes deal{from{transform:translateY(60px) scale(.6);opacity:0}}
.ideas{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-top:12px}
.ideas h2{margin:0 0 6px;font-size:13px}
.ideas ul{margin:0;padding-left:18px;line-height:1.7;color:var(--muted)}
.ideas li b{color:var(--ink)}

.sitebar{display:flex;gap:16px;align-items:center;padding:10px 16px;font-size:14px;border-bottom:1px solid var(--line);background:var(--panel)}
.sitebar a{color:var(--ink);text-decoration:none;font-weight:600}
.sitebar a:first-child{margin-right:auto}
.btn.go{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);text-decoration:none;display:inline-flex;align-items:center}
/* 모바일 카드팩 2열 */
@media (max-width:760px){.fan .card{width:min(170px,calc((100vw - 96px)/2))}}
.dept-box{position:relative;display:inline-flex}
.dept-box input[type=text]{width:100%}
#deptList{position:absolute;top:calc(100% + 4px);left:0;z-index:50;width:min(280px,calc(100vw - 48px));max-height:280px;overflow:auto;margin:0;padding:4px;list-style:none;background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:0 10px 26px rgba(0,0,0,.22)}
#deptList[hidden]{display:none}
#deptList li{padding:8px 9px;border-radius:6px;font-size:13px;line-height:1.35;cursor:pointer}
#deptList li:hover,#deptList li[aria-selected=true]{background:var(--chip)}
#deptList .dept-own{color:var(--accent);font-weight:700}
.card .k-dept{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .k-sym{display:inline-block;width:1em;height:1em;margin-right:.25em;vertical-align:-.12em;background:currentColor;-webkit-mask:var(--sym) center/contain no-repeat;mask:var(--sym) center/contain no-repeat}
/* 긴 슬로건 */
.card .motto.m-lg{font-size:3cqw}
.card .motto.m-xl{font-size:2.6cqw}
/* 시크릿 골드 글자 가독성: 금 효과를 절반으로 낮추고, 글자가 모인 아래쪽은 더 약하게 */
.card.sf-gold .foil{opacity:.42;-webkit-mask-image:linear-gradient(180deg,#000 0 50%,rgba(0,0,0,.3) 64%,rgba(0,0,0,.2) 100%);mask-image:linear-gradient(180deg,#000 0 50%,rgba(0,0,0,.3) 64%,rgba(0,0,0,.2) 100%)}
.card.sf-gold .sparkle{opacity:calc(.3 + var(--o)*.2);-webkit-mask-image:linear-gradient(180deg,#000 0 50%,rgba(0,0,0,.25) 62%,rgba(0,0,0,.12) 100%);mask-image:linear-gradient(180deg,#000 0 50%,rgba(0,0,0,.25) 62%,rgba(0,0,0,.12) 100%)}
.card.sf-gold .glare{opacity:calc(.18 + var(--o)*.32)}
.card.sf-gold .hdr,.card.sf-gold .ttl,.card.sf-gold .stats,.card.sf-gold .xp,.card.sf-gold .motto,.card.sf-gold .foot{text-shadow:0 1px 2px rgba(0,0,0,.8),0 0 6px rgba(0,0,0,.45)}
.card.sf-gold .hdr .lv b,.card.sf-gold .ttl .est{text-shadow:none}
.card.sf-gold .stats div{background:rgba(0,0,0,.42)}
/* 손가락 화면: 누름 범위 44px. 겉모습은 그대로, 입력칸만 실제로 키운다. */
@media (pointer:coarse),(hover:none),(max-width:1024px){
  select,input[type=text]{min-height:44px}
  select{height:44px}
  .tabs button,.seg button,.btn,.sitebar a,#targets button{position:relative}
  .tabs button::after,.seg button::after,.btn::after,.sitebar a::after,#targets button::after{content:"";position:absolute;top:50%;left:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
}

/* 배경화면 입구와 저장 단추는 눈에 띄게 */
.wall-cta{display:block;text-align:center;text-decoration:none;box-sizing:border-box;width:100%;max-width:520px;margin:10px auto;padding:13px 16px;font-size:15px;min-height:48px}

/* ===== 69 (Ez 11-06) ===== */
/* 3. 카드 글씨를 시원하게, 로고는 알맞게 */
.card .hdr{font-size:3.4cqw}
.card .ttl .nm{font-size:9.4cqw;white-space:nowrap;overflow:hidden;min-width:0;flex:1}
.card .ttl .est{font-size:3.1cqw}
.card .lv b{font-size:3.6cqw}
.card .stats small{font-size:3.1cqw}
.card .stats b{font-size:4.6cqw}
.card .xp{font-size:3.2cqw}
.card .motto{font-size:4.4cqw}.card .motto.m-lg{font-size:3.8cqw}.card .motto.m-xl{font-size:3.3cqw}
.card .sign{font-size:4.6cqw}.card .sign::before{font-size:2.6cqw}
.card .serial{font-size:3.1cqw}.card .serial b{font-size:3.6cqw}
.card .ribbon{font-size:3.2cqw}
.card .emb i{inset:16% 24%}
.card .art img{width:50%;max-height:66%}
/* 4. 카드 뒷면을 등급마다 다르게: 수능=골드 햇살, 평가원=홀로그램 무늬, 학력평가=무광 종이 */
.card.exam.gold .back .bb{background:repeating-conic-gradient(from 0deg at 50% 46%,#fff3c4 0 4deg,#c99a36 4deg 9deg),radial-gradient(circle at 50% 46%,#fff8dc,#d9a93a 60%,#6b4a0e);background-blend-mode:multiply;box-shadow:inset 0 0 0 2px rgba(255,236,170,.9),inset 0 0 40px rgba(90,60,0,.55)}
.card.exam.gold .back .seal{background:radial-gradient(circle,#fffdf3 0 58%,#e8c66a 59% 66%,rgba(0,0,0,0) 67%);box-shadow:0 0 0 1.4cqw #d9a93a,0 0 0 2.4cqw #fff1b8,0 12px 30px rgba(70,45,0,.55)}
.card.exam.gold .back .bt{color:#fff6d2;text-shadow:0 2px 0 #7a5410,0 4px 12px rgba(0,0,0,.5)}
.card.exam.holo .back .bb{background:linear-gradient(135deg,rgba(255,255,255,.35),rgba(255,255,255,0) 40%),repeating-linear-gradient(115deg,#ff9ab0 0 6%,#ffe39a 6% 12%,#a0ffb0 12% 18%,#9ae8ff 18% 24%,#c6a0ff 24% 30%) var(--pos) 0/300% 100%;box-shadow:inset 0 0 0 2px rgba(255,255,255,.75)}
.card.exam.holo .back .bb::after{background:repeating-radial-gradient(circle at 50% 46%,rgba(255,255,255,.55) 0 2px,transparent 2px 9px);mix-blend-mode:overlay;opacity:.6}
.card.exam.holo .back .seal{background:radial-gradient(circle,#fff 0 58%,#dfe6f5 59% 66%,rgba(255,255,255,0) 67%);box-shadow:0 0 0 1.4cqw rgba(255,255,255,.7),0 10px 26px rgba(40,20,90,.45)}
.card.exam.holo .back .bt{color:#1d1440;text-shadow:0 1px 0 rgba(255,255,255,.8)}
.card.exam.matte .back .bb{filter:none;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.18),transparent 55%),linear-gradient(160deg,var(--c1),var(--c3));box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28)}
.card.exam.matte .back .bb::before{border-style:dashed;border-color:rgba(255,255,255,.35)}
.card.exam.matte .back .seal{background:radial-gradient(circle,#f3efe6 0 60%,rgba(255,255,255,.0) 61%);box-shadow:inset 0 3px 6px rgba(0,0,0,.25),0 1px 0 rgba(255,255,255,.3)}
.card.exam.matte .back .seal img{filter:grayscale(.25) contrast(.95)}
.card.exam.matte .back .bt{font-family:var(--f-kr);letter-spacing:.12em;opacity:.9}
/* 5. 목표대학 고르기 단추와 창 */
.uni-field{display:inline-flex;align-items:center;gap:8px}
.uni-lab{font-size:12.5px;color:var(--muted)}
.uni-current{display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:0 14px;font-size:14px}
.targets-box{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.tchip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--line);border-radius:999px;font-size:12.5px}
.tchip img{width:18px;height:18px;object-fit:contain;background:#fff;border-radius:50%}
#targets{display:flex;flex-wrap:wrap;gap:6px}
#uniList{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px;overflow-y:auto}
#uniList .uni{display:flex;align-items:center;gap:8px;min-height:44px;padding:6px 10px;border:1px solid var(--line);border-radius:10px;background:var(--chip);color:var(--ink);font:inherit;font-size:13px;cursor:pointer;text-align:left}
#uniList .uni img{width:24px;height:24px;object-fit:contain;background:#fff;border-radius:50%;flex:none}
#uniList .uni[aria-pressed="true"]{background:#f2f2f2;color:#111;border-color:#f2f2f2}
#uniFind{min-height:44px}
.uni-sheet[hidden]{display:none}
.uni-lab{white-space:nowrap}

/* 79: 색이 여럿인 로고의 어두운 무늬를 은박 위에 눌러 보이게(각인에서만). 원래 색 모드에서는 숨긴다 */
.card .emb .dk{-webkit-mask:var(--ld) center/contain no-repeat;mask:var(--ld) center/contain no-repeat;background:rgba(18,22,26,.72);transform:translate(calc(var(--tx)*var(--dx)*var(--lift)),calc(var(--ty)*var(--dy)*var(--lift)))}
.card.colorlogo .emb .dk{display:none}
/* 카드가 주인공: 무대를 첫 화면에, 조작은 아래 박스로 */
header{margin-bottom:6px}
header h1{font-size:18px}
.tabs{margin-bottom:8px}
.stage{min-height:min(600px,calc(100dvh - 176px))}
#cardHolder .card{width:min(340px,78vw,calc((100dvh - 216px)*.716))}
.card-status{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 10px;margin:8px 0 0;font-size:12px;color:var(--muted)}
.card-status[hidden]{display:none}
.card-status .btn{min-height:28px;padding:0 10px;font-size:12px}
.card-status .stat{font-size:12px}
.wall-cta{margin:8px auto}
details.deco{display:block;margin:8px 0 0;padding:0;border-radius:14px;gap:0}
details.deco>summary{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 14px;cursor:pointer;list-style:none;font-size:13px}
details.deco>summary::-webkit-details-marker{display:none}
details.deco>summary::after{content:"펼치기";margin-left:auto;flex:none;font-size:12px;color:var(--muted)}
details.deco[open]>summary::after{content:"접기"}
details.deco>summary b{flex:none}
details.deco>summary span{flex:0 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:12px;color:var(--muted)}
details.deco[open]{padding-bottom:12px}
details.deco>:not(summary){margin-left:14px;margin-right:14px}
details.deco .deco-note{margin-top:0;margin-bottom:8px}
details.deco .me-grid{gap:8px;margin-bottom:8px}
details.deco .crow{gap:4px 10px;margin-top:4px!important}
details.deco .crow>.lab{font-size:12px;min-width:56px}
details.deco .seg{gap:3px}
details.deco .seg button{min-height:28px;padding:0 9px;font-size:12px;border-radius:7px}
/* 한국어는 어절 단위로만 줄바꿈 (카드 글자 포함) */
html,body,.card,.card .motto{word-break:keep-all;overflow-wrap:break-word;line-break:strict}